Creating an Interactive d3 Choropleth Map in React Native

Adding data-driven colorization as well as panning and pinch-zooming to a d3 map

In my last post, I introduced a way to integrate the d3.js library into React Native, enabling yourself to reach out to a broader audience using mobile apps. In that article, we started to build a basic map in the azimuthal equal-area projection. Now let’s make this map more interesting and add some data-driven colorization and interactive panning and pinch-zooming. Make sure you read the first article beforehand, as we will continue manipulating the code we created there. You can also check out my Youtube playlist of this tutorial series.

Prepare the data

First, we need some data to apply colorization on the country level. I selected the COVID-19 data published by the WHO. It is in CSV format, but I transformed it into a JSON file and stored it in the assets/data folder. The file looks like this:

{
   "Afghanistan": [
      {
         "date": "2020-02-24",
         "country_code": "AF",
         "region": "EMRO",
         "deaths": 0,
         "deaths_cum": 0,
         "confirmed": 1,
         "confirmed_cum": 1
      },
      {
         "date": "2020-02-25",
         "country_code": "AF",
         "region": "EMRO"…