This tutorial will show you how to convert publicly available shapefiles to to create interactive maps with / . I will show you how to do this without the use of the line so you can get into experimenting with d3 as fast as possible. If you are interested in working with shapefiles and TopoJSON in a more advanced fashion, I suggest you take a look at Mike Bostock’s . TopoJSON d3 d3-geo command recent multipart tutorials on command-line cartography World maps One of the first maps you may want to get your hands on is the world . A great resource for this is , a public domain map dataset available at 1:10m, 1:50m, and 1:100 million scales. For each scale (level of detail), Natural Earth provides cultural, physical, and raster maps. map Natural Earth Step 1 — Getting a map Select your preferred map according to level of detail (1:10m, 1:50m, and 1:100m) and category (cultural, physical and raster). When building maps for the web the level of detail is important as it will impact file size and rendering speed significantly, especially when rendering maps with . SVG To create world maps based on country data ( , , etc.) you should choose the cultural vectors. In the next steps I will create a TopoJSON map based on the . GDP population 1:50m cultural vectors Admin 0 countries map Step 2 — Choosing what to use The downloaded folder will contain a number of files with different extensions such as .dbf, .prj, .shp, and .shx. To convert the shapefile into TopoJSON, you will need the .shp file, as well as a .dbf file (in case it’s available). Step 3 — Import the shapefiles into mapshaper To convert shapefiles into TopoJSON, you can use , a tool for shape simplification and conversion from one geo format to another. It supports Shapefiles, GeoJSON and TopoJSON formats. While mapshaper can be used on the commandline, the online tool also provides a nice visual interface for the simplification process. mapshaper Import the files ending in .shp and .dbf into mapshaper. Make sure that the “detect line intersections” option is checked. You can also check “snap vertices” to fix topology errors. Once you import the .shp and .dbf files into mapshaper you should see a preview of the map. Step 4 — Optional step: Simplify your map The simplify option allows you to adjust the level of detail by dragging a slider. The more you simplify the less precision and detail you will have in your final map. A simplified map will be smaller and often simplifying a map (sometimes even by 50%) will not result in any visible loss of detail. Step 5 — Exporting your TopoJSON map Once you are happy with the level of detail on your map, export your map as a TopoJSON file. You’re done! Country level and lower administrative level maps World maps are great, but sometimes you want to visualize a more detailed view of a particular region, country, or even a more specific administrative area. If you are doing non-commercial work, one great resource for individual country shapefiles is the website. Global Administrative Areas The site offers maps in a number of formats. Make sure to choose shapefile as a format when downloading the files from . here Once you unzip the downloaded files, you will have multiple sets of shapefiles (admin0, admin1, admin2… etc). These represent the different . Using the United States as an example, admin0 would refer to the country, admin1 to the individual states, admin2 to counties etc. administrative divisions Once you decide which level to choose, you can repeat steps 2–5, just like with the world map. If you have any suggestions for other resources where to get shapefiles, please drop a comment below and I will try to include them into the article. Thank you for reading and if have any questions or comments reply below. Happy mapping!

How to convert and prepare TopoJSON files for interactive mapping with d3

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

How to set up a postcss pipeline with variable sharing in gulp

Javascript Renderers in All Shapes and Sizes

How (and why) to use D3 with React

How to create an interactive vote swing viewer in D3 (Part 1)

How to create an interactive vote swing viewer in D3 (Part 2)

How to recreate GitHub’s contribution graph

How to set up a postcss pipeline with variable sharing in gulp

Javascript Renderers in All Shapes and Sizes

How (and why) to use D3 with React

How to create an interactive vote swing viewer in D3 (Part 1)

How to create an interactive vote swing viewer in D3 (Part 2)

How to recreate GitHub’s contribution graph

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps