A step-by-step guide to Highmaps

Total
0
Shares

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.

Specifically, I know I create pretty natively supported visualizations using D3.js and other Javascript-based tools. Highmaps and Highcharts is one of them. This is an absolutely-no-coding-required guide (I guess you have to copy and paste and know of HTML) to making a nice interactive map with Highmaps.

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:

LocationObesity %High School Graduate %Bachelor's Degree %Advanced Degree %
Alabama33.585.324.59.1
Alaska29.792.429.010.4
Arizona28.986.528.410.7
Arkansas35.985.622.07.9
California24.782.532.612.2
Colorado21.391.139.414.6
Connecticut26.390.238.417.0
Delaware30.789.331.012.9
District of Columbia21.790.356.632.8
Florida26.287.628.510.3
Georgia30.586.329.911.4
Hawaii22.191.632.010.8
Idaho28.990.226.88.5
Illinois29.388.633.413.0
Indiana32.788.325.39.2
Iowa30.991.827.79.0
Kansas31.390.532.311.7
Kentucky31.685.223.29.6
Louisiana34.984.323.48.1
Maine28.292.130.310.9
Maryland29.689.839.018.0
Massachusetts23.390.342.118.7
Michigan30.790.228.111.0
Minnesota27.692.834.811.8
Mississippi35.583.421.38.0
Missouri30.289.228.210.7
Montana26.493.030.710.1
Nebraska30.290.930.610.2
Nevada27.785.823.78.1
New Hampshire27.492.836.013.8
New Jersey26.989.238.114.7
New Mexico28.485.026.911.8
New York2786.135.315.4
North Carolina29.786.929.910.6
North Dakota32.292.328.97.8
Ohio32.689.827.210.2
Oklahoma3387.524.88.3
Oregon27.990.232.312.2
Pennsylvania30.289.930.111.8
Rhode Island2787.333.013.1
South Carolina32.186.527.09.8
South Dakota29.891.427.88.3
Tennessee31.286.526.19.6
Texas31.982.828.79.9
Utah25.791.832.511.0
Vermont24.892.336.815.0
Virginia28.589.037.616.1
Washington27.390.834.512.7
West Virginia35.785.919.97.9
Wisconsin31.291.729.09.9
Wyoming29.592.826.79.3

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.

Matching states up
How to match states up.

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

For this example, I will be coloring the map using the ‘Obesity %’ value from our spreadsheet. If you use Github, you can upload the JSON file and use the ‘raw link’ from Github directly in your code (line one of the Javascript gets the JSON file). Otherwise, you can use this link for the JSON file that I prepared with my data. After replacing the JSON file in the first line with your own JSON file, the only steps left are to tinker with the labels and settings and you’re done!

On line 16 (of the Javascript, see above), you want to change the title of your chart. Give it a title that describes what data you’re showing. For example, “Obesity in the United States”. On line 60, which gives the name of the data on the tooltip, you want to give it the series that the colors are showing, in our case, “% Obese”. On the point format on line 62, you want to give the tooltip some text to show. Right now, it’s displaying STATE: xx.xx /km², which in code is {point.code}: {point:value}/km² (recall that code was what we called the state abbreviations and value was what we called the series of data). You can change this to something like {point.code}: {point:value}%. Also, since our data features mostly values that are close together, you might want to change the type of the scale to linear (on line 39)

After this, you’re done!

The Map

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:

Leave a Reply

Your email address will not be published. Required fields are marked *

Sign Up for the Infotastical Newsletter!

Enjoy what you just read? Sign up to keep up to date with our newest content!

You May Also Like
Some of the tools I use on a day-to-day basis.

Giving Thanks

It’s Thanksgiving. Yup, that time of the year. This is just an appreciation for all the tools that I’ve consistently relied on in the first few infantile months of Infotastical. Without…
View Post