How to create an interactive spinning globe with D3.js and React

Published in

NetGuin

4 min readApr 17, 2022

A world map is a great way to be used as the background to show metrics globally. To start with creating a world map we should know how to get global geographical data and map it to a graphic element.

I know it sounds overwhelming but need not worry, I got you covered 😊 .

In this article, I will show you how to get geographical data and create a globe from scratch using D3.js and to make it more challenging we will make the globe interactively spin.

D3.js is a great javascript library to visualize data .It allows developer to create dynamic, interactive data visualizations in the browser with the help of HTML, CSS and SVG. If you are not familiar with D3.js, I will recommend to read about it here.

Setup

Let’s create a simple react app and install d3, topojson-client

npx create-react-app my-app
npm install d3
npm install topojson-client

Get geographical data

GeoJSON is a beautiful JSON format that encodes a variety of geographic data structures. It looks something like this,

{
  "type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [125.6, 10.1]
  },
  "properties": {
    "name": "Dinagat Islands"
  }
}

TopoJSON is an extension of GeoJSON that encodes topology and the main advantage of TopoJSON is that it reduces the size of data. Follow link for more.

For this tutorial, we will use TopoJSON data for loading, and for projecting data, we will convert it to GeoJSON.

Now that we know what format of file we need, the next question that comes to mind is, where will I get such data🧐.

There is a npm package called world-atlas using which we can load the data in JSON format. For this tutorial, I will be using medium-sized data which has countries and land data.

Let’s make Globe

Creating a world map is nothing but creating arcs that are projected to well defined shapes(projection) of world map.

There are multiple projections available in d3, as we are creating globe, we will stick to geoOrthographic projection.

Here, I used land objects for showing land on the globe and countries to show the boundaries which is an efficient way, as we will be creating adjacent boundaries once. You can use only country's data but it will repeat boundaries for countries when they share border.

In order to create arcs for the land boundaries, we need to loop through each land coordinates, which is easier in GeoJSON. Therefore, we will convert TopoJSON to GeoJSON using topojson.feature().

const jsonUrl ='countries-50m.json';
const [data, setData] = useState(null);useEffect(() => {
     d3.json(jsonUrl).then(topojsonData => {
          const {countries,land} = topojsonData.objects
          setData({
       land: topojson.feature(topojsonData, land),
       interiors: topojson.mesh(
       topojsonData, countries, (a, b)=>  a !== b)
})});

Now that we have the data we need, we can start with creating graphics in svg. Here, I am encapsulating all the svg paths/objects in Marks.js and sending the data we collected above.

<svg className = 'globe' width={width} height={height} >
      <Marks data={data}/>
</svg>

There will be three parts to our globe:
1. Sphere for clear boundary of globe.
2. Path for showing land.
3. Finally the interiors to show countries.

As discussed earlier, we will use geoOrthographic projection

const projection = geoOrthographic();
const path = geoPath(projection);/*Code for sphere*/
<path className = “sphere” d={ path({type: ‘Sphere’})}/>/* for land loop through each cordinate*/
land.features.map(feature => (
      <path className = “feature” d={ path(feature)}/>
))/* interiors*/
<path className = “interiors” d={ path(interiors)}/>

Complete Mark.js looks like following: