A bivariate cartogram is a simple variation on the Dorling Cartogram@cscheid/dorling-cartogram which provides the visualization of two separate positive values. The idea is to use a ring-shaped glyph of one of either color, using the two radii to encode the values, where the ring color denotes which of the two values is larger.
data is encoded as an array of objects with the following properties:
areaA: size of the circle corresponding to variable A in pixels
areaB: size of the circle corresponding to variable B in pixels
fillA: fill color for when radius of A > B. Default: d3.lab(50, -20, -40)
fillB: fill color for when radius of B > A. Default: d3.lab(70, 20, 40)
fillNeutral: neutral fill color for glyph background. Default: white
stroke: stroke color for outline. Default: #ccc
name: name of geographical location
tooltip: text to show on glyph hover (or name if none)
fixed: whether or not the glyph is pinned to the centroid of the polygon. (This makes Hawaii and Alaska work out, but might have other applications as well)
There are a few different ways to decide on the different radii, and they will generate different interpretations. Often, a natural choice is to pick a desired "neutral ratio" between the two variables, and set the scales so the radii of the two values are identical at that neutral ratio. Here, we are using the pop/gdp ratio of California, the largest state by both 2020 GDP and population, as the neutral ratio. Other choices are clearly possible. The actual radii are controlled by two scale variables areaScaleA and areaScaleB.
To control the balance between position and topology, change the positionWeight variable, which should be between 0 and 1.
References
Nusrat et al. wrote a paperhttps://hdc.cs.arizona.edu/papers/tvcg_2017_bivariate_cartograms.pdf on the design, but it's simple enough to likely have been reinvented a number of times (eg. see this from stamenhttps://twitter.com/stamen/status/1430956581642858500).
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
import { data as usStates2020GdpList } from "@cscheid/dataset-2020-per-state-gdp";
areaScaleA = d3.scaleSqrt().domain([0, usStates2020Pop.California]).range([0, 60])
areaScaleB = d3.scaleSqrt().domain([0, usStates2020Gdp.California.gdp]).range([0, 60])
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
