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

forked from mbostock's block: Bar Chart

forked from rmews's block: Bar Chart - NASCAR Las Vegas Average Finishes

<!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>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js