stormpython · November 15, 2023 02:52
diff --git a/index.html b/index.html
 <!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>
diff --git a/police_killings.csv b/police_killings.csv
diff --git a/us.json b/us.json
	<!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>