René Clausen Nielsen renecnielsen

Slopegraph based on Dan Palmer's Slope Graph and tooltips from D3-tip.

Used for a UN Global Pulse project for International Women's Day & CSW 2014

Chord diagrams show directed relationships among a group of entities. This example also demonstrates simple interactivity by using mouseover filtering. Layout inspired by Martin Krzywinski's beautiful work on Circos.

Click on any arc to zoom in. Click in the center to zoom out.

A sunburst is similar to a treemap, except it uses a radial layout. The root node of the tree is at the center, with leaves on the circumference. The area (or angle, depending on implementation) of each arc corresponds to its value. Sunburst design by John Stasko. Data courtesy Jeff Heer.

A treemap recursively subdivides area into rectangles; the area of any node in the tree corresponds to its value. This example uses color to encode different packages of the Flare visualization toolkit. Treemap design invented by Ben Shneiderman. Squarified algorithm by Bruls, Huizing and van Wijk. Data courtesy Jeff Heer.

Click on any package to zoom in or out. See also this static circle packing example.

D3 Streamgraph Example

Series Hover

The series hover interactivity uses the technique from lgrammel seen here: http://bl.ocks.org/1963983

Data Tooltip

It isn't necessarily a tooltip, but data is displayed by inverting the x-axis value into a date, and mapping the date to the corresponding data value for the series.

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 simple force-directed graph shows a small network of 12 people as nodes. Edges are weigted.

Data created using NetworkX, and exported using node_link_data with default attrs.

Visualization based on Mike Bostock's Force-Directed Graph, with added labels and mouse-over resizing of nodes. Label-circle grouping idea by Pablo Navarro seen on Stack Overflow, and mouse-over resizing of nodes seen in a Fiddle by Aditya.

	<!DOCTYPE html>
	<meta charset="utf-8">
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
	<style>

	.node {
	font: 300 10px "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	fill: #bbb;
	}

	<!DOCTYPE html>
	<meta charset="utf-8">
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
	<style type="text/css">

	table {
	border-collapse: collapse;
	font: 300 10px "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	width: 720px;
	}