O'Reilly logo

Expert Data Visualization by Jos Dirksen

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Adding the bar chart and baby name

In the previous section, we added the g elements and assigned those to the bars variable. In this section, we're going to calculate the width of the individual rectangles and add those and some text to the g:

var yScale = d3.scaleLinear()     .domain([0, d3.max(both, function (d) { return d.amount; })])     .range([0, width]);  bars.append('rect')     .attr("height", barWidth)     .attr("width", function (d) { return yScale(d.amount); })     .attr("class", function (d) { return d.sex === 'F' ? 'female' : 'male'; });  bars.append("text")     .attr("x", function (d) { return yScale(d.amount) - 5 ; })     .attr("y", barWidth / 2)     .attr("dy", ".35em")     .text(function(d) { return d.name; });

Here we see something new: the d3.scaleLinear ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required