Choropleth map using D3.JS

D3.JS - An open source JS library for Data Visualization

A Choropleth map is a map that encodes data using colour of a region.It is a a simple vector map using SVG elements to represent countries and cities. Here D3.JS is used to create the visual representation of the map. The Map shows the development status per country and data comes from here https://gist.githubusercontent.com/AngelMathew/cba118c19f4956c8b9cde568fae6e517/raw/map.json.

Create a react app and install d3.js

npm install d3

Render world map

To render world map geographical data is needed, in the form of GeoJSON or TopoJSON

GeoJSON : A JSON based format to interchange geographic data.Due to high precision can’t stream for web

TopoJSON : An extension of geoJSON, contains geospatial data and attribute data.

Projection functions and geographic path generators

What kind of projection is needed to visualize data on the page has to be specified, the one used in the code is geoMercator which is like a flat projection. Geographic Path Generators generates an SVG path data with a given feature object.

https://github.com/d3/d3-geo-projection

Source code

https://github.com/AngelMathew/choroplethMap.git