How to create pure react SVG maps with topojson and d3-geo

Since d3 has been split into smaller components in v4, pairing it with react has become more streamlined. Making declarative SVG maps with react, topojson, and d3-geo has never been easier.

Richard Zimerman
May 24, 2017 · 5 min read

Note: I have moved my blog to zcreativelabs.com/blog/. You can find an updated version of this article and more there. Future articles will only be published there. Please subscribe to the z creative labs newsletter to receive my latest articles in your inbox.

Image for post
Image for post

What this article covers

Code

1. The anatomy of an SVG map

<svg>
<g class="wrapper">
<g class="countries">
<path d="..." class="country" />
<path d="..." class="country" />
</g>
<g class="markers">
<circle class="marker" r=10 />
<circle class="marker" r=10 />
</g>
</g>
</svg>
<svg>
<g className="wrapper">
<g className="countries">
<path d="..." className="country" />
<path d="..." className="country" />
</g>
<g className="markers">
<circle className="marker" r=10 />
<circle className="marker" r=10 />
</g>
</g>
</svg>

2. Dependencies and structure

npm install d3-geo topojson-client --save
┬ app
├─┬ components
│ └── WorldMap.js
├─┬ pages
│ └── index.js
├─┬ public
│ ├── favicon.ico
│ └── world-110m.json
├── package.json
└── node-modules

3. The WorldMap component

4. Events

5. Data example: Most populous cities of the world

Image for post
Image for post
The output of WorldMap.js should look like this. The countries are coloured based on the index of the country within the geographies array. The circle sizes are determined by the population size of each city displayed.

Next steps

Inspiration

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store