D3 Examples - Crimes by district

xxxxxxxxxx
 
<!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");
​
      var chart = 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: 40, bottom: 20, left: 250});
     
      d3.tsv("stocks.tsv", function(error, data1) {
       if (error) throw error;
​
        //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>
​
    