D3 Examples - Let's Make a Bubble Map Tutorial

xxxxxxxxxx
 
<!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>
    