d3-mapbox-template
A simple D3-Mapbox choropleth map that uses D3 transitions to toggle between a D3 map view and a web tile map view on zoom.
Dependencies
This template uses gulp and browserify as a project scaffolding tool. To use it, you'll need node and gulp installed.
To install node with homebrew:
brew install node
To install gulp globally:
npm install -g gulp
Installing and using this repo
To install project dependencies in package.json:
npm install
To install additional dependencies and devDependencies:
npm install <PKGNAME> --save
npm install <PKGNAME> --save-dev
To run gulp:
gulp
The default gulp
command launches watchify to monitor changes in src, browserify to compile bundled.js in build & a server that refreshes automatically.
To minify files for production:
gulp build
The gulp build
command compresses generated js/css. Must have run the default gulp
command at least once.
About the data
After some time spent hunting for a data set that lends itself well to chloropleth mapping, I found unemployment rates for 2013 at the county level here.
The data is already processed for you, but if you're interested in the process of downloading, cleaning and joining the data to a county json file, run bash process-data.sh
in the bin directory. This script will run some batch processing tools (csvkit, ogr2ogr) in addition to a python script for slicing and cleaning our data and Make for generating our counties.json file, which we use to build our frontend presentation.