Let's Make a Bubble Map Tutorial

Data Source: American Community Survey, 2015 5-year estimate.

Followed MBostock's Let's Make a Bubble Map tutorial

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

.land {
    fill: #ddd;
  }

.border {
    fill: none;
    stroke: #fff;
    stroke-linejoin: round;
    stroke-linecap: round;
  }

.bubble {
    fill: green;
    fill-opacity: .5;
    stroke: #fff;
    stroke-width: .5px;
  }

.bubble :hover {
    stroke: #000;
  }

.legend circle {
    fill: none;
    stroke: #ccc;
  }

.legend text {
    fill: #777;
    font: 10px sans-serif;
    text-anchor: middle;
  }

</style>
<body>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>
const width = 960,
  height = 600;

const path = d3.geo.path().projection(null);

const radius = d3.scale.sqrt().domain([0, 1e6]).range([0, 15]);

const svg = d3
  .select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

const legend = svg
  .append("g")
  .attr("class", "legend")
  .attr("transform", "translate(" + (width - 50) + "," + (height - 20) + ")")
  .selectAll("g")
  .data([1e6, 3e6, 6e6])
  .enter()
  .append("g");

legend
  .append("circle")
  .attr("cy", function(d) {
    return -radius(d);
  })
  .attr("r", radius);

legend
  .append("text")
  .attr("y", function(d) {
    return -2 * radius(d);
  })
  .attr("dy", "1.3em")
  .text(d3.format(".1s"));

d3.json("us.json", function(error, us) {
  if (error) throw error;

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(topojson.feature(us, us.objects.counties).features)
    .enter()
    .append("circle")
    .attr("transform", function(d) {
      return "translate(" + path.centroid(d) + ")";
    })
    .attr("r", function(d) {
      return radius(d.properties.population);
    });
});
</script>

https://d3js.org/d3.v3.min.js

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