Ch. 7, Fig. 7 - D3.js in Action

This is the code for Chapter 7, Figure 7 from D3.js in Action which ties together several key d3.geo concepts such as drawing bounding boxes with d3.geo.bounds(), rendering points from CSV data, and extended projections from d3.geo.projection (not included in core D3).

<html>
<head>
  <title>D3 in Action Chapter 7 - Example 2</title>
  <meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://d3js.org/d3.geo.projection.v0.min.js" type="text/JavaScript"></script>
<script src="https://d3js.org/queue.v1.min.js" type="text/JavaScript"></script>
<script src="https://d3js.org/colorbrewer.v1.min.js" type="text/JavaScript"></script>
</head>
<style>
  svg {
    height: 500px;
    width: 500px;
    border: 1px solid gray;
  }
  
  .countries {
    fill: red;
    fill-opacity: .5;
    stroke: black;
    stroke-width: 1px;
  }

</style>
<body>

<div id="viz">
  <svg>
  </svg>
</div>
<div id="controls" />
</body>
  <footer>
    
<script>
    queue()
    .defer(d3.json, "world.geojson")
    .defer(d3.csv, "cities.csv")
    .await(function(error, file1, file2) { createMap(file1, file2); });
    
  function createMap(countries, cities) {
    width = 500;
    height = 500;
    projection = d3.geo.mollweide()
    .scale(120)
    .translate([width / 2, height / 2])
    .center([20,0])

geoPath = d3.geo.path().projection(projection);
    
    featureSize = d3.extent(countries.features, function(d) {return geoPath.area(d)});
    countryColor = d3.scale.quantize().domain(featureSize).range(colorbrewer.Reds[7]);

d3.select("svg").selectAll("path").data(countries.features)
    .enter()
    .append("path")
    .attr("d", geoPath)
    .style("fill", function(d) {return countryColor(geoPath.area(d))})
    .style("stroke-width", 1)
    .style("stroke", "black")
    .style("opacity", .5)
    .on("mouseover", centerBounds)
    .on("mouseout", clearCenterBounds)

d3.select("svg").selectAll("circle").data(cities)
    .enter()
    .append("circle")
    .style("fill", "black")
    .style("stroke", "white")
    .style("stroke-width", 1)
    .attr("r", 3)
    .attr("cx", function(d) {return projection([d.y,d.x])[0]})
    .attr("cy", function(d) {return projection([d.y,d.x])[1]})
    
    function centerBounds(d,i) {
      thisBounds = geoPath.bounds(d);
      thisCenter = geoPath.centroid(d);
      d3.select("svg")
      .append("rect")
      .attr("class", "bbox")
      .attr("x", thisBounds[0][0])
      .attr("y", thisBounds[0][1])
      .attr("width", thisBounds[1][0] - thisBounds[0][0])
      .attr("height", thisBounds[1][1] - thisBounds[0][1])
      .style("fill", "none")
      .style("stroke-dasharray", "5 5")
      .style("stroke", "black")
      .style("stroke-width", 2)
      .style("pointer-events", "none")
      
      d3.select("svg")
      .append("circle")
      .attr("class", "centroid")
      .attr("r", 5)
      .attr("cx", thisCenter[0]).attr("cy", thisCenter[1])
      .style("pointer-events", "none")
    }
    function clearCenterBounds() {
      d3.selectAll("circle.centroid").remove();
      d3.selectAll("rect.bbox").remove();
    }
  }
</script>
  </footer>

</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js

https://d3js.org/d3.geo.projection.v0.min.js

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

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