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
| 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). |
Using d3.geo.tile to display raster image tiles underneath some TopoJSON vectors, and d3.behavior.zoom for pan & zoom.
| // 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; |
| <!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 |
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.
| # 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") |
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.
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| .graticule { | |
| fill: none; | |
| stroke: #777; | |
| } | |
| .boundary { |
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| text { | |
| font: bold 100px monospace; | |
| cursor: move; | |
| } | |
| .enter { |