About
D3’s geo module simplifies the specification of geographic visualizations.
Example
noncontiguous cartogram
Noncontiguous cartogram encodes values for geographic regions as area by scaling each region around its projected centroid.
The states are rescaled around their centroid, preserving local shape but not topology.
Unlike choropleth maps, cartograms encode data using area rather than color, resulting in distorted geographic boundaries.
Inspired by Zachary Johnson.
Non-continguous cartogram design invented by Judy Olsen. U.S. state and county boundaries from the U.S. Census Bureau, simplified using GDAL and MapShaper
A discontinuous Albers equal-area projection shows the 48 states, Hawaii and Alaska as recommended by the USGS.
The state boundaries are loaded asynchronously as GeoJSON, and then mapped to SVG path elements using the geo.path operator. The state boundaries were previously downloaded from the U.S. Census Bureau, simplified via MapShaper, and converted to GeoJSON using GDAL.
Three copies of the states are generated: one in the background with a thick gray stroke for a halo, one in the middle with white fill to mask internal strokes, and one in the foreground to encode data. The gray halo effect for the country outline is helpful to assist viewers in perceiving the distortion of area.
The states are scaled around their centroids using SVG’s transform attribute. To scale around a position other than the origin, multiple transforms are concatenated: “translate(x, y) scale(k) translate(−x, −y)”.
The x and y values are computed by the centroid method of the path operator, while k is proportional to the square root of the input value—here the obesity rate reported by the CDC, as of 2008. To minimize overlap on adjacent states, k ≤ 1.