sathomas

Zoomable radial chart with color scales and nesting. Based on Zoomable Sunburst.

sathomas

A visualization combining maps with a Voronoi diagram. Tornado sightings in 2013 from NOAA.

sathomas

A standard line chart with the addition of a gradient to show the range of values at each point. (In this case the range is ± 2 standard deviations.) Because the center point of the gradient varies with position on the x-axis, a single SVG area is not sufficient. Instead, the code creates a separate area (referred to as a slice) for each data point.

sathomas

Approximate reproduction of the Highcharts Basic line demo using D3.js. The original code is available in jsfiddle.) This gist is part of a presentation.

sathomas

This graph shows the top 25 jazz albums of all time (at least according to one blogger.) Links between the albums represent musicians that played on both. Click on the nodes and the links for more information.

Note: iTunes links are not affiliate links.

This visualization is a real application of the D3.js force layout. It demonstrates some of the principles in a series on that layout. You can review that series beginning with the first example.

sathomas

This is part of a series of examples that describe the basic operation of the D3.js force layout. Eventually they may end up in a blog post that wraps everything together. If you missed the beginning of the series, here's a link to first example.

The final parameter this series considers is friction. This parameter, which ranges from 0 to 1, tells D3.js how much (if at all) to slow down the layout at each iteration. With a value of 1, the layout never slows down, while a value of 0 forces all the nodes to immediately stop.

sathomas

This is part of a series of examples that describe the basic operation of the D3.js force layout. Eventually they may end up in a blog post that wraps everything together. If you missed the beginning of the series, here's a link to first example.

The code in the previous examples has mentioned a property that D3 calls gravity. The force layout uses this property to keep nodes from wandering off the edges of the visualization, something they might otherwise do to avoid overlap.

sathomas

This is part of a series of examples that describe the basic operation of the D3.js force layout. Eventually they may end up in a blog post that wraps everything together. If you missed the beginning of the series, here's a link to first example.

An earlier example introduced linkDistance as a key parameter for force layouts. It sets the desired distance between any connected nodes. The force layout includes an additional parameter that serves to modify the

sathomas

This is part of a series of examples that describe the basic operation of the D3.js force layout. Eventually they may end up in a blog post that wraps everything together. If you missed the beginning of the series, here's a link to first example.

The previous example shows how charge can influence the distance between connected nodes and prevent the layout from achieving the desired linkDistance. That's not the main purpose of the charge force, however. It exists mostly to

sathomas

This is part of a series of examples that describe the basic operation of the D3.js force layout. Eventually they may end up in a blog post that wraps everything together. If you missed the beginning of the series, here's a link to first example.

The previous example shows how linkDistance tells the force layout the desired distance between connected nodes. It may seem strange that D3 doesn't simply compel all links to be that distance. The force layout, however, takes