Studio
GithubDribbbleTwitter

A simpler way of making interactive map charts 

See it live

Services

Web development

Data visualisation

Open source

React

Mapping

Javascript

The intersection of react and d3 has been discussed extensively, and there were a number of projects early on that tried to tackle the issue of how to design an intuitive, declarative api for data visualization.

Most of these projects focused only on charts, and not on map charts in specific. Since most of our work had focused on creating beautiful map charts, we decided to create a library of components that would make SVG mapping as simple as writing html. The result of that effort is react-simple-maps.

An SVG world map in 9 lines of code.

React-simple-maps is aimed at developers who want simple primitives to work with in order to create compelling map charts for the web.

The goal with react-simple-maps was to create a small and simple SVG-first api, that would allow designers and developers to easily style and inject custom elements into their maps.

React-simple-maps offers different levels of abstraction and allows developers to easily wrap or replace parts of the library with their own more custom implementations. The deconstructed nature of the library makes these kinds of custom implementations even easier.

React-simple-maps only uses d3-geo and a few modules from d3, keeping the library size to a minimum. This makes react-simple-maps a perfect companion for other charting libraries, such as victory or vx.

Custom projections in react-simple-maps.

Map chart with texture made with react-simple-maps

From static maps in design reports by Invision, to resource exploration apps, SDG dashboards, data-driven journalism, and official map charts for the US Center for Disease Control and Prevention, developers and designers around the world rely on react-simple-maps for their charting work.

React-simple-maps remains a work in progress with many more interesting features being worked on continuously. With more than 90,000 downloads per month, it has become an important part of the react data visualization ecosystem.

For more information, check out the documentation and examples on the official site of react-simple-maps.

Have a project in mind? Get in touch and let's make something cool. 

hello@zcreativelabs.comGet in touch

Newsletter

Sign up to get our latest articles on design, data visualization, and code directly in your inbox.

z creative labs GmbH
Sihlquai 131, 8005 Zurich
Switzerland

GithubDribbbleTwitterEmail

© 2020 z creative labs GmbH