Data-map-d3 documentation¶
Welcome to the documentation of the data-map-d3 tutorial. This documentation covers the steps taken to create a simple data map using D3.js.
The final result can be seen here: http://lvonlanthen.github.io/data-map-d3
The code is available here: https://github.com/lvonlanthen/data-map-d3
This tutorial was created for the webmap workshop being held on January 20-21 2016 at the University of Bern.
Note
Unfortunately, I was not able to add detailed comments for all the steps yet. The code is there, but additional explanations are sometimes missing. I hope to finde time soon to complete this.
Contents:
- Step 1: Basic document structure
- Step 2: First map
- Step 3: Dynamic map extent
- Step 4: Add some colors
- Step 5: Dynamic color domain
- Step 6: Zoom
- Step 7: Show the name on mouseover
- Step 8: Tooltip
- Step 9: Show details of features
- Step 10: A bit of styling
- Step 11: Responsive map and instructions
- Step 12: Dropdown to select map key
- Step 13: Declare sources and show instructions again
- Step 14: Map legend