Data, Maps, Usability, and Performance

D3 Map Starter Kit

Last updated on September 7, 2016 in Development

D3 Map Framework

I have taken another look at my responsive D3 map and had some time today to fix a few issues and make some enhancements. Normally, I would have updated my last post with the changes, but I wanted to take some time to explain the individual upgrades. Previously, I really focused on creating a world map with D3 that can not only be responsive in terms of screen size but also make that responsiveness work with zoom and pan limits. I added country names and colors to the geo data and included a simple tooltip feature for each country. Now, I am expanding on that with many enhancements, cross-browser fixes, and more simplified code.

Check out the new D3 World Map Template
Here is the updated D3.js v4 World Map Template


Here is a list of upgrades:

I have simplified the code overall and also optimized the TopoJSON file using MapShaper. Before simplifying some lines, I have added the 5 unidentified regions/countries/islands to the geo data and separated French Guyana from France. This is because this region is in a totally different continent, even if it belongs to France. I have added graticule lines and shown how to draw a specific line on the map, the equator, which can be extended to other lines like the prime meridian, tropic of cancer, and tropic of Capricorn.

When you click anywhere on the map, the console (developer tools console) will show the latitude and longitude of that point provided by a geo translation function. I have also added a addpoint function which accepts geo coordinates and text and plots locations and names on the map. The map is loading an external CSV file with some capitals to demonstrate how to use that function. Finally, the map now renders well in latest IE and you can zoom in and out using oceans and land. Here is the source code in a zip file.

Tags: , ,

Facebook Twitter Hacker News Reddit More...