Javascript/Maps
From charlesreid1
Planning out some simple map visualizations using Leaflet, build on those.
Also see Census Data and Tax Migration Data
Contents
Why maps?
The main point of these map visualizations is to learn Leaflet, D3, and Javascript. The advantages of using maps:
- no lack of interesting data sets
- data sets get very large very fast, so provides motivation for learning to bundle data, deal with "promises" etc.
- maps are mainly interesting when linked to another component, so focus on learning to link pieces
Components
Building maps in Javscript requires a few moving parts.
First, the Javascript dependency manager. Unconventionally, I'm staying as far away from Javascript package managers as possible. No Bower, Grunt, Backbone, Gulp, Node, or whatever other stupid framework is most popular these days. Just use Javascript.
Second, the static page content generator. Pages are managed using Pelican. The setup is basically to create a separate folder with all files related to the map application, and keep everything as minimal and standalone as possible. Creating a map should not require modifying the pelican theme.
Third, the Javascript/css/html files for the map itself. These are managed by Pelican and sit together in a single directory.
Phases
Phase 1: Map Only
Simple map
- leaflet with mapbox tiles
- pelican javascript css files workflow
on click, popup with latitude longitude
Final link: https://git.charlesreid1.com/d3/maps/src/master/map-mouse
Active map
- leaflet
- geojson data
on click, popup with shape info
Final link: https://git.charlesreid1.com/d3/maps/src/master/map-shapes
Cards map
- leaflet
- geojson data
on click, modify another element
Final link: https://git.charlesreid1.com/d3/maps/src/master/map-cards
Hover map
- leaflet
- geojson data
- on hover, change color
on click change color
Final link: https://git.charlesreid1.com/d3/maps/src/master/map-hover
Phase 2: Map and C3
C3 is good for very simple, no-nonsense line/area/bar/donut charts. C3 is a shut-up-and-be-happy-with-what-you-got sort of setup - near zero customization, everything through the API, no way to connect components. Either you're happy with the C3 chart, or you find a D3 chart that does exactly what you want and have at it because the guts are right there.
Simple map and C3 chart:
- leaflet
- c3
- chart data is static
only chart title is linked to county maps- NOTE: This illustrates how stupidly difficult it is to get C3 to interact with anyone else on the page.
Code
Code for each map is being staged here: https://git.charlesreid1.com/d3/maps
Final deployed maps are checked into charlesreid1.com repo here: https://git.charlesreid1.com/charlesreid1/charlesreid1.com
Specifically, example map is here: https://git.charlesreid1.com/charlesreid1/charlesreid1.com/src/charlesreid1-src/pelican/examplemap
Final version of example map is here: http://charlesreid1.com/examplemap/
Lessons
I always try to do a post-mortem on why D3 and Javascript make life so difficult when building visualizations.
Those are here: D3