Skip to content

Instantly share code, notes, and snippets.

Noah Veltman veltman

Block or report user

Report or block veltman

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@veltman
veltman / tiles.md
Last active Sep 27, 2019
Making a big image zoomable
View tiles.md

Making a big image zoomable

When you have a giant image and you want to make it easy to pan and zoom without downloading the whole 50MB image into someone's browser, a nice workaround is to cut that image into tiles at different zoom levels and view it as it were a map. An example where I've used this technique is The "Snowpiercer" Scenario.

One way to cut your big image into the requisite tiles is with gdal2tiles.py.

Alternatively, this Node script will do the cutting after you install node-canvas and mkdirp:

const fs = require("fs"),
@veltman
veltman / feuds.csv
Created Feb 26, 2019
Bios with feuds, excluding professional wrestlers
View feuds.csv
name category
Drake Rappers
50 Cent Rappers
Lil Wayne Rappers
Kendrick Lamar Rappers
Jay-Z Rappers
Foxy Brown Rappers
Nas Rappers
Queen Latifah Rappers
Meek Mill Rappers
@veltman
veltman / README.md
Last active May 29, 2019
Grouped clustering
View README.md

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 / README.md
Last active Oct 27, 2019
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 should-follow.js
// npm install twit
const Twit = require("twit");
// Fill this in
const T = new Twit({
consumer_key: "???",
consumer_secret: "???",
access_token: "???",
access_token_secret: "???"
});
@veltman
veltman / index.html
Last active Oct 3, 2018
d3 Workshop - Rosling
View index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<script>
@veltman
veltman / index.html
Last active Oct 3, 2018
d3 Workshop - Selection playground
View index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="test"></div>
<script>
// Your script goes here! Make some divs
@veltman
veltman / README.md
Last active Mar 13, 2018
Centerline label placement #2
@veltman
veltman / README.md
Last active Oct 27, 2019
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
Created Jan 2, 2018
Departures board (slow)
View README.md
You can’t perform that action at this time.