Lars Kotthoff larskotthoff

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 brush snaps to day boundaries. When the user releases the brush, the brush fires a brushend event, allowing a listener to adjust the brush extent. Using the new brush transitions released in D3 3.3, the brush smoothly interpolates from the original extent to the rounded extent. Compare this approach to using immediate snapping while brushing.

This example demonstrates how to add and remove nodes and links from a force layout. The graph initially appears with three nodes A, B and C connected in a loop. Three seconds later, node B is removed, along with the links B-A and B-C. At six seconds, node B is reintroduced, restoring the original links B-A and B-C. This example uses the general update pattern for data joins.

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

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 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

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

	<!DOCTYPE html>
	<meta charset="utf-8">
	<title>Rate by demographic</title>

	<style>



	.axis text {
	font: 10px sans-serif;

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<style>

	div .tests {
	float: none;
	margin:auto;
	text-align: center;