Lars Kotthoff larskotthoff

Example illustrating zoom and pan with a "rolling" Mercator projection. Drag left-right to rotate projection cylinder, and up-down to translate, clamped by max absolute latitude. Ensures projection always fits properly in viewbox.

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.

	Zipcode	Jan 2000	Feb 2000	Mar 2000	Apr 2000	May 2000	Jun 2000	Jul 2000	Aug 2000	Sep 2000	Oct 2000	Nov 2000	Dec 2000	Jan 2001	Feb 2001	Mar 2001	Apr 2001	May 2001	Jun 2001	Jul 2001	Aug 2001	Sep 2001	Oct 2001	Nov 2001	Dec 2001	Jan 2002	Feb 2002	Mar 2002	Apr 2002	May 2002	Jun 2002	Jul 2002	Aug 2002	Sep 2002	Oct 2002	Nov 2002	Dec 2002	Jan 2003	Feb 2003	Mar 2003	Apr 2003	May 2003	Jun 2003	Jul 2003	Aug 2003	Sep 2003	Oct 2003	Nov 2003	Dec 2003	Jan 2004	Feb 2004	Mar 2004	Apr 2004	May 2004	Jun 2004	Jul 2004	Aug 2004	Sep 2004	Oct 2004	Nov 2004	Dec 2004	Jan 2005	Feb 2005	Mar 2005	Apr 2005	May 2005	Jun 2005	Jul 2005	Aug 2005	Sep 2005	Oct 2005	Nov 2005	Dec 2005	Jan 2006	Feb 2006	Mar 2006	Apr 2006	May 2006	Jun 2006	Jul 2006	Aug 2006	Sep 2006	Oct 2006	Nov 2006	Dec 2006	Jan 2007	Feb 2007	Mar 2007	Apr 2007	May 2007	Jun 2007	Jul 2007	Aug 2007	Sep 2007	Oct 2007	Nov 2007	Dec 2007	Jan 2008	Feb 2008	Mar 2008	Apr 2008	May 2008	Jun 2008	Jul 2008	Aug 2008	Sep 2008	Oct 2008	Nov 2008	Dec 2008	Jan 2009	Feb 2009	Mar 2009	Apr 2009	May 2009

This example demonstrates how to create a gradient that follows a stroke. This technique is sometimes used to indicate directionality along a curved edge, such as with hierarchical edge bundling.

To start, take any SVG path element and uniformly sample points along the path using getPointAtLength. (This method can also be used for path tweening.) Then, for each segment between adjacent points, compute the miter joint via line-line intersection. Lastly fill each segment by interpolating the start and end colors, here green to red, using the normalized length t along the path. Although each segment is a constant color, there are many segments to give the appearance of a continuous gradient.

This example uses a thin stroke in addition to filling the segments. This avoids antialiasing artifacts due to most

This example shows how it is possible to use a D3 sunburst visualization (partition layout) with data that describes sequences of events.

A good use case is to summarize navigation paths through a web site, as in the sample synthetic data file (visit_sequences.csv). The visualization makes it easy to understand visits that start directly on a product page (e.g. after landing there from a search engine), compared to visits where users arrive on the site's home page and navigate from there. Where a funnel lets you understand a single pre-selected path, this allows you to see all possible paths.

Features:

works with data that is in a CSV format (you don't need to pre-generate a hierarchical JSON file, unless your data file is very large)
interactive breadcrumb trail helps to emphasize the sequence, so that it is easy for a first-time user to understand what they are seeing
percentages are shown explicitly, to help overcome the distortion of the data that occurs wh

This simple bar chart is constructed from a TSV file storing the frequency of letters in the English language. The chart employs conventional margins and a number of D3 features:

d3.tsv - load and parse data
d3.format - format percentages
d3.scale.ordinal - x-position encoding
d3.scale.linear - y-position encoding
d3.max - compute domains
d3.svg.axis - display axes

This stacked bar chart is constructed from a CSV file storing the populations of different states by age group. The chart employs conventional margins and a number of D3 features:

d3.csv - load and parse data
d3.scale.ordinal - x-position encoding and color encoding
d3.scale.linear - y-position encoding
d3.format - SI prefix formatting (e.g., “10M” for 10,000,000)
d3.max - compute domains
d3.keys - compute column names
d3.svg.axis - display axes

This simple bar chart is constructed from a TSV file storing the frequency of letters in the English language. The chart employs conventional margins and a number of D3 features:

d3.tsv - load and parse data
d3.format - format percentages
d3.scale.ordinal - x-position encoding
d3.scale.linear - y-position encoding
d3.max - compute domains
d3.svg.axis - display axes

	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<title>Hexagons Test</title>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<style type="text/css">
	svg {
	border: solid 1px #aaa;
	background: #eee;

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

	<style>



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