JS Show It! Interactive Choropleth World Map Using GeoChart Visualization


Click to learn more about co-author Rosaria Silipo.

Click to learn more about co-author Paolo Tamagnini.

The Plot

Today we want to draw the choropleth map as shown above. So,
what do we need?

  • A map of the countries of the world and the corresponding numbers of their populations
  • A short JavaScript code to load the Google Charts library, where we will draw the choropleth map based on the population numbers of each country
  • A Generic JavaScript View node to execute such code within our workflow

Our dataset is the CSV file population2013.csv, and it
contains a list of 214 world countries with their corresponding population
numbers as of 2013.

We also have a Generic JavaScript View node. The smallest workflow would simply include a File Reader node to read the CSV file and a Generic JavaScript View node with the right JavaScript code nugget to draw the choropleth map. So, let’s now have a look at this nugget of JavaScript code.

Figure 1: A choropleth map is a geographical map where areas are colored, shaded, or patterned according to a corresponding calculated measure — in this case, a logarithmic number of the 2013 population on a world map.

Below is the final JS code nugget to insert in the JavaScript editor of the Generic JavaScript View node’s configuration dialog.

The function chart.draw() from the Google
Charts library assumes that the first column in the data contains the
country names and the second column the population numbers. When feeding the
Generic JavaScript View node, make sure that the column order in the dataset is

Note: When you copy this code into the JavaScript editor in the
configuration dialog of the Generic JavaScript View node, remember to
check JQuery dependency, since the Google
JavaScript API is loaded using the getScript() function
of the jQuery library.

The getScript() method from jQuery is great to load a single JS library. However, when more concurrent, possibly dependent, JS libraries are needed, other load methods might be more suitable. We will talk about those in another post. Stay tuned!

Also, note that we have defined a heat map going from light
blue (least populated countries) to dark blue (most populated countries).

It is common practice to use a monochromatic color scale. We chose the scale from light blue to dark blue, as recommended on the Color Brewer 2.0 website.

Figure 2: The JavaScript code nugget used to draw the choropleth in Figure 1 as inserted in the editor of the Generic JavaScript View node

The Workflow

If we actually apply the above code in a Generic JavaScript
View node directly to the data of the population2013.csv file, the map will be
colored light blue with only two countries (India and China) in dark blue, due
to their very large populations. This is because we are dealing with
populations in absolute numbers.

In order to appreciate the differences in population a bit
better, we could use a logarithmic scale. In this case, a Math Formula node
calculates log(2013) for each country to append to the
original dataset.

After re-ordering the columns so as to have the log(2013) column
at the second position from the left, we feed the Generic JavaScript View node
containing the code above. This produces the choropleth map displayed in Figure

Note: The Google Geocoding API is loaded lazily. An internet
connection is required when opening the view of the Generic JavaScript View
node. Also, the map will take a longer or shorter time to load depending on the
speed of your internet connection.

Now it would be nice to add a title to the plot. However, I think we have done enough JavaScript for today. Let’s use a good old Text Output node and add the following tiny bit of HTML code:

1 <h1><font color=”gray”>Population in logarithmic numbers by world countries in 2013</font></h1>

Then let’s wrap both nodes — the Generic JavaScript View node and the Text Output node — into a wrapped metanode for a composite view. To make sure that the title comes on top of the page, open the metanode, select the button for the metanode layout in the toolbar, and set the position of the two nodes in a 2×1 matrix: Text Output node at (1,1) and Generic JavaScript View node at (2,1), as shown in Figure 3.

Figure 3: The basic layout of the composite view of a wrapped metanode, containing a Text Output node for the title and a Generic JavaScript View node for the choropleth map. The title is placed at the top of the view and the choropleth map underneath.

Indeed, now, if we right-click the metanode and select its
“Interactive View” item, we can see the same choropleth map with a gray title,
exactly as in Figure 1. Also, if we execute the workflow from our WebPortal, the final web page will also
contain this interactive view with choropleth and title.

We can also go one step further and combine the two plots —
the one plot with pure numbers and the other with logarithmic numbers — and
display them side by side, each with its own title, in the same view. This is
achieved in the last wrapped metanode, which contains two Generic JavaScript
View nodes and two Text Output nodes, placed on a 2×2 layout grid. The final
composite view is shown in Figure 4.

Again, if running on a WebPortal, this composite view
translates into a web page with multiple choropleths and titles.

The final workflow is shown in Figure 5 and is also available on the EXAMPLES server under 03_Visualization/04_Geolocation/07_Choropleth_World_Map.

Figure 4: Composite view with two choropleth maps, side by side. On the left is the choropleth map based on pure numbers; on the right, it is based on logarithmic numbers. You might conclude that the logarithmic scale allows for better appreciation of the difference in population numbers.
Figure 5: The workflow used to draw all those choropleths. From top to bottom, the workflow produces choropleth maps based on pure population numbers, on logarithmic population numbers, with a title, and shown side by side. This workflow is available on the EXAMPLES server under 03_Visualization/04_Geolocation/07_Choropleth_World_Map

Summary and Next Steps

Today we drew a choropleth map of the world showing
population numbers. To do this, we used a short JavaScript code nugget to load
the Google Charts library and color code the world map areas
according to the input numbers and countries. As a bonus, we also showed how to
add a title and/or another world map choropleth in the composite view of a
wrapped metanode.

The workflow is available on the EXAMPLES server under 03_Visualization/04_Geolocation/07_Choropleth_World_Map.  

Credit: Source link