Old school D3 from simpler times

All examples By author By category About

sampathweb

Full window Github gist

FiveThirtyEight - Police Killings

Built with blockbuilder.org

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.js"></script>
  <style>
    
  </style>
</head>

<body>
  <div id="chart"></div>
  <script>
    // Feel free to change or delete any of the code you see!
    var margin = {top: 20, right: 20, bottom: 50, left: 50},
        width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;

var svg = d3.select("#chart")
                .append("svg")
                .attr({
                  width: width + margin.left + margin.right,
                  height: height + margin.top + margin.bottom
                })
                .append("g")
                .attr("transform", "translate(" + [margin.left, margin.top] + ")");
    
    
    d3.csv("https://raw.githubusercontent.com/fivethirtyeight/data/master/police-killings/police_killings.csv", function(err, data) {
      if (err) throw err;
      console.log(data[0]);
      
      data = crossfilter(data);
      
      genderDim = data.dimension(function(d) {
        return d.gender;
      });
      genderGroup = genderDim.group();
      
      raceDim = data.dimension(function(d) {
        return d.raceethnicity;
      });
      raceGroup = raceDim.group();
      
      console.log(genderGroup.top(10));
      console.log(raceGroup.top(10));
    });
  </script>
</body>

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

https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.js