Introduction and Example
So I’ve been pretty religiously using Tableau for most of my maps and visualizations. I figured it might be time to use something else.
Here’s an example map from Highmaps:
Let’s take a look inside. This is what the html looks like:
The container with id highmaps-demo is what the map will actually be loaded into. The map is loaded with a script that basically has a bunch of options you can adjust:
A rundown of what’s going on is that a JSON file containing the data is loaded from an external source (what the getJSON does). This is what the JSON file looks like (with most entries removed to save space):
Then, the map is loaded using the command Highcharts.mapChart(…) into the container named highmaps-demo with some specific options. So all we need to do is to generate a JSON file containing our data, tinker with some settings and we’re done!
Let’s do it
I’m going to be working with the data and map from my article on Obesity, Health and Education. After collecting and getting the data, here’s the table that we have:
|Location||Obesity %||High School Graduate %||Bachelor's Degree %||Advanced Degree %|
|District of Columbia||21.7||90.3||56.6||32.8|
You can download the csv file (you can export spreadsheets into csv files, or most datasets come in csv files already) for this data to follow along here.
First of all, we want all our data to be in the right format. The JSON calls for our states in 2 letter abbreviations, and luckily there are CSVs that give a conversion of state name to state abbreviation (here).
After we sort the state names alphabetically in spreadsheets (or Excel), you can just delete one of the columns so you have an extra column of state abbreviations.
To match the data up with the JSON (see above), you might want to change the column headers so they match. You can change ‘state abbreviations’ to ‘code’ and whichever value you want to ‘value’ (this will be the one that the colors are assigned by). Then, you can save the spreadsheet as a CSV (comma-separated values), and upload it to an online converter that will convert it to a JSON file (I used this one).
After this, you’re done!
Here’s the resultant map for the set of obesity data in the United States:
Using our same set of data (compiled above), we can make a map of % of people in states who have a bachelor’s degree: