Experimenting with an in-browser hexbinner.
To dos: add k-means classification option, allow drag-and-drop data uploads, projection selection, more color scales
See also: Resizing hexbin test
The USGS provides detailed downloads of fire perimeters, with timestamped files that can be used to show the spread of a major fire over time.
Using the 2017 Thomas fire as an example, we'll process this data into a single SVG file with all the different perimeter measurements.
This index page contains links to a series of shapefiles of the fire boundary, each one with a timestamp:
Animating arrows along an arbitrary path. Basically a combination of Seamless animated dash and Animating along a path - tweens the
stroke-dashoffset on a loop and computes the translate/rotation of the arrowheads at the same time. Performance is not great, especially in Firefox...
See also: Directional arrows
Keeping text size sticky while making an SVG responsive with
viewBoxto its original width and height, and its width to 100%, so it fills its container.
transformto scale up the text by the inverse. For example, if the new width is 2/3 of the original, make the text 3/2 scale.
Instead of keeping the text size fixed, you could constrain it to some other range so that it shrinks but more slowly than the rest of the SVG. For example:
var textScaleFactor = d3.scale.linear()
Another attempt at stippling with a more basic relaxation approach but using multiple dot sizes to add texture.
The heavy computation is done in a web worker to avoid locking up the page, and takes about 15-20 seconds to complete.
Implementing a variation of Joachim Ungar's curved label placement method described here. The basic process is: