Tell us what works and what could be better. We read every submission.
@altocumulus·13 public vizzes
This example creates a vertical "elbow" dendrogram from a hierarchical JSON dataset using D3 v5. The d3.cluster layout positions leaf nodes along the horizontal axis, and the d3.hierarchy function converts the nested JSON into a tree structure. Parent-child links are drawn as elbow-shaped paths—horizontal from the parent’s x-position, then vertical to the child—using a custom elbow function. The result is a compact, left-to-right tree visualization rendered as SVG, with light gray link strokes and no node labels, showing the hierarchical clustering of the Flare data.
A world map in the Mercator projection displays two translucent red circles of equal radius, centered at [0, 10] degrees, demonstrating how a 5,000-mile radius appears at different latitudes. The visualization uses d3.geoMercator and d3.geoPath to render the sphere, graticule, and landmasses from TopoJSON world-atlas data, while d3.geoCircle generates the geographic circles. The SVG output includes a white graticule, dark land fill, and country boundaries, with the circles overlaid on the map.
This example demonstrates how to load and merge data from two separate CSV files using D3 v4. It shows the process of reading file1.csv into an array, then using d3.map to create a lookup table keyed by the name column, and finally loading file2.csv to attach each person’s description to the corresponding record. The resulting merged data is displayed as formatted JSON in a pre element via d3.select and text. The code relies on d3.csv’s nested callback pattern and the d3.map API for efficient cross-referencing.
This example demonstrates how to merge data from two CSV files asynchronously using D3 v4. It shows the combined dataset in a `<pre>` element, displaying each person’s name, total, and color description. The code first loads `file1.csv` and builds a D3 `d3.map` keyed by name, then loads `file2.csv` and uses its row function to fetch matching entries from the map and assign the `desc` field. The final callback logs the fully merged array via `JSON.stringify`.
This example visualizes an orthographic globe with a sequence of waypoints connected by dashed arcs, tracing a voyage across multiple continents and oceans. The map uses D3’s `d3.geo.orthographic` projection with a `clipAngle(90)` to show only the visible hemisphere, while `d3.geo.path` renders the sphere, country boundaries from TopoJSON’s world-110m dataset, and the projected arc and point features. Styling relies on SVG classes for the globe, land, pins, and arcs, with the underlying route data processed via Lodash functions.
A static force-directed graph layout renders 100 nodes connected in a ring-like pattern, with each node linking to the node three positions ahead. The visualization uses D3 v3’s `d3.layout.force` to simulate the physics, but instead of animating each tick, it runs a fixed number of `force.tick()` steps with manual cooling control via `force.alpha()`. After the simulation completes, the SVG elements—circles and lines—are drawn once at their final positions. The code also displays a temporary loading message while computing the layout.
This interactive force-directed graph depicts character co-occurrence in Victor Hugo’s *Les Misérables*, using D3 v4’s `d3.forceSimulation` with link, charge, and centering forces. The novel feature is dynamic parameter updating: as the mouse moves over the SVG, the link distance is recalculated based on the cursor's distance from the center, and the simulation is restarted with an alpha of 1. This causes the graph to continuously re-layout, pulling characters closer or pushing them apart as the mouse moves. Nodes are draggable and colored by group, while link thickness encodes co-occurrence strength. The data, based on character co-appearances compiled by Donald Knuth, is rendered with SVG circles and lines.
This donut chart displays categorical data with labels connected to each slice by thin polyline leaders. A "randomize" button triggers smooth transitions between datasets. The visualization uses D3 v3's `d3.layout.pie` and `d3.svg.arc` to compute slice geometry, while `transition.attrTween` animates changes in slice paths, label positions, and connector endpoints. Labels alternate between left and right alignment depending on their angle, and the SVG rendering includes distinct groups for slices, labels, and lines.
This example shows a modified Albers USA projection that adds Puerto Rico to the standard set of lower 48 states, Alaska, and Hawaii. The `albersUsaPr` function composes four separate conic projections—one for the contiguous United States, one each for Alaska and Hawaii, and a new one for Puerto Rico—and combines them into a single composite projection. A desktop perspective transform is applied on top, creating a subtle pseudo-3D “tilted map” effect where the vertical position dynamically scales horizontal coordinates. The visualization renders a world sphere, a 2°-step graticule, and the land mesh as SVG paths, demonstrating how custom projections can be composed in D3 v3 with streaming. The code includes the modified projection in `albers-usa-pr.js`, with the main page in `index.html`. It is forked from Mike Bostock’s block, licensed under GPL-3.0, and implemented with D3 v3.
This interactive network visualization displays a small directed graph of nodes labeled A through K, with edges distinguished by high or low connection types. The WebCola library performs the force-directed layout, while D3 renders the SVG nodes and links. Hovering over a node triggers a fade effect that dims all unrelated nodes and links, using opacity adjustments and swapping arrow markers between solid and faded states to highlight direct connections.
This visualization displays an orthographic globe with marked locations and dashed arcs connecting them in sequence, illustrating a travel route across 16 places from Puerto Montt to Taiwan. The globe uses D3’s `d3.geo.orthographic` projection with a clip angle, rendering world topography from a TopoJSON file via `d3.geo.path`. Locations appear as black pins, while the connecting arcs are generated as GeoJSON LineStrings using Lodash. The SVG output is styled with CSS classes for the globe, land, pins, and arcs, and the code loads D3 3.5, TopoJSON, and Lodash from CDNs.
A force-directed graph of 100 nodes and their links is projected onto a sphere using D3 v3’s `d3.geo.path` and a selectable geo projection (e.g., orthographic, mercator). The force layout positions nodes in 3D spherical space, and the SVG paths render the resulting network, with node colors from a categorical scale. A dat.GUI panel lets users switch projections, toggle clipping, and adjust force parameters like link distance and charge. Dragging rotates the projection instead of moving nodes.
A line chart animates a 20-second loop of a sinusoidal dataset, with a red circle tracing the line's leading edge as it draws and erases. The line uses an SVG path with a stroke-dasharray and stroke-dashoffset to simulate continuous updating. D3 v3's transition and tween function calculate the point’s position along the path via `getPointAtLength`, while the line’s interpolation is set to 'cardinal'. The animation repeats indefinitely through a recursive `tick` function.