Apache ECharts For React US Map Chart

Photo by Carlos Muza on Unsplash

Introduction

Building a US Map with Apache ECharts in Reactjs is a great way to visualize data and gain insights into the geographical distribution of your data. Apache ECharts is a feature-rich, open-source data visualization library that provides a wide range of chart types and customization options. React, on the other hand, is a popular JavaScript library for building user interfaces, and it provides a highly modular and reusable approach to UI development. By combining the power of Apache ECharts and React, you can create interactive and visually appealing charts that display data in a meaningful way. In this blog post, we will discuss the process of building a US Map with Apache ECharts in Reactjs and some best practices and tips.

About Apache ECharts

ECharts was originally developed by Baidu and later has been made part of the Apache Software Foundation. The parent company Apache, is the worlds largest open source foundation. ECharts is a a powerful, interactive charting and data visualization library without a steep learning curve.
Best of all, it’s free!

Libraries

The following libraries are needed to use Apache ECharts.

echarts-for-react and ECharts. Install ECharts library if you want access to shading features for this example.

npm i echarts-for-react echarts

ECharts Data Resources

The following resources are used in the examples page examples page.

Images: https://echarts.apache.org/examples/data/asset/img

Data: https://echarts.apache.org/examples/data/asset/data

GEO Coordinates: https://echarts.apache.org/examples/data/asset/geo

U.S. Map Coordinates Data

Save the file below to “./components/USMapData.json”.

https://echarts.apache.org/examples/data/asset/geo/USA.json

Population Data

Below is the fake population data for the U.S.

  const data = [
  { name: 'Alabama', value: 4822023 },
  { name: 'Alaska', value: 731449 },
  { name: 'Arizona', value: 6553255 },
  { name: 'Arkansas', value: 2949131 },
  { name: 'California', value: 38041430 },
  { name: 'Colorado', value: 5187582 },
  { name: 'Connecticut', value: 3590347 },
  { name: 'Delaware', value: 917092 },
  { name: 'District of Columbia', value: 632323 },
  { name: 'Florida', value: 19317568 },
  { name: 'Georgia', value: 9919945 },
  { name: 'Hawaii', value: 1392313 },
  { name: 'Idaho', value: 1595728 },
  { name: 'Illinois', value: 12875255 },
  { name: 'Indiana', value: 6537334 },
  { name: 'Iowa', value: 3074186 },
  { name: 'Kansas', value: 2885905 },
  { name: 'Kentucky', value: 4380415 },
  { name: 'Louisiana', value: 4601893 },
  { name: 'Maine', value: 1329192 },
  { name: 'Maryland', value: 5884563 },
  { name: 'Massachusetts', value: 6646144 },
  { name: 'Michigan', value: 9883360 },
  { name: 'Minnesota', value: 5379139 },
  { name: 'Mississippi', value: 2984926 },
  { name: 'Missouri', value: 6021988 },
  { name: 'Montana', value: 1005141 },
  { name: 'Nebraska', value: 1855525 },
  { name: 'Nevada', value: 2758931 },
  { name: 'New Hampshire', value: 1320718 },
  { name: 'New Jersey', value: 8864590 },
  { name: 'New Mexico', value: 2085538 },
  { name: 'New York', value: 19570261 },
  { name: 'North Carolina', value: 9752073 },
  { name: 'North Dakota', value: 699628 },
  { name: 'Ohio', value: 11544225 },
  { name: 'Oklahoma', value: 3814820 },
  { name: 'Oregon', value: 3899353 },
  { name: 'Pennsylvania', value: 12763536 },
  { name: 'Rhode Island', value: 1050292 },
  { name: 'South Carolina', value: 4723723 },
  { name: 'South Dakota', value: 833354 },
  { name: 'Tennessee', value: 6456243 },
  { name: 'Texas', value: 26059203 },
  { name: 'Utah', value: 2855287 },
  { name: 'Vermont', value: 626011 },
  { name: 'Virginia', value: 8185867 },
  { name: 'Washington', value: 6897012 },
  { name: 'West Virginia', value: 1855413 },
  { name: 'Wisconsin', value: 5726398 },
  { name: 'Wyoming', value: 576412 },
  { name: 'Puerto Rico', value: 3667084 }
];

Register Map & Adjustments

To render a map, coordinates in JSON format is must registered with the echarts.registerMap() property. In addition to the coordinates, there is functionality built in for adjustments to the map. The code below shows Alaska, Hawaii, and Puerto Rico adjusted size and placement. Before and after in the images below the code.

import React from "react";
import ReactEcharts from "echarts-for-react";
import * as echarts from "echarts";
import geoJson from './USMapData.json'

...

echarts.registerMap('USA', geoJson, {
  Alaska: {     
    left: -149,
    top: 49,
    width: 23
  },
  Hawaii: {
    left: -141,
    top: 28,
    width: 5
  },
  'Puerto Rico': {     
    left: -76,
    top: 20,
    width: 2
  }
});

Without the added size and placement code Alaska is too big, Hawaii is a bit far etc.

With the adjustments.

Map Chart Options

Enable visualMap to show the population min and max vertical bar to the right of the chart. Using the inRange property to define the colors in the vertical population range bar below and states on the map.

