Skip to content

Instantly share code, notes, and snippets.

View README.md

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

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: http://www2.jpl.nasa.gov/srtm/
# (which appears to have multiple versions of files).
View README.md

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

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;
View index.html
<!DOCTYPE html>
<html>
<head>
<title>Testing d3.js in Leaflet.js</title>
<link rel="stylesheet" href="leaflet.css"></link>
<script src="http://mbostock.github.com/d3/d3.v2.js?2.8.1"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>
<style type="text/css">
svg , g
View README.md

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.

@vlandham
vlandham / citysearch.py
Created Dec 6, 2012 — forked from MoritzStefaner/citysearch.py
Search where people are moving in Germany
View citysearch.py
# coding: utf-8
# requires: pattern http://www.clips.ua.ac.be/pages/pattern
from pattern.web import *
import csv
import sys
# yeah I know
reload(sys)
sys.setdefaultencoding("utf-8")
@vlandham
vlandham / README.md
Created Dec 5, 2012 — forked from mbostock/.block
Focus+Context via Brushing
View README.md

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
vlandham / index.html
Created Nov 29, 2012 — forked from mbostock/.block
Satellite Projection
View index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.graticule {
fill: none;
stroke: #777;
}
.boundary {
@vlandham
vlandham / index.html
Created Nov 7, 2012 — forked from mbostock/.block
move letters
View index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
text {
font: bold 100px monospace;
cursor: move;
}
.enter {