Skip to content

Instantly share code, notes, and snippets.

View veltman's full-sized avatar

Noah Veltman veltman

672 followers · 0 following
View GitHub Profile
@veltman
veltman / README.md
Last active April 19, 2023 16:32
Generating an SVG from a set of shapefiles

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 / tiles.md
Last active September 27, 2019 22:12
Making a big image zoomable

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 February 26, 2019 17:27
Bios with feuds, excluding professional wrestlers
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 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 / 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 / should-follow.js
Created April 6, 2018 18:44
// 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 October 3, 2018 19:13
d3 Workshop - Rosling
<!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 October 3, 2018 19:13
d3 Workshop - Selection playground
<!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 March 13, 2018 06:38
Centerline label placement #2
@veltman
veltman / README.md
Last active December 18, 2020 08:51
Centerline label placement

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>.