D3 Examples - Police Killings Visualization Project Map

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <meta charset="utf-8">
  <style>
    path {
      fill: none;
      stroke: #000000;
      stroke-linejoin: round;
      stroke-linecap: round;
    }
​
    .land {
      fill: #dddddd;
    }
​
    .border {
      fill: none;
      stroke: #ffffff;
      stroke-linejoin: round;
      stroke-linecap: round;
    }
​
    .bubble :hover {
      stroke: #000;
    }
​
    .bubble {
      fill: brown;
      fill-opacity: .5;
      stroke: #fff;
      stroke-width: .5px;
    }
  </style>
  <body>
    <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="//d3js.org/topojson.v1.min.js"></script>
    <script>
      var width = 960,
        height = 600;
      var path = d3.geo.path()
        .projection(null);
      var projection = d3.geo.albersUsa()
        .scale(1280)
            .translate([width / 2, height / 2]);
      var svg = d3.select("body").append("svg")
         .attr("width", width)
         .attr("height", height);
      var radius = d3.scale.sqrt().range([0, 15]);
      var cities = {};
​
      d3.json("us.json", function(error, us) {
        if (error) return console.error(error);
​
        d3.csv("police_killings.csv", function (error, data) {
          if (error) return console.log(error);
​
          data.forEach(function (d) {
            if (!cities[d.city]) {
              cities[d.city] = {
                count: 0,
                victims: []
              };
            }
            cities[d.city].victims.push(d);
            cities[d.city].count += 1;
          });
​
          var maxVictims = d3.max(d3.entries(cities).map(function (d) {
            return d.value.count;
          }));
​
          radius.domain([0, maxVictims]);
​
          svg.append("path")
            .datum(topojson.feature(us, us.objects.nation))
            .attr("class", "land")
            .attr("d", path);
​
          svg.append("path")
            .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
            .attr("class", "border border--state")
            .attr("d", path);
​
            svg.append("g")
              .attr("class", "bubble")
              .selectAll("circle")
              .data(d3.entries(cities).sort(function (a, b) {
                return b.value.count - a.value.count;
              }))
              .enter().append("circle")
              .attr("transform", function(d) {
                var lon = +d.value.victims[0].longitude;
                var lat = +d.value.victims[0].latitude;
                return "translate(" + projection([lon, lat]) + ")";
               })
              .attr("r", function(d) {
                return radius(d.value.count);
              })
              .append("title")
              .text(function (d) {
                return "City: " + d.key + "\nVictims: " + d.value.count;
              });
        });
      });
      d3.select(self.frameElement).style("height", height + "px");
    </script>
  </body>
</html>
​
    