Change the colours of the bars at mouseout in svg-tooltip.html - javascript

My question is based on a little modification in the code shown below. I code in Python, and HTML/CSS are new to me. I have the following code.
In the code below , modify the code such that on mouse out the values of the bars remain there, but they are white in color.
How can I accomplish the same. Many thanks. I am learning this.
//Width and height
var w = 600;
var h = 250;
var dataset = [5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
11, 12, 15, 20, 18, 17, 16, 18, 23, 25
];
var xScale = d3.scaleBand()
.domain(d3.range(dataset.length))
.rangeRound([0, w])
.paddingInner(0.05);
var yScale = d3.scaleLinear()
.domain([0, d3.max(dataset)])
.range([0, h]);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//Create bars
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", (d, i) => xScale(i))
.attr("y", d => h - yScale(d))
.attr("width", xScale.bandwidth())
.attr("height", d => yScale(d))
.attr("fill", d => "rgb(100, 0, " + (d * 10) + ")")
.on("mouseover", function(d) {
//Get this bar's x/y values, then augment for the tooltip
var xPosition = parseFloat(d3.select(this).attr("x")) + xScale.bandwidth() / 2;
var yPosition = parseFloat(d3.select(this).attr("y")) + 14;
//Create the tooltip label
svg.append("text")
.attr("id", "tooltip")
.attr("x", xPosition)
.attr("y", yPosition)
.attr("text-anchor", "middle")
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("font-weight", "bold")
.attr("fill", "black")
.text(d);
})
.on("mouseout", () => d3.select("#tooltip").remove());
//Remove the tooltip
rect:hover {
fill: orange;
}
<script src="//d3js.org/d3.v5.min.js" charset="utf-8"></script>

Related

How to make a clickable transition bar graph in d3 v4?

How to make a clickable transition bar graph in d3 v4?
Current code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3: A bar chart that transitions to new data!</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
<style type="text/css">
/* No style rules here yet */
</style>
</head>
<body>
<p>Click on this text to update the chart with new data values (once).</p>
<script type="text/javascript">
//Width and height
var w = 600;
var h = 250;
var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
var xScale = d3.scaleBand()
.rangeRound([0, w])
.padding(0.05);
var yScale = d3.scaleLinear()
.domain([0, d3.max(dataset)])
.range([0, h]);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//Create bars
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i) {
return xScale(i);
})
.attr("y", function(d) {
return h - yScale(d);
})
.attr("width", xScale.bandwidth())
.attr("height", function(d) {
return yScale(d);
})
.attr("fill", function(d) {
return "rgb(0, 0, " + (d * 10) + ")";
});
//Create labels
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) {
return d;
})
.attr("text-anchor", "middle")
.attr("x", function(d, i) {
return xScale(i) + xScale.bandwidth() / 2;
})
.attr("y", function(d) {
return h - yScale(d) + 14;
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "white");
//On click, update with new data
d3.select("p")
.on("click", function() {
//New values for dataset
dataset = [ 11, 12, 15, 20, 18, 17, 16, 18, 23, 25,
5, 10, 13, 19, 21, 25, 22, 18, 15, 13 ];
//Update all rects
svg.selectAll("rect")
.data(dataset)
.transition() // <-- This makes it a smooth transition!
.attr("y", function(d) {
return h - yScale(d);
})
.attr("height", function(d) {
return yScale(d);
})
.attr("fill", function(d) {
return "rgb(0, 0, " + (d * 10) + ")";
});
//Update all labels
svg.selectAll("text")
.data(dataset)
.text(function(d) {
return d;
})
.attr("x", function(d, i) {
return xScale(i) + xScale.band() / 2;
})
.attr("y", function(d) {
return h - yScale(d) + 14;
});
});
</script>
</body>
</html>
Code above from:
https://github.com/alignedleft/d3-book/blob/master/chapter_09/05_transition.html
http://examples.oreilly.com/0636920026938/chapter_09/05_transition.html
I am getting errors after switching the code to v4. I fixed the errors I knew about but now I am getting these one errors in the JavaScript console:
Error: attribute x: Expected length, "NaN".

You are not setting the domain of the x scale:
var xScale = d3.scaleBand()
.domain(d3.range(dataset.lengh))
.rangeRound([0, w])
.padding(0.1);
Also, pay attention to xScale.band(), which doesn't exist: it should be xScale.bandwidth() instead.
Here is a working code, with the domain:
var w = 600;
var h = 250;
var dataset = [5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
11, 12, 15, 20, 18, 17, 16, 18, 23, 25
];
var xScale = d3.scaleBand()
.domain(d3.range(dataset.length))
.rangeRound([0, w])
.padding(0.1);
var yScale = d3.scaleLinear()
.domain([0, d3.max(dataset)])
.range([0, h]);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//Create bars
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i) {
return xScale(i);
})
.attr("y", function(d) {
return h - yScale(d);
})
.attr("width", xScale.bandwidth())
.attr("height", function(d) {
return yScale(d);
})
.attr("fill", function(d) {
return "rgb(0, 0, " + (d * 10) + ")";
});
//Create labels
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) {
return d;
})
.attr("text-anchor", "middle")
.attr("x", function(d, i) {
return xScale(i) + xScale.bandwidth() / 2;
})
.attr("y", function(d) {
return h - yScale(d) + 14;
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "white");
//On click, update with new data
d3.select("p")
.on("click", function() {
//New values for dataset
dataset = [11, 12, 15, 20, 18, 17, 16, 18, 23, 25,
5, 10, 13, 19, 21, 25, 22, 18, 15, 13
];
//Update all rects
svg.selectAll("rect")
.data(dataset)
.transition() // <-- This makes it a smooth transition!
.attr("y", function(d) {
return h - yScale(d);
})
.attr("height", function(d) {
return yScale(d);
})
.attr("fill", function(d) {
return "rgb(0, 0, " + (d * 10) + ")";
});
//Update all labels
svg.selectAll("text")
.data(dataset)
.text(function(d) {
return d;
})
.attr("y", function(d) {
return h - yScale(d) + 14;
});
});
<script src="https://d3js.org/d3.v4.min.js"></script>
<p>Click on this text to update the chart with new data values (once).</p>

why no gaps between bars D3 js

I am learning d3 js. I found a great book about the library. But I needed to translate the code examples from version 3 to 4.
Here is my code on version 4
<body>
<script type="text/javascript">
var width = 800;
var height = 500;
var dataset = [];
dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
var xScale = d3.scaleBand()
.domain(d3.range(dataset.length))
.rangeRound([0, width], 0.5);
var yScale = d3.scaleLinear()
.domain([0, d3.max(dataset)])
.range([0, height]);
var svg = d3.select("body")
.append("svg")
.attr("width",width)
.attr("height",height);
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i){return xScale(i);})
.attr("y", function(d){return height- yScale(d);})
.attr("width", xScale.bandwidth())
.attr("height", function(d){return yScale(d);})
.attr("fill", function(d){return "rgb(0,0,"+d*10+")";});
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d){return d;})
.attr("text-anchor", "middle")
.attr("x", function(d, i){return xScale(i) + xScale.bandwidth() / 2;})
.attr("y", function(d){return height - yScale(d) + 14;})
.attr("fill", "white");
</script>
</body>
Here is the outcome
As I understand, this
.rangeRound([0, width], 0.5);
should bring some gaps between the bars. But, I don’t' know why - there are no gaps!
What am I doing wrong?

