Missouri's Shifting Margins: The 119th and 120th Congressional Maps

The Interactive Map block renders pre-projected SVG maps side by side with hover tooltips, a shared color scale, and a source attribution footer. This article uses the same Missouri congressional districts Emily prepared for her election analysis.

Comparing 119th and 120th Congress Margins

Hover (or focus with the keyboard) over any district to see the R+/D+ margin. The diverging Red/Blue palette colors each region by its signed margin — deep red for strong Republican wins, deep blue for strong Democratic wins.

How the block works

Writers upload a pre-projected SVG (here in Albers Equal Area, ESRI:102003) into the Map Assets collection. Each path carries a region attribute (in this case data-district) that joins to a regions table the writer fills in with values and labels. The block reads the SVG content the collection captured at upload time, sanitizes it, parses out the paths, applies the color scale, and renders them as real JSX — so the colored map is SSR-friendly and accessible.