Skip to content

Instantly share code, notes, and snippets.

@veltman
veltman / README.md
Last active May 1, 2021
Configurable hexbins
View README.md

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

@veltman
veltman / README.md
Last active Mar 9, 2021
Generating an SVG from a set of shapefiles
View README.md

Generating an SVG from a set of shapefiles

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:

https://rmgsc.cr.usgs.gov/outgoing/GeoMAC/2017_fire_data/California/Thomas/

@veltman
veltman / README.md
Last active Mar 2, 2021
Swoopy arrows along a path
View README.md

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

@veltman
veltman / README.md
Created Sep 2, 2017
SVG animation to video
View README.md

Converting an SVG animation to a video with the MediaRecorder API and a hidden canvas.

Drawing frames from img elements can introduce an extra delay, so this version generates all the frames upfront and then renders them in a loop with requestAnimationFrame().

See also: Canvas animation to video

@veltman
veltman / README.md
Last active Feb 8, 2021
Responsive SVG with sticky text
View README.md

Keeping text size sticky while making an SVG responsive with viewBox.

  1. Set the SVG's viewBox to its original width and height, and its width to 100%, so it fills its container.
  2. On resize, find out the SVG's new width.
  3. Update the SVG's height to preserve the aspect ratio.
  4. Use transform to 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()
@veltman
veltman / README.md
Last active Jan 2, 2021
Stippling #2
View README.md

Another attempt at stippling with a more basic relaxation approach but using multiple dot sizes to add texture.

  1. Position starting points with rejection sampling, using the grayscale image as the density function.
  2. Use Lloyd's algorithm to get a relaxed Voronoi diagram from the starting points.
  3. Size the dots based on the darkness of the pixel at their position, then shrink them as much as necessary to avoid collisions - this could be done all at once but it seems to produce some splotchy artifacts, so instead they're shrunk a little bit at a time.

The heavy computation is done in a web worker to avoid locking up the page, and takes about 15-20 seconds to complete.

See also: Voronoi relaxation, Stippling, Philippe Rivière's CCPD Snowden

View example.js
var parseCSV = require("./parse-csv.js");
// Call the function, pass a callback as the second arg
parseCSV("data.csv",function(err,rows){
// Did something go wrong?
if (err) {
throw new Error(err);
}
@veltman
veltman / README.md
Last active Dec 18, 2020
Gif rendering - dynamic SVG
View README.md
@veltman
veltman / README.md
Last active Dec 18, 2020
Centerline label placement
View README.md

Implementing a variation of Joachim Ungar's curved label placement method described here. The basic process is:

  1. Turn the shape into a polygon of evenly-spaced points.
  2. Generate a Voronoi diagram of those points.
  3. Clip the edges.
  4. Turn the edges into a graph.
  5. Find the "longest shortest path" between any pair of perimeter nodes.
  6. Smooth/simplify that path a bit.
  7. Place text along the smoothed centerline with a <textPath>.
@veltman
veltman / README.md
Last active Dec 18, 2020
Dynamic CSS line animation
View README.md