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:
This example, using satirical data from The Onion, demonstrates how to wrap long axis labels to fit on multiple lines.
Click to perturb or drag the nodes!
This example demonstrates the flexibility of D3’s force layout. By using position Verlet integration, it is easy to add custom forces to a layout. In this example, the nodes are clustered around four foci using additional forces: the odd nodes are pushed down, the even nodes are pushed up, and a similar bisecting force is applied laterally. These custom forces are based purely on the index of the node, but they could just as easily be derived from properties of data!
Click to add nodes! Nodes near the cursor will be linked to the new node.
D3's force layout uses the Barnes–Hut approximation to compute repulsive charge forces between all nodes efficiently. Links are implemented as geometric constraints on top of position Verlet integration, offering greater stability. A virtual spring between each node and the center of the chart prevents nodes from drifting into space.
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| .path--background { | |
| fill: none; | |
| stroke: #000; | |
| stroke-width: 2px; | |
| } |
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
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:
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
This variation of a force-directed graph uses intermediate nodes in links to create aesthetically-pleasing Bézier curves.