Lars Kotthoff larskotthoff

Adapting d3.geo.tile to show OpenStreetMap vector tiles. See also the static example.

This line chart is constructed from a TSV file storing the daily average temperatures of New York, San Francisco and Austin over the last year. The chart employs conventional margins and a number of D3 features:

d3.tsv - load and parse data
d3.time.format - parse dates
d3.time.scale - x-position encoding
d3.scale.linear - y-position encoding
d3.scale.category10, a d3.scale.ordinal - color encoding
d3.extent, d3.min and d3.max - compute domains
[d3.k

These donut charts are constructed from a CSV file storing the populations of various age groups in different states. (As a practical note, a normalized stacked area chart facilitates easier comparison of values.) The chart employs a number of D3 features:

d3.csv - load and parse data
d3.scale.ordinal - color encoding
d3.keys - compute column names
d3.svg.arc - display arcs
d3.layout.pie - compute arc angles from data

date	New York	San Francisco	Austin
20111001	63.4	62.7	72.2
20111002	58.0	59.9	67.7
20111003	53.3	59.1	69.4
20111004	55.7	58.8	68.0
20111005	64.2	58.7	72.4
20111006	58.8	57.0	77.0
20111007	57.9	56.7	82.3
20111008	61.8	56.8	78.9
20111009	69.3	56.7	68.8

This simple area chart is constructed from a TSV file storing the closing value of AAPL stock over the last few years. The chart employs conventional margins and a number of D3 features:

d3.tsv - load and parse data
d3.time.format - parse dates
d3.time.scale - x-position encoding
d3.scale.linear - y-position encoding
d3.extent and d3.max - compute domains
d3.svg.axis - display axes
d3.svg.area - display area shape

A commented example of tweening arcs; see Pie Chart Update, II and Arc Tween (Clock) for older examples. (There’s also The Amazing Pie and Donut Transitions if you want to get fancy.) See the API reference for transition.attrTween and transition.call, and my tutorial Working with Transitions, for more technical details.

This unusual clock in polar coordinates is based on a Flash screensaver by pixelbreaker. See also the earlier Protovis version.

	Code derived from the d3.js 'force' example:

	The miserables.json file contains the weighted network of coappearances of
	characters in Victor Hugo's novel /Les Miserables/. Nodes represent characters
	as indicated by the labels, and edges connect any pair of characters that
	appear in the same chapter of the book. The values on the edges are the number
	of such coappearances. The data on coappearances were taken from D. E. Knuth,
	"The Stanford GraphBase: A Platform for Combinatorial Computing",
	Addison-Wesley, Reading, MA (1993).

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<style type="text/css">
	.axis path,
	.axis line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;