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.
# 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") |
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.
<!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 |
// 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.
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). |
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
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 |