I believe the new pattern in d3 v4 would be -
var xScale = d3.scaleBand()
.domain(d3.range(dataset.length))
.rangeRound([0, width])
.paddingInner(0.05);

How to create vertically grouped bar chart in d3.js using json data?

In a web application I was supposed to create a vertically grouped bar chart using d3.js using json data. Previously I create a horizontal grouped bar using the following code. Can anyone help me out? Thanks in advance.
var data = {
labels: [
'resilience', 'maintainability', 'accessibility',
'uptime', 'functionality', 'impact'
],
series: [
{
label: '2012',
values: [4, 8, 15, 16, 23, 42]
},
{
label: '2013',
values: [12, 43, 22, 11, 73, 25]
},
{
label: '2014',
values: [31, 28, 14, 8, 15, 21]
},]
};
var chartWidth = 300,
barHeight = 20,
groupHeight = barHeight * data.series.length,
gapBetweenGroups = 10,
spaceForLabels = 150,
spaceForLegend = 150;
// Zip the series data together (first values, second values, etc.)
var zippedData = [];
for (var i=0; i<data.labels.length; i++) {
for (var j=0; j<data.series.length; j++) {
zippedData.push(data.series[j].values[i]);
}
}
// Color scale
var color = d3.scale.category20();
var chartHeight = barHeight * zippedData.length + gapBetweenGroups * data.labels.length;
var x = d3.scale.linear()
.domain([0, d3.max(zippedData)])
.range([0, chartWidth]);
var y = d3.scale.linear()
.range([chartHeight + gapBetweenGroups, 0]);
var yAxis = d3.svg.axis()
.scale(y)
.tickFormat('')
.tickSize(0)
.orient("left");
// Specify the chart area and dimensions
var chart = d3.select(".chart")
.attr("width", spaceForLabels + chartWidth + spaceForLegend)
.attr("height", chartHeight);
// Create bars
var bar = chart.selectAll("g")
.data(zippedData)
.enter().append("g")
.attr("transform", function(d, i) {
return "translate(" + spaceForLabels + "," + (i * barHeight + gapBetweenGroups * (0.5 + Math.floor(i/data.series.length))) + ")";
});
// Create rectangles of the correct width
bar.append("rect")
.attr("fill", function(d,i) { return color(i % data.series.length); })
.attr("class", "bar")
.attr("width", x)
.attr("height", barHeight - 1);
// Add text label in bar
bar.append("text")
.attr("x", function(d) { return x(d) - 3; })
.attr("y", barHeight / 2)
.attr("fill", "red")
.attr("dy", ".35em")
.text(function(d) { return d; });
// Draw labels
bar.append("text")
.attr("class", "label")
.attr("x", function(d) { return - 10; })
.attr("y", groupHeight / 2)
.attr("dy", ".35em")
.text(function(d,i) {
if (i % data.series.length === 0)
return data.labels[Math.floor(i/data.series.length)];
else
return ""});
chart.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + spaceForLabels + ", " + -gapBetweenGroups/2 + ")")
.call(yAxis);
// Draw legend
var legendRectSize = 18,
legendSpacing = 4;
var legend = chart.selectAll('.legend')
.data(data.series)
.enter()
.append('g')
.attr('transform', function (d, i) {
var height = legendRectSize + legendSpacing;
var offset = -gapBetweenGroups/2;
var horz = spaceForLabels + chartWidth + 40 - legendRectSize;
var vert = i * height - offset;
return 'translate(' + horz + ',' + vert + ')';
});
legend.append('rect')
.attr('width', legendRectSize)
.attr('height', legendRectSize)
.style('fill', function (d, i) { return color(i); })
.style('stroke', function (d, i) { return color(i); });
legend.append('text')
.attr('class', 'legend')
.attr('x', legendRectSize + legendSpacing)
.attr('y', legendRectSize - legendSpacing)
.text(function (d) { return d.label; });

