Skip to content
[template] Map application - Visualize geo clustering & heatmaps
Share
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).

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!
image.png

How to use this 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
table, including changing the date and colors
Add data to the
table, and select the gradient scheme you'd like to apply.
image.png

It took a few min to render the COVID case count in the US (
as of 4/3):
image.png

And a few more to render the COVID heat-map for the world:
image.png


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

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