Custom Chart Component: Hexagonal Map of U.S. States & Territories

[clhenrick]

Rather than displaying data for U.S. states as a geographic (choropleth) map, display them as an abstracted map of gridded / tessellated shapes such as squares, circles, or hexagons. This approach has a few added benefits over the geographic map counterpart:

• Small states and U.S. territories are easier to find and interact with (e.g. hover / click with a mouse)
• Helps solve the common problem with choropleth maps of viewers incorrectly associating geographic area with a value
• Are better than choropleth maps with racial/ethnic representation reference article

One downside is that these maps may confuse users who are not familiar with them, though they are becoming much more common in reporting (e.g. election maps) and are used in quite a few health equity related websites and dashboards. Having well written titles, descriptions, and labeling each shape with its corresponding state abbreviation can also help with this.

Currently I have not seen an example of this type of map being created with Vega/VegaLite, so it seems warranted to implement it as a custom component. A couple ways of accomplishing this could be:

1. Use inline SVG augmented with data-id attributes for binding data (example / explanation)

2. Create a data structure that contains a record describing each shape (e.g. the coordinates necessary for constructing an SVG path "d" attribute, in the case of hexagons) and use that data structure with an HTML/SVG templating system (in this case JSX) to draw the shapes.

The benefit of approach #1 is that if the shapes needed design modifications, the SVG could be edited using software such as Figma or Sketch.

The benefit of approach #2 is that the map graphic could be scaled to any arbitrary size using a linear scale. (Approach #1 could be made responsive by using the viewBox attribute on the SVG element, but this also auto-scales any text / labels).

Either approach will require a method for binding data to the shapes, or in other words programmatically determining what fill color is used for each shape and whether or not to draw shapes representing U.S. territories as not all health data includes information on territories.

It might be worth prototyping this component first, or looking for other ready made solutions in the wild.

[kkatzen]

didn't move forward with this design