After continuous digging I found the correct way of doing this. Thanks to Mike Bostock for the example he provided in here. In here you can also find out the elaborate discussion of that example. Thanks for your support :)
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x0 = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var x1 = d3.scale.ordinal();
var y = d3.scale.linear()
.range([height, 0]);
var color = d3.scale.ordinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
var xAxis = d3.svg.axis()
.scale(x0)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat(d3.format(".2s"));
//console.log(margin.left);
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
/*Our json object is [{letter: "A", frequency: .08167,depth:.32},{letter: "B", frequency: .01492,depth:.69}]
To use csv file you just need to follow the link I provided
*/
var data = [
{letter: "A", frequency: .08167,depth:.32},
{letter: "B", frequency: .01492,depth:.69}
];
var groupNames=d3.keys(data[0]).filter(function(key){return key!="letter";})
data.forEach(function(d){
d.groups=groupNames.map(function(name){return {name:name,value:+d[name]};})
});
x0.domain(data.map(function(d){return d.letter;}));
x1.domain(groupNames).rangeRoundBands([0, x0.rangeBand()]);
y.domain([0,d3.max(data,function(d){
return d3.max(d.groups,function(d){
return d.value;
});
})]);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Letter Fun");
var state = svg.selectAll(".state")
.data(data)
.enter().append("g")
.attr("class", "g")
.attr("transform", function(d) { return "translate(" + x0(d.letter) + ",0)"; });
state.selectAll("rect")
.data(function(d) { return d.groups; })
.enter().append("rect")
.attr("width", x1.rangeBand())
.attr("x", function(d) { return x1(d.name); })
.attr("y", function(d) { return y(d.value); })
.attr("height", function(d) { return height - y(d.value); })
.style("fill", function(d) { return color(d.name); });
Please let me know if you have anything to know about the code.

How do i add a fixed text beside bar chart using D3

I am trying to add a text beside a Bar chart . it will be look like
two bar chart both of them will have a text in their right side. I tried in many ways but couldn't find or may i didn't understand because i am beginners in D3 . This is my first question in stackoverflow .
I wrote this
var w = 500;
var h = 100;
var barPadding = 5;
var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
//Create SVG element Men 2010
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i) {
return i * (w / dataset.length);
})
.attr("y", function(d) {
return h - (d * 4);}
)
.attr("width", w / dataset.length - barPadding)
.attr("height", function(d) {
return d*4; //Just the data value
})
.attr("fill", function(d) {
return "rgb(0, 0, " + (d * 10) + ")";
});
///for the fixed text
var svgContainertext = d3.select("body").append("svg")
.attr("width", 100)
.attr("height", 20);
svgContainertext.append("g")
.selectAll("text")
.append("text")
.text("2010")
.attr("x",20)
.attr("y",10)
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "black");
But the code is not showing the result. I am new to D3 .
Thanks in advance .

