Jesse Florig jesseflorig

This simple force-directed graph shows links between made up data

This variation of a clustered force layout uses D3’s circle-packing layout to initialize node positions.

The icosahedron serves as the base shape for the geodesic sphere; each face can be subdivided an arbitrary number of times to approximate the sphere with triangles.

Click and drag above to paint red hexagons. A black outline will appear around contiguous clusters of red hexagons. This outline is constructed using topojson.mesh, part of the TopoJSON client API. A filter is specified so that the mesh only contains boundaries that separate filled hexagons from empty hexagons.

The hexagon grid itself is represented as TopoJSON, but is constructed on-the-fly in the browser. Since TopoJSON requires quantized coordinates, the hexagon grid is represented as integers, with each hexagon of dimensions 3×2. Then a custom projection is used to transform these irregular integer hexagons to normal hexagons of the desired size.

This variation of a force-directed graph uses intermediate nodes in links to create aesthetically-pleasing Bézier curves.

This brushable and draggable network supports multiple selections via the SHIFT key. Click and drag the background area to make a rectangular selection (brushing). Once you’ve selected some nodes, drag them around to reposition the network. You might use this technique to hand-tweak a force-directed layout for better appearance, saving the manually-adjusted node positions back to a file.

For greater control, you can hold down the SHIFT key to add to or remove from an existing selection, either by creating a new rectangular selection or clicking on an individual nodes. You can use the OPTION and SPACE keys to modify the rectangular selection while dragging. You can also use the arrow keys to nudge selected nodes.

A further improvement to this example would be to allow rigid-body transformations of selected nodes (scale and rotate, in addition to translate). You might do this by checking for the META key while dragging. If the META key is down, you’d rotate and

These donut charts are constructed from a CSV file storing the populations of various age groups in different states. (As a practical note, a normalized stacked area chart facilitates easier comparison of values.) The chart employs a number of D3 features:

d3.csv - load and parse data
d3.scale.ordinal - color encoding
d3.keys - compute column names
d3.svg.arc - display arcs
d3.layout.pie - compute arc angles from data

Bubble charts encode data in the area of circles. Although less perceptually-accurate than bar charts, they can pack hundreds of values into a small space. Implementation based on work by Jeff Heer. Data shows the Flare class hierarchy, also courtesy Jeff Heer.

This example demonstrates how to prevent D3’s force layout from moving nodes that have been repositioned by the user. When the force layout’s drag behavior dispatches a dragstart event, the fixed property of the dragged node is set to true. This prevents the force layout from subsequently changing the position of the node (due to forces). Double-click to release a node.

Internally, the force layout uses three bits to control whether a node is fixed. The first bit can be set externally, as in this example. The second and third bits are set on mouseover and mousedown, respectively, so that nodes are fixed temporarily during dragging. Although the second and third bits are automatically cleared when dragging ends, the first bit stays true in this example, and thus nodes remain fixed after dragging.

Also note that the force layout resumes au

	/**
	* Fun with drop shadows
	*/
	html{
	background: rgba(255,0,100,1);
	background: linear-gradient(45deg, rgb(0,0,0), rgb(255,255,255));
	min-height: 100%;
	font-family:sans-serif;
	}
	/HEADER/