Matthew Clemens enjoylife

A line chart with mouseover so that you can read the y-value based on the closest x-value. The x-value is found using d3.mouse and scale.invert. The y-value is then found by bisecting the data.

This example is the third of three in the Path Transitions tutorial; see the previous example for context.

When transitioning a transform on a path using basis interpolation, you must clip the path by two additional control points so that the change in tangent is not visible while the path slides left.

This example demonstrates how to use d3.dispatch to coordinate views with shared state. Here, a bar chart and a pie chart show two views of the same data: population by age group for a given state. (For brevity, a legend is omitted.) This example uses two custom events: a load event when data is available, and a statechange event when the displayed state is changed.

Custom events allow loose coupling of components: views can listen for events and update the DOM accordingly, without needing to explicitly tie each view together. When the drop-down menu changes, a statechange event is triggered which causes any interested listeners to be notified.

Each view uses a unique name, such as "bar" or "pie", so that multiple listeners can be notified for a single event. (D3 requires listeners to be named, rather than anonymous, so that it’s easier to remove or inspect registered listeners.) Thus, the "load.menu", "load.bar" and "load.pie" listene

This variation of a bivariate area chart uses clipping to alternate colors. When New York is warmer than San Francisco, the difference between the two is filled in green. When San Francisco is warmer, the difference is filled in red. A similar technique was used by William Playfair all the way back in 1786.

This chart compares the BRIC countries (Brazil, Russia, India and China) with a new group of upstarts, MIST (Mexico, Indonesia, South Korea, Turkey). The data are from the World Bank. It was my attempt to achieve object constancy for multiple sets of time series data. I used d3.nest() to sort one big CSV file based on each economic indicator, then used d3.key() on the header row (the countries) to make ensure constancy. Check the boxes at the top to highlight the country groups. An interpretation of this visual can be found on my website.

This example demonstrates how to use d3.dispatch to coordinate views with shared state. Here, a bar chart and a pie chart show two views of the same data: population by age group for a given state. (For brevity, a legend is omitted.) This example uses two custom events: a load event when data is available, and a statechange event when the displayed state is changed.

Custom events allow loose coupling of components: views can listen for events and update the DOM accordingly, without needing to explicitly tie each view together. When the drop-down menu changes, a statechange event is triggered which causes any interested listeners to be notified.

Each view uses a unique name, such as "bar" or "pie", so that multiple listeners can be notified for a single event. (D3 requires listeners to be named, rather than anonymous, so that it’s easier to remove or inspect registered listeners.) Thus, the "load.menu", "load.bar" and "load.pie" listene

This variation of a simple bar chart adds sorting with staggered delay and translucency to improve readability during the transition. This technique is recommended by Heer & Robertson. Use the checkbox in the top right to turn sorting on or off.

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<style>
	body {
	font: 14px sans-serif;
	}
	.axis path, .axis line {
	fill: none;

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

	.circle {
	fill: none;
	stroke: red;
	stroke-width: 2px;
	}

	<html>
	<head>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js"></script>
	</head>
	<body>
	<div id="chart">
	</div>
	<script type="text/javascript">
	var w = 960,