Creating a beautiful map of Switzerland’s language distribution by canton using donut charts on a map. This is the end result of this tutorial. R is a component library to help make SVG mapping with d3-geo, TopoJSON, and React easier. One of the strengths of using is that it gives React full control over the DOM and does not treat the SVG map as a black box. This means that can easily take advantage of the entire React ecosystem and all the good things that come with it. eact-simple-maps react react-simple-maps react-simple-maps was partially inspired by the declarative api of charts. If you haven’t heard about , take a look on , or see the and on their . React-simple-maps Victory Victory github examples guides website The great thing about charts is that it does not have to be used standalone, but that it can be embedded in already existing SVG containers. This makes it possible to combine charts with any SVG visual, e.g. a map ;) Victory Victory This tutorial will go over how to combine the two libraries and create the map shown on the cover of this article. If you are just interested in the final code, head on over to the . github repo Here’s what this tutorial will cover: About the visualisation The repo and the app structure Setting up a basic map (TopoJSON, projection, style) The data Rendering inside components <VictoryPie /> <Marker /> Let’s get started. About the Visualisation The visualisation for this tutorial shows the language distribution in Switzerland by canton. Even though Switzerland has a population of slightly more than 8 million, it has four official languages: German, French, Italian, and Romansh. This results in Switzerland being divided into three distinct linguistic regions, each with its own culture. Romansh constitutes a special case, as it is only spoken by 0.5% of the Swiss population, mostly in the canton of Graubünden. While most cantons will identify predominantly with one language, there are some (Fribourg, Valais, Bern, and Graubünden) that have quite a diverse linguistic environment. The Repo and App Structure In order to simplify the setup for this tutorial, I will be using next.js to create an app scaffold. To get started, install these dependencies: $ npm install react react-dom react-simple-maps victory next --save In terms of scaffolding, here’s what the app structure will look like: ┬ app├─┬ data│ └── index.js├─┬ pages│ └── index.js├─┬ static│ └── cantons.json├── node_modules└── package.json Don’t forget to add the next script in . dev package.json // ./package.json...scripts: {"dev": "next",...}... Setting up a Basic Map Every mapping visualisation starts with a good base map, and a solid TopoJSON file. If you are new to TopoJSON, check out the here. If you are new to creating your own TopoJSON files, you can check out my article on . docs How to convert and prepare TopoJSON files for interactive mapping with d3 The original shapefile used to create the TopoJSON file came from . gadm.org The projection for the map of Switzerland was derived from , made by Mike Bostock. In order to use the with , we need to load in . Since uses d3-geo internally, it should already be installed. Using from d3-geo, you can easily create a custom projection, and pass it into the prop of . this block Albers projection react-simple-maps d3-geo react-simple-maps geoAlbers projection <ComposableMap /> You can now run the app. Just type in the terminal, and go to . $ npm run dev [http://localhost:3000](http://localhost:3000/) The Data for this tutorial comes from the . In order to not mess with asynchronous data loading, this small dataset can be easily converted into a object, and loaded in as a normal script. Here’s an excerpt: The dataset Swiss Federal Statistics Office javascript // ./data/index.js export const cantons = [{id: 25,canton: "Zurich",coordinates: [ 8.6356, 47.3595 ],languages: [{ name: "German", value: 83.1 },{ name: "French", value: 3 },{ name: "Italian", value: 5.9 },{ name: "Romansh", value: 0.4 },]},... The data can now be easily imported into the app: // ./pages/index.js import { cantons } from "../data"... Rendering Victory Charts As Markers The final step is now to use the data to render out components and render charts into those markers. react-simple-maps <Marker /> <VictoryPie /> The two elements added on lines , are just for decorative purposes. Note: <circle /> 67-68 Conclusion This tutorial covered how to use together with charts to create a nice little map of Switzerland’s language distribution by canton. The two libraries play well together, so give it a try. Thanks for reading, and happy mapping! ;) react-simple-maps Victory Resources For the complete code example, see . this github repo For more information on declarative mapping, check out . How to create pure react SVG maps with topojson and d3-geo For information on how to convert shapefiles into TopoJSON to use with , or d3, check out . react-simple-maps How to convert and prepare TopoJSON files for interactive mapping with d3 More information about react-simple-maps More information about Victory. Mentions Thanks to the folks at , for creating the awesomeness that is and of course , and for their work on d3 and for being a continuous source of inspiration. Formidable Victory Mike Bostock Jason Davies
