Skip to content

Instantly share code, notes, and snippets.

vlandham /
Created Dec 5, 2012 — forked from mbostock/.block
Focus+Context via Brushing

This examples demonstrates how to use D3's brush component to implement focus + context zooming. Click and drag in the small chart below to pan or zoom.

vlandham /
Created Dec 6, 2012 — forked from MoritzStefaner/
Search where people are moving in Germany
# coding: utf-8
# requires: pattern
from pattern.web import *
import csv
import sys
# yeah I know

Brushing makes more sense for quantitative dimensions. It’s possible to use a brush to select categorical values, as shown here, though I’d recommend using per-value toggles instead. This way, users can pick arbitrary sets of values, rather than being forced to pick contiguous ranges.

View index.html
<!DOCTYPE html>
<title>Testing d3.js in Leaflet.js</title>
<link rel="stylesheet" href="leaflet.css"></link>
<script src=""></script>
<script src=""></script>
<style type="text/css">
svg , g
View math_demo.js
// Turning an angle into a point on a unit
// circle and then back again
// convert from degrees to radians
D2R = Math.PI / 180;
// convert from radians to degrees
R2D = 180 / Math.PI;
// our angle
angle = 30;

Using d3.geo.tile to display raster image tiles underneath some TopoJSON vectors, and d3.behavior.zoom for pan & zoom.

View Makefile
all: hill-relief.jpg costarica_min_topo.json
# -------------
# Relief raster
# -------------
# Notice the `zip` file requirements here have no download.
# You will need to search for them online. They are from the
# SRTM project:
# (which appears to have multiple versions of files).

A short code excerpt from this visualization I created for the longform article “Iouri Podladtchikov – You only fly once” by the Neue Zürcher Zeitung.

It's a very simple way to create an interactive animation based on video material. Hover over the image to go through the animation.

I used Final Cut Pro to export the frames of a short video sequence, which I then stitched together into a single film strip using ImageMagick: convert folder-of-stills/* +append filmstrip.jpg

vlandham /
Last active Sep 30, 2019 — forked from awoodruff/
Head Projections Remix

A quick hack on the beautifully executed projection example from Andy Woodruff. I just wanted to see them all on one screen.

Click the Open in new window button to see them all.

Novel code Inspired once again by Jason Davies.

Andy's original text:

We've all seen the projected head from Elements of map projection with applications to map and chart construction, but the authors in 1921 did not have D3 to help them show a full range of weird distorted faces. This is based on the Map Projection Transitions example by Jason Davies.

# Requires ImageMagick
# Converting the source from JPEG to PNG - if necessary
convert my_src_image.jpg my_src_image.png
# Option A
# - Requires a temporary intermediate file
# - Drill more than 10 might result in poor results