Crimes by district

forked from curran's block: Towards Reusable Charts Example

forked from curran's block: Small Multiples with Reusable Charts

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Reusable Chart Example</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="time-series-chart.js"></script>
    <style>
      .axis text {
        font: 10px sans-serif;
      }
      .axis path,
      .axis line {
        fill: none;
        stroke: #000000;
        shape-rendering: crispEdges;
      }
      .line {
        fill: none;
        stroke: #707070;
      }
      .area {
        fill: #c6c6c6;
      }
    </style>
  </head>
  <body>
    <p id="example">
    <script>
      
      var parseDate = d3.timeParse("%Y");

//Use a global extent (so GOOG's axis is aligned with the others).
        ///chart.xExtent(d3.extent(data, chart.x()));

//var symbols = d3.nest()
          // .key(function(d) { return d.symbol; })
          // .entries(data);
        
       const district = d3.nest()
        		.key(function(d) { return d.department_name})
        		.entries(data1);
        
        d3.select("body")
          .selectAll(".chart")
          	.data(district)
          .enter()
           .append("div")
          	.attr("class", "chart")
        	.call(chart1);
        	
      });
  ////////////////////////////////////////////////////////////////////    
      
      var chart1 = timeSeriesChart()
          .x(function(d) { return parseDate(d.date); })
          .y(function(d) { return +d.violent_per_100k; })
      		.width(950)
      		.height(60)
      		.values(function (d){ return +d.values; })
      		.title(function (d){ return d.key; })
      		.margin({top: 20, right: 30, bottom: 20, left: 134});
      
      d3.csv("CrimesTransformed.csv", function(error, data1) {
        if (error) throw error;

// Use a global extent (so GOOG's axis is aligned with the others).
        chart.xExtent(d3.extent(data1, chart1.x()));

const district = d3.nest()
        		.key(function(d) { return d.department_name})
        		.entries(data1);
        
       d3.select("body")
          .selectAll(".chart")
          	.data(district)
          .enter()
            .append("div")
          	.attr("class", "chart")
        	.call(chart);
        	
      });

</script>
  </body>
</html>

https://d3js.org/d3.v4.min.js