D3 Examples - Towards Reusable Charts Example

Towards Reusable Charts Example

This example is code written by Mike Bostock in 2012 as part of his tutorial Towards Reusable Charts. I put together this bl.ock so that the example code can be seen in its entirety in one page and studied. To get this working, I needed to include additional CSS for axes, taken from this log axis example.

Here are some learning resources related to this example:

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Reusable Chart Example</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script src="time-series-chart.js"></script>
    <style>
​
      .axis text {
        font: 10px sans-serif;
      }
​
      .axis path,
      .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
      }
​
      .line {
        fill: none;
        stroke: #000;
        stroke-width: 1.5px;
      }
​
      .area {
        fill: #969696;
      }
​
    </style>
  </head>
  <body>
    <p id="example">
    <script>
​
      var chart = timeSeriesChart()
          .x(function(d) { return formatDate.parse(d.date); })
          .y(function(d) { return +d.price; });
​
      var formatDate = d3.time.format("%b %Y");
    
      d3.csv("sp500.csv", function(data) {
        d3.select("#example")
            .datum(data)
            .call(chart);
      });
​
    </script>
  </body>
</html>
​
    