Old school D3 from simpler times

All examples By author By category About

ohdebby

Full window Github gist

Guns data

Built with blockbuilder.org

<!DOCTYPE html>
<meta charset="utf-8">

<style type="text/css">
  body {
    font-family: arial, sans;
    font-size: 14px;
    width: 960px;
    margin: 40px auto;
  }
  svg {
    border: 1px solid #ccc; 
  }
  .states {
    stroke:#fff;
    fill:none;
  }
  .counties {
    stroke: #fff;
    fill: green;
    stroke-width: .3px;
  }
  .county-bubble {
    fill-opacity: .4;
    fill:#990000;
    stroke:#fff;
    stroke-width: .3;
  }
</style>

<body>

</body>

<script src="https://d3js.org/d3.v4.js" charset="utf-8"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>

<script type="text/javascript">
  
var width = 960,
    height = 500;
var color = d3.scaleThreshold()
    .range(['#ffffe0','#ffd59b','#ffa474','#f47461','#db4551','#b81b34','#8b0000'])
    .domain([1,10,50,100,200, 500]);
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
d3.queue()
    .defer(d3.csv, "guns-history.csv")
    .defer(d3.json, "us.json")
    .await(ready);
function ready(error, guns, us) {
  if (error) return console.warn(error);
  console.log(us);
  console.log(topojson.feature(us, us.objects.counties).features);
  gunsByFips = {};
  guns.forEach(function(d) {
    d.guns = +d.count3;
    gunsByFips[d.FIPS] = +d.count3;
  });
  var path = d3.geoPath()
    .projection(d3.geoAlbersUsa());
  svg.append("g")
      .attr("class", "counties")
    .selectAll("path")
      .data(topojson.feature(us, us.objects.counties).features)
    .enter().append("path")
      .attr("d", path)
      .style("fill", function(d) { 
        return '#f0f0f0';
        var guns = gunsByFips[d.id];
        if (!guns) return "#f0f0f0";
        return color(gunsByFips[d.id]); });
  svg.append("g")
      .attr("class", "county-bubble-group")
    .selectAll(".county-bubble")
      .data(topojson.feature(us, us.objects.counties).features)
    .enter().append("circle")
      .attr("class", "county-bubble")
      .attr("d", path)
      .attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
      .attr("r", radius)
  svg.append("path")
      .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a.id !== b.id; }))
      .attr("class", "states")
      .attr("d", path);
  
  function radius(d) {
    return Math.sqrt(gunsByFips[d.id])/2;
  }
}
</script>

Modified http://d3js.org/d3.v4.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

https://d3js.org/d3.v4.js

https://d3js.org/topojson.v1.min.js