Home > Articles > Open Source > Ajax & JavaScript

  • Print
  • + Share This
This chapter is from the book

Finishing the Rest of the Chart

As an exercise, you should try finishing the rest of the bar chart on your own using data-joins. I’ll include the code here in Listing 5.2 in case you get stuck, but give it a shot on your own:

Listing 5.2 Building the rest of the chart using a data-join

var barLabelGroup = svg.append("g")
       .attr("transform", translateText)
       .attr("class","bar-label");
barLabelGroup.selectAll("text")
       .data(barLabels)
  .enter().append("text")
       .attr("x",-10)
       .attr("y", function(d,i) {return i * barSpacing + barHeight*(2/3)})
       .text(function(d) {return d});
var axisTickGroup = svg.append("g")
       .attr("transform", translateText)
       .attr("stroke", "black");
axisTickGroup.selectAll("line")
       .data(axisData)
  .enter().append("line")
       .attr("x1", function(d) {return d*scaleFactor})
       .attr("x2", function(d) {return d*scaleFactor})
       .attr("y1", 0)
       .attr("y2", -tickHeight);

var axisLabelGroup = svg.append("g")
       .attr("transform", translateText)
       .attr("class", "axis-label");

axisLabelGroup.selectAll("text")
       .data(axisData)
  .enter().append("text") 
  .attr("x", function(d) {return d * scaleFactor})
  .attr("y", -tickHeight - tickGap)
  .text(function(d) {return d + "%"});
  • + Share This
  • 🔖 Save To Your Account