Visualizing complex geographic data (like a multi-state national launch plan)
Planning complex national product launches can be tricky. Each region will have a number of special requirements, be they capacity, regulation, facilities, or partners.
I built this mapping tool to allow simple visibility over the expansion wave timing (colors and timeline below), and the status of each state (8 small boxes, each representing the status of a critical local requirement).
I started trying to simply build the US map, but then realized that it was very straight forward to add additional visualization modules:
The state status glyphs (small boxes with green/red/grey indicators)
Configurations are pretty straight forward:
Using the drop down lists to choose between US and world map, and between geo clustering and data heat-map.
Customize the look of the map with the checkboxes: hide the info box, hide the labels, or when in data viz mode, switch between showing the values as geo-shape shading, or size bubbles.
You can easily add geo groupings in the
table, including changing the date and colors
Add data to the
table, and select the gradient scheme you'd like to apply.
It took a few min to render the COVID case count in the US (
as of 4/3):
And a few more to render the COVID heat-map for the world:
How to render custom visualization like this using Coda+SVG:
I've documented all of the most useful Coda approaches and techniques here:
Credit where it's due: I was inspired by this fantastic community post (
I found a simple SVG map layer online (
), and split it apart into its separate text markup components - the path files (geo shapes), the labels, and the custom pointer lines and rectangles for the small states. This let me add programmatic content to the text, like changing colors, coordinates and label formatting, which let me create the map above. It is really easy to add new maps: so I found a reasonable world map rendering, and added new rows (and a new category column) to the
Finally, I tweaked the logic a little so that I could show data heat-maps, in addition to the launch phasing. I found another awesome community resource (
) which let me create and apply customizable continuous gradients to the geo shading.
Hope this is helpful to you, and serves as a launch pad for your own interesting geo applications.