const mapOption = {
  visualMap: {
    left: 'right',
    min: 500000,
    max: 38000000,
    
    inRange: {      
      color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
    },
    text: ['High', 'Low'],
    calculable: true
  },
  
  series: [
    {
      id: 'population',
      type: 'map',
      roam: true,
      map: 'USA',
      animationDurationUpdate: 1000,
      universalTransition: true,
      data: data
    }
  ]
};

All Together

Note: The MUI IconButton has a property of tabIndex and you which should be set to “-1“, otherwise when the user hits the tab button it will go to the icon button instead of the next field.

Source code for “./components/USMapChart.js

import React from "react";
import ReactEcharts from "echarts-for-react";
import * as echarts from "echarts";
import geoJson from './USMapData.json'

const data = [
  { name: 'Alabama', value: 4822023 },
  { name: 'Alaska', value: 731449 },
  { name: 'Arizona', value: 6553255 },
  { name: 'Arkansas', value: 2949131 },
  { name: 'California', value: 38041430 },
  { name: 'Colorado', value: 5187582 },
  { name: 'Connecticut', value: 3590347 },
  { name: 'Delaware', value: 917092 },
  { name: 'District of Columbia', value: 632323 },
  { name: 'Florida', value: 19317568 },
  { name: 'Georgia', value: 9919945 },
  { name: 'Hawaii', value: 1392313 },
  { name: 'Idaho', value: 1595728 },
  { name: 'Illinois', value: 12875255 },
  { name: 'Indiana', value: 6537334 },
  { name: 'Iowa', value: 3074186 },
  { name: 'Kansas', value: 2885905 },
  { name: 'Kentucky', value: 4380415 },
  { name: 'Louisiana', value: 4601893 },
  { name: 'Maine', value: 1329192 },
  { name: 'Maryland', value: 5884563 },
  { name: 'Massachusetts', value: 6646144 },
  { name: 'Michigan', value: 9883360 },
  { name: 'Minnesota', value: 5379139 },
  { name: 'Mississippi', value: 2984926 },
  { name: 'Missouri', value: 6021988 },
  { name: 'Montana', value: 1005141 },
  { name: 'Nebraska', value: 1855525 },
  { name: 'Nevada', value: 2758931 },
  { name: 'New Hampshire', value: 1320718 },
  { name: 'New Jersey', value: 8864590 },
  { name: 'New Mexico', value: 2085538 },
  { name: 'New York', value: 19570261 },
  { name: 'North Carolina', value: 9752073 },
  { name: 'North Dakota', value: 699628 },
  { name: 'Ohio', value: 11544225 },
  { name: 'Oklahoma', value: 3814820 },
  { name: 'Oregon', value: 3899353 },
  { name: 'Pennsylvania', value: 12763536 },
  { name: 'Rhode Island', value: 1050292 },
  { name: 'South Carolina', value: 4723723 },
  { name: 'South Dakota', value: 833354 },
  { name: 'Tennessee', value: 6456243 },
  { name: 'Texas', value: 26059203 },
  { name: 'Utah', value: 2855287 },
  { name: 'Vermont', value: 626011 },
  { name: 'Virginia', value: 8185867 },
  { name: 'Washington', value: 6897012 },
  { name: 'West Virginia', value: 1855413 },
  { name: 'Wisconsin', value: 5726398 },
  { name: 'Wyoming', value: 576412 },
  { name: 'Puerto Rico', value: 3667084 }
];

echarts.registerMap('USA', geoJson, {
  Alaska: {     
    left: -149,
    top: 49,
    width: 23
  },
  Hawaii: {
    left: -141,
    top: 28,
    width: 5
  },
  'Puerto Rico': {     
    left: -76,
    top: 20,
    width: 2
  }
});

const mapOption = {
  visualMap: {
    left: 'right',
    min: 500000,
    max: 38000000,    
    inRange: {      
      color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
    },
    text: ['High', 'Low'],
    calculable: true
  },
  
  series: [
    {
      id: 'population',
      type: 'map',
      roam: true,
      map: 'USA',
      animationDurationUpdate: 1000,
      universalTransition: true,
      data: data
    }
  ]
};


export default function USMapChart() {    

  return (
    <>
      <ReactEcharts option={mapOption} style={{ width: "80vw", height: "80vh" }} />      
    </>
  );
};

App.js – Root Component

Just import the “./components/USMapChart.js”.

import React from "react";
import USMapChart from "./components/USMapChart.js";

import './App.css'

export default function App() {

  return (
    <div className="container">
      <USMapChart/> 
    </div>     
  );  
}

App.css

CSS for the container to put a space around the map.

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

.container {
  width: 80%;
  margin: 0 auto;
  margin-top: 45px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

Conclusion

In conclusion, building a US Map with Apache ECharts in Reactjs is a great way to visualize data and gain insights into the geographical distribution of your data. Using the power of Apache ECharts and React, you can create interactive and visually appealing US maps that display data in a meaningful way. Throughout this blog post, we discussed building a US Map with Apache ECharts in Reactjs and provided tips and best practices to help you along the way. Whether you are a seasoned developer or just starting, the combination of Apache ECharts and Reactjs delivers a flexible and powerful solution for creating dynamic data visualization applications.

Example of map to bar chart here.

Get addition geo coordinates here for other maps.