Skip to content

Instantly share code, notes, and snippets.

View veltman's full-sized avatar

Noah Veltman veltman

655 followers · 0 following
View GitHub Profile
@veltman
veltman / README.md
Created September 2, 2017 12:31
SVG animation to video

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 April 29, 2024 21:13
Stippling #2

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

@veltman
veltman / README.md
Last active March 11, 2024 16:22
Departures board
@veltman
veltman / README.md
Last active February 23, 2024 18:10
Grouped clustering

Point clustering with the constraint that points should only be clustered within borders.

  1. Use supercluster to cluster the points within each boundary.
  2. Use a force simulation to avoid collisions between points along the borders.
@veltman
veltman / .block
Last active February 21, 2024 10:30
Dorling cartogram transitions #2
height: 600
@veltman
veltman / index.html
Last active January 17, 2024 16:32
CMYK halftone printing
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
var width = 960,
height = 500;
var svg = d3.select("body").append("svg")
@veltman
veltman / README.md
Created September 2, 2017 12:00
Canvas animation to video
@veltman
veltman / Printable Markdown
Last active December 15, 2023 10:54
Bookmarklet to create a printable version of a Markdown file on GitHub. Create a bookmark in your toolbar with this code as the URL, then click the bookmark while viewing a Markdown document (like a README) on GitHub to strip away the rest of the page for a clean, printable version. Or, if what I just said sounded scary, visit this page: http://…
javascript:(function(){ document.body.innerHTML = document.getElementById("readme").getElementsByTagName("article")[0].outerHTML; })();
@veltman
veltman / README.md
Last active July 16, 2023 21:58
Gas prices per gallon vs. per mile

A variation on Hannah Fairfield's classic connected scatterplot on gas prices. Shows the different trends for cost as "dollars per gallon" and cost as "dollars per mile." The peaks and valleys are similar, but factoring in steadily increasing fuel efficiency makes recent gas price increases look less extreme relative to to the 1979 energy crisis and earlier years.

Miles per capita computed from US Census population estimates and FWHA's Vehicle Miles Traveled. Fuel prices per gallon from Table 9.4 of the EIA's Energy Review. Prices look a little different than the NYT chart because it uses the average regular grade price throughout (presumably leaded for earlier y

@veltman
veltman / README.md
Created January 2, 2018 03:08
Departures board (slow)