D3 Examples - Police Killings Visualization Project

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <style>
      .axis path,
      .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
      }
​
      #histogram.y.axis path {
        display: none
      }
​
      div {
        display: inline-block;
        height: 300px;
      }
​
      div#histogram {
        width: 300px;
      }
​
      div#chart {
        width: 500px;
      }
​
    </style>
  </head>
  <body>
    <div id="histogram"></div>
    <div id="chart"></div>
    <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="bar_chart.js" charset="utf-8"></script>
    <script src="histogram.js" charset="utf-8"></script>
    <script>
      d3.csv("police_killings.csv", function (error, data) {
        if (error) throw error;
​
        var chart = barChart()
          .margin({ left:250 })
          .width(500)
          .height(300)
          .key("armed");
​
        var histo = histogram()
          .margin({ left: 30 })
          .width(300)
          .height(300)
          .bins(d3.range(15, 95, 10))
          .value("age");
​
        createChart("#chart", data, chart);
        createChart("#histogram", data, histo);
​
        function createChart(el, data, func) {
          d3.select(el)
            .datum(data)
            .call(func);
        }
​
        function getUniqueList (data, value, isNumeric) {
          return data.map(function (item) {
           return isNumeric ? +item[value] : item[value];
          })
          .filter(function (item, index, array) {
            return array.indexOf(item) == index;
          })
          .sort(function (a, b) { return a - b; });
        }
      })
    </script>
  </body>
</html>
​
    