How to Create an Interactive US Map Using jQuery & FusionCharts

jQuery is no doubt one of the most popular JavaScript libraries. According to Libscore, around 70% of the top one million websites use jQuery. So there is a good chance that jQuery is part of your tech stack as well. And that’s the reason I decided to use jQuery for this tutorial instead of vanilla JavaScript, like I did for my last article.

Today we are going to build an interactive US map using jQuery, FusionCharts’ core JavaScript charts library, and its jQuery charts plugin.

Here’s is what our map will look like:

It is a US map representing the hate crime incidents in all of the states in 2013. Data comes from the FBI and my inspiration for picking this map/topic came from Samuel Bennett’s representation of the same.

Try dragging the sliders in the demo above to experience what we are actually going to make in this tutorial.

4 Steps to Creating a Map

I have divided this tutorial into following 4 steps:

• Step 1: Preparing Data.
• Step 2: Getting Dependencies.
• Step 3: Creating and Selecting a Container for the Map.
• Step 4: Inserting the Map.

Step 1: Preparing Data

For plotting a US states map, you need to have a value corresponding to each state. Once you have those values, we will form a data array which will have an object for each state.

Inside each object we will set values for the id and value attributes. Each state has a unique id. For example, Arizona is represented by AZ. value contains the actual data we want to plot corresponding to that particular state.

This is what our data array will look like:

"data": [
    {
        "id": "HI",
        "value": "2"
    },
    {
        "id": "DC",
        "value": "13.3"
    } // more data
]

Inside the objects for each state (“CA”, “HI”, “DC” etc.) we can add more options:

• link: for linking to other pages or providing a drill-down to the next view.
• tooltext: can be used for customizing the tooltip for a particular entity. You can display more insights about a state this way.
• color: this can be used to give a custom color to a particular state. It will override the default map colors / color-range.
• fontSize: to adjust the font size of a particular entity name (state name in our case). It can be a good way to make something stand out.
• showLabel: to hide or display the label for a particular entity (state in our case).

In short, you can override default chart settings for a particular state/entity using attributes inside individual objects. For more attributes like the those discussed above, you can visit the map attributes docs.

Step 2: Getting Dependencies

It’s time to include the dependencies for our project. We have four:

• jQuery Library.
• FusionCharts’ Core JavaScript Library.
• jQuery Charts Plugin.
• JavaScript maps files (explained and linked after the code snippet).

fusioncharts.maps.js is required for plotting any map, and fusioncharts.usa.js is required since we are plotting a US map. If you are plotting any other map, you will need a similar file corresponding to the map you want to plot. These files are called map-definition files and can be downloaded from this page. It also briefly explains how to include the files in your project.

Note: fusioncharts.usa.js and fusioncharts.world.js are included in the core download package.

Step 3: Creating and Selecting a Container for the Map

We will use an HTML <div> to place our map on a page:

    
US map is on its way!

Next we select our map container using jQuery’s $ selector:

$('#us-map')

Note: Every map or chart on your page will need a unique <div> container.

Step 4: Inserting the Map

In this final step we will insert the map using insertFusionCharts method of our jQuery plugin. Here’s the code to achieve that:

(function() {
  $("#us-map").insertFusionCharts({
    type: 'usa',
    width: '100%',
    height: '600',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "caption": "Hate by State",
        // more chart attributes
      },
      "colorrange": {
        "minvalue": "0",
        "startlabel": "Low",
        "endlabel": "High",
        "code": "#ffffff",
        "gradient": "1",
        "color": [{
          "maxvalue": "2.55",
          "displayvalue": "Average"
        }, {
          "maxvalue": "10",
          "code": "42647f"
        }]
      },
      "data": [
      // explained in step-1
      ]
    }
  });
}());

Here is some explanation for the above code snippet:

• type: defines the map type – usa in our case.
• width: width of the map (100% tells the map to occupy full container width).
• height: height of the chart.
• dataFormat: JSON, since we are using JSON. XML is also acceptable if your data is in XML.
• data: contains map data. See step-1 above for more details.
• chart and colorRange: explained in next section.

If everything went well, you will see a working US map. If not, head over to my CodePen demo to see the source code and understand what went wrong.

Customizing Map Design

There are hundreds of attributes you can use to customize your map’s design. I have covered a few key ones below that I have used in my example:

• chart: this object contains chart/map attributes like caption, sub-caption, theme etc.
• colorRange: this object contains attributes to control properties of the color range slider you see at the bottom of the map.
• startLabel and endLabel let you define the labels on the starting and end points of the slider. ‘Low’ and ‘High’ respectively in our case.
• color array inside colorRange object defines progressive thresholds of gradient colors. Upper limit of the band is specified with maxValue as key.

For more on chart object, you can refer to this page. And for more information on customizing the color range slider, please refer this page.

Helpful Resources

My objective with this tutorial was to get you started with using jQuery to create a US map. You can use exactly the same process to create any other chart or map in jQuery as well.

If you decide to use what you learned in this tutorial in your application, you will find the below resources helpful:

• Documentation: visit the documentation for the jQuery plugin or maps if you are ever stuck.
• Maps: see what all maps you can plot on this page. Contains individual country/state ids as well.
• Map definition files: For plotting a map, in addition to fusioncharts.maps.js you will need JavaScript files for that map (known as map definition files). This is important and without this your maps won’t load. See step-2 for more information on this point and download link.
• Using HTML tables to render charts: A cool feature offered by the jQuery plugin is the ability to use HTML tables as input data format instead of JSON or XML format. You can learn more about this feature on its official page.

I hope you found this tutorial useful! If you have any questions about the article or anything else related to JavaScript charts, feel free to post a comment below. I’ll try my best to help :)