D3 Examples - Bar Chart - NASCAR Las Vegas Average Finishes

Bar Chart - NASCAR Las Vegas Average Finishes

This simple bar chart is constructed from a TSV file. The chart employs conventional margins and a number of D3 features:

d3.tsv - load data
d3.nest - nest and parse data
d3.format - format percentages
d3.scale.ordinal - x-position encoding
d3.scale.linear - y-position encoding
d3.max - compute domains
d3.svg.axis - display axes
d3.transition - transitions

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
     
.bar {
  fill: steelblue;
}
​
.bar:hover {
  fill: brown;
}
    
.bar text.value {
  fill: white;
  font: 10px sans-serif;
}
​
.axis text {
  font: 10px sans-serif;
}
​
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
    
.x.axis path {
  display: none;
}
​
</style>
​
</head>
​
<body>
  <script>
    // set the margins
    var margin = { top: 30, right: 100, bottom: 160, left: 100 },
        width = 960 - margin.left - margin.right,
        height = 520 - margin.top - margin.bottom;
    
    // Set ranges of the scales
    var y = d3.scale.linear().range([height, 0]);
    var x = d3.scale.ordinal().rangeRoundBands([0, width], .1);
    
    var format = d3.format(",.0f");
    
    // create and draw the y & x axis
    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left")
        .tickSize(0)
        .tickPadding(10)
        .ticks(6);
    
    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom");
    
    var svg = d3.select("body")
        .append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .attr("class", "chart")
        .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    
    d3.csv("vegas_finishes.csv", function(error, data) {
      
      // create data nests of games
      var nested = d3.nest()
        .key(function(d) { return d.driver; })
        .rollup(function(v) { return d3.mean(v, function(d) { return d.finish; }); })
        .entries(data);
      
      // Scale the range of the data
      x.domain(nested.map(function(d) { return d.key; }));
      y.domain([0, d3.max(nested, function(d) { return d.values; })]);
      
      
      var bar = svg.selectAll(".bar")
        .data(nested)
        .enter()
            .append("g")
            .attr("class", "bar");
      
      bar.append("rect")
        .attr("x", function(d) { return x(d.key); })
        .attr("y", height)
        .attr("height", 0)
        .attr("width", x.rangeBand())
        .transition()
            .ease("quad-out")
            .duration(2000)
            .attr("y", function(d) { return y(d.values); })
            .attr("height", function(d) { return height - y(d.values); });
​
      bar.append("text")
        .attr("class", "value")
        .attr("x", function(d) { return x(d.key); })
        .attr("y", function(d) { return y(d.values); })
        .attr("dx", ".35em")
        .attr("dy", "1.35em")
        .attr("text-anchor", "center")
        .text(function(d) { return format(d.values); });
      
      svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis)
        .selectAll("text")
            .style("text-anchor", "end")
            .attr("dx", "-.8em")
            .attr("dy", "-.55em")
            .attr("transform", "rotate(-90)" );
      
      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("Avg Finish");
      
      });
    
  </script>
</body>
​
    