D3 Map Starter Kit
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:
- Simplified a lot of the code
- Fixed cross-browser issues
- Fixed zoom so that it works on oceans and land
- Fixed stroke to properly change country borders according to zoom level
- Added graticule and an equator line to the map
- Added geo translation function to the map on mouse click
- Separated French Guyana from France in TopoJSON
- Added missing undefined countries (Kosovo, Somaliland, Northern Cyprus, Christmas Island, Cocos Islands, and Siachen Glacier)
- Added a function to easily plot any point with or without text (and provided an example of plotting some capital cities via an external CSV file)
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.
