[template] Map application - Visualize geo clustering & heatmaps

Explore

Welcome ...

... to the DIY Map visualization application, which lets you render heat-map-style data or geo-groupings on either the US or World map (you can add new maps as needed).

Brandon Trew

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 customizable labels

The state status glyphs (small boxes with green/red/grey indicators)

The timeline below

The world map!

⁠

How to use this app:
`Map Visualization App`⁠
⁠

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

tbl_Geo_Grouping⁠

table, including changing the date and colors

Add data to the

tbl_Geo_Data⁠

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 (

link⁠

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:

How to... in Coda⁠

Credit where it's due: I was inspired by this fantastic community post (

Rendering SVGs in Coda⁠

) by

Paul_Danyliuk⁠

I found a simple SVG map layer online (

credit: wikimedia⁠

), 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

tbl_Shapes⁠

table .

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 (

Multi-part progress bar from table rows⁠

Phil_Hamilton-Schmidt⁠

) 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.

Happy App'ing!

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.

Welcome ...

Visualizing complex geographic data (like a multi-state national launch plan)

How to use this app: Map Visualization App⁠⁠

How to render custom visualization like this using Coda+SVG:

Happy App'ing!

How to use this app:
`Map Visualization App`⁠
⁠