Your text is not showing because you ad the text after .selectAll("text"), which results in an empty selection, hence nowhere to add your text.
Furthermore, the text you are adding is in a new svg, and is not linked anyhow to your chart. I created a plunk to show how to put the text in the same svg: http://plnkr.co/edit/EHVB65sn7Oc67s7woKrj?p=preview
Updated code:
var w = 500;
var h = 100;
var barPadding = 5;
var textWidth = 30;
var dataset = [5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
11, 12, 15, 20, 18, 17, 16, 18, 23, 25
];
//Create SVG element Men 2010
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i) {
return i * ((w - textWidth) / dataset.length);
})
.attr("y", function(d) {
return h - (d * 4);
})
.attr("width", w / dataset.length - barPadding)
.attr("height", function(d) {
return d * 4; //Just the data value
})
.attr("fill", function(d) {
return "rgb(0, 0, " + (d * 10) + ")";
});
///for the fixed text
svg.append("g")
.append("text")
.text("2010")
.attr("x", w - textWidth)
.attr("y", h / 2)
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "black");
What I did is use the same svg to append the text (in a group). I also reduced the space available for the bar chart using a textWidth variable, allowing to view the text and position it properly.

Removing .selectAll("text") will show the text 2010. I made a JSFiddle to show this.
If you want to read about selections, I suggest you have a read of this article
basically it is not working because the .selectAll('text') returns an empty selection and after that you append a text node to nothing.
It works for the rects drawn earlier because the .data() method is used on that selection.
var svgContainertext = d3.select("body").append("svg")
.attr("width", 100)
.attr("height", 20);
svgContainertext.append("g")
.append("text")
.text("2010")
.attr("x",20)
.attr("y",10)
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "black");

D3 - loading xml data from file, using scales for barchart

I'm following this great tutorial on d3 here
http://chimera.labs.oreilly.com/books/1230000000345/ch09.html#_modernizing_the_bar_chart
which introduces a bar chart in this chapter using scales. Now I wanted to load my data from an xml file but of course my code doesn't work. I'm guessing that in creating xScale and yScale variables I don't get the length of the dataset
Here is the xml file
<data>
<value>5</value>
<value>10</value>
<value>53</value>
<value>19</value>
<value>61</value>
<value>25</value>
<value>22</value>
<value>18</value>
<value>15</value>
<value>13</value>
<value>11</value>
<value>12</value>
<value>15</value>
<value>20</value>
<value>18</value>
<value>17</value>
<value>16</value>
<value>18</value>
<value>23</value>
<value>25</value>
</data>
And the code itself
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vjezba - 9.poglavlje - barchart</title>
<script type="text/javascript" src="d3/d3.v3.js"></script>
<style type="text/css">
/* No style rules here yet */
</style>
</head>
<body>
<script type="text/javascript">
d3.xml("values.xml","application/xml", function(dataset) {
var w = 600;
var h = 250;
//var dataset = [ 5, 10, 53, 19, 61, 25, 22, 18, 15, 13,11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
//radi jednakog razmaka stupova
var xScale = d3.scale.ordinal()
.domain(d3.range(dataset.length))
.rangeRoundBands([0, w], 0.05);
var yScale = d3.scale.linear()
.domain([0, d3.max(dataset)])
.range([0, h]);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//Create bars
svg.selectAll("rect")
.data(dataset.documentElement.getElementsByTagName("value"))
.enter()
.append("rect")
.attr("x", function(d, i) {
return xScale(i);
})
.attr("y", function(d) {
return h - yScale(d);
})
.attr("width", xScale.rangeBand())
.attr("height", function(d) {
return yScale(d);
})
.attr("fill", function(d) {
return "rgb(0, 0, " + (d * 10) + ")";
});
});
/*
//Create labels
svg.selectAll("text")
.data(xml.documentElement.getElementsByTagName("value"))
.enter()
.append("text")
.text(function(d) {
return d;
})
.attr("text-anchor", "middle")
.attr("x", function(d, i) {
return xScale(i) + xScale.rangeBand() / 2;
})
.attr("y", function(d) {
return h - yScale(d) + 14;
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "white");
*/
</script>
</body>

Simple mistake. You need to use the "d.value" instead of "d". Your sample data is just an array of numbers, but your JSON data is an array of objects with a "value" attribute.
Try this to see your example:
http://jsfiddle.net/5edkw/1/
Since I need code to post jsfiddle links...here's a snippet of what you already know:
.attr("height", function(d) {
return yScale(d.value);
})
The "/0/" version is the original you posted to pastebin.

Categories