How to create a choropleth Map or a Geographic HeatMap in React
A Choropleth Map is a thematic map in which areas are shaded or patterned in proportion to the measurement of the statistical variable being displayed on the map, such as population density or per-capita income.
In this guide we’ll be creating a Choropleth map of Canada, But it can be used as a guide to create a similar map of any country. We’ll be using Datamap for this purpose. I am assuming that you are familiar with React.
- Create a new project using create-react-app
$ create-react-app map-exampleGo inside the project folder and start the development server -
$ cd map-example
$ yarn start2.Install datamaps using yarn or npm
Datamaps is intended to provide some data visualizations based on geographical data. It’s SVG-based, can scale to any screen size, and includes everything inside of 1 script file. It heavily relies on the amazing D3.js library.
$ yarn add datamaps3. Get the topoJson file of the country for which the map has to be created
The topoJson file contains the geometric data to plot the map of the country. To get the TopoJson file of a specific country, follow these steps:
- Go to https://github.com/markmarkoh/datamaps/tree/master/dist
- Find the datamaps.{xyz}.js file for the country xyz. xyz is the 3 character code for any country. Since we are creating a map for Canada, we’ll find the file named datamaps.can.js in the above repository (“can” is the 3 character code for Canada).
- Copy the contents of the file and paste it in the browser console (You can open the console by pressing F12 in the browser).
- Execute the following code after running the above code in the browser.
copy(Datamap.prototype.canTopo);It will copy the data returned by Datamap.prototype.canTopo function to the clipboard.
(You can replace “can” with any other country code if you are creating the map for another country).
- Create a new file named Canada.topo.json inside the src/components directory in the project folder.
- Paste the contents copied from the browser console.
- If the state codes contains dot(.) in the topo json, then you need to remove the dot from the code e.g, if your state code is CA.AL, remove CA. part to get 2-digit ISO code AL. If the states code are already in 2-digit ISO or do’t have dot(.) then don’t do any modification follow next steps.
- Objects country name in {xyz}.topo.json should be same as we have declared in the Datamap scope. e.g, for Canada, in canada.topo.json we have
{“type”:”Topology”,
“objects”:{“can”:{“type”:”GeometryCollection”}}}and we have provided scope as ‘canada’ in the map component in next step. So this case ‘can’ in canada.topo.json must be as ‘canada’ i.e.
{“type”:”Topology”,
“objects”:{“canada”:{“type”:”GeometryCollection”}}}4. Create the ChoroplethMap component
This will be the component which will render the choropleth map (or geographic heatmap) in the DOM.
Create a new file named ChoroplethMap.js inside src/components directory in the project folder.
The contents of the file should be as below -
Now, we’ll walk through the code above -
Starting with the usual react stuff, we have imported all the required packages as well as the topo json fiile.
Inside the componentDidMount lifecycle method, we have configured and rendered the choropleth Choropleth map using datemaps and d3.
We have transformed the data coming as the props to the format that Datamaps expects it to be in by finding the minimum and the maximum value from the data and then generating the colour palette using d3 scale.
After that, we have created the map using new Datamap() and passing all the configurations and the data to plot the map.
Note that we have overridden the setProjection method to define the properties of the map like the center and the scale.The center of the map varies according to the country.
We have set [-106.3468, 68.1304] to locate center point for Canada in the world map. That means Latitude = -106.3468 E and Longitude = 68.1304 N. Remember Latitude and Longitude are always East and North. For western countries, Latitude are in West so make it convert as Negative of East. e.g 102.3421 W ==> -102.3421 E.
After that, we have rendered a div with the id=”choropleth_map”, which is used by Datamap to render the map.
5. Import and render the ChoroplethMap component in App.js
Now inside App.js component, we have to import the ChoroplethMap component that we created in the above steps and render it inside a div so that the App component looks like below -
We have defined some sample data in the state and passed it to the map component as props. Also, we have set the height and width of the container div through inline styles. This is important as the map component has the height and width set to 100% of the parent element.
Now run $ react start in the terminal and test the app.
You can clone and test the project from the following repository on github -
https://github.com/WebDevRaj/choropleth-map
References :
