This map shows the high estimate for the size of each crowd based on this spreadsheet which is being collected by Prof Jeremy Pressman and others.
After downloading the spreadsheet as a csv(ok, after unsuccessfully trying to use google's sheet "feeds" to load it dynamically as json), I used jupyter notebook for data processing (see wmcrowds.ipynb) and then mapbox-gl-js to actually create the map.
mapbox-gl-js uses the WebGL so it's crazy fast. It also makes it relatively simple to do things like scale the displayed data by both the current zoom level and the sqrt of it's magnitude.
Less simple was allowing the user to click on circles to display the county name and population. queryRenderedFeatures is meant for this, but as this issue notes, it's broken for "data-driven circles" and other similar cases.
To fix this, I wrote a quick kludge that computes the distances of all the features returned by queryRenderedFeatures to the click, and picks the closest one.
The map wouldn't load at all on my iPhone. The safari dev console threw no errors, until I tried to manually create a map in the console, which threw Error: Map canvas (1960x2922) is larger than half of gl.MAX_RENDERBUFFER_SIZE (2048). These issues explain some, but the simplest fix was to simply rollback mapboxgl a few versions to 0.29.0 which was before this bug was introduced.
http-server and xip.io were super helpful for debugging this.
I was working on a larger project and extracted this. Because I'm lazy, I left the project structure, build system, and react/jsx rendering as they were, though they are largely unnecessary here.
To get started, install the dependencies and start the dev server
npm install
npm start
``
Created by [Zach Schwartz](https://twitter.com/zischwartz)