M

mbostock

@mbostock·1036 public vizzes

Loading thumbnail…

Force-Directed States of America

This interactive visualization displays the lower 48 U.S. states as a force-directed graph. Each state is a filled polygon node, and the links connecting them are derived from the Delaunay triangulation of state centroids. Users can click and drag states to rearrange the map, with the layout physics responding in real time. The code uses D3 v3 with the `d3.layout.force` API for simulation, `d3.geo.path` for rendering state shapes, and `d3.geom.voronoi` to compute the links. The map data comes from a JSON file of U.S. states, with Alaska, Hawaii, and Puerto Rico excluded.

Loading thumbnail…

Map Zooming

This example demonstrates a map zooming animation that alternates between San Francisco and New York, using D3’s zoom transitions. The code renders simplified U.S. state boundaries on a Canvas element via `d3.geo.path` with a custom `d3.geo.transform` for adaptive simplification. It uses `d3.behavior.zoom` to compute translations and scales, and `topojson.presimplify` to preprocess the TopoJSON data source. The continuous back-and-forth zoom is driven by chained transitions with a repeating `jump` function.

Loading thumbnail…

Chained Transitions

A dense field of 4,002 small square divs cycles through a three-step color transition from light gray to steel blue to orange and back to gray. The chained animation is built with d3.v4 and the experimental d3-transition API, using `d3.active` to reselect elements and `styleTween` to interpolate RGB colors via `d3.interpolateRgb`. Each transition is delayed, with a recursive `repeat` callback restarting the sequence indefinitely.

Loading thumbnail…

Spinny Globe

A sphere rotates continuously, displaying only the visible front hemisphere through a navigable orthographic projection. The example uses D3’s `d3.geo.orthographic` projection with great-circle clipping and renders land geometries onto a Canvas via `d3.geo.path`. The rotation is driven by a `d3.timer` that updates the projection’s rotation over time. Land data comes from Natural Earth’s world-110m dataset, loaded as TopoJSON.

Loading thumbnail…

Rotating Orthographic

A rotating orthographic projection of the world, rendered via canvas animation, shows the globe slowly spinning as landmasses and country borders move across the sphere. The code uses `d3.geo.orthographic` with a clip angle to define the projection, `d3.geo.path` to draw land, borders, and graticule, and `d3.json` to load world-110m GeoJSON data. A timer updates the rotation angle over time, clearing and redrawing the canvas each frame.

Loading thumbnail…

Ocean

An orthographic globe renders the world’s oceans as a translucent blue polygon, rotating slowly to reveal the Earth’s curvature. The example highlights counterclockwise polygon winding and improved antimeridian stitching in TopoJSON, with ocean data from Natural Earth. D3’s `d3.geo.orthographic` projection, `d3.geo.path`, and a canvas context draw the sphere, graticule, and ocean, while `d3.timer` drives the animation.

Loading thumbnail…

Winding Order

Two polygon rings, one clockwise and one counterclockwise, demonstrate how winding order affects map projections in d3. Each ring is rendered twice: once with an orthographic projection using d3.geoPath and d3.geoOrthographic, and once with an identity projection, showing arrow markers along the ring path indicating direction. The text labels list the ring coordinates and computed area via d3.geoArea for the orthographic view, and the identity projection's path.area for the second.

Loading thumbnail…

Orthographic Grid

An orthographic grid of graticule lines at 10-degree intervals rotates slowly over time, demonstrating an azimuthal projection that resembles a globe viewed from space. The visualization uses D3 v3’s `d3.geo.orthographic`, `d3.geo.path`, and `d3.geo.graticule` to render SVG paths, while a `d3.timer` continuously updates the projection’s rotation based on a fixed velocity vector. A static circle outlines the globe’s edge, and the animation shows how latitude and longitude lines curve as the view shifts.

Loading thumbnail…

Orthographic Clipping

A rotating orthographic globe displays a graticule of latitude and longitude lines at uniform 10-degree increments, with a circular clipping boundary. The globe slowly spins via a d3.timer that updates the projection rotation over time. The example uses d3.geo.orthographic with clipAngle(90) and d3.geo.path to render the graticule as an SVG path, while a separate SVG circle outlines the globe’s edge.

Loading thumbnail…

Orthographic Shading

An interactive orthographic projection shows Earth’s graticule as a shaded sphere rotating continuously. Latitude and longitude lines at 10° increments form the grid, which is clipped to the visible hemisphere. The animation uses `d3.geo.orthographic()` and `d3.geo.path()` to project the graticule, while a radial gradient fills a circle to simulate lighting. A `d3.timer` updates the projection rotation and the fill’s transform, altering the view over time. The SVG rendering includes subtle stroke opacity for depth.

Loading thumbnail…

Adaptive Resampling

Three D3 v3 projections apply adaptive resampling to a rotating world map, showing how line simplification improves efficiency. The example compares no resampling, uniform resampling, and adaptive resampling, with red points marking each projected sample. The code uses `d3.geo.path` and a custom buffer context to extract resampled points from a graticule and a sample line. Animation runs via `d3.timer`, updating the equirectangular projection continuously.

Loading thumbnail…

Arc Padding

This animation shows how directly setting an arc’s `padAngle` biases small slices, shrinking their visible area more than large ones. It uses the `d3.arc` and `d3.pie` APIs from d3.v4, drawing to a Canvas element. A `d3.timer` and `d3.easeCubicInOut` interpolate the pad angle between zero and a fixed value over a 2.5-second cycle, while the underlying data values `[1, 1, 2, 3, 5, 8, 13, 21]` remain static. The rendering first strokes a padded outline, then fills the arcs in gray.

Loading thumbnail…

Pie Padding

Eight wedges with Fibonacci-scaled areas transition smoothly from touching to separated as a pie chart’s pad angle animates. The example contrasts two d3 APIs: setting `pie.padAngle` directly preserves each arc’s proportional area, while `arc.padAngle` would shrink small slices disproportionately. Drawn on a Canvas 2D context, the animation cycles over 2.5 seconds using `d3.timer` and `d3.easeCubicInOut`, with outlines and fills stroked separately to show the gaps.

Loading thumbnail…

Arc Corners III

Two donut charts display the same Fibonacci sequence as a series of arcs. One chart uses straight-edged arc segments, while the other animates its corner radius between zero and the maximum possible, transitioning from sharp to fully rounded corners. The animation uses a cubic-in-out easing over 2.5 seconds. The code uses `d3.layout.pie` and `d3.svg.arc` with its `cornerRadius` method, rendering to SVG with `d3.select`, `d3.timer`, and the `d3.ease` function.

Loading thumbnail…

Antimeridian Cutting

This example demonstrates antimeridian cutting in map projections, showing how geographic shapes that cross the ±180° longitude line are rendered without visual artifacts. A conic equal-area projection is rotated interactively via mouse movement, with the projected sphere drawn on a Canvas element. The code uses d3.geoConicEqualArea for the projection, d3.geoPath for rendering, and d3.scaleLinear to map mouse coordinates to rotation angles. World land data from the `world-110m.v1.json` file is loaded with `d3.json` and processed using `topojson.feature`.

Loading thumbnail…

Solar Analemmas

This visualization shows hourly solar analemmas, the figure-eight paths traced by the Sun’s position at each fixed time of day, as seen from San Francisco during 2014. The background is a stereographic projection of the celestial sphere, rendered with d3.geoCircle, d3.geoGraticule, and d3.geoPath, with compass labels and altitude ticks. Twenty-four red paths, one per hour, are computed by the solar-calculator package and projected via a custom flippedStereographic function. The SVG output uses D3 v4 selections and data joins over hourly timestamps.

Loading thumbnail…

Collision Detection

Interactive collision detection shows 200 colored circles moving inside a rectangular SVG viewport. Moving the mouse repels the circles, pushing them apart and causing them to collide and bounce off one another. The visualization uses D3 v3’s force layout and quadtree-based collision handling via `d3.layout.force` and `d3.geom.quadtree`, with mouse movement updating a fixed root node to drive repulsion. Rendering is done with SVG circle elements, and the force simulation updates their positions on each tick.

Loading thumbnail…

Projection Transitions

A drop-down menu and an auto-advancing timer cycle through dozens of map projections, each rendered over a world map with a graticule and sphere outline. The example shows how D3’s `d3.geo.path` and the `d3.geo.projection` plugin smoothly interpolate between projections using the `transition` API, with land from TopoJSON. A menu allows manual selection, while a periodic random selection demonstrates animated morphing between projections.

Loading thumbnail…

Poisson-Disc V

This animation visualizes Bridson’s Poisson-disc sampling algorithm by showing the branching process as new samples are added. Each time a sample is placed, a line animates outward from the neighboring sample that spawned it, revealing the algorithm’s growth tree. The code uses d3.v3 to append SVG line elements and applies staggered transitions with a delay based on each sample’s depth, making the generation order visible. The sampling itself follows Jason Davies’s implementation, generating random points with a minimum radius while rejecting candidates that are too close or outside the canvas.

Loading thumbnail…

Pencil Sketch

A rotating globe appears hand-drawn, with landmasses rendered as multiple overlapping, jittered outlines in a sketchy style. The visualization uses D3’s geometry pipeline to resample, jitter, and smooth points along great arcs for a hand-drawn effect. It renders to a canvas element, animating the globe’s rotation over time. The code loads world map data from a JSON file and draws it using an orthographic projection.

Loading thumbnail…

Rainbow Pack

A colorful swarm of circles arranges itself into a dense, rainbow-hued cluster. Each circle originates from a point along the outer edge of the canvas, then animates inward to its final position, with the color of each circle determined by its angle from the center. This creates a vibrant, radially organized pattern where hues progress around the circle. Built with d3.v4, the example uses `d3.packSiblings` for circle packing and `d3.scaleRainbow` for coloring, animating positions via a transition with `d3.easeCubicOut` and staggered delays based on distance.

Loading thumbnail…

Zoom + Pan

This example demonstrates zooming and panning across a 2D Cartesian coordinate system with visible axes. The view initially centers on the origin, and the user can pan by dragging and zoom by scrolling, with the axis tick marks and grid lines updating accordingly. A "Reset" button restores the original scale and translation. The implementation uses d3.behavior.zoom with linear scales for the x and y axes, and calls the axis render functions within the zoom event handler. The SVG rendering includes a light gray background rectangle and white axis strokes.

Loading thumbnail…

Zoom + Pan

A zoomable and pannable SVG viewport displays a large grid with axes, controlled by the mouse. The example shows how to programmatically reset the zoom state using a button. It uses d3.behavior.zoom with d3.scale.linear domains, and a transition tween with d3.interpolate to animate the domain reset. The axes and grid are rendered as SVG shapes, and zoomed() rebinds the axes to the updated scales during the transition.

Loading thumbnail…

Zoom + Pan

A grid of axes fills the viewport, with white gridlines on a gray background. Two buttons, "Zoom In" and "Zoom Out," trigger programmatic zooming. The view uses `d3.behavior.zoom` to manage pan and zoom state, with `d3.scale.linear` and `d3.svg.axis` for the axes. Clicking a button adjusts the zoom scale and translates to keep the center point fixed, then animates the transition with `svg.transition().duration(750)`, calling the zoom event to re-render the axes.

Loading thumbnail…

Pan & Zoom Axes

This example demonstrates a zoomable scatterplot where panning and zooming are controlled by the d3-zoom library. The visualization shows a colorful gradient rectangle as the data view, with axes that rescale dynamically through `transform.rescaleX` and `transform.rescaleY`. Users can drag to pan and scroll to zoom, with a button to reset the view via `d3.zoomIdentity`. The SVG rendering uses d3-scaleLinear for axes and a text gradient inspired by Nadieh Bremer.

Loading thumbnail…

Scatterplot Tour

This example animates a scatterplot tour through three generated clusters, panning and zooming to focus on each cluster in sequence before returning to the full overview. The tour uses d3-zoom transitions to compute bounding boxes for each cluster and derive the appropriate zoom transform. Points are rendered to a Canvas for performance, while the axes are drawn as SVG using d3-axis, with the scales rescaled on each zoom event via `transform.rescaleX` and `transform.rescaleY`.

Loading thumbnail…

Bar Chart with Negative Values

This bar chart displays both positive and negative values for eight named categories, using color to distinguish them: steel blue for positive bars and dark orange for negative bars. Built with D3 v3 and rendered as SVG, it loads data from a TSV file and applies a linear scale to position bars along the x-axis while an ordinal scale with rangeRoundBands handles the y-axis placement. The code calculates bar positions conditionally so negative values extend leftward from zero and positive values extend rightward. Axis components from d3.svg.axis add tick marks and labels.

Loading thumbnail…

Stacked Negative Values

This example shows a diverging stacked bar chart for quarterly data, with positive and negative values extending above and below a central zero axis. The chart uses four categories (apples, bananas, cherries, dates) across four quarters, with negative values for cherries and dates. It is built with D3 v4, using `d3.stack()` with the `d3.stackOffsetDiverging` offset to align positive and negative series. Bars are rendered as SVG rectangles, scaled with `d3.scaleBand` and `d3.scaleLinear`, and colored via `d3.scaleOrdinal(d3.schemeCategory10)`.

Loading thumbnail…

Build Your Own Graph!

Clicking anywhere on the SVG canvas adds a node at that position and automatically links it to any existing nodes within 30 pixels, using `d3.layout.force` for simulated physics. A brown cursor circle tracks the mouse as a visual guide. The force layout applies charge (-60) and link distance (30) constraints, with a virtual spring anchoring nodes to the chart’s center to prevent drift. Rendered as SVG circles and lines, the graph updates on each tick, and nodes are draggable via `force.drag`.

Loading thumbnail…

Modifying a Force Layout

This example demonstrates adding and removing nodes and links from a force-directed graph, built with D3 v4’s `d3.forceSimulation` and rendered as SVG. The graph starts with three disconnected nodes, then cycles every second: connecting them in a loop, removing node C with its links, and then re-adding them. The code uses the general update pattern with data joins, keyed by node ID and link source-target pairs. Simulation forces include `d3.forceManyBody`, `d3.forceLink`, `d3.forceX`, and `d3.forceY`, with `alphaTarget` and `alpha` controlling restarts.

Loading thumbnail…

Zoom to Bounding Box

Clicking any U.S. state zooms the Albers USA projection to that state’s bounding box, while clicking the background or the active state resets the view. The code computes the path bounds via `d3.geo.path` and uses a `g.transition()` with a computed translate and scale to animate the viewport, adjusting stroke widths inversely to the zoom. It loads TopoJSON state boundaries and uses D3 v3’s `d3.geo.albersUsa` projection, rendering SVG paths with click handlers for interactivity.

Loading thumbnail…

Collapsible Indented Tree

This example shows a collapsible indented tree visualization of the flare.json dataset, where each node represents a class and its size. Clicking a node toggles the display of its children, with smooth transitions animating nodes and links between positions. The visualization uses D3 v4’s hierarchy layout to compute node positions, d3.linkHorizontal to draw curved links, and SVG rectangles and text for node rendering. Transitions are handled via the selection.transition method with a 400-millisecond duration, while node colors change based on collapsed or expanded states.

Loading thumbnail…

Margin Convention

This example illustrates the margin convention for D3.js v3, visualizing the layout of an SVG chart with outer and inner padding rectangles. Dashed and solid outlines mark the chart area while arrows label the origin and padding offsets. The code defines margin and padding objects, then uses `d3.svg.axis()` to position bottom and right axes on translated `g` elements. SVG markers create arrowheads for dimension annotations, and `d3.scale.identity` maps pixel coordinates, demonstrating how margins simplify chart construction by separating layout concerns from scale ranges.

Loading thumbnail…

Population Pyramid

This visualization shows the changing distribution of the U.S. population by age and sex from 1850 to 2000, using a population pyramid where blue bars represent males and pink bars represent females. Interactive arrow keys animate the display through decennial census years. The code uses D3 v3 with SVG rendering, employing `d3.svg.axis`, `d3.nest`, and `transition.attr` to slide bars by birth year and update heights. Data comes from the Minnesota Population Center.

Loading thumbnail…

Brush & Zoom

This example shows a focus and context view of the Standard & Poor’s 500 stock index over time, with a large area chart on the top and a smaller overview below. A colored brush in the context pane selects a date range, while a transparent rectangular overlay on the focus pane enables direct zooming and panning via the `d3.zoom` API; both interactions synchronize the visible data domain. The code combines `d3.brushX` with `d3.zoom`, and uses `d3.scaleTime`, `d3.axisBottom`, and `d3.area` to render the monthly price data from the CSV file as scalable vector graphics (SVG).

Loading thumbnail…

Non-Contiguous Cartogram

This example displays a non-contiguous cartogram of U.S. obesity rates, where each state is rescaled around its centroid so that its area encodes the data value while preserving local shape. The distortion is achieved by applying a `transform` attribute to each state path, using `d3.geo.path` to compute centroids and `Math.sqrt` to determine scale. State boundaries come from the U.S. Census Bureau. The code uses `d3.json` to load TopoJSON and `d3.select` to build the SVG scene.

Loading thumbnail…

Diamonds

This scatter plot displays the relationship between diamond mass in carats and price in US dollars. The visualization uses a canvas overlay to draw semi-transparent blue circles that accumulate over time, creating a density effect where overlapping points become darker. A static SVG layer renders the grid and axes, with the x-axis labeled "Mass (carats)" and the y-axis labeled "Price (US$)". The code uses d3.tsv to load the data, d3.scaleLinear for both axes, and d3.axisLeft and d3.axisBottom for the grid and ticks. The data is shuffled and drawn progressively in batches of 500 using a d3.timer, with the canvas context employing a "multiply" composite operation to blend overlapping points.

Loading thumbnail…

Zoomable Geography

This example shows U.S. states and counties rendered as SVG paths, which can be panned and zoomed with the mouse. It uses d3.behavior.zoom to modify the transform of a group element, letting the browser redraw geographic features quickly without reprojection. The code loads TopoJSON data and renders it with d3.geo.path, using a null projection to preserve the pre-computed geometry. Border stroke widths are adjusted inversely to the zoom scale to maintain a constant visual weight.

Loading thumbnail…

Waterman Butterfly

This example displays a world map using the Waterman butterfly projection, a polyhedral map projection that unfolds the globe into a butterfly-like shape. The visualization is rendered as an SVG using the D3.js v3 library and the `d3.geo.polyhedron.waterman` plugin, which defines the custom projection. The map includes a graticule, land masses, and country boundaries, with data loaded from a GeoJSON file via `d3.json`. The projection is rotated, scaled, and translated to center the map, and clipped to the sphere's outline.

Loading thumbnail…

Mobile Patent Suits

A force-directed network diagram maps patent disputes among mobile technology companies, with nodes representing firms and curved links encoding suit direction via arc paths. Dashed links show resolved cases, while green links indicate licensing agreements, highlighting Apple as a central target of litigation. Built with D3.js v3, the visualization uses the `d3.layout.force` API for physics-based node placement and SVG markers for link arrowheads. Data comes from a Thomson Reuters infographic, recreated to improve clarity over the original "bowl of spaghetti" design.

Loading thumbnail…

Zoomable Area

This interactive area chart displays daily U.S. flight volumes from 1988 through 2003. Built with D3 v4, it uses `d3.area` with a step-after curve, SVG rendering, and a time-scale. Users can pan and zoom along the time axis via a `d3.zoom` controller, which rescales the x-axis and updates the path in real time from the flights.csv data.

Loading thumbnail…

Three-Axis Rotation

Three rotating orthographic projections display the Earth from the perspective of three perpendicular axes, labeled λ, φ, and γ. The world-110m land data is rendered as filled paths using `d3.geoPath` and `d3.geoOrthographic`, with the rotation angles updated per frame from a timer. Each canvas uses its 2D context to clear and redraw shapes, with a sphere outline stroke for the globe boundary.

Loading thumbnail…

Processing Fixed-Width Data

A line chart displays seasonally-adjusted unemployment rates for 380 U.S. metropolitan areas from 2000 to 2013. The visualization renders each city as a thin gray path, using d3.svg.line and d3.time.scale to plot rates over time. The example focuses on preprocessing: a Node.js script with d3.nest reads fixed-width text from the Bureau of Labor Statistics, extracts and reshapes the data into a compact TSV file via d3.tsv.formatRows, reducing a 9.9 MB source to 258 KB. The final chart is drawn with SVG.

Loading thumbnail…

Multi-Line Voronoi

This example shows a multi-line chart of unemployment rates across various U.S. metropolitan areas from 2000 to 2013. An invisible Voronoi tessellation handles mouseover detection, highlighting the nearest line and displaying its value at the cursor position; a checkbox toggles red Voronoi cell borders for inspection. The SVG chart uses d3.line, d3.voronoi, and d3.axisBottom/Left, with data processed from Bureau of Labor Statistics text files into a TSV format.

Loading thumbnail…

Monday-based Calendar

This example shows daily stock price changes for the Dow Jones Industrial Average from 2010, displayed in a calendar view where each cell represents a day and color intensity reflects the percent change between open and close prices. The visualization uses D3.js version 3 with SVG rendering, drawing one calendar per year from 1990 to 2010. Unlike the standard Sunday-based calendar, this adaptation modifies the `day` and `week` functions—using `%W` for Monday-based week numbering and shifting `getDay()` by six—so that weeks begin on Monday. The code uses `d3.time.days` and `d3.time.months` to generate the grid, `d3.scale.quantize` to map returns to colors, and `d3.nest` to aggregate the CSV data by date.

Loading thumbnail…

Coastal Graph Distance

This map shows the graph distance of each US county from the Pacific or Atlantic coast, with coastal counties in dark blue and counties nine or more counties away in light yellow. It recreates a Reddit map using TopoJSON. The code calculates distances by iteratively expanding from coastal counties, using `d3.queue` to load the US GeoJSON and TSV data, `topojson.neighbors` for adjacency, and `d3.geoPath` to render SVG paths with a color scale from `d3.scaleOrdinal`.

Loading thumbnail…

U.S. Counties TopoJSON

This map displays the boundaries of every county in the United States using data from a TopoJSON file fetched from `https://d3js.org/us-10m.v1.json`. It renders the county shapes as filled SVG paths, with a white mesh overlay showing county borders via `topojson.mesh`. Hovering over any county turns it red. The visualization is built with D3 v4, using `d3.geoPath` to project the geometry and `topojson.feature` to extract the features, relying on the `us-atlas` TopoJSON data source.

Loading thumbnail…

U.S. States TopoJSON

This example shows a map of the United States rendered as SVG paths, where individual states turn red when hovered. The map uses the TopoJSON `us-atlas` file, loaded via `d3.json`, and the code relies on the `topojson` library to convert the TopoJSON topology into geographic features. The rendering is done with `d3.geoPath` to project the geometry, and state borders are drawn as a separate path using a mesh that highlights each boundary. No interaction beyond the hover effect is implemented.

Loading thumbnail…

Scatterplot with Shapes

This scatterplot displays five data points from a small CSV file, plotting x and y values on linearly scaled axes. The points are rendered as triangle-up SVG symbols, drawn with a steelblue fill and black stroke. Built with D3 v3, the code loads the CSV, coerces values to numbers, computes domains with `d3.extent`, and uses `d3.svg.axis` for the axes and `d3.svg.symbol` for the point shapes, positioning them via SVG `transform` attributes.

Loading thumbnail…

Partition - Icicle

This icicle diagram visualizes a hierarchical dataset as nested rectangles, where each node’s area is proportional to its numeric value, revealing the distribution of categories and subcategories. Built with D3.js v3, it uses `d3.layout.partition` to compute the layout from a JSON file (`flare.json`) and renders the result as SVG rectangles and rotated text labels. The root node is colored by category using `d3.scale.category20()`. The view is static, with no interaction or zooming.

Loading thumbnail…

Circular Segment

This example visualizes how the height *h* of a circular segment varies with the fraction *k* of the circle’s area it covers. A slider adjusts *k*, and the segment is drawn clipped within the circle, updating a live label for *h*. The code computes *h* numerically via Newton’s method when *k* is not 0, 0.5, or 1. It uses D3 v3’s selection API (`d3.select`) to update SVG attributes (`attr`), including the clip path and marker arrows, with the circle and lines rendered as SVG elements.

Loading thumbnail…

Raster Reprojection

The Blue Marble earth image is reprojected from its equirectangular form into the Kavrayskiy7 projection, displayed on a dark canvas. The code loads the image, draws it, and then uses `projection.invert` from `d3.geo.kavrayskiy7` to map each output pixel back to source coordinates, sampling pixel data via Canvas `getImageData` and `putImageData`. This pixel-by-pixel transformation runs entirely in the browser with D3 v3 and `d3.geo.path`.

Loading thumbnail…

Mitchell’s Best-Candidate

The animation shows a field of white circles with black outlines growing into a dense, non-overlapping packing on a dark gray background. It uses the Mitchell’s best-candidate algorithm to iteratively add circles, where each new circle is chosen from a set of random candidates by maximizing the minimum distance to existing circles. The implementation is built with D3 v3’s `d3.geom.quadtree` for spatial indexing, `d3.select` to build the SVG, and `d3.timer` with a `transition()` on the `r` attribute to animate the circles growing from radius zero as they are placed.

Loading thumbnail…

Mitchell’s Best-Candidate

This example visualizes Mitchell’s best-candidate algorithm, which approximates Poisson-disc sampling to generate a natural, blue-noise distribution of circles. Circles appear one at a time, growing from radius zero, and new candidates are chosen by maximizing distance from all previously placed circles, using a quadtree for efficient spatial lookup. The code uses the D3 v3 library, specifically `d3.select` and `d3.timer`, alongside the custom `bestCircleGenerator` function, which relies on the quadtree’s `visit` method to compute distances. As the number of circles increases, the algorithm gradually increases the candidate count while reducing circles per animation frame.

Loading thumbnail…

Solar Path

This chart displays the Sun’s path across the sky for the current day, based on the viewer’s geolocation, using a stereographic projection that places the horizon as an outer circle and radiating azimuth lines. A red dot marks the Sun’s present azimuth and elevation, with hourly ticks along its trajectory. The visualization uses D3 v3’s `d3.geo.projection` and `d3.geo.path` for rendering, while a custom solar calculator computes positions from NOAA equations. It updates every second and includes a geolocation prompt to determine the user’s coordinates.

Loading thumbnail…

Voroblobinoids

A field of one hundred particle points performs a random walk with velocity damping and elastic collisions against the canvas edges. Each frame, the D3 Voronoi tessellation of these points is computed using `d3_voronoi.voronoi`, and the resulting convex cells are drawn with rounded corners via a custom `drawRoundedPolygon` function. Canvas rendering strokes the cell boundaries in white and light gray, while the particles themselves appear as small black dots. The animation loop uses `d3_timer.timer` to drive the real-time updates.

Loading thumbnail…

Milky Way

This visualization displays a 360-degree panorama of the Milky Way, captured by the European Southern Observatory, reprojected onto a stereographic projection to simulate the night sky as seen from Earth. The interactive animation rotates the view over time, allowing exploration of the entire celestial sphere. Built using WebGL and custom shaders, the code compiles vertex and fragment shaders to perform the inverse stereographic projection and image texture mapping in real time. The source equirectangular image is loaded as a texture, with mipmaps enabling accurate rendering during continuous motion.

Loading thumbnail…

Text Transition II

A randomly generated integer fades in and out inside a large headline, replacing itself with a new value on each cycle. The example demonstrates a text transition technique that uses `d3.select` and `d3.transition` to create a repeating animation. On each start event, `d3.active` removes the old heading while a new `h1` element is appended, initially transparent, and its opacity is tweened from 0 to 1 using the `style` method. The process repeats indefinitely with a 1.5-second delay, showcasing D3’s ability to manage enter, update, and exit sequences for text elements.

Loading thumbnail…

Text Transition I

A large numeral repeatedly and randomly transitions to a new value through an animated interpolation of its text content. The page uses d3.select on an h1 element and d3.transition.tween to create a custom text tween, interpolating between the current numeric value and a randomly generated number up to one million. The transition runs continuously via a recursive start event, with each new value appearing after a delay. Numbers are formatted with d3.format using commas.

Loading thumbnail…

General Update Pattern, III

This example demonstrates the general update pattern for animating simultaneous changes to a dataset. Using D3 v4, an SVG displays the alphabet, and every 1.5 seconds a randomly selected, sorted subset of letters replaces the current set. Each letter’s state is classified as entering, updating, or exiting, with distinct colors and positions. The code defines a shared `d3.transition` with a 750-millisecond duration, then applies it to separate selections via `.transition(t)` for entrance from the top, update movement horizontally, and exit downward with fading opacity. The data join uses a key function on the letter itself to maintain object constancy across updates.

Loading thumbnail…

General Update Pattern, II

A subset of the alphabet is displayed as SVG text, and every 1.5 seconds, a new random subset replaces it. The data-join key ensures that letters already on screen are updated in place rather than recreated, changing their x-position and class, while new letters enter in green and removed letters exit. This example demonstrates the D3 v4 general update pattern using `selectAll`, `data`, `enter`, `merge`, and `exit` operations on the SVG root. The alphabet array is shuffled and sliced by `d3.interval` to generate the changing data.

Loading thumbnail…

General Update Pattern, I

This example illustrates D3’s general update pattern, where a data-join is followed by operations on the enter, update, and exit selections. Entering letters appear green, updating letters black, and exiting letters are removed immediately. Using d3-selection and d3.interval, it randomly slices the alphabet and re-sorts it every 1.5 seconds, showing how elements may change their associated letter without a key function. The SVG text elements are joined with the data, and the enter selection merges with the update selection before applying text and positioning attributes.

Loading thumbnail…

Hierarchical Edge Bundling

This visualization displays the dependency structure of the Flare software package as a radial hierarchical edge bundling diagram. The circular layout positions leaf nodes along the outer ring, while curved Bézier paths bundle together to show relationships between modules. Hovering over a node highlights its outgoing dependencies in red and incoming dependants in green, drawing attention to the directional flow of the network. The implementation uses `d3.cluster` for tree layout and `d3.radialLine` with `curveBundle` for the bundled edges, loading class data from a JSON file.

Loading thumbnail…

Hierarchical Edge Bundling

A circular dependency diagram visualizes the class hierarchy of the Flare software library, with bundles of curved links connecting classes that import one another. The radial layout positions class names around the circumference, while the hierarchical edge bundling algorithm groups related dependencies together. The implementation uses D3 v4's `d3.cluster` for tree layout, `d3.radialLine` with `d3.curveBundle` for the bundled paths, and renders text labels and paths as SVG elements. The data comes from the `flare.json` file, which records each class and its imports.

Loading thumbnail…

D3 Logo

The D3 logo is rendered as a stylized “d3” in a 400×400 SVG viewport, with the letterforms clipped from three overlapping linear gradients in orange and red. The example demonstrates the official logo artwork directly from the d3-logo repository, embedded via an `<img>` tag in a minimal HTML page. The SVG uses a `clipPath` to define the letter shapes, while the gradients—`gradient-1`, `gradient-2`, and `gradient-3`—paint the clipped areas with smooth color transitions. The rendering is static, with no animation or interaction.

Loading thumbnail…

Animated D3 Logo

The D3 logo animates as if hand-drawn, with its "d" and "3" shapes tracing their strokes in sequence. The SVG paths are initially hidden, then revealed using stroke-dasharray transitions. Each path’s total length determines its animation duration, and transitions are queued with delays so they draw one after another. The example uses d3.select and d3.selectAll to manage the paths, with the animate function triggered on load, click, or touch.

Loading thumbnail…

Revised D3 Logo

This example presents a geometrically precise reconstruction of the D3 logo, replacing cubic Béziers with strictly circular arcs and straight lines. The SVG rendering shows the logo’s path alongside a grid of construction lines, key anchor points, and intersecting circles that define the arcs. The code computes several points via circle-line and circle-circle intersection, using SVG elements like `<path>`, `<circle>`, and `<line>` to visualize the underlying geometry. The result highlights how the logo’s shape is derived from a small set of overlapping radii and horizontal guides.

Loading thumbnail…

Circle Wave

Three semi-transparent rings in cyan, magenta, and yellow form undulating circular waves around a shared center. Each ring’s radius oscillates based on a cosine function modulated by time, creating a continuously morphing, layered pattern with a darken blend mode. The animation uses `d3.radialLine` to generate the wave paths from an array of 200 angles, while `d3.timer` drives the redraw of each SVG path every frame. The code relies on D3 v4’s SVG rendering and the `mix-blend-mode` CSS property to composite the overlapping strokes.

Loading thumbnail…

Orthographic to Equirectangular

This example animates the transition between two map projections: starting with an orthographic view of the globe and morphing into a flat equirectangular projection. A red equator line and gray graticule remain visible throughout, highlighting how geographic coordinates shift between the two representations. The animation runs continuously, cycling through the interpolation in both directions. The implementation uses a custom projection function that blends the output coordinates of `d3.geo.orthographic` and `d3.geo.equirectangular`, driven by a transition tween that updates the projection’s alpha parameter and redraws SVG paths rendered by `d3.geo.path`.

Loading thumbnail…

Inline Labels

This example demonstrates a multi-series line chart where each data point is labeled directly on the line, with the final point of each series showing the series name in bold. The chart reads from a TSV file using `d3.requestTsv` and `d3.timeParse` for dates. The code uses `d3.line` to draw the paths, scales `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.scaleCategory10` for colors. For each label, `element.getBBox` computes the text bounding box, and a white rectangle is drawn behind it with padding for legibility.

Loading thumbnail…

Star Map

A star map of the Northern Hemisphere renders stars from the Yale Bright Star Catalog as white circles sized by magnitude, with a flipped stereographic projection. A graticule and declination/right ascension ticks provide coordinate context, while hovering over a star highlights it and draws yellow crosshairs through the center using d3.geom.voronoi for hit detection. The visualization uses d3.geo.projection, d3.geo.path, and SVG elements.

Loading thumbnail…

AlbersUSA + PR

This example presents a modified Albers USA map projection that includes Puerto Rico, rendered as an SVG using D3.js v3 and TopoJSON. The code defines a custom `albersUsaPr()` function, which composes four separate conic equal-area projections for the lower 48 states, Alaska, Hawaii, and Puerto Rico, each with its own translation and clipping. The map displays graticules and a sphere outline via `d3.geo.graticule()` and `d3.geo.path()`, and it loads US state boundaries from an external JSON file. Interactive mouse movement logs the projected coordinates using `projection.invert()`.

Loading thumbnail…

Satellite

This visualization shows a rotating globe with a graticule and sphere outline from the perspective of a satellite orbiting Earth. The animation continuously adjusts the camera tilt and rotation, creating a dynamic view of the planet’s surface. It uses the D3.js graphics pipeline with `d3.geo.satellite` for projection, `d3.geo.clipCircle` for visibility clipping, and the Canvas API for rendering. The data source is a graticule and sphere generated on the fly, with real-time animation driven by a timer and elapsed time.

Loading thumbnail…

Progress Events

This example visualizes the progress of an asynchronous request as a circular gauge with a dark foreground arc filling a gray background track, alongside a percentage label. The data is fetched from a GitHub API endpoint, and the gauge animates smoothly by interpolating progress values. The code uses `d3.json` to create a request object, registers a "progress" event listener with `.on`, and updates the arc by setting its end angle through `arc.endAngle`. The process runs in SVG, with animation handled via `d3.transition` and `d3.interpolate`. Once the request completes, the gauge scales down via a transition.

Loading thumbnail…

Easing

This interactive chart visualizes the easing functions from the d3-ease library, plotting normalized time *t* on the *x*-axis against the eased time *ease(t)* on the *y*-axis. A dropdown menu lets the viewer select among 28 easing functions, and animated dots trace the progress of a 3-second cycle along the selected curve. The SVG visualization uses `d3.scaleLinear`, `d3.line`, `d3.axisBottom`, and `d3.axisLeft` for the plot, while a `d3.timer` drives the animation. The chart is built with D3 v4 alpha and rendered as SVG.

Loading thumbnail…

Pan & Zoom IV

Two thousand circles laid out in a phyllotaxis spiral show the d3.zoom behavior applied by directly manipulating each circle’s SVG transform attribute. On every zoom event, the code calls *transform*.applyX and *transform*.applyY to remap the original data coordinates, keeping all circle radii constant at 2.5 pixels while allowing pan and zoom between half and four times the initial scale. This approach, written in d3.v4 with SVG, demonstrates an alternative to scaling a single parent group, trading performance for customization.

Loading thumbnail…

Pan & Zoom II

This example demonstrates a pan-and-zoom interface for a dataset of 2,000 points arranged in a phyllotaxis pattern, drawn on a Canvas. On zoom, the circles retain a constant pixel radius rather than scaling with the data. The implementation uses `d3.zoom` to handle user interaction and applies the transform via `transform.apply` to each point in `drawPoints`, while `d3.event.transform` supplies the current transformation during the zoom event. The `context.arc` method renders each point individually.

Loading thumbnail…

Pan & Zoom III

A sparse scatter plot of 2,000 points arranged in a phyllotaxis spiral demonstrates interactive pan and zoom via the `d3.zoom` module, which applies an SVG transform to a group element upon zoom events. The behavior is attached to an invisible overlay rectangle, and the visible circles remain static while the group’s transform updates. The code uses `d3.select`, `d3.range`, and the `phyllotaxis` function to generate the spiral pattern.

Loading thumbnail…

Pan & Zoom I

A canvas displays a phyllotaxis pattern of 2,000 points, which can be panned and zoomed interactively. Using d3.zoom, the current transform is applied directly to the canvas context via translate and scale, redrawing all points on each zoom event. The data is generated procedurally with a phyllotaxis function, and the view is transformed rather than the data itself.

Loading thumbnail…

Zoom Transitions

A thousand points arranged in a phyllotaxis spiral zoom smoothly between random targets. Every 2.5 seconds, the d3-zoom transform animates to center a newly selected point, shown in red, at the viewport’s center. The example uses d3.zoom’s `transform` method within a d3.transition, rendering the points to a Canvas 2D context via the `zoom` event handler.

Loading thumbnail…

van Wijk Smooth Zooming

A hexbin mesh forms the backdrop as two circular markers—a brown start point and a steelblue end point—define a zoom transition. The view continuously interpolates between these two camera positions using `d3.interpolateZoom`, which smoothly scales and translates the entire SVG group. The animation runs in an infinite loop, reversing direction each time it reaches a marker. The code builds the mesh from `d3.hexbin` and applies the zoom tween via `attrTween` on the group's transform.

Loading thumbnail…

Mona Lisa Histogram

Clicking and dragging a brush across the Mona Lisa on a canvas redraws the RGB histogram beneath it. The histogram uses stacked, semi-transparent red, green, and blue area charts, with black step lines, to show color channel distributions for the selected region. The code uses d3.brush with d3.event.selection and Canvas getImageData to sample pixel values, computing histogram counts and scaling them with d3.scaleLinear before updating d3.area and d3.line paths in SVG.

Loading thumbnail…

Histogram II

This histogram displays the number of homicides in Chicago for each week of 2015, using data from the City of Chicago. It counts incidents into weekly bins and labels each bar with its count. The visualization is built with D3 v4, using `d3.histogram` and `d3.timeWeek` thresholds, with `d3.scaleTime` and `d3.scaleLinear` for axes, rendered as SVG bars with text labels.

Loading thumbnail…

Force-Directed Tree II

A force-directed tree visualization displays the hierarchical file structure of the D3.js library, with nodes representing individual modules and paths. The layout is computed using `d3.forceSimulation` with `d3.forceManyBody`, `d3.forceLink`, and positional forces, rendering to a Canvas 2D context via `context.arc` and `context.lineTo`. Nodes are draggable, with drag behavior implemented through `d3.drag` and a simulation `find` query. Data originates from a CSV file parsed by `d3.csv` and structured with `d3.stratify`.

Loading thumbnail…

Click to Select All

A scatterplot displays 800 randomly generated points positioned across a linear x-axis and normally distributed y-values. Clicking and dragging outside the existing selection normally creates a new brush, but this modified behavior selects all points instead. The visualization uses D3 v4’s `d3.brushX` to handle brushing, `d3.scaleLinear` for axes, and SVG circles with red fill and brown stroke for selected items. A transition animates the brush movement when the user activates the select-all interaction.

Loading thumbnail…

Click-to-Recenter Brush II

A scatterplot of 800 points uses a horizontal brush to highlight selections in red. Clicking the background recenters the brush around the cursor, using `d3.brushX` with a fixed width, while a `brushended` handler snaps the brush extent to integer values on the x-axis via `Math.round` and `brush.move`. The SVG rendering uses `d3.scaleLinear` for axes and a transition animation on brush movement.

Loading thumbnail…

Click-to-Recenter Brush

A click-to-recenter brush demonstrates a modified brushing interaction for scatterplot data. By default, dragging outside an existing brush selection creates a new selection; here, it instead repositions the brush so it remains centered on the pointer. The chart plots 800 random points with `d3.randomUniform` and `d3.randomNormal`, rendered as SVG circles with a linear x-scale. The customization uses `d3.brushX`, replacing the overlay’s interaction type with “selection” and adding a `mousedown` handler that calls `brush.move` to recenter before brushing.

Loading thumbnail…

Brush Snapping

A time-series brush snaps to day boundaries upon release. The example shows a timeline from August 2013 with a grid of 12-hour ticks; selecting a range triggers an `end` event, and the brush smoothly transitions to a rounded day-aligned selection using `brush.move` with a D3 transition. If rounding yields an empty interval, the code uses `timeDay.floor` and `timeDay.offset` to ensure a valid one-day range. The visualization uses d3.v4, an SVG axis with custom tick formatting, and an animated brushing interaction over a date scale.

Loading thumbnail…

Drag + Zoom

In this example, dots loaded from a TSV file are positioned in an SVG scatterplot with a light grid. Users can drag individual circles to move them, while clicking and dragging on the background pans the view, and the mousewheel zooms the entire scene. The code combines `d3.behavior.drag` and `d3.behavior.zoom`, using `stopPropagation` in the dragstarted handler to give dragging precedence over panning. Both behaviors update the container's transform attribute via the zoom event's translate and scale values, with dragged circles updating their cx and cy attributes.

Loading thumbnail…

Drag & Zoom II

This example demonstrates a zoomable SVG canvas containing two thousand circles arranged in a phyllotaxis pattern, where users can click and drag on the background to pan the view or drag individual circles to reposition them. The visualization combines d3-drag and d3-zoom, using the `d3.zoomIdentity` transform to update the group’s `transform` attribute during zooming, while the drag handler updates each circle’s `cx` and `cy` attributes directly. Rendering relies on SVG’s built-in hit-testing and coordinate transformation, avoiding the need for manual redraws or complex event logic.

Loading thumbnail…

Tile Viewer

This example shows a zoomable map interface where the user can pan and zoom across geographic tiles. It displays each tile as a numbered 256-by-256-pixel square with a red border and its coordinates as text, updating the visible grid as the viewport changes. The code uses d3.geo.tile, d3.geo.mercator, and d3.behavior.zoom, applying a CSS 3D matrix transform to reposition tiles during zoom events. It relies on a gist by mbostock and the d3.v3 library, with tile positions computed from the current zoom scale and translation.

Loading thumbnail…

Prim’s Algorithm V

A maze-like spanning tree fills a canvas, with its cells colored by a continuously cycling cubehelix color scale based on tree depth. The scale’s periodicity shifts over time, alternately emphasizing fine-grained local details and broader structural patterns. The visualization uses a Web Worker to generate the maze via Prim’s algorithm, then renders the result to a Canvas 2D context using `putImageData`, with animation driven by `d3.timer`.

Loading thumbnail…

Prim’s Algorithm IV

The visualization displays an animated spanning tree generated by Prim’s algorithm on a maze, with colors cycling through a cubehelix color scale to highlight the tree's structure. The maze is computed asynchronously in a worker thread using a min-heap priority queue. The animation renders to a Canvas via `putImageData`, updating pixel colors every 20 milliseconds based on each cell's distance from the start, while rotating the hue through 360 degrees. D3.js (v3) provides the cubehelix interpolation and animation timing.

Loading thumbnail…

Wave Motion

A grid of faint circular outlines fills the background, representing water parcels in a calm state. Overlaid on this, bright dots travel along the perimeters of each ring, rotating in coordinated, wave-like patterns that ripple across the canvas. The animation uses a d3-timer to update the rotation angle for each dot, with position and rotation calculated from the grid index and elapsed time. Two layered Canvas 2D contexts render the static rings and the moving dots, with devicePixelRatio scaling for sharp display on high-DPI screens.

Loading thumbnail…

Stacked Area via Nest

This stacked area chart visualizes how three named groups (Group1, Group2, Group3) contribute to a total value over a series of dates in April 2012. Using D3 v3 and SVG rendering, the code nests the CSV data by group key and applies a stack layout to compute the cumulative y-offsets for each layer. The cardinal-interpolated areas are drawn as separate paths, colored via a categorical scale, with time-based x-axis and linear y-axis scales.

Loading thumbnail…

Zoom to Bounding Box II

This example demonstrates smooth zooming and panning over a map of the United States using Albers equal-area projection. Users click individual states, triggering a 750-millisecond animated transition to a bounding box around that state, while the map remains freely navigable via mouse drag and wheel zoom. The visualization uses `d3.geo.albersUsa` for projection, `d3.behavior.zoom` for interactive and animated transformations, and `d3.geo.path` to render state boundaries and a mesh overlay from the US TopoJSON data file. Active states highlight in orange, and stroke widths adjust dynamically during zoom.

Loading thumbnail…

Ordinal Brushing

A categorical scatterplot displays a set of SVG symbols representing `d3.svg.symbolTypes` along an ordinal x-axis. Brushing horizontally across the axis selects symbols by their categorical position, highlighting them with a red stroke while unselected symbols fade. The example uses an ordinal `d3.scale.ordinal()` and `d3.svg.brush()` to map brush extents to categorical values, demonstrating selection over a non-quantitative dimension. The code also relies on `d3.svg.axis()` for the ordinal scale, and applies CSS transitions to animate fill-opacity changes.

Loading thumbnail…

Brush Handles

This example shows a scatterplot of 800 random points on a linear x-scale, with a draggable d3.brushX selection. Custom semicircular path handles are attached to the brush’s west and east edges, letting users resize the selection by dragging these visible arcs instead of the invisible brush boundary. The brushmoved handler updates the handle positions and highlights points inside the selected range. It uses d3.brushX, d3.axisBottom, d3.randomNormal, and d3.arc for the handle shapes, rendering to SVG.

Loading thumbnail…

Brush Snapping II

A time-series brush snaps selections to day boundaries on a date axis. The visualization uses a D3 v4 SVG chart with a horizontal brush, where brushing fires a *brush* event that rounds the selection’s start and end dates to the nearest day. The code uses `d3.brushX` with an `.on("brush")` listener, `d3.event.selection.map(x.invert)`, `d3.timeDay.round`, and `d3.select(this).call(d3.event.target.move, …)` to adjust the brush’s extent. The axis grid highlights hourly ticks with reduced opacity.

Loading thumbnail…

Reporting an Issue

This example demonstrates the D3.js issue-reporting workflow, using a minimal code sample to reproduce an unexpected behavior. It isolates specific methods that exhibit the bug, comparing the observed output against the expected behavior defined in the D3 API documentation. The visualization pairs a simple data-plot with a short README that explains the reproduction steps, drawing attention to how the code’s output diverges from the intended result. Built with D3’s standard `d3.select`, `d3.scaleLinear`, and `d3.axisBottom` APIs, the example renders a basic scatterplot on an SVG canvas, serving as a concrete, testable case for community debugging.

Loading thumbnail…

Asking for Help

This example presents the D3.js software's official guidance for seeking community assistance. It references Stack Overflow's `d3.js` tag as the primary support channel, along with the d3-js Google Group and Slack workspace as alternative discussion forums. The accompanying text emphasizes best practices for debugging, such as including live Observable notebooks and minimizing code examples for better responses, followed by a grateful acknowledgment emoji.

Loading thumbnail…

Q-Q Plots

Three Q-Q plots compare a dataset of worker response times against three theoretical distributions: uniform, Gaussian, and a mixture of three Gaussians. Each plot shows quantile pairs as black circles against a diagonal reference line, with animated transitions between datasets using `d3.qq` and `transition`. The code loads `turkers.json`, computes sample statistics, and renders SVG with D3 v3.

Loading thumbnail…

Axis Styling

This example demonstrates how to customize the appearance of axes created with the d3-axis API in D3 v4, rendering SVG output. The chart shows a time-based scale on the x-axis spanning 2010–2012 and a linear scale on the y-axis ranging from 0 to 2 million. Customization is achieved through post-selection, where the code modifies generated axis elements by removing the domain path, styling tick lines with dashed strokes and gray color, and adjusting tick text positioning. A custom tick format prefixes the first value with a dollar sign and appends “million” while others use narrow non-breaking spaces. The code uses `d3.axisBottom`, `d3.axisRight`, `d3.scaleTime`, and `d3.scaleLinear`.

Loading thumbnail…

Ordinal Tick Filtering

This example demonstrates how to reduce clutter on an ordinal axis by selectively showing only every other tick label. The visualization renders an SVG axes with 52 letter-based categories, using `d3.scale.ordinal()` and `d3.svg.axis` with `.tickValues()` to filter the displayed ticks. The chart is generated with D3 v3, drawing black axis lines and labels in a plain HTML page.

Loading thumbnail…

Zero Ticks

This example demonstrates a minimal SVG axis from D3 v3 that displays only the domain path, with tick marks and labels completely suppressed by setting `ticks(0)`. The axis is rendered using `d3.svg.axis`, oriented to the bottom of a chart area defined by fixed margins, and styled with a black stroke and crisp edges. The underlying scale is a `d3.scale.identity`, mapping a width-based domain to pixel coordinates. The visible output is a single horizontal line, highlighting how axis components can be selectively hidden while retaining the baseline.

Loading thumbnail…

Extent Ticks

This example demonstrates how to display axis ticks at the extent of a scale, showing only the minimum and maximum values along the bottom of a chart. The visualization uses an identity scale to map the domain directly to pixel coordinates within a specified width. The code relies on d3.svg.axis with explicit tickValues set to the scale's domain, rendering the result as SVG elements. A simple margin-based layout positions the axis within a 960 by 500 pixel SVG canvas.

Loading thumbnail…

Versor Dragging II

This example demonstrates interactive rotation of a world map using versor dragging, allowing the map to spin smoothly in any direction. It uses a Mercator projection rendered onto a Canvas element, with land geometry from the World Atlas TopoJSON dataset. The interaction relies on d3.drag and custom versor quaternion math—provided in a separate versor.js file—to compute rotation deltas between mouse positions, avoiding the gimbal-lock issues of simpler Euler-angle approaches. The map is drawn with d3.geoPath using the canvas context.

Loading thumbnail…

Pierce Tiles

A tiled world map presents the Peirce quincuncial projection, seamlessly repeating across a square grid so that continents weave through the seams. The visualization uses a static rendered image of the projection, loaded as a CSS background with an infinite animation that slowly translates the tiles diagonally, creating an optical illusion of continuous motion. The map itself is computed from geographic data using D3’s `d3.geoPeirceQuincuncial` and `d3.geoPath`, with the resulting PNG file reused as the page’s backdrop.

Loading thumbnail…

Peirce Equatorial

This example shows the world’s landmasses and country boundaries projected onto a square using the Peirce quincuncial projection, which divides the sphere into a square with a distinctive diamond-like layout. The map is rendered as an SVG using D3 v4 and the `d3.geoPierceQuincuncial` projection from the d3-geo-projection library, with a graticule and a sphere outline drawn via `d3.geoPath` and `d3.geoGraticule`. It loads world-50m GeoJSON data from a gist and uses TopoJSON to extract land features and country meshes for the boundaries.

Loading thumbnail…

Raster & Vector IV

This example shows U.S. state capitals as red points on an interactive pan-and-zoom map of the United States, with raster map tiles from OpenStreetMap displayed beneath the vector data. Using d3-tile to load and position the image tiles, d3-zoom to handle pan and zoom gestures, and a d3.geoMercator projection with d3.geoPath to render the point locations from a CSV dataset, the map updates the tile layer and redraws the points on every zoom event, supporting scale levels from 2^11 to 2^14.

Loading thumbnail…

Raster & Vector III

This example shows how vector geographic features (U.S. counties) can be overlaid on raster map tiles from OpenStreetMap, with both layers staying aligned during pan and zoom interactions. The vector layer is rendered as a single SVG path using `d3.geoPath` and a `d3.geoMercator` projection, while raster tiles are fetched and positioned via `d3.tile` and `d3-zoom`. Instead of reprojecting, the code updates the SVG transform and stroke-width for efficiency, using `d3.zoomIdentity` and the `on("zoom")` event.

Loading thumbnail…

Raster & Vector II

A map of the United States uses a red outline to show state boundaries over OpenStreetMap raster tiles. The code combines d3-tile for tile loading, d3.geoMercator and d3.geoPath for reprojecting TopoJSON vectors, and d3-zoom for pan and zoom. On each interaction, the tile set and vector geometry are recomputed rather than relying on a transform, with tiles rendered as SVG images.

Loading thumbnail…

Beeswarm

This beeswarm plot displays the hierarchical structure of the Flare data set, encoding each node’s value as a logarithmically positioned point along the horizontal axis. The visualization employs a force-directed layout via `d3.forceSimulation`, using `d3.forceX` and `d3.forceY` to align points, while `d3.forceCollide` prevents overlap, creating a dense, non-overlapping distribution. To support hover interactions, it overlays a Voronoi diagram (constructed with `d3.voronoi`), rendering transparent cell paths that highlight the nearest circle in red on mouseover. The SVG output includes a logarithmic axis and tooltips showing each item’s name and value.

Loading thumbnail…

Timezones

This visualization displays a world map of time zones as a dark silhouette, with hover highlighting for each zone, and overlays a graticule and white boundaries between zones. It uses the d3.geo module with a Mercator projection, geoprojecting timezone polygons from a TopoJSON file derived from a shapefile of world time zones. Interactive hover effect is achieved through CSS :hover styling, which turns the hovered zone orange and displays its IANA time zone ID as a tooltip.

Loading thumbnail…

Area with Missing Data

A sine wave is plotted as a blue line and light blue area chart, with data points missing at regular intervals (every fifth sample). The gaps are visible as breaks in the line and area, while white dots mark only the valid data points. The example uses d3.line and d3.area with their defined methods to control which data points are rendered, and d3.axisBottom and d3.axisLeft for the scales. The dataset is generated in code using d3.range and a sine function.

Loading thumbnail…

Donut Centroid

A donut chart uses the golden ratio as its data values. The chart renders a ring of colored arcs on Canvas, with a black dot at the midpoint of each arc. That midpoint comes from `d3.arc`’s `centroid` method, which is positioned for label placement rather than as a geometric center. The example calls `d3.pie` to compute the arc angles, `d3.arc` to draw the shapes, and `d3.symbol` to draw the dot markers.

Loading thumbnail…

Pie Centroid

A pie chart displays seven categorical slices with distinct colors, each marked by a black dot at its centroid. The centroids are computed using the `arc.centroid` method from d3-shape, which returns a point suitable for label positioning rather than the geometric center of the arc. The visualization renders to a Canvas element, with the pie drawn via `d3.arc` and the dots via `d3.symbol`, both configured with the Canvas context. The underlying data is the Fibonacci sequence `[1, 1, 2, 3, 5, 8, 13]`, and the entire layout is created using the d3.v4 alpha library.

Loading thumbnail…

Canvas Donut

A donut chart displays the population distribution across seven age groups, with each segment labeled by its age range. The visualization renders to a Canvas element using d3-shape’s `d3.arc` for the donut and label arcs, and `d3.pie` to compute the angles from tab-separated data loaded via `d3.requestTsv`. Each slice is filled with a distinct color, separated by white strokes, and age labels are positioned using `labelArc.centroid`. Data comes from the included `data.tsv` file.

Loading thumbnail…

Canvas Pie

This example shows a minimal pie chart of U.S. population by age group, with each slice labeled directly on the canvas. The data comes from a TSV file, loaded via `d3.requestTsv`. It renders using the Canvas 2D API, with `d3.arc` and `d3.pie` from d3-shape to compute the arcs and angles. Slices are filled with distinct colors, outlined in white, and age labels are placed using the arc centroid method.

Loading thumbnail…

Zoomable Map Tiles

This interactive map shows a zoomable view of OpenStreetMap tiles that smoothly pans and zooms across geographic regions. It uses the `d3.geo.tile` plugin to calculate which 256x256 tile images are visible in the viewport based on current scale and translate values, while `d3.behavior.zoom` handles user panning and zooming interactions. The tiles are rendered as `img` elements positioned absolutely, and a `d3.geo.mercator` projection inverts mouse coordinates to display the latitude and longitude at the cursor.

Loading thumbnail…

Clipped Map Tiles

This example clips MapBox Natural Earth II raster tiles to the outline of the United States, which is loaded as TopoJSON. Using the d3.geo.tile plug-in and a d3.geo.mercator projection, it generates a grid of image tiles and applies a clipPath referencing the land outline. The stroke class adds a black outline, and the code dynamically selects tile URLs from MapBox subdomains.

Loading thumbnail…

Tile by Bounding Box

This example demonstrates map tiles clipped to a geographic bounding box, showing California with a vector overlay of state boundaries. It uses the d3-tile library to load OpenStreetMap raster tiles, positioning them with an adjusted Mercator projection from d3.geoMercator. The projection scale and translation are computed from the bounding box, then snapped to the nearest power of two for crisp tile rendering. The SVG overlay draws a topojson mesh of U.S. states using d3.geoPath, while the tile images are appended as absolutely-positioned img elements.

Loading thumbnail…

Gradient Encoding

This line chart shows daily temperature readings over a year, using a linear gradient as a redundant color encoding alongside the y-axis position. The gradient spans from steelblue at cooler temperatures through gray to red at warmer ones, making temperature ranges immediately visible. The code uses d3.svg.line with basis interpolation to draw the path, while d3.svg.axis creates the time and temperature axes. The gradient is defined with `gradientUnits` set to `userSpaceOnUse`, positioning color stops at explicit y-coordinates from the d3.scale.linear output, applied via the stroke attribute referencing the SVG linearGradient element.

Loading thumbnail…

Threshold Encoding

This line chart displays daily temperature readings over a year, changing color from black to red as the value crosses a 50-degree threshold. A linear gradient with two stops at the same offset creates the hard color break. The visualization uses the D3.js v3 API, including `d3.time.scale`, `d3.scale.linear`, `d3.svg.axis`, and `d3.svg.line`, with data loaded from a TSV file. The SVG rendering applies the gradient to the line path.

Loading thumbnail…

Line Drawing

This example demonstrates freehand line drawing through mouse drag interaction. A user presses and holds to create a smooth, flowing path rendered as an SVG stroke on a white canvas. The interaction is built using `d3.drag` to capture pointer events, while `d3.line` with the `d3.curveBasis` curve generates the smooth B-spline path through the collected points. The path elements are appended directly to the SVG container, and the code styles them with a black, three-pixel-wide stroke for a clear visual result.

Loading thumbnail…

Click vs. Drag

Twenty colored circles start at random positions. Clicking a circle briefly inflates it to black and back, while dragging moves it to a new location. Using `d3.behavior.drag` with d3.v3, the example distinguishes the two gestures by checking `d3.event.defaultPrevented` in the click handler. The SVG rendering animates transitions for the inflation effect and reorders dragged elements to the front.

Loading thumbnail…

Circle Dragging IV

This example demonstrates an improved method for dragging SVG circles, where the circle nearest to the pointer is selected for interaction rather than the topmost one. A Voronoi overlay, computed with `d3.voronoi`, is used for hit-testing, with its cells rendered as light-gray paths. Each circle is clipped to its corresponding Voronoi cell using a `clipPath`. During a drag, the `dragged` function updates the circle’s position and recalculates the Voronoi polygons. The code uses `d3.drag` for the interaction and `d3.scaleOrdinal` with `d3.schemeCategory20` for automatic circle colors.

Loading thumbnail…

Circle Dragging III

This example demonstrates an improved technique for dragging circles rendered on a Canvas, using a custom drag subject that selects the circle closest to the pointer rather than simply the topmost overlapping circle. The code defines a linear scan in `dragsubject` to find the nearest circle within double the radius, increasing the effective hit area for easier interaction. Twenty randomly positioned circles are drawn and updated via d3-drag’s event handlers, with active circles highlighted by a stroke. The implementation relies on d3.drag, d3.scaleOrdinal with d3.schemeCategory20, and the Canvas 2D API.

Loading thumbnail…

Circle Dragging II

This example shows a canvas-based visualization where users can drag any of twenty randomly positioned circles. It uses the d3.drag module with a custom subject function for hit-testing, checking if the pointer falls within a circle’s radius. During a drag, the circle is reordered to the foreground, marked with a temporary stroke, and its position updates, triggering a redraw via render listeners. The implementation relies on D3 v4’s event handling, Canvas’s 2D context, and d3.scaleOrdinal with the schemeCategory20 palette for circle fill colors, producing smooth, interactive feedback.

Loading thumbnail…

Circle Dragging I

This example shows a set of colored circles scattered across an SVG canvas, which users can drag with the mouse. Each circle’s position is stored as x and y properties in its data object, and those values update live during the drag. The code uses d3.select and d3.drag from the d3-drag module to handle the interaction, attaching event handlers for start, drag, and end. At drag start, the circle is raised to the foreground with `.raise()` and gets a black stroke via the `.active` class; the stroke is removed on release. The circles are rendered as SVG `<circle>` elements, colored with a categorical scheme from `d3.scaleOrdinal` and `d3.schemeCategory20`, with random initial positions computed from the SVG’s dimensions.

Loading thumbnail…

Hierarchical Bar Chart

This hierarchical bar chart shows the file structure of the Flare visualization toolkit, with each blue bar representing a folder. A bar’s length encodes the total size of all contained files and subfolders. Clicking a bar drills down into that folder, while clicking the background navigates back up. Built with D3 v3, the visualization uses `d3.layout.partition` to compute the hierarchy and animated SVG transitions to smoothly update the bars and x-axis when navigating.

Loading thumbnail…

Line with Missing Data

A sine-like series of 40 points is shown as a steel-blue line, with every fifth data point missing so the line breaks at those gaps rather than interpolating across them. White circles mark the existing points. The chart uses d3.line with its `defined` accessor to skip null values, while d3.scaleLinear sets the x and y scales, and d3.axisBottom and d3.axisLeft render the axes in an SVG.

Loading thumbnail…

GeoTIFF Contours II

This example renders a global temperature contour map from a GeoTIFF file, using natural Earth projection to display the data. The visualization computes contour polygons with d3-contour, reprojects them into spherical coordinates, and fills each contour with a color from the interpolateMagma sequential scale based on its value. The code loads the raster via the GeoTIFF library, rotates longitude values from [0, 360] to [-180, +180], and inverts pixel coordinates to latitude and longitude. SVG paths are drawn with d3.geoPath, with antimeridian stitching handled by d3.geoStitch.

Loading thumbnail…

GeoTIFF Contours

This example visualizes surface temperature data from a GeoTIFF file as twenty colored contour bands over a map-like SVG view. It reads the raster values with the GeoTIFF library, computes contours using `d3.contours` with smoothing disabled, and renders them as filled paths via `d3.geoPath`. A sequential color scale with `d3.interpolateMagma` maps each contour’s value to its fill color, producing a vivid elevation-style temperature gradient across the geographic extent.

Loading thumbnail…

Cloud Contours

A single magenta contour line endlessly traces the boundary of cloud cover over a NASA Earth Observations satellite image of global cloud fraction. The contour threshold animates smoothly over a five-second cycle, creating a pulsing effect that highlights different cloud-density regions. The code loads a monochrome PNG, blurs it with the StackBlur algorithm, and reads pixel values via Canvas `getImageData` to generate contour data with `d3.contours`. A `d3.timer` drives the animation, while `d3.geoPath` and a `d3.geoIdentity` projection render the vector outline onto the canvas.

Loading thumbnail…

Kernel Density Estimation

This example visualizes the distribution of wait times between eruptions of the Old Faithful geyser, comparing a histogram of 272 observations from R’s `faithful` dataset with a smooth kernel density estimate. The density curve, computed using an Epanechnikov kernel with a bandwidth of 7, reveals the bimodal nature of the data, with peaks around 55 and 80 minutes. The visualization uses d3.histogram for binning, d3.line with curveBasis for the density path, and d3.axisBottom and d3.axisLeft for the axes, rendering in SVG.

Loading thumbnail…

Force-Directed Tree

The visualization shows a small, hierarchical set of d3 software components arranged as a force-directed tree. Nodes and links are rendered as SVG circles and lines using D3’s force layout, with a weak vertical push that separates parent nodes from their children to suggest a tree structure. The example uses `d3.layout.force` with charge and link distance parameters, and updates node positions on each tick with `force.on("tick", tick)`. Node colors come from a categorical scale, and the data is loaded from an external JSON file containing nodes and links.

Loading thumbnail…

Force-Directed Tree

A force-directed tree renders 1,000 procedurally generated nodes connected in a hierarchical link pattern, with a force simulation continuously repositioning them. The code uses `d3.forceSimulation` with charge, link, x, and y forces to drive the layout, while drawing to a Canvas 2D context. Nodes appear as small filled circles, and links are stroked lines in gray, with the entire scene offset to the canvas center. Interactive dragging is enabled via `d3.drag`, letting users pull any node and observe the layout rebalance in real time.

Loading thumbnail…

Scatterplot Matrix Brushing

A scatterplot matrix uses the classic iris flower dataset to display pairwise correlations across four measurements: sepal and petal length and width. Each cell contains a scatterplot of two traits, and users can drag a rectangular brush over any plot to highlight the same flowers across all other cells. The highlighted selection is synced throughout the matrix, while unselected points are grayed out. The visualization is built with D3 v3, using SVG rendering, `d3.scale.linear` for axes, and `d3.svg.brush` to manage brush interactions.

Loading thumbnail…

Scatterplot Matrix

A scatterplot matrix visualizes pairwise correlations across four measured traits of iris flowers, using Anderson’s dataset. Each cell displays a scatterplot with points colored by species, and diagonal cells label each trait. The code uses D3 v3 to build the matrix, applying linear scales (`d3.scale.linear`), SVG axes (`d3.svg.axis`), and SVG circles for data points. Data loads from a CSV file via `d3.csv`. The matrix layout is generated by computing the cross-product of traits with a custom `cross` function.

Loading thumbnail…

Raster & Vector I

This example displays geographic vector boundaries overlaid on a raster map of Detroit. Using d3-tile to fetch and position OpenStreetMap image tiles, it renders them as a base layer within an SVG canvas. The d3.geoPath and d3.geoMercator projections draw a TopoJSON mesh of Detroit’s streets on top, creating a composite view of vector data and raster imagery.

Loading thumbnail…

d3.geoPath + Canvas

This example displays a map of the United States drawn entirely on a Canvas element. It shows how D3’s `d3.geoPath` can render geographic data into a native Canvas context rather than an SVG, with the map’s geometry provided by the `us-atlas` dataset. The code uses `d3.json` to load the TopoJSON file and `topojson.mesh` to convert it into renderable shapes. The resulting path is stroked onto the canvas via the `context` set on `d3.geoPath`, demonstrating a performant alternative to SVG for large spatial datasets.

Loading thumbnail…

Shiboronoi

Dozens of irregular polygonal cells tessellate a canvas, each showing a cropped slice of a single dog photograph. The image fragments align to form the complete picture, while the cells shift in response to mouse movement. The code uses D3 v3’s `d3.geom.voronoi` to compute the tessellation from tab-separated coordinate data, clips the drawing via Canvas `context.save` and `clip`, and renders each cell with `drawImage`.

Loading thumbnail…

Threshold Choropleth

A Threshold Choropleth displays US county unemployment rates quantized into color bands. The map uses a threshold scale to map continuous rate values, ranging from two to ten percent, into discrete shades of purple. `d3.scale.threshold()` defines the domain boundaries and corresponding range colors. The visualization renders SVG paths for counties, colored via `style("fill")`, with state borders overlaid. Data is loaded from a TSV file containing county IDs and rates, and geospatial shapes come from a TopoJSON file processed with `topojson.feature` and `d3.geo.path()`.

Loading thumbnail…

Tissot’s Indicatrix

This visualization demonstrates Tissot’s Indicatrix by projecting a grid of small orange circles onto an orthographic globe, showing how map projections distort shapes, areas, and angles. The globe also includes graticules, landmasses, and country boundaries. It uses D3 v3’s `d3.geo.orthographic`, `d3.geo.path`, `d3.geo.circle`, and `d3.geo.graticule` to construct and render the projection. TopoJSON supplies the world geometry, with the land and boundary layers inserted via `topojson.feature` and `topojson.mesh`. The SVG output includes stroked sphere outlines and semi-transparent indicatrices.

Loading thumbnail…

Circle-Packing II

This visualization displays a hierarchical bubble chart of the Flare dataset, where each circle’s area encodes a numeric value and its color reflects the data’s grouping structure. Built with D3 v4, the chart uses `d3.pack` to compute non-overlapping circle positions within a fixed canvas, with each node labeled by its class name and tooltip showing the raw value. The SVG rendering applies a clip-path to each node so text remains contained within its circle, and hovering highlights the selected bubble.

Loading thumbnail…

Voronoi Spirals

Randomly placed points generate Voronoi cells that gradually spiral inward, cycling through a Cubehelix color scale over a five-second animation. The d3-voronoi layout computes the initial polygons, then each frame the code shifts a vertex and interpolates a new point along each cell’s first edge, closing the path and filling it with a color based on elapsed time. Rendered on a Canvas via the d3.timer API, this creates a continuous, organic morphing effect.

Loading thumbnail…

Cascaded Treemap

A cascaded treemap displays the hierarchical structure of the Flare software package, using colored rectangles to represent nested categories and their sizes to reflect values. The visualization adjusts the layout so that deeper nodes are offset, creating a stepped, cascading effect that makes hierarchy levels visually distinct. It uses `d3.stratify` to parse the CSV data, `d3.treemap` for layout, and custom `cascade` functions to compute depth-aware offsets. Hovering highlights a node and its ancestors using `d3.selectAll` and classed transitions.

Loading thumbnail…

Nested Treemap

A nested treemap visualizes the hierarchical structure of the Flare data set, showing thousands of files and directories as nested rectangles whose areas encode file size and whose color encodes depth in the hierarchy. Hovering highlights the ancestors of the hovered node. The visualization uses D3 v4 APIs including `d3.treemap`, `d3.stratify`, and `d3.scaleMagma`, rendering to SVG. Text labels are clipped per rectangle, and node rects change stroke and dimensions on hover.

Loading thumbnail…

Cassini

The Cassini visualization presents a world map using the transverse equirectangular projection, rotated 90 degrees and rendered as an SVG. The landmasses are filled in dark gray while country boundaries appear as white lines, all overlaid with a graticule grid. The example uses d3.geo.equirectangular, d3.geo.path, and d3.geo.graticule from D3 v3, alongside topojson.feature and topojson.mesh to process the world-50m.json data. The entire drawing is rotated on the SVG canvas to achieve the final orientation.

Loading thumbnail…

Collignon

This example shows the Collignon projection, a pseudocylindrical equal-area map projection, applied to world geography with a graticule and country boundaries. The map displays land masses in dark gray against a white sphere outline, with graticule lines in gray and country borders in white. It uses the D3 v3 plugin’s `d3.geo.collignon` projection and `d3.geo.path` to render SVG paths. Land and country mesh data come from TopoJSON (world-50m.json), with a graticule generated via `d3.geo.graticule`.

Loading thumbnail…

Armadillo

This example uses the Armadillo projection to render a world map in a single continuous spiral. The code employs `d3.geo.armadillo()` with custom scale, rotation, and parallel settings, drawing graticules, land masses, and country boundaries from TopoJSON data. The map is clipped to a spherical outline using SVG `clipPath`, with land filled dark and borders in white. The visualization relies on `d3.geo.path` and `d3.geo.graticule` to project geographic features onto the two-dimensional canvas.

Loading thumbnail…

Stretched Treemap

This example uses a stretched treemap to visualize the hierarchical structure of the Flare dataset. The rectangles have a fixed aspect ratio of 4:1, which is achieved by first computing a squarified layout with a target ratio of one and then stretching the result horizontally. The treemap is built with `d3.treemap` and `d3.treemapSquarify.ratio`, while color and labels are assigned to each node via `d3.scaleOrdinal` and HTML `div` elements. Data is loaded from a CSV file with `d3.csv`.

Loading thumbnail…

Treemap by Count

This treemap displays the hierarchical structure of the Flare dataset, counting each leaf node as equal in size rather than scaling by a numeric value. The visualization uses d3.stratify to build the hierarchy and d3.treemap with a custom sum function that assigns a value of one to non-zero leaves. Each rectangular leaf is rendered as an HTML div, colored by its top-level category using d3.scaleOrdinal with schemeCategory10, and labeled with the node name split across multiple lines.

Loading thumbnail…

Vector Tiles

This interactive map displays vector tiles of road networks from OpenStreetMap, rendered as SVG paths. It uses Mapzen’s vector tile API to load road data, and d3.geoMercator’s projection with a d3.tile-based tile system to fetch and display 256×256 tiles. The visualization supports pan and zoom via d3.zoom, with a matrix3d transform for scaling and translation. Mouse movement updates a location readout showing latitude and longitude, computed by inverting the projection.

Loading thumbnail…

Phyllotaxis II

This example shows a Voronoi diagram generated from a phyllotaxis arrangement, a spiral pattern of points based on the golden angle. The code uses the `d3-voronoi.v0` library to compute Voronoi cells from these sites, then draws the polygon boundaries and point sites onto a Canvas 2D context. Hovering a cell fills it orange via CSS `path:hover`, though the canvas rendering itself only strokes the polygons without interactive fill logic visible.

Loading thumbnail…

This Is a Globe

A rotating orthographic globe displays Earth’s landmasses as a flat silhouette on a circular canvas. The map is rendered using D3 v3’s `d3.geo.orthographic` projection and `d3.geo.path`, with TopoJSON land data from the world-110m file. A `d3.timer` advances the rotation each frame, clearing and redrawing the canvas context, while a stroked arc outlines the sphere’s edge.

Loading thumbnail…

This Is Not a Globe

This visualization presents a stylized, rotating globe built from world land boundaries using an equirectangular projection. The land data is drawn onto a circular canvas clip, with two offset copies of the map scrolling horizontally to create the illusion of continuous rotation. The code uses the D3.js `d3.geo.equirectangular` projection, `d3.geo.path`, and Canvas `context` APIs, driven by a timer to update the animation. The world-110m GeoJSON dataset provides the geographic features, and the animation simulates a sphere while the actual projection remains flat.

Loading thumbnail…

Streaming Shapefile

This example streams a 12.9MB shapefile of US county boundaries directly from a remote URL, rendering each feature to a Canvas as it downloads. The map uses an Albers USA projection with a 0.5-pixel stroke, and parsing is handled incrementally by the shapefile library’s `open` and `read` promise chain. The `d3.geoPath` generator draws the geometry, and the browser’s streaming fetch support enables the full map to appear before the download completes.

Loading thumbnail…

Interrupted Sinusoidal II

This example displays a world map using an interrupted sinusoidal projection, splitting the globe’s landmasses into separate lobes for the northern and southern hemispheres. The map uses a white graticule and country boundaries over dark land areas, all clipped to a sphere outline. The visualization relies on d3-geo-projection’s `geoInterrupt` and `geoSinusoidalRaw` functions, with paths drawn using `d3.geoPath`. Geographic data comes from a world-50m GeoJSON file, processed via the topojson library, and rendered as SVG elements.

Loading thumbnail…

Isometric III

An animated field of white, wireframe cubes rotates and rises in an isometric grid. Each cube spins on its vertical axis, with the rotation amount and vertical position varying by its distance from the center, creating a wave-like motion across the diamond-shaped pattern. Built with D3’s `d3-timer` and `d3-ease` modules, it uses a custom `isometric` library to project 3D coordinates onto a 2D Canvas context, drawing paths with `moveTo` and `lineTo`. The animation is driven by the timer’s elapsed time, and cube placement uses both Manhattan and Cartesian distance calculations.

Loading thumbnail…

Isometric II

An isometric grid of white cubes rotates and expands from the center of a canvas, creating a pulsing, geometric wave. Each cube spins and grows in size based on its distance from the origin, using a custom isometric projection library to map 3D coordinates to 2D space. The animation is powered by `d3-timer` and `d3-ease`, with the canvas cleared and redrawn each frame.

Loading thumbnail…

Isometric

A grid of white cubes is rendered on a canvas, each rotating around its vertical axis. The rotation angle for each cube is determined by the sine of the elapsed time plus a value derived from its grid position, creating a subtle, wave-like variation across the display. The animation is driven by d3-timer, while a custom isometric projection library handles the 3D-to-2D transformation by projecting vertices onto the canvas using a fixed camera angle.

Loading thumbnail…

Hexagonal Binning

This example demonstrates hexagonal binning, aggregating 10,000 randomly generated points from `d3.randomNormal` into a grid of hexagons using the `d3-hexbin` plugin for D3 4.0. Each hexagon’s fill color reflects the local point density via a sequential `d3.scaleSequential` with the `d3.interpolateMagma` color scheme. The SVG rendering includes white hexagon strokes for visual separation, plus top and left axes built with `d3.axisTop` and `d3.axisLeft` on identity scales.

Loading thumbnail…

Solar Terminator

A live map displays the current solar terminator, the line separating day and night on Earth. A semi-transparent blue shape covers the night side of the globe, updating in real time. Built with d3.geo.equirectangular for the map projection and d3.geo.circle, the night region is drawn as a large circle whose center is the antipode of the sun’s computed position. The solar position is calculated using NOAA-derived equations for solar declination, the equation of time, and orbital corrections, updating every second via setInterval. The world map is rendered from TopoJSON land data.

Loading thumbnail…

The Sun’s View of the Earth

This example shows an orthographic projection of Earth from the Sun’s perspective, with the day-night terminator updated every second. The code uses d3.geo.orthographic, d3.geo.path, and d3.json to load TopoJSON world land data, rendering land as a single SVG path. A red dot marks the Sun’s position. Solar declination and equation of time calculations from NOAA drive the projection’s rotation, animating the view via setInterval and the rotate method.

Loading thumbnail…

Bubble Chart

A bubble chart encodes hierarchical data as a packed circle layout, with each circle’s area proportional to a numeric value and color representing its top-level package. The visualization uses D3 v4’s `d3.pack` and `d3.hierarchy` to compute the layout, then renders SVG circles and clipped text labels. Data comes from the Flare class hierarchy stored in a CSV file. Hovering reveals the full class name and formatted value via SVG `<title>` elements.

Loading thumbnail…

X-Value Mouseover

A line chart of daily closing prices displays a tooltip on mouseover, revealing the exact price at the nearest data point. The visualization uses D3.js v3 with SVG rendering, reading data from an external TSV file. As the mouse moves over an overlay rectangle, d3.mouse and a time scale’s invert method convert screen coordinates to dates, while a d3.bisector identifies the closest entry. The focus circle and text update accordingly, showing the formatted currency value.

Loading thumbnail…

County Topology

This graph shows the topology of U.S. counties as a network, where each node sits at a county centroid and links connect neighboring counties that share borders. The visualization uses simplified geometry from a TopoJSON file, rendering the nation and county boundaries as SVG paths via `d3.geoPath`. Node positions come from path centroids, while neighbor relationships derive from `topojson.neighbors` on the county geometries. Edges are drawn as straight lines between connected centroids, overlaid on the map to reveal adjacency patterns across the country.

Loading thumbnail…

World Map

This world map colors each country with a unique color from a categorical scale, using a Kavrayskiy VII projection and a graticule overlay. The map is rendered as SVG with d3.geo.path, and country boundaries are drawn as a white mesh via topojson.mesh. Country colors are assigned sequentially by a neighbor-based algorithm in the data join, ensuring adjacent countries differ. The Natural Earth Admin 0 countries dataset is loaded as TopoJSON, with each country identified by its ISO 3166-1 numeric code.

Loading thumbnail…

Partition

This visualization shows the hierarchical structure of the Flare codebase as an icicle partition layout, where each rectangle’s height represents the file size and its width corresponds to the value of the node. It uses d3.stratify to build the hierarchy from CSV data, d3.partition to compute the layout, and d3.scaleOrdinal with d3.schemeCategory10 for coloring leaf nodes by top-level category. The SVG rendering clips text labels to each rectangle and displays the node name and formatted value.

Loading thumbnail…

Treemap

This treemap visualizes the hierarchical structure of the Flare codebase, using rectangular nested cells to represent file sizes and categories. Built with D3.js v4, it uses the `d3.stratify()` and `d3.treemap()` APIs to lay out nodes, with color assigned from a `d3.scaleOrdinal()` palette based on top-level branches. Leaf values from `flare.csv` are displayed inside each cell, while hovering reveals the full path and numeric value. The rendering uses HTML divs positioned absolutely, with nested labels and value text.

Loading thumbnail…

Circle-Packing

This example visualizes the hierarchical structure of the Flare dataset using circle packing. Each node is represented as a circle, with leaf nodes sized by their value and grouped by their parent categories. The visualization uses D3 v4’s `d3.stratify` to build a hierarchy from the CSV and `d3.pack` to compute the circular layout. SVG circles are colored with a sequential magma scale based on depth, and hovering highlights the ancestors of a node via a CSS class and the `d3.selectAll` method.

Loading thumbnail…

Density Contours II

This example demonstrates density estimation of diamond prices and weights using contour lines. The visualization shows the distribution of carat and price data points, with concentric filled contour regions colored on a yellow-green-blue sequential scale to represent point density. The code uses d3.contourDensity for density estimation and d3.geoPath to render the resulting contour polygons as SVG paths. Data is loaded from a TSV file, with logarithmic scales applied to both axes for carat and price.

Loading thumbnail…

Satellite Projection

This example shows a satellite projection of the United States, with a graticule overlay and land boundaries rendered as SVG paths. The projection is created with `d3.geo.satellite()`, configured with a distance, scale, rotation, center, and tilt to simulate a view from space. The graticule is generated using `d3.geo.graticule()` and the map data is loaded from an external JSON file via `d3.json`. The code uses `d3.geo.path()` with the projection to draw both the graticule and the land polygons, which are converted from TopoJSON using `topojson.feature()`.

Loading thumbnail…

Contour Plot III

A contour plot displays animated isolines of a mathematical function, with colors shifting through a red-blue diverging scale as the threshold values change over time. The visualization computes a grid of sine-based values, then uses d3-contour to generate contour geometries at varying thresholds. d3.geoPath draws these shapes onto a Canvas element, while d3.scaleSequential and d3.interpolateRdBu map contour values to colors. A d3.timer drives the animation, continuously updating the thresholds to create the moving contour bands.

Loading thumbnail…

Contour Plot II

This example visualizes the Goldstein–Price function, a common test function for optimization, as a set of 20 logarithmic contour levels. The contours are drawn with SVG paths, each filled with a color from the YlGnBu interpolated color scale to indicate value. The underlying grid of 240×125 values is computed by sampling the function across its domain. The code uses `d3.contours` to generate the contour geometry, `d3.geoPath` with `d3.geoIdentity().scale()` to project the coordinates to the SVG canvas, and a `d3.scaleLog` for threshold mapping.

Loading thumbnail…

Contour Plot

A contour plot visualizes the volcano dataset from R, showing elevation values through filled isolines. The map uses a sequential color scale with a custom terrain interpolation, transitioning from green to yellow to white across the elevation range. Implemented with d3-contour and rendered as SVG paths, the code applies d3.geoPath with a geoIdentity projection to scale the contours, while d3.hsv and d3.interpolateHsvLong define the color transitions for the 5-unit threshold intervals.

Loading thumbnail…

Zoomable Icicle

This zoomable icicle chart displays a hierarchical dataset of file sizes from the Flare visualization library. Users click any rectangle to zoom in and explore deeper levels, or click the top bar to zoom out. The visualization uses d3.layout.partition to compute the layout and d3.scale.linear for positioning, with smooth transitions animating the rescaling of rectangles over 750 milliseconds. The data is loaded from a JSON file and rendered as SVG rectangles with a categorical color scale.

Loading thumbnail…

Marey’s Trains

This visualization recreates Marey’s classic train schedule as a stringline chart, showing train trajectories as sloped lines across a station-by-distance vertical axis and a time-based horizontal axis. The slope of each line encodes train speed, with orange limited-service trains and red baby bullets overlaid on black regular trains. The code uses D3 v3 with `d3.svg.line`, `d3.time.scale`, and `d3.svg.axis`, rendering in SVG. It loads station positions and stop times from a TSV file, filtering train types and clipping paths to show the full schedule.

Loading thumbnail…

Squares ↔ Hexagons

This example demonstrates a smooth morphing animation between two regular plane tilings: initially square cells transition into taller, non-regular hexagons. A grid of points is shifted horizontally by a changing offset each frame, and a Voronoi diagram is computed from these points using `d3.geom.voronoi`, rendering the resulting polygons as SVG paths. The offset moves point columns alternately, causing the cell shapes to transform continuously. The code uses `d3.timer` for the animation loop, with 2-pixel circles marking each generator point.

Loading thumbnail…

Diamonds II

This scatterplot of 1,200 diamonds reveals the distribution of carat mass against price in US dollars, using two logarithmic axes to accommodate the data’s wide range. The code first draws a white-lined grid and labeled axes via `d3.axisLeft`, `d3.axisBottom`, and the `d3.scaleLog` scale. It then animates the points: `d3.shuffle` randomizes the data, and a `d3.timer` loop repeatedly pops 500 diamonds per frame, drawing each as a fixed-size rectangle on the Canvas via `context.fillRect` with a multiplicative blend mode.

Loading thumbnail…

U.S. TopoJSON

This example displays a layered map of the United States using county, state, and national boundaries. The map is rendered as SVG, with counties stroked in thin gray, states in thin black, and the nation in a thicker black outline. It loads TopoJSON data from the us-atlas package and uses the topojson-client library to compute and draw the geographic meshes and features. The visualization is built with d3.v4, using d3.json for data fetching and d3.geoPath for path generation.

Loading thumbnail…

Albers Equal-Area Conic

The visualization demonstrates the Albers equal-area conic projection, a standard map projection commonly used for the United States. It displays the country’s landmass, county boundaries, and state lines over a graticule grid, with a dark land fill contrasted against white administrative borders. The code uses d3.geo.albers with custom rotation, center, parallels, and scale parameters, and renders geographic features via d3.geo.path. TopoJSON data from a remote source is parsed with topojson.feature and topojson.mesh to draw the land and boundary layers, while d3.geo.graticule generates the grid.

Loading thumbnail…

Grouped Bar Chart

This grouped bar chart displays the populations of six U.S. states across seven age groups, loaded from a CSV file via d3.csv. The visualization uses d3.scaleBand for the state and age-group positions, d3.scaleLinear for the population axis, and d3.scaleOrdinal with a categorical color range to distinguish age categories. Bars are rendered as SVG rectangles, with axes generated by d3.axisBottom and d3.axisLeft, while d3.format applies SI prefixes (e.g., “10M”) to tick labels. A legend maps colors to age groups.

Loading thumbnail…

World Tour

A rotating orthographic globe cycles through countries one by one, highlighting each in red while graying out the landmasses and drawing white borders. A title at the bottom displays the current country’s name. Built with D3 v3 and TopoJSON, it uses `d3.geo.orthographic` for projection, `d3.geo.path` with a Canvas 2D context for rendering, and `d3.transition` tweens to animate rotation toward each country’s centroid. Country names come from an external TSV file matched by ID.

Loading thumbnail…

Craig Retroazimuthal

This example displays a world map using the Craig retroazimuthal projection, centered on Mecca, with a graticule and country boundaries overlaid on dark landmasses. The map is rendered as SVG using D3 v3, with the projection defined via `d3.geo.craig()` and geographic features drawn through `d3.geo.path()`. Land and boundary data come from a TopoJSON file of world-50m, and the graticule is generated by `d3.geo.graticule()`. A spherical outline and white fill frame the projection, which is clipped to a 90-degree angle.

Loading thumbnail…

Craster Parabolic

This example displays a world map projected using the Craster parabolic projection, with graticule lines, country boundaries, and landmasses rendered in SVG. The visualization uses d3.geo.craster from the d3.geo.projection.v0 library, along with d3.geo.path for geographic path generation and topojson.v1 to parse world-50m.json data. A sphere outline and fill are drawn first, followed by graticule and geographic features from the TopoJSON file, with styling applied via CSS classes.

Loading thumbnail…

Cylindrical Stereographic

A world map is rendered using the cylindrical stereographic projection, showcasing global landmasses and country boundaries over a graticule grid. The visualization uses the `d3.geoCylindricalStereographic` projection from the d3-geo-projection plugin, with `d3.geoPath` drawing the geographic features. Land areas are filled dark, while country borders appear as white lines, and the sphere outline is traced in black. The map is built from TopoJSON world data loaded via `d3.json`, with geographic features extracted using the `topojson.feature` and `topojson.mesh` APIs.

Loading thumbnail…

Eckert I

This example displays a world map using the Eckert I projection, with landmasses filled in dark gray and country boundaries outlined in white against a graticule grid. The spherical outline is drawn with a thick black stroke and white fill, emphasizing the projection’s oval shape. The visualization uses D3 v3, the `d3.geo.eckert1` projection from the geo.projection plugin, and `d3.geo.path` to render geographic features. World data comes from a TopoJSON file (`world-50m.json`), processed with `topojson.feature` and `topojson.mesh` to separate land and country boundaries.

Loading thumbnail…

Eckert II

This example demonstrates the Eckert II projection, a pseudocylindrical equal-area map projection, applied to a world map. A graticule overlays the projection to show latitude and longitude lines, while landmasses appear in dark gray with white country boundaries. The visualization loads world data from a TopoJSON file and renders it using D3 v3’s `d3.geo.eckert2` projection and `d3.geo.path` for SVG paths. Spherical outlines are drawn via a sphere path, and the graticule is generated with `d3.geo.graticule`.

Loading thumbnail…

Eckert III

This example demonstrates the Eckert III map projection, a pseudocylindrical projection that preserves equal area. The SVG canvas displays a graticule and world map, with landmasses rendered in dark gray and country boundaries in white. Using the D3 v3 library, the code employs `d3.geo.eckert3()` for the projection, `d3.geo.path()` to draw geographic paths, and `d3.geo.graticule()` to generate the grid. The world map data is loaded from a remote GeoJSON file via `d3.json()` and transformed using the TopoJSON library.

Loading thumbnail…

Eckert V

This example displays a world map on the Eckert V projection, rendered in SVG for a 960-by-500 viewport. It uses the `d3.geo.eckert5` projection from the geo.projection plugin and `d3.geo.path` to draw graticules, landmasses from a TopoJSON world-50m file, and country boundaries derived via `topojson.mesh`. The map is styled with contrasting strokes and fills against a light background.

Loading thumbnail…

Eckert VI

This example demonstrates the Eckert VI map projection, a pseudocylindrical equal-area projection that displays the entire globe within an ellipse. The map shows world land masses as dark regions with white country boundaries overlaid on a graticule, all rendered as SVG. The code uses the D3 v3 library with the `d3.geo.eckert6` projection plugin, `d3.geo.path` for projecting geographic features, and `d3.geo.graticule` for the coordinate grid. World data comes from a 50m resolution GeoJSON file loaded via `d3.json`, and TopoJSON is used to extract land and boundary shapes.

Loading thumbnail…

Eisenlohr

The Eisenlohr projection is displayed as a world map, with graticule lines, country boundaries, and shaded landmasses rendered inside a circular sphere outline. The map is drawn using D3’s `d3.geo.eisenlohr` projection from the geo.projection plugin, with `d3.geo.path` converting GeoJSON and TopoJSON features into SVG paths. Land and boundary data comes from a 50-meter world TopoJSON file, loaded via `topojson.feature` and `topojson.mesh`, while graticule lines are generated with `d3.geo.graticule`.

Loading thumbnail…

Fahey

This example demonstrates the Fahey map projection, showing the world’s landmasses and country boundaries overlaid on a graticule and sphere outline. The visualization uses D3 v3’s `d3.geo.fahey` projection in conjunction with `d3.geo.path` and `d3.geo.graticule` to render geographic features. The land and boundary data is loaded from a 50m world TopoJSON file via `d3.json`, then drawn as filled and stroked SVG paths.

Loading thumbnail…

Ginzburg IV

This example shows a world map using the Ginzburg IV map projection, with landmasses and country boundaries drawn over a graticule and a spherical outline. The visualization uses d3.geo.ginzburg4 and d3.geo.path with SVG rendering, layering a white-filled sphere for reference. It loads world-50m.json TopoJSON data via d3.json, applying topojson.feature for land and topojson.mesh for boundaries. The map uses a black land fill, white boundaries, and gray graticule lines, styled through CSS classes.

Loading thumbnail…

Ginzburg V

This example displays a world map projected using the Ginzburg V polyconic projection, with landmasses filled in black and country boundaries outlined in white. A graticule grid and a sphere outline frame the map. The visualization loads world data from a TopoJSON file and renders it with SVG paths via `d3.geo.path()`. It uses the `d3.geo.ginzburg5()` projection from the d3.geo.projection plugin, and applies geographic features using `topojson.feature` and `topojson.mesh`.

Loading thumbnail…

Ginzburg VI

This example displays a world map using the Ginzburg VI polyconic projection, filling landmasses in dark gray against a white globe and overlaying graticule lines and country boundaries. It uses d3.geo.ginzburg6 from the d3.geo.projection plugin, with d3.geo.path for rendering, TopoJSON for world land and country data sourced from a gist, and SVG elements for the sphere, graticule, and hierarchical map layers.

Loading thumbnail…

Ginzburg VIII

This example displays a world map using the Ginzburg VIII projection, a pseudocylindrical map projection that curves meridians to create a distinctive, globe-like appearance. The map shows landmasses in dark gray with white country boundaries, overlaid on a graticule grid and enclosed by a circular sphere outline. Built with D3 v3, it uses `d3.geo.ginzburg8`, `d3.geo.path`, and `d3.geo.graticule` to render the projection, graticule, and sphere. Geographic data comes from a TopoJSON file of world land and country boundaries, loaded via `topojson.feature` and `topojson.mesh`.

Loading thumbnail…

Ginzburg IX

This example displays a world map using the Ginzburg IX projection, a pseudocylindrical compromise projection with curved meridians. The visualization shows land masses, country boundaries, a graticule, and an outer sphere outline, all rendered as SVG paths via `d3.geo.path` and TopoJSON data from world-50m.json. The code uses `d3.geo.ginzburg9()` from the d3.geo.projection plugin, applies a stroke-and-fill sphere mask, and loads geographic features with `topojson.feature` and `topojson.mesh`.

Loading thumbnail…

Gringorten Equal-Area

This example demonstrates the Gringorten equal-area projection, a map projection that preserves area while arranging the continents in an unusual, diamond-like layout. The visualization renders world landmasses in dark gray with white country boundaries against a graticule grid, all framed within a sphere outline. The code uses the `d3.geoGringorten` projection from the d3-geo-projection library, combined with `d3.geoPath` for rendering geographic data. World map data is loaded from a 50m resolution GeoJSON file via `d3.json`, and the graticule is generated using `d3.geoGraticule`. The SVG output is styled with CSS for the graticule, land, and boundary features.

Loading thumbnail…

Guyou

This example displays a world map using the Guyou hemisphere-in-a-square projection, which maps the globe onto a square. The visualization renders landmasses in dark gray with white country boundaries and shows a graticule of latitude and longitude lines. It employs the `d3.geoGuyou` projection from d3-geo-projection and uses `d3.geoPath` to draw the map features. The data is loaded from a world topojson file and processed through the `topojson` API, with the map drawn as SVG paths.

Loading thumbnail…

Hammer Retroazimuthal

This example displays a world map using a Hammer retroazimuthal projection, centered on parallel 52°N, with vector land and boundary outlines rendered as SVG paths clipped to the projected sphere. The code uses d3.geo.path with a custom projection and d3.geo.graticule to draw the graticule, while topojson.v1 loads and processes the world-50m GeoJSON data for land and country boundaries. A white stroke highlights the map boundary, and the projection’s clip angle ensures no artifacts appear beyond the map’s edge.

Loading thumbnail…

HEALPix

This example visualizes the Earth’s landmasses and country boundaries using the HEALPix map projection, which partitions the sphere into equal-area cells. The projection is rendered with `d3.geoHealpix()` and applied via `d3.geoPath()`, while a graticule overlays the map. The code loads world-50m GeoJSON data from a gist, projects it with `topojson.feature`, and clips all shapes to a spherical outline using an SVG `<clipPath>`. Styling distinguishes the sphere’s stroke, fill, graticule, land, and boundary layers.

Loading thumbnail…

Eckert IV

This example demonstrates the Eckert IV map projection, a pseudocylindrical equal-area projection that renders the entire world on a 960 by 500 pixel SVG canvas. The visualization displays the projected globe with graticule lines, landmasses in dark gray, and country boundaries in white. Using D3.js v3, the code employs `d3.geo.eckert4()` alongside the `d3.geo.path`, `d3.geo.graticule`, and the `d3.geo.projection` plugin to construct paths. World map data comes from a GeoJSON file containing 50-meter resolution land and country features, processed through TopoJSON.

Loading thumbnail…

Maurer No. 73

This example visualizes the world map using the Maurer No. 73 projection, a pseudonic equal-area projection that warps continents into a curved, flower-like shape. The map displays landmasses in dark gray with white country boundaries, overlaid with a graticule and enclosed by a circular sphere outline. It uses D3 v3 with the `d3.geo.hill` projection from the geo.projection plugin, rendered as SVG via `d3.geo.path`. Geographic data comes from a TopoJSON world dataset loaded with `topojson.feature` and `topojson.mesh`.

Loading thumbnail…

Hill Eucyclic

This example shows a world map using the Hill eucyclic projection, a pseudoconic, equal-area projection. The map displays landmasses in dark gray with country boundaries in white, overlaid on a graticule and a sphere outline. The code builds the visualization with `d3.geo.hill` from the geo.projection plugin, `d3.geo.path` for rendering, and `d3.geo.graticule` for the grid. World data is loaded as TopoJSON from a `world-50m.json` file and converted to GeoJSON using `topojson.feature` and `topojson.mesh`.

Loading thumbnail…

Lagrange

A Lagrange projection of the world is displayed as an SVG, with landmasses in black and country boundaries in white, all enclosed by a graticule and circular sphere outline. The example uses the D3.js v3 library with the `d3.geo.lagrange` projection plugin, rendered through `d3.geo.path` and `d3.geo.graticule`. Geographic data is loaded from a world-50m GeoJSON file via TopoJSON, which provides the land and country features drawn as SVG paths.

Loading thumbnail…

Larrivée

This example displays a world map using the Larrivée projection, a pseudocylindrical equal-area projection that resembles a flattened globe with curved meridians. Landmasses appear as dark shapes with white country boundaries, set against a graticule and a spherical outline. The map is rendered with SVG via D3’s `d3.geo.path` and the `d3.geo.larrivee` projection from the geo.projection plugin, while TopoJSON data (`world-50m.json`) supplies the land and country meshes. The visualization includes a graticule layer and a white-filled sphere background.

Loading thumbnail…

Laskowski Tri-Optimal

This example displays a world map using the Laskowski tri-optimal projection, which minimizes both area and shape distortion. The visualization shows landmasses as dark shapes and country boundaries as thin white lines, all overlaid with a graticule and enclosed by a sphere outline. The code uses `d3.geo.laskowski` for the projection, `d3.geo.path` for rendering, and loads world data via TopoJSON from a remote file. The rendering is done in SVG with distinct CSS classes for land, boundaries, and graticule.

Loading thumbnail…

Littrow

The example displays a world map using the Littrow projection, with landmasses in dark gray and country boundaries in white, clipped to a spherical outline. It also overlays a graticule to show latitude and longitude lines. The visualization uses D3 v3 with the `d3.geo.littrow` projection plugin, `d3.geo.path`, and `d3.geo.graticule` to render geographic data from a TopoJSON file containing world land and country boundaries, all drawn as SVG elements.

Loading thumbnail…

Loximuthal

This example displays a world map using the Loximuthal projection, a pseudocylindrical equal-area projection. The map shows landmasses in black with white country boundaries overlaid on a graticule, all enclosed within a circular sphere outline. The visualization uses d3.geo.loximuthal from the extended geographic projections plugin, along with d3.geo.path and d3.geo.graticule to render the vector data. TopoJSON provides the world-50m geographic data, which is converted to GeoJSON features and meshes for the land and boundary layers.

Loading thumbnail…

Robinson

This example displays a world map using the Robinson projection, with land masses in dark gray, country boundaries in white, and a graticule overlay. The map is rendered in SVG using D3 v3, employing `d3.geo.robinson` for the projection, `d3.geo.path` to draw geographic features, and `d3.geo.graticule` for the grid. Geographic data comes from a TopoJSON world file, processed with `topojson.feature` and `topojson.mesh` to separate land and boundaries.

Loading thumbnail…

Rectangular Polyconic

This example demonstrates the rectangular polyconic map projection, a pseudoconical projection that renders the world with curved meridians and straight parallels. The map shows landmasses in dark gray with country boundaries in white, overlaid on a graticule grid and enclosed by a spherical outline. Built with D3.js v3, it uses `d3.geo.rectangularPolyconic` from the extended projections plugin, `d3.geo.path` for geographic rendering, and `d3.geo.graticule` to generate the grid. World geometry comes from a TopoJSON file loaded via `topojson.feature` and `topojson.mesh`.

Loading thumbnail…

Polyconic

This visualization demonstrates the Polyconic map projection, a compromise projection that preserves distances along the central meridian and each parallel. It displays the world’s landmasses as solid black shapes with white country boundaries, overlaid on a graticule grid and an outlined sphere. The example uses the D3 v3 library with the `d3.geo.polyconic` projection plugin, `d3.geo.path` for rendering, and `topojson.v1` to process world-50m.json geographic data, drawing everything as SVG paths.

Loading thumbnail…

Patterson Cylindrical

The Patterson cylindrical projection renders world landmasses with country boundaries over a graticule, balancing polar exaggeration between Miller and Plate Carrée projections. Built with d3.v4 and d3-geo-projection, it applies `d3.geoPatterson()` to a `d3.geoPath` generator, scaling and translating to a 960×547 SVG canvas. Land and mesh data come from TopoJSON’s world-50m.v1, styled via CSS classes for land, boundaries, and graticule. The projection’s precision is set to 0.1 for smooth geometry.

Loading thumbnail…

Nell–Hammer

This example shows the Nell–Hammer map projection, a pseudocylindrical equal-area projection that renders the entire globe as an ellipse. It displays world landmasses in dark gray, country boundaries in white, and a graticule of meridians and parallels in light gray. The code uses the `d3.geo.nellHammer` projection from the `d3.geo.projection` plugin, with `d3.geo.path` to draw the projected geometry. Land and boundary data come from a TopoJSON source (`world-50m.json`), processed via the `topojson` library. Rendering is done with SVG, and the sphere outline is defined once as a reusable `<defs>` element.

Loading thumbnail…

Flat-Polar Quartic

This example displays a world map projected using the flat-polar quartic projection, which flattens the poles into curved, diamond-like shapes. The map shows landmasses in dark gray with country boundaries in white, overlaid on a graticule grid and enclosed by a circular sphere outline. It uses D3 v3 with the `d3.geo.mtFlatPolarQuartic` projection, `d3.geo.path` for rendering SVG paths, and TopoJSON to load world-50m geographic data. A graticule layer is generated via `d3.geo.graticule`, and the sphere outline is reused as both stroke and fill.

Loading thumbnail…

Flat-Polar Parabolic

A flat-polar parabolic projection maps the world onto an oval-shaped canvas, with landmasses filled in dark gray and country boundaries marked by thin white lines. The visualization also includes a graticule grid and an outer sphere outline, rendered as SVG paths using d3.geo.path and the d3.geo.mtFlatPolarParabolic projection. Geographic data comes from a TopoJSON world file, processed via topojson.feature and topojson.mesh. The projection scale and translation are set explicitly, with precision configured for smooth rendering.

Loading thumbnail…

Miller

This visualization demonstrates the Miller cylindrical map projection applied to world geography in a dark, high-contrast SVG rendering. Land masses appear in solid black, country boundaries as white lines, and a subtle graticule grid marks latitude and longitude. The example uses D3 v3 with the `d3.geo.miller()` projection, `d3.geo.path()` for geographic paths, and `d3.geo.graticule()` for the grid, processing TopoJSON data via `topojson.feature` and `topojson.mesh`. The map is centered at 960×700 pixels, with land and boundary layers inserted beneath the graticule.

Loading thumbnail…

Flat-Polar Sinusoidal

This visualization displays a world map using the flat-polar sinusoidal projection, with landmasses shown in dark gray and country boundaries as white lines over a graticule. The map is rendered as SVG paths using d3.geo.path with d3.geo.mtFlatPolarSinusoidal, while d3.geo.graticule generates the latitude and longitude grid. Land and boundary data come from a TopoJSON file loaded via d3.json, with features extracted using topojson.feature and topojson.mesh.

Loading thumbnail…

Sinusoidal

This example demonstrates the sinusoidal map projection, which represents the entire world on a two-dimensional plane with curved meridians and straight parallels. The visualization uses D3 v3 with the `d3.geo.sinusoidal` projection from the d3.geo.projection plugin, rendering land masses and country boundaries from a TopoJSON dataset. The map includes a graticule overlay and a white sphere outline, with land filled in dark gray and boundaries drawn in white. The code defines the projection’s scale, translation, and precision via `d3.geo.path`.

Loading thumbnail…

Times

This example displays a world map using John Moir’s Times projection, with continents shown in dark gray and country boundaries in white. The map is rendered as an SVG, enclosed by a graticule and a spherical outline. It uses the `d3.geo.times()` projection from the extended geographic projections plugin, along with `d3.geo.path()`, `d3.geo.graticule()`, and `topojson` to convert GeoJSON world data for land and boundary layers.

Loading thumbnail…

Van der Grinten I

The Van der Grinten I example displays a world map using a circular projection with graticule lines, landmasses, and country boundaries. It relies on d3.geo.vanDerGrinten from the geo.projection plugin, d3.geo.path for SVG path generation, and d3.geo.graticule to draw latitude and longitude lines. TopoJSON data from a world-50m file provides the land and boundary features. Land is filled dark, boundaries appear as white strokes, and the sphere outline is emphasized with a thick stroke.

Loading thumbnail…

Van der Grinten II

This example displays a world map using the Van der Grinten II projection, rendered as an SVG with landmasses in black and country boundaries in white. The code employs `d3.geo.vanDerGrinten2`, `d3.geo.path`, and `d3.geo.graticule` from the D3 v3 extended projection plugin. It overlays a graticule and loads world-50m.json data via the `topojson` library to draw geographic features.

Loading thumbnail…

Van der Grinten III

The Van der Grinten III projection renders a world map with a circular boundary, showing landmasses as dark shapes with white country borders over a graticule of meridians and parallels. The visualization uses a D3 v3 geo path with the `d3.geo.vanDerGrinten3` projection from the extended geographic projections plugin. It loads world-50m TopoJSON data, converts it with `topojson.feature` and `topojson.mesh`, and draws the sphere, graticule, and land boundaries as SVG paths, styled with stroke and fill classes.

Loading thumbnail…

Van der Grinten IV

This example displays a world map using the Van der Grinten IV projection, filled with dark land masses and white country boundaries against a graticule grid. The map is rendered as SVG using D3 v3, with the projection accessed via `d3.geo.vanDerGrinten4` from the geo.projection plugin. Geographic data comes from a TopoJSON file of world land and country shapes, processed with `topojson.feature` and `topojson.mesh`. A sphere outline and graticule are drawn with `d3.geo.path` and `d3.geo.graticule`.

Loading thumbnail…

Wagner IV

The Wagner IV projection, also known as Putniṇš P2´, is displayed as an interactive SVG world map with a graticule and country boundaries. The visualization uses `d3.geo.wagner4` from the geo.projection plugin, `d3.geo.path` for rendering, and TopoJSON data from a world-50m file to draw landmasses and boundaries. A spherical outline is defined and reused via SVG `<use>` elements for stroke and fill styling.

Loading thumbnail…

Kavrayskiy VII

This example displays the Kavrayskiy VII projection, a pseudocylindrical world map. It renders the Earth’s landmasses in dark gray with white country boundaries, overlaid on a graticule and sphere outline. Built with D3 v3, it uses `d3.geo.kavrayskiy7`, `d3.geo.path`, and `d3.geo.graticule`, loading world data via TopoJSON. Land and mesh features are drawn as SVG paths, with the projected sphere defined as a reusable path element.

Loading thumbnail…

Wagner VI

This example demonstrates the Wagner VI map projection, a compromise projection that balances area and shape distortion, rendered as a static SVG world map. The visualization draws a graticule grid, a filled sphere outline, landmasses in dark gray, and country boundaries in white. The code uses `d3.geo.wagner6` from the D3 geo.projection plugin, along with `d3.geo.path` and `d3.geo.graticule`, to project and render geographic data from a TopoJSON world dataset. Land and boundary features are extracted using `topojson.feature` and `topojson.mesh`.

Loading thumbnail…

Wagner VII

This example displays a world map using the Wagner VII projection, a compromise projection that balances area and shape distortion. A graticule overlays the globe, with landmasses filled in dark gray and country boundaries marked by thin white lines. The visualization loads geographic data from a TopoJSON file containing world land and country boundaries. Rendered as SVG, the code uses D3 v3’s `d3.geo.wagner7` projection, `d3.geo.path`, and `d3.geo.graticule`, alongside TopoJSON’s feature and mesh methods to extract and draw the spatial data.

Loading thumbnail…

Wiechel

This example visualizes the world on a Wiechel projection, a pseudo-azimuthal map that appears as a heart-shaped sphere. It displays continents in dark fill and country boundaries in white, overlaid with a graticule grid, all within a circular outline. The code uses the `d3.geo.wiechel` projection, `d3.geo.path`, and `d3.geo.graticule` from the d3.geo.projection library to render the map as SVG. World map data is loaded from a 50m GeoJSON file via `d3.json` and processed with `topojson`.

Loading thumbnail…

Winkel Tripel

A world map in the Winkel Tripel projection shows land masses in black with white boundaries, enclosed by a graticule and a spherical outline. The map displays all continents without extreme distortion, using a custom geographic projection. Built with the D3 v3 library, the example loads world-50m.json data and renders SVG paths via d3.geo.path with the d3.geo.winkel3 projection, applying graticule and boundary meshes through topojson.

Loading thumbnail…

Interrupted Sinusoidal

This example shows an interrupted sinusoidal projection of the world map, with the globe split into separate lobes in both hemispheres to emphasize land masses. The asymmetrical lobe boundaries, based on the Nordisk Världs Atlas, are visible through the white borders between countries. The visualization uses `d3.geoInterrupt` with `d3.geoSinusoidalRaw` to define the projection, and `d3.geoPath` to render the sphere, graticule, land, and country boundaries. Geographic data comes from the `world-50m.json` TopoJSON file, which is processed with `topojson.feature` and `topojson.mesh`.

Loading thumbnail…

Interrupted Sinu-Mollweide

This example demonstrates the Interrupted Sinu-Mollweide map projection, which splits the world map into several lobes that do not extend all the way to the equator, leaving a gap. The map is rendered with SVG using D3.js v3, including the `d3.geo.interrupt` function to define the lobe boundaries and `d3.geo.path` to project geographic features. Land and country boundaries are drawn from a TopoJSON world dataset, with land filled in black and boundaries outlined in white. A graticule and sphere outline complete the visualization, with a clip path restricting all elements to the globe's shape.

Loading thumbnail…

Peirce Quincuncial

This example shows the Peirce quincuncial projection, a conformal map that projects the globe onto a square using a complex algorithm. The visualization displays world landmasses in dark gray with white country boundaries, overlaid on a graticule of meridians and parallels, all within a 960-pixel SVG. The code uses `d3.geoPierceQuincuncial()` from the d3-geo-projection library to define the projection, and `d3.geoPath()` to render the projected geometry. It loads world data from a TopoJSON file, specifically via `topojson.feature` for land and `topojson.mesh` for country boundaries. The sphere is outlined in black, and the rendering is handled with SVG paths.

Loading thumbnail…

Bottomley

This example displays a world map using the Bottomley projection, a pseudocylindrical equal-area projection with curved parallels. Landmasses are filled in dark gray with white country boundaries, overlaid on a graticule and a black sphere outline. The code uses `d3.geo.bottomley()` from the d3.geo.projection plugin, rendered as SVG via `d3.geo.path()`. World data comes from a TopoJSON file, with countries meshed via `topojson.mesh` and land converted through `topojson.feature`.

Loading thumbnail…

Werner

This example displays a world map using the Werner projection, a specific map projection that shapes the globe into a heart-like form. The visualization renders the map with land areas in dark gray, country boundaries in white, and a graticule overlay. The code builds the map with the D3.js library and its `d3.geo.bonne` projection, using `d3.geo.path` and `d3.geo.graticule` to draw the map features. World land and country data is loaded from a TopoJSON file fetched with `d3.json`.

Loading thumbnail…

Bonne

The Bonne projection renders world landmasses and country boundaries onto a sphere-like base, with a graticule overlay showing latitude and longitude lines. Using d3.geo.bonne and d3.geo.path, the map applies the projection’s center at [0, 27] and a scale of 210. Land polygons are drawn from a TopoJSON world-50m dataset, while boundaries are derived from country mesh features. SVG output displays the projected shapes with distinct stroke and fill styles for the sphere, graticule, land, and boundaries.

Loading thumbnail…

Atlantis

The Atlantis example shows a world map rotated into an oblique aspect of the Mollweide projection, using an SVG rendering with land masses in dark fill and country boundaries as white mesh lines. The code rotates the projection by 30°, -45°, and 90° via `d3.geo.mollweide().rotate()`, then applies a 90° transform to the entire group. It draws a graticule with `d3.geo.graticule` and loads world data from a 50m TopoJSON file, using `topojson.feature` and `topojson.mesh` with `d3.geo.path` for projection.

Loading thumbnail…

Mollweide Hemispheres

This example displays a world map using the Mollweide projection, interrupted into two hemispheres—northern and southern—which are rotated twenty degrees and centered on a 960-by-500 SVG canvas. The map shows landmasses as dark shapes with white country boundaries, overlaid on a graticule, all clipped to a circular sphere. It uses the `d3.geo.interrupt` and `d3.geo.mollweide.raw` projections with `d3.geo.path`, and renders geographic data from a World 50m TopoJSON dataset, drawing both land polygons and a mesh of country boundaries.

Loading thumbnail…

Interrupted Mollweide

This example depicts the world using an interrupted Mollweide projection, styled after the Goode homolosine to reduce shape distortion across continents. The landmasses are silhouetted in dark gray with white country boundaries, while a graticule overlays the map. The code builds this projection with `d3.geo.interrupt` applied to `d3.geo.mollweide.raw`, defining custom lobes for each hemisphere. It renders geographical data from the world-50m GeoJSON file via `d3.json`, using `d3.geo.path` to draw the sphere, graticule, land, and boundary features into an SVG canvas.

Loading thumbnail…

Interrupted Goode Homolosine

This example demonstrates the Interrupted Goode Homolosine projection, a composite map projection that divides the world into lobes to minimize distortion. The visualization renders land masses in dark gray, country boundaries in white, and a graticule over a sphere outline, all clipped to the projection’s shape. It uses the `d3.geo.interrupt` and `d3.geo.homolosine` functions from the `d3.geo.projection` plugin, along with `d3.geo.graticule`, `d3.geo.path`, and TopoJSON data from the `world-50m.json` source.

Loading thumbnail…

Goode Homolosine

This example displays a world map using the Goode homolosine projection, a pseudocylindrical projection that combines the sinusoidal and Mollweide projections. The map shows land masses in dark gray with country boundaries in white, set against a graticule and a white sphere backdrop. The visualization uses D3 v3 with the `d3.geo.homolosine` projection API to render the map as SVG paths, pulling land and country data from a TopoJSON file via `topojson.feature` and `topojson.mesh`.

Loading thumbnail…

Bromley

The Bromley projection renders a world map in an equal-area cylindrical projection, using SVG paths to display landmasses in black with white country boundaries over a graticule grid. The map’s spherical outline is drawn as a stroked and filled sphere, while the graticule appears as light gray lines. The code uses `d3.geo.bromley`, `d3.geo.path`, and `d3.geo.graticule` from the D3 v3 geo projection plugin, processing a 50m world JSON dataset via `topojson.feature` and `topojson.mesh`.

Loading thumbnail…

Interrupted Boggs Eumorphic

This example shows a world map using the interrupted Boggs eumorphic projection, a composite of the sinusoidal and Mollweide projections. The map displays landmasses, country boundaries, and graticules, with the projection interrupted into separate lobes for the northern and southern hemispheres. The code uses `d3.geo.interrupt` with `d3.geo.boggs.raw` from the geo.projection plugin, along with `d3.geo.path` for rendering SVG paths. It loads world-50m.json via TopoJSON and clips all features to a spherical outline using a clipPath.

Loading thumbnail…

Sinu-Mollweide

This example demonstrates the Sinu-Mollweide map projection, a hybrid of the Mollweide and Sinusoidal projections, rendered as an SVG world map. The code uses D3 v3 with the extended geographic projections plugin, specifically calling `d3.geo.sinuMollweide` to define the projection. The map displays graticules, landmasses from a TopoJSON file (`world-50m.json`), and country boundaries, with a sphere outline and white fill. The projection is centered and scaled, and `d3.geo.path` handles the path generation for all geographic features.

Loading thumbnail…

Mollweide

This example shows a world map projected using the Mollweide projection, with graticule lines, land masses in dark fill, and country boundaries in white. The map is rendered as SVG using D3 v3 with the `d3.geo.mollweide` projection, `d3.geo.path`, and `d3.geo.graticule`. Land and boundary data come from a TopoJSON file of world countries, processed with `topojson.feature` and `topojson.mesh`. The code defines sphere, stroke, fill, graticule, land, and boundary CSS classes to style the visual layers.

Loading thumbnail…

Boggs Eumorphic

This example displays a world map using the Boggs eumorphic projection, an average of the sinusoidal and Mollweide projections. The map is rendered as SVG with landmasses in black and country boundaries in white, overlaid on a graticule. The code uses `d3.geo.boggs`, `d3.geo.path`, and `d3.geo.graticule` from the D3 v3 geo projection plugin, with geographic data loaded from a world-50m GeoJSON file.

Loading thumbnail…

Berghaus Star

This visualization displays a world map using the Berghaus star projection, a polyhedral layout that unfolds the globe into a star-like shape with pointed lobes. The map shows landmasses in dark gray, country boundaries as white lines, and a graticule grid, all rendered as SVG. The code uses d3.geo.berghaus, d3.geo.path, d3.geo.graticule, and topojson to load and project world-50m.json data, with a clip path limiting shapes to the sphere.

Loading thumbnail…

Baker Dinomic

This example displays a world map using the Baker Dinomic projection, with landmasses in dark gray, country boundaries in white, and a graticule overlay. The code uses D3 v3 with `d3.geo.baker()`, `d3.geo.path()`, and `d3.geo.graticule()` to render the map in SVG. Geographic data comes from a TopoJSON file (world-50m.json) loaded via `d3.json()`. A spherical outline is drawn first, filled white, then the land and boundary features are layered on top using `topojson.feature()` and `topojson.mesh()`.

Loading thumbnail…

August Projection

This example displays a world map using the August projection, a pseudocylindrical equal-area projection that curves parallels and meridians into distinctive intertwined shapes. The map renders land masses in dark gray with white country boundaries overlaid on a graticule, all enclosed within a spherical outline. Using D3 v3, the code employs `d3.geo.august` for the projection, `d3.geo.path` to draw geographic features, and `d3.geo.graticule` for the grid. TopoJSON data provides the world land and country boundaries, loaded from an external JSON file.

Loading thumbnail…

Aitoff

This example displays a world map using the Aitoff projection, a compromise projection that represents the entire globe in an ellipse. The map shows landmasses in dark gray and country boundaries as white lines over a graticule of latitude and longitude lines. Built with D3 v3 and the `d3.geo.aitoff` projection from the geo.projection plugin, it uses `d3.geo.path` to render the sphere, graticule, and land features. The world data is loaded as TopoJSON from a remote gist and processed with `topojson.feature` and `topojson.mesh`.

Loading thumbnail…

Airy’s Minimum Error

This example shows the Airy projection, a minimum-error map projection, centered over the Atlantic with a 90° clip angle. The visualization combines a graticule, landmasses from TopoJSON world data, and country boundaries rendered as SVG paths. The code uses `d3.geo.airy`, `d3.geo.path`, and `d3.geo.graticule` from D3 v3 and the extended geographic projection plugin, with land and boundary features generated via `topojson.feature` and `topojson.mesh`.

Loading thumbnail…

Bivariate Hexbin Map

This example maps approximately 3,000 Walmart store locations across the United States using hexagonal binning. It projects the store coordinates with the d3.geoAlbersUsa projection, then groups them into hexagons using d3.hexbin. Hexagon area encodes the number of stores in each bin, while the fill color encodes the median store age, ranging from black for older stores to steelblue for newer ones. The map is rendered as SVG, with d3.geoPath drawing the nation and state boundaries from TopoJSON data.

Loading thumbnail…

Calendar View

This calendar view visualizes daily Dow Jones index changes from 1990 to 2010 as colored cells arranged by week, month, and year. Each day’s percentage change between open and close is quantized into an eleven-step diverging color scale from Cynthia Brewer. The code loads CSV data with d3.csv, nests it by date using d3.nest, and renders SVG rectangles positioned by d3.timeWeek and d3.timeDay calculations, with month outlines drawn via d3.timeMonths paths.

Loading thumbnail…

U.S. Airports Voronoi

A Voronoi diagram partitions the United States into red cells, each containing the nearest airport from a dataset of 1,200+ airports. The map first draws land and state boundaries using TopoJSON and `d3.geoPath`, then projects airport coordinates with a `d3.geoAlbers` projection. Finally, `d3.voronoi` computes and renders the cell polygons, clipped to the SVG canvas, with airports shown as small points.

Loading thumbnail…

Quantile Choropleth

A quantile choropleth maps U.S. county unemployment rates to a nine-step blue color scale, with state boundaries overlaid in white. The d3.v3 code uses `d3.scale.quantile` and `d3.geo.albersUsa` with `d3.geo.path` to render SVG paths. Data loads via `queue` and `d3.tsv`, while TopoJSON provides county and state geometries.

Loading thumbnail…

Example Authors

This example visualizes the contributions of authors to bl.ocks.org, a platform for sharing D3 code blocks. The data is shown as a circular bubble chart, where the size of each leaf node represents the number of blocks by that author, and hover highlights the hierarchy path. The visualization uses D3 v4’s `d3.pack` layout to compute the circle positions and sizes, with SVG circles, text, and clip paths for labels, and `d3.hierarchy` to structure the JSON data. The data is a handcrafted `authors.json` file, and the code reads it via `d3.json`.

Loading thumbnail…

Exoplanets

A circle-packing visualization displays the relative sizes of planets in our solar system alongside hundreds of confirmed exoplanets, with each circle’s area proportional to its radius. A quantized color scale encodes planet radius, while a tooltip reveals the exoplanet’s name, radius, and distance from its star. The data comes from the Planetary Habitability Laboratory, and the layout is computed using d3.pack with padding, rendered as SVG circles. The code filters the CSV data to separate solar-system planets from exoplanets and uses d3.scaleQuantize for color mapping.

Loading thumbnail…

Chord Diagram

This chord diagram visualizes the import dependencies between packages in the Flare software class hierarchy, where each arc segment represents a package and the ribbons show the volume of imports between and within packages. The layout uses `d3.layout.chord` with a matrix of import counts derived from the `readme.json` data file, rendered as SVG paths via `d3.svg.chord` and `d3.svg.arc`. Package labels are rotated along the outer ring, and colors come from a `d3.scale.category20c()` categorical scale, with chord strokes darkened via `d3.rgb().darker()`.

Loading thumbnail…

Parallel Coordinates

This parallel coordinates visualization displays automotive data from the 1970s and 1980s, with each car represented as a polyline crossing seven axes for metrics like economy, cylinders, power, and weight. Using D3 v3, the SVG-based chart renders gray background lines for all cars and steelblue foreground lines that filter interactively. A d3.svg.brush component on each axis allows users to drag and select ranges along a dimension, dynamically hiding lines that fall outside the brushed extent. The code loads car data from a CSV file and applies linear scales with d3.scale.linear for normalization.

Loading thumbnail…

Force-Directed Graph

This force-directed graph visualizes character co-occurrence in Victor Hugo’s *Les Misérables*, using a physical simulation to position related characters closer together. The SVG rendering employs `d3.forceSimulation` with link, charge, and center forces to calculate node positions, while link thickness reflects co-occurrence frequency. Nodes are colored by group membership, and drag interactions allow users to adjust the layout. The data comes from Donald Knuth’s compilation of character appearances.

Loading thumbnail…

Tree of Life

A radial tree of life visualization displays the evolutionary relationships among hundreds of species. The circular layout uses a d3.cluster layout, with branch lengths shown as radial distances. Gray line extensions connect leaf labels to the tree, and hovering over a label highlights the path to the root. A checkbox toggles between constant and variable branch lengths using d3 transitions. The code parses Newick data with a custom parser and uses d3.hierarchy and d3.scaleOrdinal for coloring major taxonomic groups.

Loading thumbnail…

Zoomable Circle Packing

Nested circles represent the hierarchical structure of the Flare visualization toolkit, with each circle’s area proportional to the underlying data value. Clicking a circle smoothly zooms the view to focus on that subtree, while the background color shifts and labels fade in and out during the animated transition. The visualization uses D3 v4’s `d3.pack` layout, `d3.hierarchy`, and `d3.interpolateZoom` to calculate circle positions and drive the zoom animation, rendering the hierarchy as SVG circles and text elements. Data comes from the bundled `flare.json` file.

Loading thumbnail…

Radial Dendrogram

A radial dendrogram displays the hierarchical structure of the Flare data visualization toolkit, with nodes arranged in concentric rings radiating from a central root and curved links tracing parent-child relationships. Internal nodes appear darker, while leaf labels rotate to follow their radial position. The visualization uses D3 v4’s `d3.stratify` to build the hierarchy from CSV data and `d3.cluster` to compute radial layout angles and radii, with SVG paths and text elements rendered through a custom polar-to-Cartesian projection function.

Loading thumbnail…

Dendrogram

This dendrogram visualizes a hierarchical clustering of the Flare data set, showing the nested structure of its analytics, animation, and visualization classes. Internal nodes are rendered as small circles, with connecting links drawn as smoothed curves, while leaf nodes display labels. The example uses D3 v4 and SVG rendering, employing the `d3.cluster` and `d3.stratify` layouts to position nodes based on their hierarchical depth and computed height. Data is loaded from a CSV file, and the chart’s orientation places the root at the left, expanding rightward.

Loading thumbnail…

Zoomable Sunburst

This zoomable sunburst chart displays the hierarchical file structure of the Flare visualization library, using a radial layout where the root node sits at the center and leaves occupy the circumference. Each arc's angle corresponds to its value, and the visualization uses a d3.layout.partition to compute the layout. Clicking an arc zooms in by reinterpolating the x and y scale domains and ranges over 750 milliseconds, while the d3.svg.arc component redraws the arcs via an attrTween on the path data. The color scale d3.scale.category20c assigns colors based on parent node names, and the data comes from a JSON file.

Loading thumbnail…

Collapsible Tree

This interactive collapsible tree visualizes the hierarchical structure of the Flare dataset, displaying nodes as circles connected by curved links. Users can click any node to expand or collapse its subtree, with smooth 750-millisecond transitions animating nodes and links between positions. The visualization uses D3 v3's `d3.layout.tree` to compute positions, `d3.svg.diagonal` for link paths, and SVG transitions to update the scene. Node colors change from white to lightsteelblue when children are hidden, and the root collapses all branches initially. Text labels position dynamically based on whether a node has visible or hidden children.

Loading thumbnail…

Box Plots

This example displays a series of box-and-whisker plots summarizing speed measurements from the Michelson–Morley experiment, with each plot representing one experimental run. The visualization periodically randomizes the underlying data values, animating the transitions using D3's `transition` API over 1000 milliseconds. The charts are rendered as SVG, with the `d3.box` custom layout implemented in the included `box.js` file. The code uses `d3.csv` to load the morley dataset and `d3.scale.linear` for positioning, while outliers, medians, and whiskers update smoothly between randomization cycles.

Loading thumbnail…

Radial Stacked Bar II

A radial stacked bar chart compares the age distributions of U.S. states by population. Each state is represented by a wedge whose radial extent encodes total population, subdivided by seven age bands via `d3.stack` and `d3.arc`, with a custom `d3.scaleRadial` for radial scaling. The visualization labels each state with rotated text and includes circular gridlines and a legend. Data is loaded from a CSV using `d3.csv`, and the chart is rendered as SVG in a single `<svg>` element.

Loading thumbnail…

Radial Stacked Bar

This radial stacked bar chart displays the age distribution of each U.S. state’s population as concentric arcs. The visualization uses a d3.radial scale to map population totals from the inner to outer radius, while d3.stack and d3.arc render the stacked segments between angular bands. State labels rotate around the circle, and circular gridlines mark population tick values. The data comes from a CSV file, rendered as SVG using D3 v4.

Loading thumbnail…

Horizon Chart

This example presents a horizon chart of U.S. unemployment rates from 2000–2010, using color and vertical banding to condense a wide value range into a compact area. Users can toggle between “mirror” and “offset” modes and adjust the number of bands. The visualization is built with the `d3.horizon` plugin on top of D3 v3, rendering as SVG with transitions for animated updates. It loads data from `unemployment.json` and uses `d3.scale.linear`, `d3.svg.area`, and `transition` to animate the band count changes.

Loading thumbnail…

Density Contours

This example visualizes the density of the Old Faithful geyser dataset, showing the relationship between eruption duration and waiting time. It displays smooth contour lines that represent the estimated probability density of the data points, overlaid on a scatterplot of individual measurements. Built with D3 v4, the code uses `d3.contourDensity` to generate the contours and `d3.geoPath` to render them as SVG paths. The data is loaded from a TSV file, with axes labeled for idle and erupting minutes.

Loading thumbnail…

Best-First Search

A maze appears as a grid of white cells on a black background, with a single magenta path tracing the solution. Best-first search expands the maze from the bottom-right corner, prioritizing cells closest to the top-left goal by Euclidean distance, filling explored cells in gray. A binary min-heap manages the frontier, and the path is redrawn as the search narrows. The maze itself is generated via random traversal, rendered using Canvas 2D fillRect calls within a d3.timer animation loop.

Loading thumbnail…

Epicyclic Gearing

This example visualizes an epicyclic gearing system, showing the relative rotation of a sun gear, three planet gears, and an outer annulus. A menu in the top-left fixes any of the three gear types as the frame of reference, altering the apparent motion of the others. The gears are drawn using SVG paths generated by a custom `gear` function, which defines tooth shapes and central holes. The animation continuously updates each gear's rotation via `d3.timer` and applies a transform to the frame group to compute the relative motion based on gear radius.

Loading thumbnail…

Marimekko Chart

This Marimekko chart visualizes product sales across US markets, using a mosaic layout where each column represents a market segment with width proportional to total sales and stacked rectangles showing market-specific values. The visualization employs D3's linear scales for x and y axes, with color encoding via the category10 palette. Data is loaded from a JSON file and processed through D3's nest and reduce functions to calculate segment offsets and proportional dimensions, while SVG rects are rendered with crisp edges for precise boundaries.

Loading thumbnail…

Stacked-to-Grouped Bars

This example demonstrates an animated transition between stacked and grouped bar charts, with synchronized changes in position and size that preserve the identity of each bar segment. The visualization uses four series of fifty-eight pseudo-random values generated by a custom `bumps` function. The stacked layout defaults to view, and a radio button or an automatic timer switches to the grouped layout. The code leverages D3 v4 APIs including `d3.stack`, `d3.scaleBand`, `d3.scaleLinear`, `d3.scaleOrdinal`, and sequenced transitions via `transition()` calls, rendering as SVG.

Loading thumbnail…

Versor Dragging

This example demonstrates an orthographic globe rendered on Canvas that users can rotate by dragging with the mouse. Using a versor-based rotation technique, the globe’s orientation updates smoothly in response to drag gestures, avoiding the gimbal-lock issues of standard Euler angles. The code employs `d3.geoOrthographic` and `d3.geoPath` to project and draw the world, loading land polygons from the World Atlas TopoJSON dataset. The interaction is handled through `d3.drag`, while the custom `versor.js` library computes quaternion rotations for seamless, intuitive navigation.

Loading thumbnail…

A Bar Chart

A bar chart displays U.S. state populations from a CSV file, sorted descending by value, with white value labels at the end of each steel-blue bar and axis ticks along the top and left. It uses D3 v3 to load and parse the data, then builds scales with `d3.scale.linear` and `d3.scale.ordinal`, rendering SVG elements via `append` and styling with CSS classes. The `d3.svg.axis` component draws the ordinal left axis and linear top axis, while `d3.format` formats the numeric labels.

Loading thumbnail…

GeoJSON in Three.js

A rotating three-dimensional wireframe globe renders world landmasses in red over a gray graticule grid, animated via Three.js WebGL. The code loads world-atlas TopoJSON, converts it to a GeoJSON mesh with topojson.mesh, and maps longitude/latitude coordinates to Cartesian points on a sphere. A spherical MultiLineString graticule is built manually, and both layers use Three.js LineSegments with LineBasicMaterial, rotated continuously by d3.timer.

Loading thumbnail…

Chord Diagram

This chord diagram visualizes a 4x4 matrix of directed relationships, with ribbon thickness and arc sizes encoding the numeric values. The static SVG renders using `d3.chord()`, `d3.arc()`, and `d3.ribbon()` layouts, with group ticks and formatted labels generated by `d3.formatPrefix`. Categories are assigned colors via `d3.scaleOrdinal` over a custom palette. The code defines its own `groupTicks` function to position tick marks along each arc, while ribbons are filled by target-group color with a darker stroke.

Loading thumbnail…

Rotating Voronoi

Rotating Voronoi shows a black-and-white field of curved cells generated from continuously moving points. Multiple rings of points orbit at different speeds and radii, causing the Voronoi diagram to shift and deform fluidly over time. The animation uses the D3 `d3.geom.voronoi` to compute the cells, clips them against a rectangular boundary, and subdivides each polygon edge into three equal segments before applying the `basis-closed` interpolation to create the smooth, organic curves. The SVG paths are re-rendered each frame with `d3.timer`.

Loading thumbnail…

Spline Editor

This interactive spline editor lets users add, drag, and delete control points to shape a curve. The visualization redraws the line dynamically using `d3.svg.line` with a selectable interpolation mode from a dropdown menu. Data points are generated programmatically with random coordinates, and rendering uses SVG with elastic transitions for point appearance. The editor relies on D3’s event handling for mouse and keyboard interactions (including DELETE key removal), with point selection highlighted in orange. Animated updates occur through D3 transitions, while the chart area is a large transparent rectangle capturing mouse events.

Loading thumbnail…

Floating Landmasses

An orthographic projection of the world appears as a rotating globe, with continents rendered as two concentric spheres to create a floating-landmass effect. Using d3.geo.orthographic and d3.geo.path with canvas, the code layers a blurred, semi-transparent land silhouette behind a crisper foreground, while a graticule grid rotates overhead. The land data comes from a TopoJSON world-110m file, and the animation is driven by d3.timer with changing projection scale and clip angles.

Loading thumbnail…

Random Tree

A random tree grows incrementally as nodes are added to random parents, with the layout recalculated after each insertion using the Reingold-Tilford tidy algorithm via `d3.layout.tree`. Existing nodes and links transition smoothly to their new positions, while entering nodes and links first appear at the parent’s previous coordinates. The SVG animation, driven by a `setInterval` timer, stops after 500 nodes, with node and link styling defined through CSS classes and `d3.svg.diagonal` for curved edges.

Loading thumbnail…

Spermatozoa

Black tadpole-like forms with white elliptical heads and curved tails swim across a black canvas. One hundred spermatozoa each follow a path of twelve points, moving with sinusoidal tail undulations and bouncing off the boundaries. Built with D3 v3, the animation uses SVG elements—ellipses for heads and paths for tails—updated each frame by a `d3.timer`. Position and rotation come from velocity calculations, while tail curvature emerges from a spring-like point-chasing algorithm.

Loading thumbnail…

Hexagonal Binning (Color)

This visualization uses hexagonal binning to show the distribution of 2,000 randomly generated points with a normal distribution. The d3-hexbin plugin aggregates points into hexagons, and a sequential color scale from white to steelblue encodes the number of points within each bin, with denser areas appearing darker. The SVG rendering includes clipped hexagon shapes and axes generated with d3.axisLeft and d3.axisBottom. The code draws on d3.randomNormal for data generation and d3.scaleSequential for color mapping.

Loading thumbnail…

Every ColorBrewer Scale

This gallery displays every ColorBrewer scale as a grid of color swatches grouped by palette name. Each palette, from YlGn to YlOrRd, shows its largest available color scheme as a row of small rectangles. The visualization is rendered using D3 v3, iterating over the embedded `colorbrewer` data structure with `d3.entries` and `d3.values`. Clicking any palette outputs its full set of hexadecimal color values to the browser console via `JSON.stringify`. The swatch colors come directly from Cynthia Brewer’s ColorBrewer data.

Loading thumbnail…

Tobler–Mercator

This example demonstrates the Tobler–Mercator projection, a modified Mercator projection that preserves area. The world map is rendered with graticule lines, country boundaries, and a white sphere outline. Built with D3 v4, it combines `d3.geoProjection` with a custom projection function and `d3.geoPath` for geographic rendering. The map uses TopoJSON data from the world-atlas package, with land and country boundary geometries loaded via `d3.json` and processed using `topojson.feature` and `topojson.mesh`. The visualization is fully SVG-based.

Loading thumbnail…

Lambert Conformal Conic

This example shows a Lambert conformal conic projection of the world map, rendered from TopoJSON data. The map displays country outlines as a single land layer. The visualization uses the d3.v3 library, specifically the `d3.geo.path()` function with a `null` projection, to draw the projected paths onto an SVG canvas. The TopoJSON data is loaded from `world.json` and converted to features using `topojson.feature` before being inserted into the scene.

Loading thumbnail…

Sankey Diagram

This interactive Sankey diagram visualizes the flow of energy through the UK energy system. Nodes representing sources, conversion processes, and consumption sectors are connected by links whose thickness is proportional to energy value in terawatt-hours. Built with the d3-sankey-diagram library, the visualization uses a static layout and hover interactions to highlight paths. The underlying data, provided in a JSON file, defines the network structure, and the code relies on standard D3.js modules for rendering the diagram.

Loading thumbnail…

Voronoi Labels

This example demonstrates a technique for labeling points on a map by positioning text labels in the empty spaces between them, using Voronoi diagrams. The visualization computes a Voronoi tessellation of the point locations and then places each label within its corresponding cell, avoiding overlaps. Built with D3.js, it uses `d3.Delaunay` for triangulation, `d3.Voronoi` for the diagram, and a force-directed layout algorithm (`d3.forceSimulation`) to refine label positions. The underlying data comes from a set of U.S. city coordinates, rendered as circles on a projected map.

Loading thumbnail…

Cluster Force Layout IV

This example shows 200 circles grouped into 10 color-coded clusters, with node positions initialized using the d3.layout.pack circle-packing layout and then animated into a clustered force layout via d3.layout.force. The simulation applies a custom cluster function to pull same-color nodes together and a collide function using d3.geom.quadtree to resolve overlaps. Circles enter with a staggered radius transition via attrTween, and the force tick updates SVG circle positions. The data is generated randomly, with radii derived from a log distribution and clusters defined by a categorical color scale.

Loading thumbnail…

Rainbow Worm

A rainbow-colored worm undulates across a dark field, its sinusoidal body shifting with a peristaltic motion. The animation renders the worm as a sequence of thick path segments, each filled with a hue from the HSL color space based on its position. The code uses D3 v3 to compute and update the paths, with the `d3.timer` driving the animation. The lineJoin function calculates the stroke outlines to create a continuous, tube-like shape that varies in thickness and color as it moves.

Loading thumbnail…

Bilevel Partition

A zoomable sunburst visualizes hierarchical data from the Flare visualization library. The root node sits at the center, with nested arcs extending outward; each arc’s angle encodes its value, and color indicates the parent category. Clicking an arc zooms in on that subtree, while clicking the center circle returns to the previous level. The example uses d3.layout.partition, d3.svg.arc, and d3.transition with arcTween to animate path changes, rendering with SVG.

Loading thumbnail…

Gist b198922e4837fa3d96af13fb27d5c723

This example demonstrates how to embed an Observable notebook into a standalone HTML page using the Observable Runtime and Inspector APIs. The code loads a notebook, overrides its “subject” cell to output the string “Fred,” and renders the resulting “greeting” cell into a page element. It uses the `Runtime.load` method, `Library`, and `Inspector` classes from the `@observablehq/notebook-runtime` module, fetching the notebook from `api.observablehq.com`. The visualization shows dynamic text replacement within a live notebook module.

Loading thumbnail…

Difference Chart

This example shows daily average temperatures in New York and San Francisco over roughly nine months as a bivariate area chart, using clipped SVG areas to color the difference between the two lines: green fills where New York is warmer, and red where San Francisco is warmer. The chart uses D3 v3 with time scale, linear scale, and SVG axes, and two clipped area paths to split the difference region. A black line plots the New York temperature. Data is loaded from a tab-separated file with three columns: date, New York, and San Francisco.

Loading thumbnail…

Bivariate Area Chart

A bivariate area chart displays daily high and low temperatures in San Francisco over two years, using a filled band to show the temperature range between the two values. The data comes from a TSV file provided by the National Climatic Data Center and is rendered as a single SVG path. The visualization is built with D3 v3, employing d3.tsv for data loading, d3.time.scale for the x-axis, d3.scale.linear for the y-axis, and d3.svg.area to generate the band shape. Axes are drawn using d3.svg.axis with conventional margins.

Loading thumbnail…

Normalized Stacked Bar Chart

This normalized stacked bar chart displays the percentage distribution of age groups across U.S. states, sorting states by the proportion of their youngest residents. Using D3 v4, it applies `d3.stack` with `stackOffsetExpand` to scale each bar to full height, then renders SVG rectangles with an ordinal color scale for age categories. Axis labels are formatted as percentages, and a custom legend anchored to each bar’s final segment identifies each series. The chart loads population data from `data.csv` and sorts states in descending order of the "Under 5 Years" share.

Loading thumbnail…

Hexagonal Binning (Area)

Two thousand normally distributed random points are aggregated into hexagonal bins, where the area of each hexagon encodes the number of points it contains. The visualization uses the `d3-hexbin` plugin’s `d3.hexbin()` to bin the data and `hexbin.hexagon()` to generate the SVG path for each bin, with `d3.scaleSqrt` mapping bin counts to radius. Axes are drawn with `d3.axisLeft` and `d3.axisBottom`, and the rendering is clipped to the plotting area via an SVG `clipPath`.

Loading thumbnail…

Briesemeister

This example presents a world map using the Briesemeister projection, an oblique Hammer projection with a 1.75:1 aspect ratio and an oblique orientation centered at 10°E 45°N. It shows the landmasses in dark gray with white country boundaries, overlaid on a graticule, all within a sphere outline. The visualization uses d3.geo.projection with a raw Hammer projection, rotated and scaled, to render SVG paths for land, boundaries, and graticule. The geographic data for the land and boundaries originates from a world-50m TopoJSON file, processed with topojson.feature and topojson.mesh.

Loading thumbnail…

Quartic Authalic

This example displays a world map using the quartic authalic projection, a variant of the Hammer projection with an infinite coefficient, resulting in a distinctive flattened and stretched appearance. The map shows landmasses in dark gray with white country boundaries, overlaid on a graticule grid, all enclosed within a circular sphere outline. Built with D3 v3, it uses `d3.geo.hammer()` with a coefficient of `Infinity` to define the projection, `d3.geo.path()` for rendering, and TopoJSON to load world-50m geographic data. The SVG output includes styled paths for the sphere, graticule, land, and boundaries.

Loading thumbnail…

Eckert–Greifendorff

This example visualizes the Eckert–Greifendorff projection, a custom variant of the Hammer projection with a coefficient of 4, by displaying world landmasses and country boundaries overlaid on a graticule. The spherical outline is drawn with a white fill and black stroke, while land appears in dark gray. It uses D3 v3, the `d3.geo.hammer` plugin, and TopoJSON to load and render the world-50m dataset via SVG paths. The projection is configured with a scale and translation to center the map.

Loading thumbnail…

Hammer

The example shows a world map using the Hammer projection, with landmasses rendered in dark gray and country boundaries outlined in white against a graticule. It demonstrates how the projection’s coefficient B can be customized, though the code displays the default B=2. Using D3 v3, it applies `d3.geo.hammer` from the geo.projection plugin, `d3.geo.path` for geographic rendering, and `d3.geo.graticule` for the grid. TopoJSON data from a remote world-50m file is converted with `topojson.feature` and `topojson.mesh` to draw land and boundaries into an SVG.

Loading thumbnail…

Equidistant Conic Projection

This example shows a world map drawn with the equidistant conic projection, including a graticule, landmasses, and country boundaries. The map is rendered as SVG using D3’s `d3.geo.conicEquidistant` projection and `d3.geo.path` to generate the paths. A sphere outline and graticule are drawn first, then geographic data from a TopoJSON file (`world-50m.json`) is loaded with `topojson.feature` and `topojson.mesh` to display land and political borders.

Loading thumbnail…

Lambert Conformal Conic

The example shows a world map rendered with the Lambert conformal conic projection, using a graticule and sphere outline to clarify the projection’s shape. It displays landmasses in dark gray and country borders as thin white lines over a light background. The visualization uses d3.geoConicConformal to define the projection, d3.geoPath to generate SVG paths, and topojson.feature and topojson.mesh to extract land and border geometries from the world-50m dataset. The graticule is drawn with d3.geoGraticule10, and all elements are rendered as SVG paths.

Loading thumbnail…

Natural Earth

This example demonstrates the Natural Earth projection, a pseudo-cylindrical map projection that balances the appearance of landmasses with minimal shape distortion. It renders a world map from a TopoJSON dataset, displaying country borders and land areas as filled paths, with a graticule overlay and a spherical outline. The visualization uses D3.js v3 with the `d3.geo.naturalEarth` projection, `d3.geo.path`, and `d3.geo.graticule` APIs to draw vector graphics as SVG elements. The code loads world geography data from a gist-hosted JSON file and applies styling for land, boundaries, and graticule strokes.

Loading thumbnail…

Equirectangular (Plate Carrée)

This example demonstrates the equirectangular (Plate Carrée) projection, a simple geographic mapping where latitude and longitude are plotted linearly on a flat grid. The visualization displays world landmasses in dark gray and country boundaries in white, overlaid with a graticule grid at half opacity. The code uses d3.geoEquirectangular to define the projection, d3.geoPath for rendering, and topojson to parse world-50m.json data. The map is drawn as SVG paths with styling for land, boundaries, and graticule layers.

Loading thumbnail…

Gnomonic

This example shows the world map projected using the gnomonic projection, where great circles appear as straight lines and distortion increases toward the edges. The map is clipped at a 90-degree angle, displaying landmasses in dark gray with white country boundaries over a graticule grid. The visualization uses D3 v3’s `d3.geo.gnomonic` projection and `d3.geo.path` to render SVG paths from TopoJSON world data, with the graticule drawn via `d3.geo.graticule`. The code sets projection scale, translation, and precision before loading the `world-50m.json` file.

Loading thumbnail…

Transverse Mercator

This example demonstrates the transverse Mercator map projection, displaying world landmasses and country boundaries within a graticule grid. The map is rendered as SVG using the D3.js library, specifically employing the `d3.geoTransverseMercator` projection and `d3.geoPath` for drawing geometries. World data comes from the `world-atlas` package, processed with `topojson-client` to extract land and boundary features. The visualization includes a spherical outline, a graticule, and styled land and boundary paths, all centered within a 960x960 canvas.

Loading thumbnail…

Spherical Mercator

The example shows the spherical Mercator projection applied to a world map, displayed within a circular outline that represents the globe. The map renders landmasses in dark gray with white country boundaries, overlaying a graticule grid of meridians and parallels. Built with d3.geoMercator and d3.geoPath, it draws the sphere outline, graticule, and world geography via SVG paths. Geographic data comes from the world-atlas TopoJSON dataset, processed with topojson-client to extract land and country meshes.

Loading thumbnail…

Orthographic

This example shows a globe rendered with the orthographic projection, displaying landmasses and country boundaries over a graticule, all clipped to a sphere. The visualization uses D3 v3’s `d3.geo.orthographic` for projection, `d3.geo.path` for drawing, and `d3.geo.graticule` for the grid. Land and boundary data come from a TopoJSON world file (world-50m), processed with `topojson.feature` and `topojson.mesh`. The sphere is drawn twice: once as a black stroke and once as a white fill, with the land and boundaries layered in between.

Loading thumbnail…

Azimuthal Equidistant

This example demonstrates the azimuthal equidistant projection, a map projection that preserves accurate distances from a central point. The map is centered on San Francisco, with the world rendered using outlines and filled landmasses. The visualization uses D3’s `d3.geoAzimuthalEquidistant` projection and `d3.geoPath` to draw the sphere, graticule, and geographic features. Land and boundary data come from a world-atlas TopoJSON file, processed using the `topojson-client` library. The SVG output includes a graticule, a stroked sphere outline, and a white-filled sphere background.

Loading thumbnail…

Polar Azimuthal Equal-area

This example visualizes the Earth using the polar azimuthal equal-area projection, with landmasses in black and country boundaries in white against a graticule. The map is centered on the North Pole and rendered as an SVG, with a sphere outline and fill. The code uses `d3.geo.azimuthalEqualArea()` for the projection and `d3.geo.path()` to draw features from a TopoJSON world dataset loaded via `d3.json`.

Loading thumbnail…

Lambert Azimuthal Equal-Area

This example visualizes world landmasses and country boundaries using a Lambert azimuthal equal-area projection, centered on the globe to produce a circular map. The graticule and sphere outline frame the map, while land is filled dark against a light background. Built with D3 v4, it uses `d3.geoAzimuthalEqualArea` for projection, `d3.geoPath` for rendering shapes, and `d3.geoGraticule` for the grid, pulling geographic data from a world-50m JSON dataset via `topojson`. The SVG output is styled with CSS classes for land, boundaries, and graticule.

Loading thumbnail…

Stereographic

A world map is displayed using the stereographic projection, showing landmasses in dark gray and country boundaries in white over a graticule grid. The projection rotates the globe by -20 degrees longitude and clips the view to a square. Built with D3 v3, the example uses `d3.geo.stereographic`, `d3.geo.path`, and `d3.geo.graticule`, rendering SVG paths from TopoJSON world data. The graticule is drawn beneath the land and boundary layers.

Loading thumbnail…

Multi-Series Line Chart

This multi-series line chart shows daily average temperatures for New York, San Francisco, and Austin over one year, using color-coded lines for each city. The data is loaded from a TSV file and parsed with `d3.tsv` and `d3.timeParse`. It uses `d3.scaleTime` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.scaleOrdinal` with `d3.schemeCategory10` for color encoding. Lines are drawn with `d3.line` and a basis curve, while `d3.axisBottom` and `d3.axisLeft` render the axes. City labels are appended at the end of each line.

Loading thumbnail…

Donut Chart

This donut chart displays the population distribution across seven age groups, from under 5 to 65 and older, using a ring of color-coded arcs. The chart is built with D3 v3, loading data from a CSV file via `d3.csv` and rendering SVG paths. It uses `d3.scale.ordinal` for color encoding, `d3.layout.pie` to compute arc angles from the population values, and `d3.svg.arc` to define the ring geometry with an inner and outer radius. Each segment includes a label positioned at the arc’s centroid.

Loading thumbnail…

Scatterplot

This scatterplot visualizes the relationship between sepal length and sepal width for three iris species, with each point colored by species and a legend identifying the categories. The chart uses conventional plot margins and axes labeled with measurements in centimeters. It is built with D3 v3, loading data from a TSV file via `d3.tsv`, mapping the data to positions with `d3.scale.linear`, encoding species with `d3.scale.category10`, and rendering as SVG with circles and axes from `d3.svg.axis`.

Loading thumbnail…

Stacked Bar Chart

This stacked bar chart displays the population distribution across seven age groups for each U.S. state, sorted by total population. Data is loaded from a CSV file using d3-dsv. The chart uses d3.scaleBand for the x-axis, d3.scaleLinear for the y-axis with SI-prefix formatting via d3-format, and d3.scaleOrdinal for color encoding. d3-shape’s d3.stack computes the stacked positions, while d3.axisBottom and d3.axisLeft render the axes.

Loading thumbnail…

Stacked Area Chart

This stacked area chart visualizes the global market share of popular web browsers from June to September 2015, using data from Clicky Web Analytics. Time-series data for eight browser categories is loaded from a TSV file and stacked using `d3.stack`. The visualization encodes dates on the x-axis with `d3.scaleTime`, market share percentages on the y-axis with `d3.scaleLinear`, and browser categories with the ordinal color scheme `d3.schemeCategory10`. Regions are drawn as SVG paths via `d3.area`, with axes generated by `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

Area Chart

This area chart displays the closing price of AAPL stock from 2007 to 2008, with the area beneath the line filled in steelblue to emphasize the price trend over time. The visualization is rendered as an SVG element and uses D3 v4 modules including d3-dsv to parse tab-separated data, d3-time-format for date parsing, d3-scale for time and linear scales, d3-array for data extent calculations, d3-axis for the bottom and left axes, and d3-shape’s d3.area to generate the filled path. The y-axis is labeled “Price ($)”.

Loading thumbnail…

Pie Chart

This pie chart displays the population distribution across seven age groups, from under five to 65 and over, with each slice labeled and colored distinctly. The visualization is built using D3 v4, leveraging d3-dsv to parse the CSV data, d3-scale for the ordinal color encoding, and d3-shape’s `d3.pie` and `d3.arc` to compute and render the arcs as SVG paths. Labels are positioned using the arc centroid method.

Loading thumbnail…

Sortable Bar Chart

This variation of a sortable bar chart displays letter frequencies from a tab-separated data file. Users toggle a checkbox to reorder bars either alphabetically by letter or descending by frequency, with staggered delays and reduced opacity improving readability during transitions. The visualization uses d3.svg.axis, ordinal and linear scales, and SVG rectangles, animating position changes through transition delays while updating the x-axis simultaneously. The technique follows Heer and Robertson’s recommendations for animated transitions.

Loading thumbnail…

Connected Particles

One hundred particles drift vertically at constant speeds across a canvas, with lines connecting nearby particles whose opacity fades as distance increases. The visualization uses d3-timer’s timer for animation and the Canvas 2D API for drawing arcs and strokes. Each particle’s horizontal position resets randomly when it exits vertically, while line visibility depends on squared distance thresholds. The code relies on `d3.timer` and direct canvas context methods like `clearRect`, `arc`, and `lineTo`.

Loading thumbnail…

Cellular automata

A one-dimensional cellular automaton stands at the center of this visualization, which arranges all 256 possible nearest-neighbor rules in a grid. The display uses a tile-based procedural map via Polymaps, with a worker script (`cell-worker.js`) computing each rule’s evolution from a random initial state. Color intensity indicates cell state, and zooming reveals the structure of individual rules. The rendering leverages Polymaps’ `po.map`, `po.procedural`, and `po.hash` APIs, while the worker handles the pixel-level computation and postMessage communication, following the example from MathWorld.

Loading thumbnail…

Voronoi Tessellation

This interactive Voronoi diagram shows how a set of one hundred random points partitions a 960-by-500 SVG canvas into polygonal cells. Moving the mouse repositions the first site, causing the diagram to recompute dynamically with the red polygon, black links, and white site markers updating in real time. Built with D3 v4 and the d3-voronoi library, the example renders polygons as SVG paths, links as lines, and sites as circles, with all geometry recalculated on each mouse move.

Loading thumbnail…

Sunburst Partition

A sunburst diagram displays the hierarchical structure of the Flare dataset, with the root at the center and leaves on the circumference. The visualization uses a radial layout where the angle of each arc encodes the value of the corresponding node. The code employs `d3.layout.partition` and `d3.svg.arc` to compute and draw the arcs, with color assigned by the `category20c` scale. A radio button toggles between sizing arcs by node size or by leaf count, triggering a smooth animated transition via `attrTween` and `d3.interpolate`.

Loading thumbnail…

Treemap

A treemap recursively subdivides a rectangle into smaller rectangles, with each node's area proportional to its value, encoding the hierarchical structure and size of the Flare visualization toolkit's packages through both position and color. The visualization includes an interactive radio-button control that toggles between summing leaf sizes and counting leaves, triggering a 750-millisecond transition that animates rectangle boundaries using D3 v4's `d3.treemap` with the `d3.treemapResquarify` tiling algorithm. Rendered as SVG, the code uses `d3.hierarchy`, `d3.scaleOrdinal` with the `schemeCategory20` color palette, and `d3.json` to load the packaged flare.json dataset.

Loading thumbnail…

Circle Packing

This example visualizes the Flare class hierarchy as an enclosure diagram, using nested circles to represent the structure and size of each node. The visualization uses a circle-packing layout, where each circle’s area is proportional to the numeric value of its corresponding data item, and parent circles enclose their children to reveal the hierarchy. The implementation relies on `d3.pack()` for layout, `d3.hierarchy()` for data aggregation, and renders the result as an SVG with styled circles and labels. The color scheme distinguishes leaf nodes as orange with full opacity, while non-leaf circles are blue and semi-transparent.

Loading thumbnail…

Line Chart

A line chart displays the daily closing price of Apple (AAPL) stock from 2007 to 2008, with time on the x-axis and price in dollars on the y-axis. The SVG visualization uses D3 v4 to parse TSV data, with `d3.scaleTime` and `d3.scaleLinear` for positioning, `d3.axisBottom` and `d3.axisLeft` for axes, and `d3.line` to render the data. A steelblue stroke, 1.5 pixels wide, traces the price trend over the two-year period.

Loading thumbnail…

Streamgraph

A streamgraph displays twenty layers of synthetic time-series data, using a wiggle offset to minimize visual overlap. The graphic animates between two independently generated datasets, smoothly interpolating the stacked area paths over 2.5 seconds. Built with D3 v4, the example uses `d3.stack`, `d3.area`, `d3.scaleLinear`, and `d3.interpolateCool` for color. A button triggers the transition, re-binding the data and applying a transition on the `d` attribute of SVG path elements.

Loading thumbnail…

Cluster Dendrogram

This cluster dendrogram shows the hierarchical structure of the Flare class hierarchy, with leaf nodes aligned along the right edge and internal package nodes branching to the left. The layout uses `d3.cluster()` to position nodes by tree depth, while `d3.stratify()` converts the flat CSV data (flare.csv) into a hierarchical structure. Node-link paths are drawn as cubic Bézier curves, and each node is rendered as a circle with a text label. The visualization is built with D3 v4, renders to SVG, and uses the `d3.csv` loader to ingest the dataset.

Loading thumbnail…

Bar Chart

A bar chart displays the relative frequency of each letter in the English language, sourced from a TSV file. The bars are colored steelblue and turn brown on hover, with axes for letter categories and percentage values. Built with D3 v4, it uses `d3.tsv` for parsing, `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` for rendering the axes as SVG elements.

Loading thumbnail…

Choropleth

A choropleth map of U.S. county unemployment rates for August 2016, drawn as SVG paths using `d3.geoPath`, colors each county with a `d3.scaleThreshold` and the `d3.schemeBlues` color scheme. A legend displays the color scale via a linear axis. The map uses TopoJSON from the U.S. Census Bureau and unemployment data from the Bureau of Labor Statistics, loaded with `d3.queue` and `d3.tsv`. State boundaries are overlaid as a white mesh using `topojson.mesh`.

Loading thumbnail…

Tidy Tree

A tidy tree visualization displays the Flare class hierarchy as layered nodes and links, using a horizontal layout where depth is determined by distance from the root. The code implements the Reingold-Tilford algorithm via `d3.tree` and `d3.stratify`, rendering with SVG paths and circles. Interactive text labels identify each class, while internal nodes are visually distinguished by darker fill. The data comes from a CSV file, and the visualization uses `d3.linkHorizontal` to draw curved connecting links.

Loading thumbnail…

Radial Tidy Tree

This radial tidy tree visualizes the hierarchical structure of the Flare class hierarchy, with nodes arranged in concentric rings around a central root. The visualization uses the Reingold-Tilford algorithm via D3’s `d3.tree` layout, with node depth mapped to radial distance and angular position based on the branch order. The code loads CSV data from a file, processes it with `d3.stratify`, and renders SVG paths and circles using `d3.linkRadial`. Leaf and internal nodes are visually distinguished by circle fill color, and text labels are rotated to follow the radial layout, with positions and anchors adjusted based on the node’s angle and whether it has children.

Loading thumbnail…

Spiral Circle

Two groups of 200 white squares with black outlines form a spiral pattern, one rotating clockwise, the other counterclockwise, within circular clips. Animated by a timer, each square orbits a circle while spinning on its own axis, creating a hypnotic, ever-changing geometric illusion. This D3 v3 example uses SVG, `d3.range`, `d3.timer`, and `selectAll` with `append` to build and animate the rects, clipped by `clipPath` definitions for upper and lower halves.

Loading thumbnail…

Geodesic Rainbow

A glowing, rainbow-hued geodesic sphere rotates in space, its surface composed of triangular faces whose colors and edges shift continuously. An interactive slider adjusts the degree of subdivision, morphing the shape from a coarse icosahedron into a finely tessellated ball. Built with d3.geodesic and d3.geo.orthographic, the drawing renders to a Canvas context, with each face dynamically recolored via d3.hsl and rotated over time using d3.timer.

Loading thumbnail…

Override cells

This example demonstrates how to override a cell in an Observable notebook by replacing the `subject` variable with the value "Success." The code uses the Observable notebook runtime and Inspector API to load the notebook definition and inject the custom value before rendering. The `greeting` cell is displayed in a div using the Inspector, showing how runtime overrides can modify notebook behavior externally. The implementation relies on the `Runtime` and `Library` classes from the `@observablehq/notebook-runtime` package.

Loading thumbnail…

Overriding notebook-stdlib

This example demonstrates how to override a notebook’s default `width` generator with a custom implementation that tracks the size of a specific DOM element. The code uses the Observable notebook runtime, `Runtime.load`, and `Library` to import a notebook and inject a custom `width` function that relies on `stdlib.Generators.observe` and window resize events. The referenced notebook cell named `test` renders into a styled `<div>` element. This approach shows how to replace a standard library method with element-specific behavior.

Loading thumbnail…

Gist 9cf3726653a19fb89c2574bdde940323

This example visualizes the character co-occurrence network from *Les Misérables*, grouping nodes by community and bundling edges to reveal hierarchical structure. It adapts an Observable notebook to run directly in a browser via a JavaScript module, loading data with `d3-require`. Using `d3.cluster` for layout and `d3.radialLine` with `d3.curveBundle`, it draws curved paths between characters with a steelblue, semi-transparent stroke and multiply blending. Labels are rotated and positioned radially around the 640-pixel square SVG.

Loading thumbnail…

Gist 524f4fcde9f1a572fcb66439053a99d1

A radial hierarchical edge bundling diagram visualizes the Les Misérables character co-occurrence network, grouping nodes into a two-level hierarchy by numbered communities. Curved steel-blue paths link each character to their targets, using `d3.radialLine` with a bundled curve and `d3.cluster` for circular leaf placement. Labels rotate around the circumference, and the code’s data structure maps group children and target IDs before rendering with D3 v5 selections.

Loading thumbnail…

Fit Extent

A dark map of the contiguous United States fits its projected outline precisely within the SVG canvas. The example demonstrates d3-geo 1.2’s `fitSize` feature, which automatically scales and centers the map’s projection to match the given pixel dimensions. The code loads a US GeoJSON file via `d3.json`, filters out Alaska, Hawaii, and outlying areas, then projects the remaining states using `d3.geoConicConformal` with custom parallels, rotation, and center. A single path element is rendered using `d3.geoPath` for the resulting Conic Conformal projection.

Loading thumbnail…

Subdivisions of England

This visualization displays the hierarchical subdivisions of England, from regions down to individual unitary authorities, using an indented tree layout. The data is parsed from a plain text file containing the full geographic hierarchy. Built with the Observable Plot API, the code uses `Plot.tree` to compute the layout and `Plot.line` with `plot.mark()` to render the connecting lines and labels, providing a clear overview of England's administrative structure.

Loading thumbnail…

Gist 0af7bae9fec12b1008e2a7c104bc8cd2

This visualization presents the weekly mean atmospheric CO2 concentration measured at Mauna Loa, alongside historical comparisons from one and ten years prior. The chart displays the raw weekly data points as a time series, with the increase in CO2 since 1800 also visible. It uses D3.js to render the plot, reading from the NOAA ESRL data files. The visualization directly shows the rising trend of CO2 levels, emphasizing the long-term increase and seasonal cycles through the direct plotting of the dataset values.

Loading thumbnail…

Histogram

This histogram visualizes the distribution of a numeric variable, grouping observed values into discrete bins and displaying their frequencies as vertical bars. It uses the D3.js library, specifically leveraging `d3.histogram` and `d3.scale` APIs to compute bin ranges and map data to screen coordinates. The rendering relies on SVG paths generated from the binned counts, with axes and labels drawn via D3’s measurement and tick utilities. The dataset originates from a GitHub gist, and the code operates entirely in the browser without external data files.

Loading thumbnail…

Gist 15f6017917ad471f4c074015276d2994

This visualization renders a shark using a particle system driven by a force-directed simulation. The shark’s shape is defined by an SVG path, and a grid of points samples the path’s pixels via Canvas `getImageData` to determine where particles should settle. The code uses `d3.forceSimulation` with custom forces to push particles toward the target image while maintaining collision avoidance, and each particle is drawn as a small circle on a canvas. The example demonstrates how force layouts can reconstruct a recognizable shape from unordered points.

Loading thumbnail…

Canvas Line

This example shows a step-shaped line chart of Apple’s daily closing stock prices from April 2007 to June 2008. The chart is rendered entirely to a Canvas element using the 2D context API, with scales from d3-scale and the line generator from d3-shape. Axes are drawn manually with Canvas path and text methods rather than SVG. Data is loaded from a TSV file using d3-fetch, and the curve is defined with `d3.curveStep`.

Loading thumbnail…

U.S. Historical Tax Rates

This visualization shows the evolution of U.S. historical tax rates for head-of-household filers from 1913 onward, with income thresholds adjusted to 2013-equivalent dollars. The chart displays marginal tax rate brackets as a function of income and year, sourced from Vox and the Tax Foundation. It uses D3.js to render the data, likely with scales and axes to map the JSON data’s year and income pairs. The rendering approach is visible in the code, which includes nested arrays of rate and threshold values per year.

Loading thumbnail…

Gist ddc6d50c313ebe6edb45519f43358c6c

The visualization displays monthly and seasonal global temperature anomalies from 1880 onward, using data from the `temperatures.csv` file. It builds a compact heatmap-style or sparkline-based grid, with each row representing a year and each cell showing the temperature deviation. The implementation uses D3.js to parse the CSV data and render the graphic, leveraging SVG or canvas primitives to represent the numeric values across the various time columns. The code processes the tabular data directly, mapping the values to visual elements through D3’s data-binding and layout functions.

Loading thumbnail…

bash profile

This visualization parses the contents of a bash profile script to reveal its structure and composition. It shows the file’s lines grouped by type—such as aliases, exports, and functions—and highlights the distribution of shell constructs. The code uses JavaScript to read the raw text and a custom layout algorithm, likely d3.js, to render an interactive treemap. The data source is the gist containing the bash_profile, and the rendering approach relies on hierarchical rectangles whose sizes reflect character counts or line frequencies, making the script’s organization immediately visible.

Loading thumbnail…

Radial Force

This example demonstrates custom radial forces in D3, positioning red nodes on a circle of radius 100 pixels and blue nodes on a radius of 200 pixels, with reference circles drawn as SVG paths. It uses `d3.forceSimulation` with a `d3.forceCollide` for node spacing and a `d3.forceRadial` force that targets each node’s radius based on its type. The simulation runs over a typed array of 240 nodes, and each tick updates circle elements’ `cx` and `cy` attributes. The visualization is rendered entirely in SVG with a `viewBox` centered at the origin.

Loading thumbnail…

Seven Symbols

Seven small SVG canvases each display a distinct geometric symbol—circle, cross, diamond, square, star, triangle, and wye—from the d3-shape library. A red reference circle outlines the same area (2500 square pixels) for each symbol, positioned around its shared centroid. The visualization uses `d3.symbol()` with a configured size and animates each path’s rotation via a `d3.timer` callback, while `d3.selectAll` binds the appropriate symbol type from the data-type attribute. The paths are rendered as SVG with dynamic `d` and `transform` attributes.

Loading thumbnail…

Canvas Semantic Zooming

This example demonstrates semantic zooming of a scatterplot containing 2,000 points rendered on a Canvas element. As the user zooms, the points are re-projected through the current transform, and the drawing is cleared and redrawn at each zoom event. The code uses D3’s `d3.zoom` and `d3.event` to manage the interactive transform, and the `d3.randomNormal` distribution positions the data in a Gaussian cluster centered on the canvas. All drawing occurs directly on the Canvas 2D context.

Loading thumbnail…

SVG Semantic Zooming

SVG semantic zooming applies a zoom transform to the positions of 2,000 circles generated with d3.randomNormal, while keeping their radius constant. The example uses d3.zoom to listen for wheel and drag events, and each circle’s transform attribute is updated via a custom function that applies d3.event.transform to its datum coordinates. A transparent overlay rectangle captures pointer events, and the circles are rendered as SVG elements with a fixed radius of 2.5 pixels, demonstrating how semantic zoom scales positions without altering symbol size.

Loading thumbnail…

Canvas Geometric Zooming

This example demonstrates geometric zooming on a canvas, where a scatterplot of 2,000 normally distributed points scales and translates as a unified image. The code uses d3.zoom with scaleExtent to handle user interaction, applying the transform directly to the canvas context via translate and scale methods. Points are drawn using the Canvas 2D API’s arc and fill operations, while the underlying data is generated with d3.randomNormal. Unlike semantic zooming, this approach redraws the entire visualization at the new scale, preserving the spatial relationships between all marks.

Loading thumbnail…

SVG Geometric Zooming

A scatterplot of 2,000 normally distributed points demonstrates geometric zooming in SVG. The visualization shows how the entire coordinate system scales uniformly, with all circle radii increasing proportionally as the view magnifies. Built with D3 v4, the example uses `d3.zoom` attached to a background rectangle, applying the current transform directly to a group element containing all points. The code generates random positions via `d3.randomNormal` and renders each point as a circle with a `translate` transform, allowing the zoom handler to scale and pan the whole scene without recalculating individual positions.

Loading thumbnail…

Municipalities of Mexico II

This example displays a map of Mexico with two layered vector paths: municipalities rendered with thin strokes and states overlaid with thicker outlines. It uses a TopoJSON file that was preprocessed from INEGI shapefiles using command-line tools and visualizes the data with D3’s `d3.geoMercator` projection and `d3.geoPath`. The map is drawn as SVG, with the paths selected and bound to the TopoJSON features via `topojson.feature` and `d3.json`.

Loading thumbnail…

Path Tween

This example demonstrates smooth path interpolation between two SVG shapes defined by cubic Bézier curves. A black path morphs between two distinct configurations over a two-second animated loop, using SVG’s getPointAtLength and getTotalLength methods to uniformly sample points at four-pixel intervals. The transition replaces the original curve with a polyline for interpolation via d3.interpolate, then restores the Bézier path upon completion. The animation runs in d3 v4 with transition.attrTween, alternating between the two path definitions indefinitely.

Loading thumbnail…

Municipalities of Mexico

A map of Mexico displays all municipalities as fine gray lines and state boundaries as thicker outlines, rendered with SVG. The visualization uses `d3.geoPath` to project TopoJSON data containing both municipality and state geometry. The geographic data is sourced from INEGI shapefiles and processed into a quantized TopoJSON format via the command-line preprocessing script.

Loading thumbnail…

Brushable Network

A brushable network diagram displays 85 nodes as circles and their connections as lines in an SVG. The D3.js v4 code loads node positions from a local `graph.json` file, draws the links with `line` elements, and represents nodes as `circle` elements. Users can drag a rectangular selection using the `d3.brush()` API, which highlights any node falling within the brush extent by adding a "selected" class, turning its stroke red.

Loading thumbnail…

Draggable Network

A force-directed network graph displays nodes and links, drawn as SVG circles and lines, with node positions pre-set from a JSON file. This example shows how to manually adjust a static layout by making each node draggable. Using `d3.drag()`, the code updates a node’s `x` and `y` properties during the drag event and directly rewrites the corresponding circle and connected link line coordinates. The data originates from the included `graph.json` file, and the implementation relies on D3 v4’s selection and drag APIs.

Loading thumbnail…

Draggable Network II

This interactive network visualization uses a force-directed layout to display a graph with 80 nodes and numerous links. Users can select individual nodes or drag a rectangular brush across the background to select multiple nodes, with the SHIFT key toggling additional selections. Once selected, nodes can be dragged to reposition, with connected links updating in real-time via the `d3.drag` and `d3.brush` APIs. Arrow keys also nudge selected nodes incrementally. The example demonstrates customizing a force-directed layout through manual adjustment, using the D3.js v4 library and rendering to SVG.

Loading thumbnail…

Screen Recording to GIF

This example shows how to convert a screen recording into an animated GIF using command-line tools. It first generates a color palette from the video with FFmpeg’s `palettegen` filter, then applies that palette with `paletteuse` to produce a high-quality GIF. The workflow also supports optional frame dropping via `fps` and cropping through FFmpeg’s `crop` filter. The code relies solely on FFmpeg and Gifsicle, with QuickTime Player used for the initial recording.

Loading thumbnail…

Apollonius’ Problem

Three translucent circles, each labeled with a central handle, sit on a blank SVG canvas, and a fourth circle—rendered as a thin outer ring with a faint inner stroke—is tangent to all three. Dragging any of the three circles with the mouse updates the tangent circle’s position and radius in real time. The code computes the tangent circle’s center and radius using an algebraic solution to Apollonius’ problem, implemented in the `apolloniusCircle` function, and applies it via D3 v3’s `d3.behavior.drag`, `d3.select`, and SVG circle elements.

Loading thumbnail…

Apollonius’ Problem II

Apollonius’ Problem II visualizes the up to eight circles tangent to three given circles, computed via the apolloniusCircle function. Three semi-transparent gray circles are draggable using d3.behavior.drag, and eight colored rings update in real-time to show all tangent solutions. The SVG rendering uses D3 v3, with each ring computed from sign combinations of the input radii and stroke colors assigned via d3.scale.category10.

Loading thumbnail…

Adjustable Link Strength

A force-directed network graph of character co-occurrences in Les Misérables visualizes the social structure of the novel. A slider labeled "Link Strength" directly adjusts the `strength` parameter of the `d3.forceLink` force within the `d3.forceSimulation` API. Dragging the slider triggers a callback that updates the force’s strength and calls `simulation.alpha(1).restart()`, reheating the simulation to re-layout the nodes. The Canvas-based rendering draws nodes as small circles and links as lines, with the graph’s layout responding in real time to the user’s input.

Loading thumbnail…

Drag Slider

This slider example demonstrates interactive color selection by dragging a circular handle along a horizontal track. The handle position maps linearly to hue values from 0 to 180 degrees, updating the SVG background color in real time. Built with D3 v4, it uses `d3.drag` for pointer interaction and `d3.scaleLinear` with clamping. A transition animates the initial hue from 0 to 70 on load, while tick labels show degree values. The visualization renders entirely in SVG, with layered track lines for visual depth.

Loading thumbnail…

Heatmap

This heatmap visualizes topographic elevation data from the `volcano.json` dataset, rendered directly onto a Canvas element. The code reads the JSON file using `d3.json` and maps values between 90 and 190 to a custom terrain-like color scale built with `d3.scaleSequential` and `d3.interpolateHsvLong`. Elevation values are converted to RGB colors via `d3.rgb` and written into `ImageData` with `putImageData`.

Loading thumbnail…

Dynamic Hexbin

Two thousand points sampled from a normal distribution drift in a circular path as the distribution’s center moves over time. A dynamic hexbin grid aggregates the points, with each hexagon’s fill color mapped sequentially from white to steelblue based on the number of points it contains. Built with D3 v4 and the d3-hexbin plugin, the animation uses d3.randomNormal to regenerate twenty points per frame and d3.timer to update the SVG paths continuously.

Loading thumbnail…

Hello

This example animates the lyrics of Adele’s “Hello” as a sequence of individual words. Each word is briefly rendered as a large, thick outline that rapidly flickers between black and white while alternating line widths, creating a shimmering, glitch-like effect before the next word appears. The visualization runs on a canvas and uses a double-buffering technique with two canvases: the first renders the text outline, and the second composites the stroked text and previously drawn frames. The animation is driven by a d3-timer callback that steps through each character, using Canvas strokeText and drawImage to build the layered, pulsing appearance. The word list is derived by splitting the song’s lyrics on whitespace.

Loading thumbnail…

Force-Directed Layout from XML

This example visualizes a hierarchical XML document as a force-directed network, where each XML element becomes a draggable circle and parent-child relationships appear as links. The circle size reflects the numeric text content of each element, scaled using `d3.scaleSqrt`. The code uses `d3.forceSimulation` with link, charge, and centering forces, and loads the XML via `d3.xml`. It parses the document with native DOM queries, then renders the network as SVG with interactive dragging enabled through `d3.drag`.

Loading thumbnail…

D3 Custom Bundle II

This example demonstrates a minimal custom D3 bundle built with Rollup. It imports `selection`, `select`, `selectAll`, and `event` from `d3-selection`, along with `d3-transition` to enable the `transition` method on selections. The page appends an `<h1>` element, applies initial inline styles, then animates a transformation over 1.5 seconds using a chained transition. The code highlights how Rollup can include only the necessary D3 modules when explicitly importing required dependencies.

Loading thumbnail…

Rotating Transverse Mercator

A rotating transverse Mercator projection continuously spins a world map around its central meridian, showing how the projection distorts shapes and areas away from the axis of rotation. The animation uses a dark canvas with white country borders and a semi-transparent graticule, all rendered via `d3.geoPath` and Canvas 2D drawing. Land polygons and country boundaries come from TopoJSON data in the world-atlas package, while a `d3.timer` updates the projection’s rotation each frame. The code specifies `d3.geoTransverseMercator`, `d3.geoGraticule10`, and `topojson.feature` and `topojson.mesh` for data processing.

Loading thumbnail…

Antimeridian Cutting II

This interactive visualization demonstrates antimeridian cutting with an interrupted Homolosine projection, allowing a user to rotate the globe by moving the mouse or touching the canvas. It renders land polygons from the World 110m TopoJSON dataset onto a Canvas element using d3.geoInterruptedHomolosine and d3.geoPath, with the projection’s rotation updated via scale functions mapping pixel coordinates to longitude and latitude. A clipping region outlines the sphere, and the land is filled in black over a white background.

Loading thumbnail…

Asynchronous Queue

This example demonstrates asynchronous loading and summation of three remote JSON files using the d3-queue library with a concurrency limit of two. A large headline displays the formula “1 + 2 + 3” and updates the result from “?” to the calculated sum once all files are fetched. The code uses `d3.queue(2)`, `d3.json` deferrals, and an `awaitAll` callback to render the computed total via `document.querySelector`. Data files `1.json`, `2.json`, and `3.json` each contain a single number, which are combined with a `reduce` function.

Loading thumbnail…

Circle Piano

A circular piano keyboard displays seven musical notes repeated across a ring, with black keys for sharps and white keys for naturals. Hovering or touching a key expands its arc outward while simultaneously playing a square-wave tone via the Web Audio API. Built with D3 v4, the visualization uses `d3.pie` and `d3.arc` for geometry, `transition.attrTween` for smooth animation, and SVG for rendering.

Loading thumbnail…

Arc Piano

The visualization displays a semicircular piano keyboard whose keys extend outward when hovered or touched. It uses a D3 pie layout for the key positions, with custom arc tweening via `transition.attrTween` to animate the radial expansion. The code generates audio tones using the Web Audio API's `createOscillator` and `createGain` nodes, playing a square wave at a computed frequency for each key. The SVG rendering uses D3's `d3.arc` with corner radii and two inner-radius levels to distinguish sharp and white keys.

Loading thumbnail…

Axis Styling II

This example demonstrates a time-series axis with a customized right-side y-axis using post-selection, where axis labels and grid lines are restyled after rendering. The code uses d3.axisBottom and d3.axisRight to create the axes, with the y-axis’s tick lines converted to dashed gray gridlines and labels repositioned. A transition triggered by d3.timeout animates the y-axis domain change over 2.5 seconds, using post-selection to modify entering, updating, and exiting tick elements. The implementation relies on d3.scaleTime, d3.scaleLinear, and transition.attrTween to cancel default tweens, rendering as SVG with animation.

Loading thumbnail…

Border Mesh

This example highlights California’s borders with its three neighboring states—Nevada, Arizona, and Oregon—using a U.S. states map rendered as SVG. It uses `d3.geoPath()` to draw the states and `topojson.mesh` with a custom filter function to isolate the shared boundary arcs, which are then stroked in cyan, magenta, and yellow. The underlying state geometries come from a TopoJSON file (`us-10m.v1.json`), and the code also adds a faint white stroke for all state boundaries.

Loading thumbnail…

U.S. TopoJSON

This visualization displays U.S. state and county boundaries extracted from a TopoJSON file served from d3js.org. A blurred, semi-transparent silhouette of the nation appears behind a solid white version, creating a subtle depth effect. The code uses d3.geoPath to render the features, while topojson.feature and topojson.mesh convert the TopoJSON data into GeoJSON paths for drawing.

Loading thumbnail…

U.S. Land TopoJSON

This example displays the outline of the United States as a single dark shape using the TopoJSON `us-10m.v1.json` dataset. The geographic path is rendered from the `nation` object via `topojson.feature`. The map is drawn with D3 v4’s `d3.geoPath` into an SVG, showing the national boundary at a fixed 960×600 viewport. It relies on the topojson client library to decode the compressed geometry for rendering.

Loading thumbnail…

U.S. Counties TopoJSON Mesh

This example renders a minimalist map of U.S. counties using a TopoJSON mesh from the U.S. Census Bureau’s shapefile, served via the `us-10m.v1.json` file. The SVG visualization displays county boundaries as thin black lines with rounded joins, and overlays small circles at each arc’s starting point, revealing the topological structure of the data. The code uses `d3.geoPath` to project the mesh and `topojson.mesh` to extract boundaries, while `topojson.transform` positions the circles. Rendering is entirely SVG-based with D3 v4, and the map uses no fill, focusing purely on geometric outlines.

Loading thumbnail…

I Make Circles

A single button click appends a circle that travels horizontally across a time-scaled x-axis while shrinking and fading. The circle’s horizontal position is driven by `d3.timer` updating a `d3.scaleTime` domain, and its motion is animated with two chained `transition` calls using `attrTween` and custom easing. The SVG render includes a bottom time axis and uses `d3.axisBottom`. The example demonstrates time-based coordinate mapping and sequential state transitions with D3 v4.

Loading thumbnail…

Threshold Key

This example builds a color key for a threshold scale, styled after Ford Fessenden’s map of police stops involving force. It shows rectangles for each range color, with tick marks placed at the domain boundaries, spanning 0 to 100%. The key uses `d3.scaleThreshold` to map percentages to colors and a `d3.scaleLinear` for x-positions, while `d3.axisBottom` with custom tick values and formats renders the labels. The `invertExtent` method calculates each rectangle’s width, and SVG rendering is used.

Loading thumbnail…

Polygon Clipping III

This example demonstrates Sutherland–Hodgman polygon clipping by clipping the exterior rings of the United States map to a convex hexagonal region. A blue hexagon serves as the clip boundary, while red paths show the original map rings and black paths display the clipped results. The implementation uses a custom `d3.polygonClip` function from the provided `d3-polygon-clip.js` file, operating on TopoJSON data loaded via `d3.json` and rendered as SVG paths.

Loading thumbnail…

Polygon Clipping I

This example shows the United States rendered twice using a red fill, with a black-and-white clipped version superimposed on top. A blue rectangle marks the clipping boundary, and a white-stroked path displays the nation clipped to that rectangular extent. The visualization uses TopoJSON data from `us-10m.v1.json` and renders with `d3.geoPath`. The clipping is performed by `d3.geoIdentity().clipExtent`, which restricts the geographic projection to pixel coordinates between [100, 100] and [860, 500], demonstrating how to constrain a polygon’s visible area in an SVG context.

Loading thumbnail…

Polygon Clipping II

This example shows how to clip a geographic polygon to a rectangular extent, displaying the original US nation outline in red and its clipped counterpart in black over a blue background. It uses `d3.geoIdentity` with `clipExtent` and `d3.geoProject` to precompute the clipped polygon from TopoJSON data, while `d3.geoPath` renders both the original and clipped features as SVG paths.</svg>

Loading thumbnail…

Force-Directed Web Worker

This example shows a force-directed graph of 1,000 nodes computed in a web worker, with a progress bar indicating the simulation’s tick rate. The main thread receives progress updates and renders the final layout on a Canvas using `getContext("2d")`. The layout is calculated with `d3.forceSimulation`, using `forceManyBody`, `forceLink`, and `forceX`/`forceY` forces in worker.js, which imports d3-force modules via `importScripts`.

Loading thumbnail…

Static Force Layout

This example displays a static force-directed graph of 100 nodes arranged in a circular pattern, with each node connected to the node three positions away. The visualization uses d3.forceSimulation to run a fixed number of layout iterations before rendering the final positions as SVG circles and lines. The code applies charge, link, x, and y forces, then simulates until the cooling schedule completes, showing the finished graph without any interactive updates.

Loading thumbnail…

Force-Directed Graph

A force-directed graph visualizes the co-occurrence of characters in Victor Hugo’s *Les Misérables*, rendered as nodes and links on a Canvas. Using D3 v4’s `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter`, the layout iteratively positions nodes based on link forces. The animation updates on each tick, clearing the canvas and redrawing edges and nodes as gray lines and white-stroked circles. Data comes from the bundled `miserables.json` file.

Loading thumbnail…

Radial Stacked Bar III

A radial stacked bar chart displays the population distribution of U.S. states across seven age groups from the provided CSV data. The visualization arranges states as sectors around a center, with each sector subdivided into colored segments representing age categories. Labels rotate around the circumference, and circular grid lines with tick labels indicate population values. The code uses a custom `d3.scaleRadial` extension built on `d3-scale`, combined with `d3.scaleBand`, `d3.stack`, and `d3.arc` to render SVG paths. A weaving algorithm reorders states to improve label legibility.

Loading thumbnail…

Radial Normalized Stacked Bar

This radial stacked bar chart displays the age distribution of each U.S. state, with each bar normalized to represent proportions that sum to 100%. The circular layout encodes states around the circumference and uses a radial scale to show percentage values, with concentric grid circles and percentage labels around the center. The chart uses d3.stack with stackOffsetExpand to normalize data, d3.arc for the radial segments, and a custom scaleRadial function that applies a square-root transformation to linear scales. The data comes from a CSV file containing state-by-age population counts.

Loading thumbnail…

U.S. Population Density

This map visualizes U.S. population density by census tract using a choropleth coloring scheme, with darker reds indicating higher people per square mile. It renders static SVG via an HTML image tag, and the map is derived from 2014 American Community Survey data joined with census tract boundaries. The build uses TopoJSON CLI tools (`geo2topo`, `topomerge`, `toposimplify`) and D3 projections (`d3.geoAlbersUsa`), with color bins defined by `d3.schemeOrRd` and a custom legend.

Loading thumbnail…

Quadtree

This example demonstrates accelerated two-dimensional filtering using d3-quadtree. A quadtree recursively subdivides square cells into four equal-sized subcells, with each leaf containing a single point from a dataset of 2,500 randomly generated coordinates. When a d3.brush selection is dragged, the quadtree’s visit method only scans points in intersecting cells, coloring scanned-but-unselected points orange and selected points red. The SVG rendering shows the quadtree’s subdivision rectangles in gray, highlighting how the algorithm avoids checking points outside the brush extent.

Loading thumbnail…

D3 Source Treemap

This treemap visualizes the file size, in bytes, of the D3.js 4.4.0 source code, broken down by module and individual source file. Built with D3 v4, it renders as an SVG using `d3.treemap` and `d3.stratify` to create the hierarchy from a CSV containing file paths and sizes. Each leaf cell is a clickable link to the corresponding source file on GitHub, with its color assigned via `d3.scaleOrdinal` and `d3.schemeCategory20`.

Loading thumbnail…

Localized Time Axis

A localized time axis displays a one-year span from January 2000 to January 2001, with tick labels rendered in Russian. The visualization loads a locale-specific JSON file from the d3-time-format package and applies it via `d3.timeFormatDefaultLocale`. The axis is generated with `d3.axisBottom` on an SVG canvas, using a `d3.scaleTime` domain and range. This example demonstrates how to customize date formatting for regional languages in D3 visualizations.

Loading thumbnail…

Localized Time Axis II

A year-long time axis renders with Russian-language month, day, and time labels. The example uses `d3.timeFormatLocale` to define a custom locale and `d3.timeFormat`-based functions for millisecond, second, minute, hour, day, week, month, and year granularities. A single bottom axis, drawn with `d3.axisBottom` and `d3.scaleTime`, applies a multi-scale format via a `multiFormat` function that selects the appropriate label based on the date’s position within the year. No data is plotted; the SVG canvas shows only the axis.

Loading thumbnail…

Modifying a Force Layout II

This example shows a force-directed graph with smooth transitions as nodes and links are added and removed. The initial state contains three unconnected nodes before edges form a triangle, from which one node is periodically removed and re-added. The code uses `d3.forceSimulation` with charge, link, x, and y forces, and applies the general update pattern for enter and exit selections. A notable technique is the use of `transition.attrTween` on exiting links to keep them visually connected to the moving nodes via their `x1`, `y1`, `x2`, and `y2` attributes until removal. The rendering is SVG with animation driven by the simulation’s tick event.

Loading thumbnail…

Dynamic Simplification IV

This map of U.S. states shows dynamically simplified geometry that adjusts its level of detail based on zoom, keeping the smallest visible feature roughly one pixel in size. The example uses TopoJSON data with `topojson.presimplify` and a custom `d3.geoTransform` filter based on a minimum area threshold, applied through `d3.geoPath` with Canvas rendering. Zooming is handled by `d3.zoom`, which updates the simplification threshold and redraws filled land polygons and state borders on the canvas.

Loading thumbnail…

Colorcomb

Four hundred particles drift and bounce across a full-screen canvas, their paths perturbed by random forces and velocity damping. A Voronoi tessellation of their positions is drawn twice: first as a thick black stroke for contrast, then each cell is stroked with a color derived from its centroid’s screen coordinates, converted through `d3.lab` and `d3.hcl` with a hue that rotates over time. The animation uses `d3-timer`, `d3-voronoi`, and Canvas 2D rendering.

Loading thumbnail…

Zoom to Domain

A line chart of S&P 500 monthly prices from 2000 to 2010 plays an introductory zoom animation, smoothly transitioning from the full dataset to a one-year window centered on 2003. The area chart uses an SVG path with a clip-path. Built with D3 v4, it applies `d3.zoom` and `d3.zoomIdentity` to programmatically rescale the time axis via `rescaleX`, updating the area and x-axis in the `zoom` event handler.

Loading thumbnail…

Eased Scale

A single horizontal axis spans the width of the SVG canvas, with tick labels evenly spaced from 0 to 1 in the domain. The example applies a custom interpolator to a d3.scaleLinear continuous scale, easing the mapping so that intermediate positions follow a quadratic in-out curve rather than a linear progression. The code defines an easeInterpolate function that wraps d3.interpolate and passes the eased time value to the axis position. This demonstrates how to inject a d3.easeQuadInOut easing function into the scale’s interpolation, affecting only the spacing of tick marks rather than the data values.

Loading thumbnail…

Brush Snapping III

This example shows three clusters of 300 normally distributed points each, colored by cluster using `d3.schemeCategory10`, with visible x- and y-axes. A horizontal brush, created with `d3.brushX`, snaps its selection to integer coordinates on the x-axis. During a brush drag, the code maps the selection back to data space, rounds the values, and uses `d3.event.target.move` to reposition the brush, ensuring the selection always covers a complete unit interval.

Loading thumbnail…

Constrained Zoom

This example demonstrates how to constrain d3-zoom so a rectangular image stays within the viewport during pan and zoom operations, using the `d3.zoom` API and its event handler. The SVG shows a small image element whose bounds are checked against the viewport; the `zoomed` function modifies the transform to prevent the image from moving off-screen. The code calculates the image’s coordinates and uses `scaleExtent` to limit zooming to the viewport size. This implementation relies on the d3.v4 library, rendering via SVG, and handles mouse interactions through the zoom’s event system.

Loading thumbnail…

Branched Random Walk

This example visualizes a branching random walk on a canvas. A single black main walk of 1,000 steps runs horizontally, and from every other point along it, multiple short colored branch walks emerge, each with fading opacity. Clicking the canvas regenerates the entire composition. The code uses d3.randomNormal to generate step offsets, d3.scaleSequential with d3.interpolateRainbow for branch colors, and the Canvas 2D API with globalCompositeOperation set to "multiply" to blend overlapping strokes.

Loading thumbnail…

Monochrome Mona Lisa

A monochrome version of the Mona Lisa is displayed with a colored region revealed through a resizable brush selection. The example uses an SVG image with a monochrome filter created via `feColorMatrix`, and a second copy of the image is clipped using a `clipPath` derived from the brush selection. Built with D3 v4, it demonstrates `d3.brush` to define the visible color area over a grayscale portrait.

Loading thumbnail…

d3.geoPath + node-canvas

This example demonstrates how to render geographic data to a Canvas element using d3.geoPath with node-canvas, producing a stroked mesh of United States county boundaries. The rasterize script loads US Atlas TopoJSON data, converts it to GeoJSON with topojson-client, and passes it through d3.geoPath’s context method to draw paths into a 960×600 canvas. It then writes the resulting bitmap to a PNG file, showing server-side vector-to-raster conversion without a browser.

Loading thumbnail…

Isolating Forces

The visualization shows 400 nodes divided into brown and steelblue groups that separate into distinct columns under opposing horizontal forces while a shared many-body force creates clustering. Using d3.forceSimulation, the code demonstrates a custom isolate() function that patches each force's initialize method to restrict the d3.forceX forces to only their respective color group. Each node is rendered as a small circle on a Canvas element during the simulation's tick event, with the grouping effect emerging from the selectively applied forces.

Loading thumbnail…

Clipped Conic Conformal

A map of the world is rendered using the Clipped Conic Conformal projection, showing landmasses in dark gray with country borders in white over a graticule of light gray lines. The visualization clips the map to the projection's extent so that only the relevant region is visible. It uses d3.geoConicConformal, d3.geoPath, and d3.geoGraticule, with vector data from the `world-50m.v1.json` TopoJSON file, and the world land and country meshes are drawn via `topojson.feature` and `topojson.mesh` into the SVG canvas.

Loading thumbnail…

California Population Density

This map visualizes population density across California census tracts, coloring each tract according to its population per square mile. It uses a threshold color scale (d3.scaleThreshold) with a sequential color scheme, and renders the state's county boundaries as an overlay. The visualization is built with d3.geoPath for map projections and topojson for handling the topology data. The underlying data comes from the American Community Survey’s 2014 5-year estimates, joined with Census Bureau tract shapefiles and processed through the command-line tools geo2topo, toposimplify, and topomerge to compute densities and simplify the geometry.

Loading thumbnail…

geo2svg

A static choropleth map of California population density by census block group, colored with the OrRd sequential scheme. The map, generated from the command line using the geo2svg tool from d3-geo-projection, visualizes density classes derived from ACS 5-year estimates joined to Census block group boundaries. The workflow projects shapefiles via `geoproject`, simplifies topology with `toposimplify`, and renders SVG paths with `geo2svg`, adding county boundary strokes and a legend.

Loading thumbnail…

California Population Density II

A choropleth map of California displays population density per square mile across 23,198 block groups, using a sequential red color scale and a square-root axis legend. Drawn with `d3.geoPath` and SVG, the visualization loads topology from a preprocessed `topo.json` file, created by scripts that download Census block group boundaries and ACS population data via the Census API. The `prepublish` script projects, joins, and simplifies the data using `geo2topo`, `topomerge`, and `topoquantize`. County borders are overlaid as semi-transparent outlines.

Loading thumbnail…

Merged Choropleth

This choropleth map visualizes population density across California census tracts, using the 2014 American Community Survey 5-Year Estimate. The map merges adjacent tracts with similar density into single polygons, reducing the file size from 1.5M to 328K and improving rendering speed and visual clarity. The d3.geoPath renders the projected shapes, while d3.scaleThreshold and d3.schemeOrRd assign colors, and d3.scaleSqrt positions the legend. The code uses topomerge and toposimplify from the topojson library to consolidate boundaries, with county borders overlaid as an outline.

Loading thumbnail…

Undersea Cables II

A rotating Earth, drawn with an orthographic projection, displays the global network of undersea communication cables as dark lines and their landing points as filled circles. The animation uses `d3.geo.orthographic()` with a moving rotation angle, rendering landmasses and graticule grids in canvas via `d3.geo.path()`. The example leverages topojson data from `topo.json` and demonstrates D3's geographic projection and path rendering APIs.

Loading thumbnail…

One System, Every Kepler Planet

Every Kepler planet from the dataset orbits a common center in one synchronized system. The visualization plots each planet’s semimajor axis as distance from the center and scales its radius logarithmically, while CSS animation duration is set from its orbital period. The SVG graphic uses D3’s `d3.scale.linear` for axis, radius, and time mapping, and each planet is a separate SVG with a rotating CSS animation. Data is loaded asynchronously via `d3.csv` from `planets.csv`.

Loading thumbnail…

Hierarchical Edge Bundling (Treemap)

This example visualizes the dependencies between classes in a software hierarchy using hierarchical edge bundling. The tree structure is positioned with `d3.layout.treemap`, while `d3.layout.bundle` groups the dependency links into spline bundles. The treemap cells are drawn as HTML `<div>` elements, and the bundled edges are rendered as SVG paths. Data comes from `readme-flare-imports.json`. The D3 v3 code uses `d3.svg.line` with `"bundle"` interpolation to create smooth curves.

Loading thumbnail…

Hierarchical Edge Bundling

This example shows a planar hierarchical edge bundling visualization of the Flare class hierarchy, using a cluster layout to position nodes in a wide, tall SVG. Curved, steel-blue paths bundle related import links between classes, reducing visual clutter in the dense dependency graph. The code uses D3’s `d3.layout.cluster`, `d3.layout.bundle`, and a bundled `d3.svg.line` with tension to draw the paths, while node labels are appended as text elements. Data comes from the `readme-flare-imports.json` file.

Loading thumbnail…

Treemap

A treemap visualizes the hierarchical structure of the Flare visualization toolkit, using nested rectangles whose areas encode the `size` value of each node and color to distinguish top-level packages. The chart is built with D3 v3, using the `d3.layout.treemap` API to compute the squarified layout, and rendered as SVG with styled `rect` elements and labels for leaf nodes. Data comes from the bundled `flare.json` file, which contains the toolkit’s package hierarchy and sizes.

Loading thumbnail…

Radial Cluster Dendrogram

A radial cluster dendrogram visualizes the Flare class hierarchy as a circular node-link diagram, with leaf nodes aligned on the outer ring and internal package nodes positioned inward. Using d3.stratify to structure the data and d3.cluster to compute radial coordinates, d3.v4 renders the tree as SVG paths and circles. The code loads comma-separated values from flare.csv, projects each node’s position via a custom trigonometric function, and labels classes with rotated text.

Loading thumbnail…

Custom Projection

This example displays a map of California counties and their boundaries, rendered with a custom 2D affine transform instead of a standard geographic projection. The `d3.geoPath` and `d3.geoTransform` APIs apply a matrix operation that flips the y-axis, allowing pre-projected TopoJSON data to be correctly positioned within the SVG viewport. The map uses gray fills and strokes, with counties and boundary lines drawn as separate SVG paths.

Loading thumbnail…

Custom Cartesian Projection

This example displays a set of land parcel polygons from a GeoJSON file, drawn as light gray shapes with black outlines on an SVG canvas. It creates a custom Cartesian projection by implementing a `d3.geoTransform` that maps raw coordinates through two `d3.scaleLinear` scales for the x and y axes. The resulting transform feeds into a `d3.geoPath` generator, which renders the geographic features using the projected coordinates, bypassing standard geographic projections.

Loading thumbnail…

Projected TopoJSON

A California county map is drawn from projected TopoJSON data, where coordinates are pre-converted to screen space so the geometry can be rendered without a geographic projection. The example uses `d3.geoPath` with a null projection and a Canvas 2D context to fill counties in light gray and stroke the mesh boundaries between distinct polygons with dark gray. The TopoJSON file was preprocessed with command-line tools like `ogr2ogr` and `topojson`, including simplification, while the rendering code loads the local `ca.json` file directly.

Loading thumbnail…

Chained Transitions

Fifty black circles, each representing one step in a 50-point scale, are arranged along the left edge of an SVG. Chained transitions, created using `transition.transition` and `d3.active`, repeatedly sweep each circle horizontally across the frame and back, with staggered delays creating a cascading wave effect. The circles’ fill colors interpolate between light yellow and dark blue via a linear scale with `d3.interpolateHcl`. The animation runs concurrently on all elements, inheriting the original transition’s reference time to ensure synchronized looping.

Loading thumbnail…

D3 Custom Bundle

This example demonstrates a custom D3 4.0 bundle built with ES2015 modules and Rollup, exposing only `d3.event`, `d3.select`, and `d3.selectAll` from the `d3-selection` module. The minified and gzipped bundle is 3,691 bytes, a 93% savings over the default build. The code uses `d3.select("body").append("h1").text("Hello, world!")` to render a heading, with Rollup and UglifyJS handling the build process.

Loading thumbnail…

Quadtree Search

This example shows a quadtree search for the nearest point to the mouse cursor among 2,500 randomly generated points. As the cursor moves, the closest point is highlighted in red. The visualization renders the quadtree’s subdivisions as gray rectangles and the points as black circles using SVG. It uses d3.quadtree with the find method, along with d3.mouse and quadtree.visit to display the search hierarchy.

Loading thumbnail…

Dispatching Events

Two linked views of U.S. census data show population by age group for a selected state: a bar chart displays total population, while a pie chart breaks down the seven age cohorts. Using d3.dispatch, custom "load" and "statechange" events coordinate a dropdown menu, bar chart, and pie chart through named listeners like "load.bar" and "statechange.pie." The pie chart animates slice transitions with transition.attrTween and d3.interpolate, while the bar chart animates its height via a rect transition. Data loads from a CSV file, rendered as SVG with d3.axis.

Loading thumbnail…

Fixed Zoom

This example demonstrates a fixed focal point zoom on a phyllotaxis pattern of 2,000 points rendered on a Canvas. The d3-zoom library is used with a custom zoom transform that ignores translation values, applying only the scale factor *k* to zoom around a specified world-coordinate focal point, which is centered on the display. The code initializes the points with a phyllotaxis algorithm, using the first point as the focal reference, and redraws the scene via `context.translate` and `context.scale` based on the current transform from the `zoom` event.

Loading thumbnail…

New Jersey State Plane

This example displays census tracts in New Jersey projected using a transverse Mercator projection, with an origin of 74° 30′ W and 38° 50′ N, as defined by the State Plane Coordinate System. The map is generated from TopoJSON data and rendered as SVG paths. It uses d3.geoPath with a d3.geoTransverseMercator projection, and the projection’s scale and translation are set automatically using the fitExtent method. Census tract polygons are colored light gray and highlight orange on hover.

Loading thumbnail…

Demers Cartogram

This visualization shows obesity rates across U.S. states as a pseudo-cartogram, encoding each state’s value as a square whose area is proportional to the obesity ratio. Rather than preserving adjacency between states, the layout uses a force simulation with `d3.forceSimulation`, applying `d3.forceX` and `d3.forceY` to pull each square toward its original Albers USA projection centroid while a custom collide force prevents overlap. The obesity data is drawn from CDC 2008 estimates and rendered as SVG rectangles, colored uniformly gray.

Loading thumbnail…

Curved Links

This example visualizes the character co-occurrence network from Victor Hugo’s *Les Misérables* as a force-directed graph. It replaces straight links with smooth Bézier curves by inserting an intermediate node into each connection, then uses a physical simulation to position all nodes. The code employs `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` forces, rendering circles and curved paths as SVG via `d3.select` and `append`. Dragging nodes is enabled through `d3.drag`, and the data comes from the embedded `miserables.json` file.

Loading thumbnail…

Arc Tween

A donut chart demonstrates arc transitions using D3 v4. An orange foreground arc repeatedly animates to a new random end angle, while a static gray background arc represents the full circle. The code uses `transition.attrTween` with a closure that interpolates between the current and target end angles via `d3.interpolate`, updating the bound datum before recomputing the SVG path with `d3.arc`. Rendering is SVG, with transitions triggered every 1.5 seconds by `d3.interval`.

Loading thumbnail…

Cylindrical Equal-Area

This example shows a world map rendered using the cylindrical equal-area projection, with dark landmasses and light country boundaries overlaid on a graticule. The projection’s shape is modified by selecting different standard parallels, such as Gall–Peters or Hobo–Dyer, highlighting how the choice affects the map’s proportions. The visualization uses `d3.geoCylindricalEqualArea` and `d3.geoPath` from the `d3-geo-projection` library to draw the paths, while geodata is loaded as TopoJSON from a GitHub-hosted file. The SVG output is styled with CSS classes for the graticule, land, and boundaries.

Loading thumbnail…

Voronoi Arc Map

A Voronoi arc map displays flight routes between US airports overlaid on a geographic map. Each airport is assigned a Voronoi cell, and hovering over a cell highlights all flight arcs originating from that airport in red. The visualization uses D3 v4 with `d3.geoPath`, `d3.geoAlbers`, and `d3.voronoi`, rendering SVG elements. Flight data comes from airports.csv and flights.csv, with the map drawn from TopoJSON data.

Loading thumbnail…

External SVG

This example demonstrates how to load an external SVG file and insert it directly into a web page using D3 v4’s `d3.xml` method. It fetches `rect01.svg`, which contains two rectangles: a thin blue outline of the canvas and a larger yellow rectangle with a thick navy border. The code specifies the MIME type as `image/svg+xml` and appends the parsed SVG document element to the page body. No data transformation or interactive behavior occurs—only static SVG retrieval and embedding.

Loading thumbnail…

Delaunay Triangulation

This interactive demonstration shows a Delaunay triangulation of 100 randomly generated points, with triangles and links redrawn in real time as the user moves the mouse. The first point follows the cursor, highlighting all triangles and links connected to it in red and white. Built with d3.v4 and the d3-voronoi API, it uses SVG paths, lines, and circles to render the triangulation, updating the visualization dynamically on mousemove and touchmove events.

Loading thumbnail…

Canvas Voronoi

One hundred randomly placed sites form a Voronoi diagram, rendered to a Canvas element. The cell containing the mouse position is filled red, while all cell boundaries and links between neighboring sites are stroked, and each site is drawn as a small circle. The first site follows the pointer via `d3.mouse` on touchmove or mousemove. The example uses `d3.voronoi` to compute cells, links, and polygons, with Canvas 2D context methods like `arc`, `moveTo`, and `lineTo` for drawing.

Loading thumbnail…

Every Map Projection

This visualization displays every map projection class available in d3-geo and d3-geo-projection as a static image. The grid of small maps is rendered as a GIF, which users can click to enlarge. The code does not use a data source but instead relies on the projection functions themselves, with the caption explaining that most classes represent parameterizable families rather than single projections. Only the HTML with an embedded image link is shown, without visible JavaScript or API calls.

Loading thumbnail…

Brush & Zoom II

This example demonstrates how brushing a scatterplot with d3.brush zooms to the selected region, while double-clicking resets the view. The code generates 900 random points in three gaussian clusters, rendering them as colored circles and using a linear scale to map coordinates. The brush’s `end` event updates the x and y domains, then animates the axes and points via `transition`. A 350ms idle timeout distinguishes a brush clear from a double-click reset.

Loading thumbnail…

Spline Transition

A path of normally distributed random data, rendered as a smooth basis-interpolated line, continuously scrolls leftward as new points append and old ones shift off. The animation loops by chaining transitions with `d3.active` and `transition.on`, updating the `d` attribute via `d3.line` before translating the SVG path. A `clipPath` rect hides the sliding tangent change at the edges. The example uses d3.v4, random samples from `d3.randomNormal`, and SVG axes with `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

Line Transition

This example demonstrates a smooth line transition with a sliding window of 40 random data points from a normal distribution. The line is redrawn with each new point pushed onto the back, then translated left via a `transition` on the `transform` attribute, with a `clipPath` hiding it outside the plotting area. The code uses `d3.line`, `d3.randomNormal`, `d3.scaleLinear`, and `transition.attr` to achieve the effect. The transition runs continuously, with each tick pushing, redrawing, and shifting the data.

Loading thumbnail…

Line Transition (Broken)

A continuous line chart animates as new random data points, drawn from a normal distribution, are appended and old ones removed. The animation uses a standard transition on the `d` attribute, demonstrating the default string interpolation that pairs numbers sequentially. This causes the line to move vertically instead of sliding horizontally, because the paired x-coordinates remain constant across the two paths. The code uses D3 v4, including `d3.randomNormal`, `d3.scaleLinear`, and a `d3.line` generator to construct the path.

Loading thumbnail…

Tidy Tree vs. Dendrogram

This example contrasts two standard dendrogram layouts for the same hierarchical data: a classic "cluster" view, where leaves align to the bottom, and a "tree" view, which positions root and leaves at opposite ends. Using a data set from a CSV (flare.csv), nodes and edges are drawn as SVG paths and circles, with text labels. Switching between layouts is animated via `d3.transition` and a 750ms duration, demonstrating how the `d3.cluster` and `d3.tree` layout algorithms reposition nodes while preserving the hierarchy.

Loading thumbnail…

Gradient Along Stroke

This example shows a curved SVG path rendered as a continuous rainbow gradient that follows the stroke, with colors interpolated from green to red along the path’s length. The technique samples points along the path using the SVG `getPointAtLength` method, then computes miter joints via line-line intersection to fill each segment with a solid color from `d3.interpolateRainbow`. A thin stroke is added to each segment to avoid antialiasing artifacts. The code uses D3 v4 and renders entirely in SVG.

Loading thumbnail…

ColorBrewer Spline II

This example visualizes the differences between color interpolation methods by comparing splines in L\*a\*b\* color space to a direct linear interpolation. A horizontal canvas strip renders a gradient produced using `d3.interpolateBasis` on L\*a\*b\* channels, while an SVG chart plots the individual L, a, and b channel curves as both smooth basis splines and dashed linear segments. The code uses d3.lab, d3.interpolateBasis, and d3.line, with circular swatches showing the original PiYG palette colors at corresponding positions along the x-axis.

Loading thumbnail…

ColorBrewer Spline

This example converts the eleven-color ColorBrewer “PiYG” scheme into a continuous color scale by interpolating in RGB color space using uniform one-dimensional b-splines. It shows a set of circles representing the original discrete colors, with three channels plotted as red, green, and blue curves, alongside a canvas gradient that visualizes the resulting smooth interpolation. Using d3-scale-chromatic for the source colors, the code relies on d3.interpolateRgbBasis and d3.interpolateBasis to generate the continuous scale, while rendering the curves with SVG paths and the gradient via Canvas createImageData.

Loading thumbnail…

Drag & Zoom

This example combines `d3.drag` and `d3.zoom` on a Canvas to allow both panning the view and moving individual points. Clicking and dragging on the background pans the zoomable world, while dragging on a circle moves that circle in world coordinates. The code explicitly converts between pointer coordinates and world coordinates using the zoom transform’s `invertX`/`invertY` and `applyX`/`applyY` methods. It renders 2,000 points generated by a phyllotaxis pattern, drawn as a single Canvas path with `arc` calls.

Loading thumbnail…

Local Variables

Small multiples of stock price time series compare the S&P 500 and Microsoft from 2000 to 2010. Using D3 4.0’s `d3.local()` variable, each chart defines its own y-scale and area and line generators, scoped per SVG element. The x-scale is shared globally. Data loads from `stocks.tsv` via `d3.tsv`, and `d3.nest()` groups records by symbol for rendering.

Loading thumbnail…

Pan & Zoom V

A canvas-based D3 visualization displays a phyllotaxis spiral of 2,000 points, fixated so that wheel zooming always centers on the first point while panning is disabled. The zoom handler uses d3.zoom to capture the transform, inverts the viewport center to compute the needed translation, and reapplies the transformed coordinates via context.translate and context.scale. The spiral’s points are drawn with Canvas arc calls, and the view updates on each zoom event without user translation.

Loading thumbnail…

Fetching CSV

This example demonstrates loading three CSV files in parallel using the Fetch API and Promises. It visually presents the result of summing the numbers from each file, updating the text “1 + 2 + 3” with the computed total. The code relies on `fetch` to retrieve each CSV and `d3.csvParse` from d3-dsv to parse the responses, then combines them with `Promise.all`. The final sum is displayed in an HTML heading, showing asynchronous data loading and aggregation.

Loading thumbnail…

Blocks Graph

The visualization shows a force-directed network of 1,238 bl.ocks examples, with nodes representing individual gists colored by author and links indicating mentions between README files. The network layout is computed using `d3.forceSimulation` with many-body charge, link, and position forces, and rendered directly to a Canvas `getContext("2d")` surface. Nodes are drawn as small circles with a 3-pixel radius, and hovering reveals a link to the original bl.ock, while dragging interactively repositions nodes. The data is a cleaned subset of Micah Stubb’s May 2016 dataset, filtered to remove missing and redundant entries.

Loading thumbnail…

Force Dragging III

This example shows an interactive force-directed graph of character co-occurrence in *Les Misérables*, rendered as nodes and links on a Canvas. Users can click and drag any node to reposition it, which temporarily fixes that node to the pointer and reheats the simulation. The code uses d3.forceSimulation with link, charge, and center forces, while d3.drag handles the drag gesture. Data comes from the bundled miserables.json file, and the visualization redraws on each simulation tick.

Loading thumbnail…

Force Dragging I

This interactive force-directed graph visualizes character co-appearances in *Les Misérables*. Users can drag any node, which fixes it to the pointer during the gesture while the simulation's target alpha is set to a non-zero value, "heating" the layout to emphasize the drag's effect. The graph uses `d3.forceSimulation` with link, many-body, and center forces, while `d3.drag` manages the drag interactions on SVG circles. Node and link positions update on each simulation tick, and the underlying data comes from `miserables.json`.

Loading thumbnail…

Force-Directed Lattice

A 20-by-20 grid of nodes forms a force-directed lattice, with links connecting adjacent rows and columns. The simulation uses `d3.forceSimulation` with a `d3.forceManyBody` charge and `d3.forceLink` at high iteration counts to keep the structure rigid. Nodes and edges are drawn to a Canvas 2D context each tick, and users can drag nodes to interactively distort the lattice, with the simulation responding via `d3.drag` and pinned positions.

Loading thumbnail…

Force Dragging II

A grid of 324 circles is rendered on a Canvas and can be dragged individually, with collision detection preventing overlap. The example combines `d3.forceSimulation` with the `d3.forceCollide` force and `d3.drag` interaction. During dragging, simulation `alphaTarget` increases to reheat the simulation, and fixed positions (`fx`, `fy`) track the pointer. The Canvas is cleared and redrawn on each tick, with circles drawn using the Canvas 2D API.

Loading thumbnail…

Collision Detection

A thousand circles of random radii are arranged into a tidy cluster, with d3.forceCollide preventing any overlap between them while d3.forceX and d3.forceY gently pull the whole group toward the center. The simulation runs on a fixed 960×960 canvas, where each tick clears the drawing and renders all circles as filled and stroked arcs. The code uses d3.forceSimulation with a velocity decay of 0.2, and draws the result directly via the Canvas 2D API.

Loading thumbnail…

Link Nodes by Name

A force-directed graph with six colored nodes and three links demonstrates mapping link endpoints to node identifiers instead of numeric indices. The visualization loads graph.json, which stores node objects with id properties and links referencing those ids as source and target. D3's forceSimulation, forceLink with an id accessor, and forceManyBody position the SVG circles and lines. The code binds data to circle and line elements, sets fill colors from each node's id, and updates positions on every tick event.

Loading thumbnail…

Smooth Slider

A slider demonstrates smooth color interpolation between hues. Dragging the handle sets a target hue, and the background color transitions toward it with an exponential easing effect, creating a fluid visual response. The example uses D3.js v4 with a linear scale mapping degrees to pixel positions, a custom drag interaction via `d3.drag()`, and a timer-driven tween to animate the hue value. SVG elements include styled tracks, ticks, and a circular handle, while the background color updates via `d3.hsl()`.

Loading thumbnail…

Sleep Cycles

This visualization plots daily sleep intervals across seven months, showing when a person falls asleep and wakes each day as a stepped horizontal bar. The y-axis represents time of day from evening to morning, while the x-axis shows the calendar date. The code converts each sleep interval into elapsed milliseconds since midnight and uses `d3.scaleUtc`, `d3.area`, and `d3.axisLeft` with SVG rendering. The fake data is loaded from a CSV file and parsed using `d3.utcParse`.

Loading thumbnail…

Tick Format

This example compares three ways to format tick labels on linear axes, each rendered as an SVG axis via `d3.axisLeft`. The left axis uses `scale.tickFormat` with an SI-prefix type (`"s"`), producing a consistent prefix across all ticks. The middle axis applies `d3.format(".0s")` directly, causing variable precision and prefix per label. The right axis uses `d3.formatPrefix(".1", 1e6)` to enforce a fixed mega-prefix, demonstrating manual control over SI formatting. The three axes share the same domain from -1e6 to 2e6.

Loading thumbnail…

Mitchell’s Best-Candidate

This interactive animation demonstrates Mitchell’s best-candidate algorithm for distributing points evenly across a canvas while building a Voronoi diagram. It begins with 10 points per frame and gradually reduces that rate as the algorithm continues, ultimately adding 2,500 points total. The code uses `d3.voronoi` to compute and draw Voronoi cells, rendered incrementally on Canvas, while `d3.quadtree` accelerates the search for each new point’s farthest empty region from existing points. Each new point is selected from 20 random candidates, choosing the one with the greatest distance to any existing point. The animation runs until all points are placed.

Loading thumbnail…

Vector Tiles

This example displays a static vector-tile map of San Francisco’s roads, with major highways, minor roads, and rail lines rendered as stylized SVG strokes. Using D3 v3, it loads Mapzen’s OpenStreetMap “roads” tiles via `d3.json`, sorts features by `sort_key`, and draws each path with `d3.geo.path` and a Mercator projection. A custom `d3.geo.tile` helper computes the visible tile range and scale, while CSS classes like `.highway` and `.rail` assign distinct colors and widths.

Loading thumbnail…

Voronoi Topology

One hundred particles drift and bounce across a canvas, their movements guided by random acceleration and velocity decay. A Voronoi diagram of their positions is computed, then converted into a TopoJSON topology using d3-voronoi and custom logic, allowing adjacent cells to be merged or meshed via topojson.merge and topojson.mesh. The canvas animation renders the resulting cell boundaries in gray and highlights alternating merged cells as semi-transparent red polygons, with particle positions drawn as red or black dots.

Loading thumbnail…

Nest Treemap

This example visualizes UK Home Office air travel spending in 2011 using a treemap. Each rectangular leaf represents a combination of airline supplier, destination, and ticket class, sized and colored by total paid fare. The hierarchy is built with `d3.nest` and rendered using `d3.treemap` from d3.v4. Leaf nodes display labels and formatted currency values, with the data sourced from a CSV file and parsed via `d3.csv`.

Loading thumbnail…

Zoom vs. Click

This example distinguishes a mouse click from a zoom gesture (pan or wheel) using `d3.event.defaultPrevented`. Randomly placed colored circles render in SVG with `d3.behavior.zoom` for pan and zoom, while a background `rect` listens for click events; clicking it briefly flashes black before returning to white, but panning or zooming suppresses that flash. The code uses D3 v3’s `d3.event.defaultPrevented`, `d3.scale.category10`, and `d3.range` to generate the data.

Loading thumbnail…

Small Multiples II

Small multiples display time-series price data for the S&P 500 and MSFT from a TSV file, each chart drawing a gray line and light-gray area chart with its own independent y-axis scale. The D3 v4 code creates a scope per symbol using `selection.each` and the `multiple` function, applying a linear scale for price and a time scale for dates. Each SVG contains an area path and a line path appended via `d3.area` and `d3.line`, with the data nested by symbol using `d3.nest`.

Loading thumbnail…

Rainbow Treemap

This treemap displays the hierarchical structure of the Flare visualization toolkit using a rainbow color scale that assigns hues cumulatively based on leaf value, creating a gradient across the layout. Built with D3 v4, it loads CSV data, uses `d3.stratify()` to build the hierarchy, and `d3.treemap()` to compute tile positions. The SVG render includes clipped text labels and tooltips, with colors applied via `d3.scaleRainbow()` and a sequential sum of node values.

Loading thumbnail…

N-Body Problem II

A swarm of 400 points orbits a central point in a dark canvas, with each point trailing a short line that encodes its instantaneous velocity as a color gradient from magenta to yellow. The simulation uses d3.forceSimulation with a d3.forceManyBody charge force and a d3.forceCenter constraint, while alphaDecay is set to zero so motion never settles. Rendering occurs on a Canvas 2D context, where each tick clears the frame and draws velocity-scaled strokes using d3.scaleLinear for color mapping.

Loading thumbnail…

Phyllotaxis

A sunflower-like phyllotaxis pattern spirals outward from the center as colored dots are added incrementally on a dark canvas. The entire canvas slowly rotates while the speed of new point generation increases over time. Built with D3 v4, it uses `d3.timer` for animation, a Canvas 2D context for drawing arcs, and a `d3.scaleRainbow` color scale mapped to each point’s angle and radius, with spacing and golden-angle rotation determining the layout.

Loading thumbnail…

Force GIF

A force-directed graph of 1,000 nodes and 999 links is animated over 60 frames, showing how the layout evolves from an initial state into a stable configuration. Node positions are updated through repeated simulation ticks, with white nodes and gray links drawn on a black background using the Canvas API. The example uses `d3.forceSimulation` with a many-body charge force and a zero-distance link force, rendered via node canvas buffers and assembled into GIFs with ImageMagick and gifsicle. Two versions compare D3 v3’s `d3.layout.force` with the newer modular `d3-force` API.

Loading thumbnail…

Animated Quadtree

This animation demonstrates how a quadtree structure changes as new points are added, displaying each red dot as a point, gray rectangles as leaf nodes, and black lines as internal boundaries. The code uses the `d3_quadtree` JavaScript library with `tree.add`, `tree.visit`, and canvas rendering via `getContext("2d")`. Points are generated using `d3_random.randomNormal` to create a normal distribution centered at the midpoint of the canvas, with each addition triggering a partial redraw to highlight the affected region.

Loading thumbnail…

Rainbow Perceptual Distance

Three rainbow color scales—HSL, HCL, and Cubehelix—are compared by graphing the CIE76 perceptual color difference between pairs of hues spaced 20 degrees apart. The chart plots these differences along a 360-degree hue axis, with flatter curves indicating more uniform perceptual spacing. The HCL scale is perfectly flat by definition, while Cubehelix outperforms HSL but remains uneven. Using D3 v4, the visualization renders SVG lines and labels via `d3.line`, `d3.axisBottom`, `d3.axisLeft`, and `d3.scaleRainbow`, computing differences with `d3.lab` and a custom `delta` function.

Loading thumbnail…

Dorling Cartogram

A pseudo-cartogram maps obesity rates across U.S. states, using circles sized by value and positioned near their geographic origins. The visualization employs D3.js (v3) with an Albers USA projection and a `d3.layout.force` simulation to resolve overlaps while preserving locality. Circle radii are scaled via `d3.scale.sqrt` from CDC 2008 data, rendered as SVG shapes.

Loading thumbnail…

Symbol Map

A symbol map displays the population of each U.S. state as a circle centered on the state’s centroid, with circle area proportional to population via a square-root scale. The visualization overlays these circles on a gray state map rendered with `d3.geo.path`, using TopoJSON for state boundaries and GeoJSON for state centroids. The code loads both datasets with the queue library, sorts states by population, and draws each symbol as an SVG path with a white stroke and semi-transparent steelblue fill.

Loading thumbnail…

Voronoi Spirals III

Voronoi Spirals III generates a dynamic, color-cycling animation from 100 random seed points. The code computes Voronoi cells using d3.voronoi, then iteratively shifts each cell's vertices to create expanding spiral-like polygons over 256 red-hued frames. The final composition is captured via Canvas getImageData, and a d3.timer loop maps each frame's red intensity through a d3.scaleRainbow palette using an elapsed-time offset, producing a continuously shifting rainbow animation. The result showcases a morphing Voronoi tessellation whose colors cycle through the spectrum.

Loading thumbnail…

Voronoi Spirals II

A Voronoi diagram partitions a canvas into cells around randomly placed sites; this animation continuously warps those cells by rotating each polygon's vertices, creating a swirling, spiraling effect. The fill color shifts through a smooth spectrum as the animation progresses over five seconds. The code uses d3.voronoi to compute the polygons, d3.timer for the animation loop, and d3.scaleCubehelix to interpolate the cell colors. Each frame, the first vertex of a cell is moved toward the next, shortening the polygon's edge before pushing a new point into the array. The rendering is done via the Canvas 2D API.

Loading thumbnail…

Polar Clock III

A polar clock visualizes time through a series of six concentric rings, each representing a progressively shorter time unit from years to seconds. The outermost rings track years and months, while inner rings display weeks, days, hours, and minutes. Each ring contains colored tick marks for sub-units and a rotating arm that sweeps through them, with the active tick highlighted. Built with d3.v4, the animation uses `d3.timeInterval` for time arithmetic, `d3.arc` for arm geometry, and `d3.scaleRainbow` for color mapping, updating every second via CSS transitions.

Loading thumbnail…

Chained Transitions II

Fifty circles, arranged vertically and colored by a linear scale interpolating through HCL color space, slide left and right across the SVG canvas in repeating chains. Each circle’s initial delay staggers its motion, and the `slide` function uses `d3.active` to restart the sequence after each transition completes. The example demonstrates chained transitions in D3 v4, binding data to a `d3.scalePoint` domain and animating the `cx` attribute with `transition.attr`.

Loading thumbnail…

Transform Transitions II

A grid of 1,200 small colored squares, each assigned a position via inline CSS `transform` and a hue from `d3.hsl`, reacts to mouseover by flying to the center of the viewport. The selected square scales up and rotates 180 degrees using D3’s `transition().style("transform")`, which interpolates the CSS transform string, then shrinks and removes itself. Built with d3.v4 and `d3.range`, the animation leverages D3’s transform interpolation to smoothly tween translate, scale, and rotate values, while `raise()` brings the active square to the front.

Loading thumbnail…

Sized Donut Multiples

A grid of donut charts shows the age distribution of each US state, with chart area scaled proportionally to total state population via `d3.scaleSqrt` and arcs sized by age cohort. The visualization uses `d3.pie` and `d3.arc` to generate SVG paths, while `selection.each` in a `multiple` function accesses both parent (state) and child (age) data simultaneously. Color encodes age categories through `d3.scaleOrdinal`, and a separate SVG legend lists the age bands. Data comes from `data.csv`, loaded with `d3.csv`.

Loading thumbnail…

Polar Clock

This polar clock visualizes time as six nested, colored arcs, each representing seconds, minutes, hours, days, dates, and months, with the arc length proportional to the current value. The SVG updates every second with an elastic transition, using `d3.svg.arc` for curved shapes, `attrTween` to interpolate arc angles, and a linear color scale to map each value to a hue. The code, built with D3 v3, tracks the current date via a `fields()` function and respects the `document.hidden` property to pause animation when the tab is inactive.

Loading thumbnail…

Polar Clock II

The Polar Clock II visualization displays the current time as a set of six concentric rings, each representing a time unit from seconds to year, with colored arcs and labels showing the progression within each period. The code uses D3 v4, SVG, and a timer to repeatedly update the visualization, with `d3.arc` generating the curved bodies and text paths for each field. It relies on `d3.timeFormat` and date intervals like `d3.timeDay` to calculate angles and label values, while the `d3.scaleRainbow` color scale maps each angle to a hue.

Loading thumbnail…

Bar Chart IIIc

This bar chart displays the relative frequency of each letter in the English alphabet, using data loaded from a TSV file. The visualization uses D3 v3 to construct an SVG with ordinal and linear scales, and renders bars with a steelblue fill. Axes are generated using `d3.svg.axis`, with the x-axis oriented at the bottom and the y-axis on the left. The bar heights and positions are computed from the data values, and the chart includes margins and a rounded band scale for bar spacing.

Loading thumbnail…

Bar Chart IIIb

This example displays the relative frequencies of letters in the English language as a set of vertical bars, one per alphabet letter. The chart is generated with D3 version 3, using an ordinal scale with `rangeRoundBands` to position bars and a linear scale to map value to height. Data is loaded from a tab-separated file via `d3.tsv` and rendered as SVG rectangles with white value labels. The design uses a fixed steelblue fill for all bars, creating a simple, unadorned visualization.

Loading thumbnail…

Bar Chart IIIa

This example shows a simple SVG bar chart of letter frequencies, with steel-blue bars and white value labels. Each bar’s height corresponds to a data point from a tab-separated `data.tsv` file, and the chart is sized to 960 by 500 pixels. The code uses d3.v3’s `d3.scale.linear`, `d3.tsv`, and data joins via `selectAll`, `enter`, and `append` to create `g`, `rect`, and `text` elements, with the scale mapping values to pixel heights.

Loading thumbnail…

Bar Chart IIc

This example shows a basic horizontal bar chart, with each bar labeled by its value in white text. It uses D3 v3 to load tab-separated data from `data.tsv`, scales the bar widths with a linear scale, and appends SVG `<rect>` and `<text>` elements. The chart is rendered as an SVG with a fixed width, and the bar height is computed from the number of data rows. The `d3.tsv` method parses the data, and the `type` function coerces values to numbers before rendering.

Loading thumbnail…

Bar Chart IIb

A linear bar chart displays six numbers from a static array. Each bar's length is proportional to its value, with the value label placed at the bar's end. The chart uses D3 v3's `d3.scale.linear` to map data values to pixel widths on an SVG canvas. The code builds the visualization by selecting the SVG element, appending `g` groups for each data point, and adding `rect` and `text` elements with attributes derived from the scale.

Loading thumbnail…

Bar Chart IIa

A static SVG bar chart displays six labeled values from 4 to 42, with horizontal steel-blue bars whose widths encode the numbers. Each bar is paired with a white right-aligned text label inside a `<text>` element. The chart is built directly in the HTML without JavaScript, using inline `<rect>` and `<text>` elements within `<g>` transforms for vertical positioning. This example demonstrates the basic SVG bar chart markup from the Let’s Make a Bar Chart tutorial.

Loading thumbnail…

N-Body Problem

Two hundred colored circles gravitate and collide, their motion traced by white velocity streaks, in an N-body simulation rendered on an HTML5 Canvas. The piece uses the D3 v3 APIs `d3.layout.force` for the force-directed layout, `d3.geom.quadtree` for efficient collision detection, and `d3.scale.linear` to map speed to a steelblue-to-brown stroke. Each tick pauses the simulation, redraws the scene, and resumes, with circle positions and velocities updated from prior frames.

Loading thumbnail…

SVG Path Cleaning

An SVG path is parsed and re-rendered to demonstrate path data cleaning. The example uses the `getPathData()` and `setPathData()` methods from the `path-data-polyfill.js` library to normalize a dense, messy path string into a structured array of commands and values. The cleaned path is displayed in an SVG element, showing how the polyfill reconstructs the original shape while simplifying its data representation. The code relies on standard SVG DOM APIs and a D3 v3 context, with the path rendered directly as SVG markup.

Loading thumbnail…

Closest Point on Path

A black cardinal-interpolated path connects ten fixed points. As the mouse moves over the SVG canvas, a red line and circle dynamically trace the nearest location on that path to the cursor. The example demonstrates an approximate algorithm built on D3 v3’s SVG path API, using `getTotalLength` and `getPointAtLength` for a coarse linear scan followed by a binary search to refine the result to roughly one pixel accuracy.

Loading thumbnail…

Closest Point on Path II

This example demonstrates an approximate method for finding the closest point on an SVG path by sampling points along the path and computing their Voronoi tessellation. A range slider controls the sampling distance, where denser samples yield more accurate results but are computationally more expensive. The visualization uses d3.geom.voronoi to create the tessellation, d3.svg.line for path interpolation, and SVG path APIs like getPointAtLength and getTotalLength for sampling. Hovering over any Voronoi cell highlights the corresponding cell and its sampled point, visualizing how the approximation changes with sample density.

Loading thumbnail…

Bar Chart with Negative Values II

This example shows a horizontal bar chart where negative values extend to the left and positive values to the right, with each bar color-coded by sign. The visualization uses `d3.scale.linear` for the x-axis and `d3.scale.ordinal` with `rangeRoundBands` for the categorical y-axis. The code builds the chart in SVG using `d3.svg.axis`, and a custom axis adjustment flips the tick orientation for negative bars by repositioning their tick lines and labels. Data is loaded from a TSV file via `d3.tsv`, and the bars are drawn as `rect` elements with widths computed from the absolute difference between the zero point and each value.

Loading thumbnail…

Prose-only Blocks

This example demonstrates a prose-only block on bl.ocks.org, created from a Gist containing a single README.md file with no index.html. The block renders the README content as the main display, omitting the usual iframe visualization area. The implementation filters Gists based on file presence and renders additional file sources, while syntax-highlighting embedded code blocks using the Gist API and GitHub’s default UI. The page also includes a JavaScript shuffle function example to illustrate embedded code.

Loading thumbnail…

Hello, D3!

This example demonstrates the simplest possible D3.js program: a single span element appended to the body displays the text “Hello, world!”. Using d3.select and the append method, it creates the element and sets its content with the text function. The code relies on the d3.v3 library loaded from a CDN, showing the basic pattern of selecting a DOM node and chaining methods to add and modify elements.

Loading thumbnail…

Hello, bl.ocks.org!

This example demonstrates the simplest possible D3-based web page: a static HTML file that renders the text “Hello, index!” in the browser. It uses no external libraries or data, relying solely on the browser’s built-in HTML parsing and rendering of the `<body>` element. The code defines no JavaScript, SVG, or canvas components, making it a minimal starting point for exploring D3’s ecosystem. Its purpose is to show how a gist’s single `index.html` becomes a live, viewable block.

Loading thumbnail…

Custom Time Format

This example demonstrates a custom multi-scale time format for a D3 axis, showing how tick labels adapt to different time granularities—displaying milliseconds, seconds, minutes, hours, days, and months as the scale zooms. It uses `d3.time.format.multi` to define an array of format/filter pairs, applied via `d3.svg.axis`. The code generates an SVG chart with a single year-long domain, rendering tick labels dynamically based on the date’s precision. The data source is the current date, and the rendering relies on D3 v3’s SVG axis API.

Loading thumbnail…

Capturing Mousemove

Three div elements display their current mouse coordinates as a visual feedback for dragging. Clicking and holding any div initiates a drag state, where the text inside updates to show the mouse position relative to that specific div’s top-left corner; releasing the mouse clears the active state. The example uses `d3.select` to attach `mousedown` handlers to the divs, and dynamically registers `mousemove` and `mouseup` listeners on the `window` object only while a drag is in progress. It uses `d3.event.preventDefault()` to stop text selection, `d3.mouse` to compute relative coordinates, and `.classed` for styling changes.

Loading thumbnail…

Area Choropleth

This example shows a choropleth of U.S. counties where each county’s color encodes its geographic area on a logarithmic scale from brown (small) to steelblue (large). The map renders county boundaries as SVG paths using `d3.geo.path()` and TopoJSON, with state outlines drawn as white strokes. The fill color is computed by passing each path’s area, obtained via `path.area(d)`, into a `d3.scale.log()` with a domain of 10 to 500. The data comes from a local `us.json` TopoJSON file, and the visualization uses d3.v3.

Loading thumbnail…

Fuzzy Counties

The example draws a diagonal line across the bounding box of every U.S. county, creating a dense, cross-hatched pattern over the nation. Using `d3.geo.bounds`, it computes each county’s geographic extent and maps those bounds to projected coordinates via `d3.geo.path` with an Albers USA projection. The results are rendered as a single `MultiLineString` in SVG, built from TopoJSON county data. The visualization highlights the irregular shapes and varying sizes of county boundaries through the intersecting diagonals.

Loading thumbnail…

Blocky Counties

This example visualizes the lat-lon bounding box for each county in the United States, rendering blocky, rectangular outlines instead of the actual county shapes. The map uses the Albers USA projection and displays all county bounding boxes as steel-blue, stroked paths on an SVG canvas. The code loads US county data from a JSON file, then applies `d3.geo.bounds` to compute each county’s geographic extent, which is drawn via a single `d3.geo.path` object. It relies on the `d3.geo` module and `topojson.feature` to filter and structure the geographic features.

Loading thumbnail…

County Circles

This symbol map displays every U.S. county as a circle centered on its geographic centroid, with the circle’s radius scaled so its area matches the county’s actual land area. The visualization encodes area quantitatively through the circle size, using a stroke-only rendering in steelblue against a white background. The code loads TopoJSON county boundaries from a remote gist, converts them to GeoJSON with `topojson.feature`, and positions each circle via `d3.geo.path().centroid`. Circle radii are computed from `path.area` using the square-root formula for proportional area scaling, all rendered as SVG elements with d3.v3.

Loading thumbnail…

Swiss Cantons

This example displays a choropleth map of the Swiss cantons, labeling each region with its name. The visualization is rendered as scalable vector graphics (SVG) using D3.js version 3 and the TopoJSON library. It loads geographic data from a `readme-swiss.json` file and projects it using an Albers equal-area conic projection with specific parameters for Switzerland. Canton boundaries are drawn as white paths, while `d3.geo.path()` handles the map projection and centroid calculations for label placement.

Loading thumbnail…

Circle-Polygon Intersection

A red circle and a black polygon are displayed on an SVG canvas, and the circle changes from red to green when the polygon intersects it. The polygon’s vertices are draggable control points; dragging them updates the polygon’s path and recomputes the intersection state. It uses D3 v3’s `d3.behavior.drag`, along with custom geometric functions (`pointInPolygon`, `pointLineSegmentDistance`) to test whether the circle’s center or any edge of the circle is inside the polygon or within its radius.

Loading thumbnail…

Voronoi Clipping

Two points generate a two-cell Voronoi diagram clipped to the SVG canvas. The example shows how `d3.geom.voronoi` clips its output polygons using the `.clipExtent` method, with each cell rendered as an SVG path and each input point as a circle. D3.v3’s `category10` scale colors the cells and points. Hovering a path slightly raises its fill opacity, though no other interaction is implemented.

Loading thumbnail…

Streams

Five random data series render as smooth, horizontally stacked stream-like ribbons across an SVG canvas. Each of the 90 values per series is drawn as a filled area path with a black outline, using a basis interpolation to create fluid curves. The visualization uses D3 v3 with `d3.svg.area`, linear and ordinal scales for positioning, and a predefined color palette. Each series is vertically offset via a translate transform, producing a layered composition that highlights variations in the randomly generated data.

Loading thumbnail…

Closest Point to Segment

A red circle tracks the closest point on a black segment to the cursor, with a dashed line connecting the cursor to that point and a label showing the segment's parameter value. The circle turns green when the closest point lies within the segment’s interior. Using D3 v3, the code computes the projection via the `pointLineSegmentParameter` function and updates SVG elements on `mousemove`. It also draws interpolated ticks and darkened endpoint markers to clarify segment geometry.

Loading thumbnail…

Donut Transitions

Two random ten-slice donut charts transition back and forth between states through a four-stage chained animation. The slices first split into two rings, then translate to align with their final positions, resize to match new values, and finally reunite into a single ring. The example uses d3.v3 with `d3.layout.pie` for arc generation and chained `.transition()` calls with `.attrTween` to tween the `d` attribute of SVG paths, interpolating start and end angles as well as inner and outer radii.

Loading thumbnail…

Pie Chart

Ten random values are visualized as a pie chart that first animates from a single point into a full circle, then morphs into a donut chart with a hole in the center. The animation uses two successive `transition.attrTween` calls on the path's `d` attribute, with `bounce` and `elastic` easing functions. The SVG is built using the D3 v3 API, including `d3.layout.pie()`, `d3.svg.arc()`, and `d3.scale.category20()` for coloring each slice.

Loading thumbnail…

Convex Hull

This example visualizes the convex hull of a set of normally distributed points, updating live as the user moves the mouse to reposition the first point or clicks to add new points. The hull is rendered as a padded, rounded stroke path, using `d3.geom.hull` to compute the polygon from the current vertex array. The points themselves are drawn as white circles with black strokes, and their positions are updated via `attr("transform", ...)` translations. All rendering is done with SVG elements, and the example relies on `d3.select`, `d3.mouse`, and `d3.range` for interaction and data generation.

Loading thumbnail…

PivotGraph (Rollup) Layout

This example demonstrates the PivotGraph rollup layout, which collapses a small social network into aggregate nodes positioned along two categorical axes: gender and group. The visualization shows grouped circles scaled by their node counts, while curved links between them represent aggregated connections with stroke widths proportional to link value. The code uses d3.rollup with ordinal scales to map categories to x and y positions, and d3.svg.axis to display the axes. Rendering occurs in SVG with the data loaded from social.json.

Loading thumbnail…

ggplot2-Style Axis

This example demonstrates ggplot2-style axes for a chart, combining gray grid lines with black ticks and labels. Two separate `d3.svg.axis` instances render the grid and the axis ticks, while a data-join’s exit selection customizes minor tick appearance. The grid lines use a tick size that spans the full chart height, and the background is a gray rectangle. The axes are drawn in SVG using D3 v3, with styling controlled through CSS classes.

Loading thumbnail…

Rotated Axis Labels

A date scale spans a full year, from January 2012 to January 2013, with axis ticks rendered by d3.svg.axis. The example shows how to rotate the tick label text by 90 degrees using post-selection, where after the axis is drawn, the `.selectAll("text")` method retrieves the labels and adjusts their `x`, `y`, `dy`, and `text-anchor` attributes for a custom appearance. The axis is drawn with SVG line and path elements.

Loading thumbnail…

TopoJSON Points

This example maps a collection of airport locations across the United States using a TopoJSON MultiPoint geometry object. The airports are rendered as small dots over a gray landmass with white state boundaries, using an Albers projection. The code loads geographic base data from a separate US TopoJSON file and the airport points from a local TopoJSON file via the queue library, then draws everything with d3.geo.path and SVG paths.

Loading thumbnail…

Blocky Counties

Blocky Counties visualizes the projected bounding boxes of every US county as square-edged outlines instead of their true shapes. The map renders each county’s axis-aligned bounding rectangle computed from its projected geometry, producing a blocky, grid-like silhouette of the nation. The code uses d3.geo.path with an Albers USA projection, iterates over counties from a TopoJSON file, and builds SVG path data with `M`, `H`, `V`, and `Z` commands based on the bounds returned by `path.bounds`. The result is a stylized, abstract representation of county positions and extents.

Loading thumbnail…

Azimuthal Equidistant

This example uses D3 version 3 to create an azimuthal equidistant projection centered on New York City. It draws graticule rings at constant distances from that origin using `d3.geo.circle` and projects them with `d3.geo.azimuthalEquidistant`. The map renders world landmasses and country boundaries from a TopoJSON source, presenting the Earth’s surface as a set of concentric distance rings with a white boundary overlay.

Loading thumbnail…

Gnomonic Butterfly

The Gnomonic Butterfly example displays a world map projected using the Gnomonic butterfly polyhedral projection, which unfolds the globe into a butterfly-like shape with eight triangular faces. The map shows landmasses as dark shapes with white country boundaries, overlaid on a graticule grid. Built with d3.v3, the visualization uses `d3.geo.polyhedron.butterfly` to define the projection, `d3.geo.path` for rendering geographic features, and TopoJSON data from a world-110m file. The SVG output includes a sphere outline, clipped land and boundary paths, and a graticule layer, with the projection rotated and scaled to fit the canvas.

Loading thumbnail…

Craig Retroazimuthal

This example animates a Craig retroazimuthal world map projection, cycling its central parallel between -25 and 25 degrees to show how the graticule’s shapes warp. It renders the graticule as colored lines on a Canvas using d3.geo.craig() and d3.geo.path() with a canvas context. Meridians and parallels are drawn separately with hues derived from their coordinates, while d3.timer drives the animation and clears the canvas each frame. The code includes d3.geo.projection.v0 and d3.v3.

Loading thumbnail…

Hobo–Dyer

The Hobo–Dyer projection renders world landmasses and country boundaries as a cylindrical equal-area map with a 37.5º parallel, using dark land polygons and white boundary strokes over a graticule grid. The visualization loads TopoJSON world data (world-50m.json) and converts it to GeoJSON via `topojson.feature` and `topojson.mesh`. It draws the map with `d3.geo.path` and the `d3.geo.cylindricalEqualArea` projection from the geo.projection plugin, all rendered as SVG.

Loading thumbnail…

Tobler World-in-a-Square

The Tobler World-in-a-Square projection renders the globe as a square, using the cylindrical equal-area projection with a parallel set to 55°39′14″. The map displays landmasses in dark gray, country boundaries as white lines, and a graticule in light gray, all within an SVG canvas. Built with D3 v3, the example uses the `d3.geo.cylindricalEqualArea` projection, `d3.geo.path` for rendering, and topojson to process world-50m geographic data.

Loading thumbnail…

Concentric Circles Emanating

An animated map shows concentric red circles emanating from a glowing dot over the Indian Ocean. A base layer renders graticule lines and world landmasses using `d3.geo.path` with a Mercator projection. The animation repeatedly appends a circle at the projected dot position, then uses `transition()` with linear easing to expand its radius while fading its stroke opacity over six seconds. The repeating action is driven by `setInterval`, while land data comes from a remote TopoJSON file.

Loading thumbnail…

Two Point Equidistant

This example visualizes the Two Point Equidistant projection, which preserves accurate distances from two specified points—here, Honolulu and Washington, D.C. The map displays graticules and landmasses over a stylized background, with a warning that artifacts appear beyond 145° due to incomplete elliptical clipping. It uses `d3.geo.twoPointEquidistant()` with custom scale, translation, and `clipAngle`, along with `d3.geo.path` and `d3.geo.graticule`. Land data comes from a TopoJSON world file, rendered as SVG with styled foreground, graticule, and land paths.

Loading thumbnail…

Two Point Equidistant

This example demonstrates the two-point equidistant projection, showing great circles centered on Honolulu and Washington, D.C. as red and blue circles. The map includes world landmasses with the projection applied. The code uses `d3.geo.twoPointEquidistant()` with specified points, `d3.geo.circle()` for generating circles, and `d3.geo.path()` for rendering. It renders to SVG using D3.v3 and topojson, loading world data from a JSON file. The projection is noted as a work in progress with visual artifacts requiring elliptical clipping.

Loading thumbnail…

Brushable Network, II

A brushable network diagram renders a static graph of 80 nodes and over 200 links as SVG circles and lines. Using D3 v3, the visualization supports multiple selection modes: dragging creates a rectangular brush to select nodes, while holding SHIFT adds to or removes from the selection via XOR logic, and SHIFT-clicking toggles an individual node. The d3.svg.brush component applies an identity scale to the coordinate space, and node and link data comes from a JSON file.

Loading thumbnail…

Polar Plot

A polar plot traces the parametric function sin(2t)cos(2t) as a red line on a circular coordinate grid, with radial circles and 30° angular ticks labeled from 0° to 330°. The visualization uses D3 v3’s `d3.svg.line.radial` for the curve, mapping the function’s time parameter to angle and its value to radius; angular positions are negated and offset by π/2 to align counterclockwise from 3 o’clock, differing from D3’s default clockwise-from-12 orientation. The SVG output includes axes, dashed grid lines, and a solid outermost circle, all styled via CSS classes.

Loading thumbnail…

Asia Lambert Conic Conformal

This visualization displays Asia using the Lambert Conic Conformal projection, with a graticule of latitude and longitude lines overlaid on top. A single country, Russia, is highlighted in gray and outlined in black. The map is rendered as SVG using D3.js version 3, employing the `d3.geo.conicConformal` projection and the `d3.geo.graticule` generator to draw the coordinate grid. Geographic data comes from a world-50m GeoJSON file loaded via `d3.json`, and the map paths are drawn using `d3.geo.path`.

Loading thumbnail…

113th U.S. Congressional Districts

This example displays the 113th U.S. Congressional districts as an interactive choropleth map, with each district shading orange on hover over a gray base. It uses a custom Albers USA projection via `d3.geo.albersUsa()` and renders SVG paths with `d3.geo.path`. District and state boundaries are drawn as white strokes using `topojson.mesh`, while district features come from `topojson.feature` on data fetched from GitHub-hosted JSON files. The visualization clips all paths to the landmass using a clip path derived from a US TopoJSON mesh.

Loading thumbnail…

Stacked-to-Multiples

Four quarterly data series toggle between small multiples and a stacked chart. The animation smoothly shifts the group labels and rectangular bars vertically via `d3.transition()`. The example loads a TSV file with `d3.tsv()`, nests rows by group with `d3.nest()`, and stacks values with `d3.layout.stack()`, while ordinal scales and `d3.svg.axis()` render the SVG output.

Loading thumbnail…

Iceland Topography

This example displays Iceland’s elevation as a colored contour map, using a green-to-white scale for low to high terrain. It renders geospatial data from TopoJSON as SVG paths via `d3.geo.path` and a Mercator projection, with zooming controlled by `d3.behavior.zoom`. Topography comes from the National Land Survey of Iceland, encoded in the `flakar` dataset. The map resizes to fit the window and draws all features with a thin black stroke.

Loading thumbnail…

Project to Bounding Box

This example shows a single state selected from a GeoJSON collection and highlights it with an outline, while displaying the full set of U.S. state boundaries in gray. It centers the highlighted state within the viewport by using the Albers projection’s `d3.geo.albers()` and adjusting its scale and translation based on the bounding box computed via `path.bounds()`. The code loads TopoJSON data, converts it to GeoJSON with `topojson.feature`, and renders both the state mesh and outline as SVG paths using `d3.geo.path()`.

Loading thumbnail…

Metropolitan Unemployment

This visualization shows the distribution of unemployment rates across 380 U.S. metropolitan areas from January 2000 to December 2012. Using a time-series heatmap, it displays monthly unemployment rate bins as colored rectangles, with darker purple indicating higher numbers of areas within a given rate range. The code uses D3 v3’s `d3.time.scale`, `d3.svg.axis`, and `d3.interpolateLab` for color interpolation. Data from the Bureau of Labor Statistics is loaded via `d3.json` and rendered as SVG rectangles.

Loading thumbnail…

Streams

A map of the United States displays the National Atlas’s 1:1,000,000 scale streams dataset, rendered from TopoJSON converted to GeoJSON. The visualization uses d3.geoPath and d3.geoStitch to project and draw fine-grained river networks, which are simplified via TopoJSON’s quantization and delta encoding to keep the file manageable. The page also includes a static PNG preview of the resulting map.

Loading thumbnail…

Zip Codes

This example visualizes the geographic distribution of U.S. zip code tabulation areas, which serves as a rough proxy for population density. It shows a complete map of the contiguous United States, with each zip code represented as a filled polygon. The map is rendered from a TopoJSON file, originally derived from a Census Bureau shapefile and simplified to reduce file size by 99.1%. The code uses `d3.geoPath` to project and draw the shapes, and the visualization is part of the U.S. Atlas project.

Loading thumbnail…

One-Way Markers

A looping animation draws a twisting black curve, overlaid with evenly spaced arrowhead markers that trace the same path. The example uses D3 v3 to sample points along the SVG path via `getPointAtLength`, resampling them at uniform pixel intervals to place the markers. A `d3.svg.line` with basis interpolation generates the base shape, while an SVG `<marker>` element with `orient="auto"` orients each arrowhead along the curve. The path continuously updates from parametric cosine and sine functions, creating a fluid, morphing line.

Loading thumbnail…

New Jersey Blocks

New Jersey Blocks is a static map of New Jersey’s counties, rendered as a grid of square blocks instead of their true geographic shapes. The visualization uses a custom layout where each county is represented by a block, with the arrangement derived from topological data. The graphic is generated through a Makefile process that converts GeoJSON topology into a block-based representation, and the final image is displayed in an HTML page. The code relies on the U.S. Atlas repository for the source data and uses standard web rendering to present the resulting PNG.

Loading thumbnail…

Constrained Zoom

This example displays a world map that users can pan and zoom, with the zoom behavior constrained so the map cannot be moved beyond its edges. The code uses d3.behavior.zoom with a custom zoom event handler that clamps the translation based on the current scale. Geographic data from a TopoJSON file is rendered using d3.geo.path with a Mercator projection, and the map is drawn as SVG paths. The constraint formula adjusts the allowed translation range as the scale changes, preventing the map from leaving the viewport.

Loading thumbnail…

Gray Earth

A topographical map of the United States combines a shaded-relief raster with vector land boundaries. The raster, sourced from Natural Earth, is reprojected to the U.S. National Atlas azimuthal equal-area projection using gdalwarp and displayed as an SVG image. Boundaries are drawn via `d3.geo.path` and TopoJSON, with a `clipPath` limiting the raster to the land area. The code uses D3 v3, d3.geo.azimuthalEqualArea, and TopoJSON, applying the relief as a background clipped to the country outline.

Loading thumbnail…

EPSG:2163 Coordinates

This interactive map displays the United States using the EPSG:2163 U.S. National Atlas projection, rendered as SVG paths with d3.geo.azimuthalEqualArea and topojson. A red brush overlay lets users select a geographic extent, with the corresponding xmin ymin xmax ymax coordinates in projection meters displayed live. The code computes these bounds by translating between pixel space and EPSG:2163 coordinates using the projection’s scale and the predefined Earth radius of 6,370,997 meters. The example demonstrates how to generate target extents for tools like gdalwarp.

Loading thumbnail…

Kentucky Population Density

This is a thematic map of Kentucky counties colored by population density. It uses a conic conformal map projection with a specific rotate, scale, and center to position each county. The choropleth coloring applies a threshold scale with a ColorBrewer palette to classify density values, and the chart includes a legend showing population per square mile. The map is rendered as SVG using d3.geo.path and topojson.

Loading thumbnail…

Zipdecode

Zipdecode displays all U.S. ZIP code locations as a dot map, highlighting those that match the prefix typed into an input field. It uses an AlbersUSA projection to plot each ZIP code’s latitude and longitude from a TSV dataset. As the user enters digits, the map cross-fades between canvases, drawing inactive dots in gray and active matches in red. The implementation uses d3.geo.albersUsa, d3.tsv, d3.select, and canvas transitions, animating opacity over 350 milliseconds before removing old layers.

Loading thumbnail…

Mouseenter

A nested set of semi-transparent rectangles demonstrates the practical difference between D3’s mouseenter/mouseleave events and the standard mouseover/mouseout events. Each time the mouse enters a group, a text label with the event name (e.g., "mouseenter" or "mouseover") fades in at the cursor position, while moving between nested rectangles triggers only the mouseover/mouseout pair. The code attaches these four handlers to a recursively nested SVG `<g>` element, uses `d3.mouse` for cursor coordinates, and animates the labels’ opacity to zero via D3’s `transition`. A polyfill is mentioned for browsers without native mouseenter support.

Loading thumbnail…

Hexagon Mesh

This interactive visualization displays a mesh of hexagons that users can paint by clicking and dragging with the mouse. A black outline dynamically traces the boundary between filled and unfilled hexagons. The grid is generated on the fly using TopoJSON's geometry data structures, transformed through a custom D3 geo projection to create regular hexagon shapes. The boundary outlines are computed using the `topojson.mesh` API with a filter that identifies edges separating filled from empty cells, rendered as SVG paths via `d3.geo.path`.

Loading thumbnail…

GeoJOIN

This example shows how to merge external attribute data from CSV or TSV files into a GeoJSON FeatureCollection, using a property or feature ID as the join key. It accepts multiple property files and can transform selected fields, including converting strings to numbers with a leading plus sign. The script runs on Node.js and uses the `optimist` library for command-line parsing, the `dsv` library for delimited file parsing, and standard `fs` and `JSON` modules for file I/O and serialization. The output is written either to a specified file or to standard output.

Loading thumbnail…

Concurrent Transitions

Two concurrent D3 transitions animate a single SVG path element rendered as a black cross with a red outline. The *twizzle* transition continuously rotates the path 720 degrees, while the *plonk* transition repeatedly pulses its red stroke-width between 0 and 30 pixels. The code achieves concurrency by running each `transition.tween` on separate dummy objects (`twizzleLock` and `plonkLock`) instead of the path itself, using `d3.interpolateString` to drive the custom tweens and `setTimeout` for looping.

Loading thumbnail…

Ohio State Plane (N)

A choropleth of Ohio’s counties uses the state plane north projection, rendered as SVG paths. The map displays county boundaries and names sourced from the us-atlas TopoJSON, with hover highlighting in orange. The code calls `d3.geo.conicConformal` with custom parallels and rotation, then uses `d3.geo.path` and `topojson.feature` to draw shapes, automatically scaling and translating the projection to fit.

Loading thumbnail…

How selectAll Works

This animation demonstrates how `selection.selectAll` works in D3: every element in the old selection becomes a group in the new selection. Using an initial selection of table rows to create a selection of table cells, it visualizes the hierarchical grouping of `td` elements by their parent `tr`. The example builds side-by-side tree diagrams with `d3.layout.tree`, rendering SVG nodes and links, and animates transitions between states to show how the nested selection is constructed and mapped.

Loading thumbnail…

Lorenz System

This example visualizes the Lorenz system, a set of chaotic differential equations, by continuously tracing its trajectory as a glowing, colored line. The display shows the system's characteristic butterfly-shaped attractor, with colors shifting from yellow to purple based on the current z-value. The animation runs on a Canvas element, using a `d3.timer` callback to integrate the equations at each step and draw short line segments. A semi-transparent black `fillRect` is applied every 100 milliseconds to create a fading trail effect, all styled within an HTML page using D3 v3.

Loading thumbnail…

Lorenz Toy

This example visualizes the chaotic Lorenz attractor as a colorful, animated trajectory on a black canvas. Moving the mouse resets the starting point of new trajectories, which are drawn incrementally with thin, colored strokes. The code uses D3.js v3’s `d3.timer` for animation and `d3.scale.linear` with `d3.interpolateHcl` to map the z-coordinate to a sequence of hues, rendered through Canvas `getContext("2d")` with global composite operations to create a fading trail effect.

Loading thumbnail…

Albers Siberia

This example displays a map of Russia using the Albers Siberia projection, a customized conic equal-area projection that re-centers and rotates the standard Albers projection to better represent the country’s vast territory. The map renders in SVG, with the geographic data loaded from a local TopoJSON file. The code leverages D3 v3 APIs, including `d3.geo.albers()`, `d3.geo.path()`, and `topojson.feature()` to project and draw the polygon geometries.

Loading thumbnail…

Kepler’s Tally

Kepler's Tally displays exoplanet systems from NASA's Kepler mission as tiny star systems, each with planets orbiting on circular tracks. Using D3 v3 and SVG, the visualization derives a scale for semimajor axis, planet radius, and orbital period from the CSV data, then renders static orbit rings and CSS3-animated planets. The animation relies on keyframe rotations with vendor-prefixed transforms, and the planet circles use a radial gradient. Systems are sorted by overall radius to create a compact, grid-like overview.

Loading thumbnail…

Merging States

This example demonstrates merging multiple US state polygons into a single shape while removing interior borders, using `topojson.merge` on a filtered set of state geometries. A static map renders all states in gray with white boundary strokes via `d3.geo.path` and an AlbersUSA projection, while selected states appear filled in orange with a black outline. It uses D3 v3 and TopoJSON v1, loading geographic data from a local `us.json` file, and highlights the merged path by filtering geometries against a predefined set of state IDs.

Loading thumbnail…

Merging States II

A variation on merging polygons, this example displays a map of the United States where a selected set of states is highlighted in orange. The visualization uses a careful rendering technique rather than topological manipulation to draw the highlighted states, layering a boundary path over the state fill. It employs D3 v3's `d3.geo` and `d3.json` to load US state geometries, along with the TopoJSON library to compute state boundaries and meshes. The rendering is dynamic, with the selected states' boundaries outlined in black to clearly distinguish the merged region.

Loading thumbnail…

Hashing Points

This example tests a hash function for point coordinates by animating a bar chart. It loads U.S. county geometries from TopoJSON, extracts polygon ring coordinates, and hashes each pair of floats into one of 256 bins using `hash2`, which combines two 32-bit hashes of `Float64` values. The bars update in real time via `d3.timer` as points are processed, revealing the distribution’s uniformity. The visualization uses `d3.scale.ordinal` for bin positions and `d3.svg.axis` for the x-axis.

Loading thumbnail…

Hello WebGL

This example shows a solid green square rendered across the entire canvas using raw WebGL, with no external utility libraries or dependencies. The code manually compiles a vertex shader and a fragment shader from embedded script tags, creates a program, and defines a position buffer with four corner coordinates. It draws the square as a triangle fan using `context.drawArrays`, targeting a WebGL context obtained via `canvas.getContext("webgl")` with a fallback to `experimental-webgl`.

Loading thumbnail…

Hello WebGL II

This example demonstrates vertex-color interpolation in WebGL by rendering a square with different colors bound to each corner. Using the canvas element’s WebGL context, it compiles separate vertex and fragment shaders as text. The shaders define a `varying` color variable that smoothly interpolates RGBA values across the shape. The code explicitly binds two vertex attribute arrays—positions and colors—and draws the square as a triangle fan, illustrating low-level GPU rendering without external libraries.

Loading thumbnail…

Hello WebGL III

This example demonstrates WebGL’s ability to generate a gradient directly on the GPU, where the fragment shader colors each pixel based on its x and y coordinates relative to the canvas size. Using a minimal vertex shader and a full-screen triangle fan, it renders a smooth color transition without any external data. The code compiles and links shaders manually via the WebGL API, sets uniform and attribute locations, and calls `drawArrays` to produce the final image.

Loading thumbnail…

Hello WebGL IV

This example demonstrates WebGL fragment shaders rendering a digital image of a mandrill onto a canvas. The page compiles a vertex shader and a fragment shader, then uses the shader program to display the image as a texture on a square. It pulls the image data from a local `mandrill.jpg` file and uses the Canvas `getContext("webgl")` API to draw the textured quad with a `TRIANGLE_FAN`. The code explicitly manages buffers, shaders, and textures through the low-level WebGL context.

Loading thumbnail…

Skybox

A stereographic projection of a skybox texture maps the six faces of a cube onto a navigable 2D view, rendered as an animated WebGL canvas. The fragment shader inversely projects each pixel to the cube’s surface, applying rotation and translation uniforms to simulate camera movement. Texture images (xpos.png, ypos.png, etc.) are loaded via a D3 queue and bound as a cube map, while vertex and fragment shaders are compiled with the experimental WebGL context API.

Loading thumbnail…

csv2tsv

This example converts comma-separated values to tab-separated values in a single pass. It parses a CSV file from disk using `d3.csv.parse` and immediately formats the resulting data structure as TSV with `d3.tsv.format`. The tool reads its input from a file path provided as a command-line argument and writes the converted output to standard output, enabling easy redirection. The code relies on the `d3` library and Node.js’s `fs` module for file access, and it is intended to be run as an executable script.

Loading thumbnail…

Gist API Latency

This histogram visualizes the distribution of GitHub Gist API response times in milliseconds for 10,000 requests, broken down by endpoint type: single-gist queries (light blue) versus user-gist listings (dark blue). The stacked bars reveal that the slow tail of the distribution comes almost entirely from the listing endpoint. The chart is rendered as SVG using D3 v3, with `d3.scale.linear`, `d3.svg.axis`, and data loaded from a TSV file via `d3.tsv`. Axis labels and percentage annotations are drawn using SVG text elements.

Loading thumbnail…

Log Axis with Zero

A log axis with zero uses a secondary ordinal scale to render the value 0 below the main logarithmic scale, which otherwise would place zero at negative infinity. The example shows a horizontal axis with major ticks from 1e-1 to 1e4, plus a separate zero tick offset slightly to the left. It uses d3.svg.axis with a d3.scale.log for the main axis and a d3.scale.ordinal for the zero position, drawing both as SVG groups. The discontinuity is visually encoded by separating the zero tick from the logarithmic scale’s continuous range.

Loading thumbnail…

Log Axis

This example demonstrates a log-scale axis using a hard-coded domain from 0.0124123 to 1230.4, rendering tick labels with the `",.1s"` format. The visualization uses d3.v3’s `d3.scale.log` to create the logarithmic scale and `d3.svg.axis` to draw the axis with 20 ticks. The SVG output is positioned within a larger canvas using margins, and styled with CSS for font and stroke. The code does not include a data source, as it focuses solely on the axis component.

Loading thumbnail…

Marey’s Trains II

This visualization adapts E.J. Marey’s classic train schedule to show southbound Caltrain service from San Francisco to Gilroy. Each train’s path is drawn as a segmented line where slope represents speed, while color redundantly encodes the same information through a purple-to-orange scale. The code filters trains by type and uses D3’s time scale, linear scale, and SVG axis API to render the station grid and diagonal trajectories, with station stops marked as circles. Data is loaded from a tab-separated schedule file using `d3.tsv`.

Loading thumbnail…

Albers USA

This example illustrates the Albers USA composite projection by dividing the map into four colored regions, each labeled with the conditional rule that determines which part of the United States it represents. It overlays a world map and graticule to show the geographic context. The visualization uses D3 v3 with `d3.geo.mercator`, `d3.geo.mercator`, `d3.geo.path`, and `d3.geo.graticule` to project and render SVG paths, while the division rectangles and lines are drawn manually to mark the Alaska, Hawaii, Puerto Rico, and lower-48 regions. World land data comes from a remote TopoJSON file.

Loading thumbnail…

U.S. Rivers

This visualization displays a high-resolution raster image of U.S. rivers, rendered as black lines on a white background. The image is a static PNG generated from the NHDPlus dataset and was produced using the Makefile in the U.S. Rivers project. The page embeds the image directly via an `<img>` tag, with the file served from a GitHub asset URL. No JavaScript libraries or dynamic APIs are used; the example solely relies on static HTML and CSS, with a small script adjusting the frame height for embedded viewing.

Loading thumbnail…

Albers Tiles

Albers Tiles displays river vector tiles from Nelson Minar’s dataset, projected using the Albers equal-area projection. The code loads a hard-coded set of tile coordinates via d3.json from a remote server and renders them onto a Canvas element. It uses d3.geo.albers for the projection, d3.geo.path with a canvas context to trace the geographic features, and queue to manage concurrent tile fetching. The resulting visualization shows river networks across a region, with tile boundaries defined by zoom level and x/y indices.

Loading thumbnail…

US, CA, MX and PR

This example shows a map of the United States, Canada, Mexico, and Puerto Rico using an azimuthal equidistant projection. The code loads a TopoJSON world dataset and filters country geometries by their ISO numeric IDs to isolate the four target regions, drawing them in dark gray against a lighter land mass. It also renders a graticule and international boundaries. The implementation uses d3.geo.azimuthalEquidistant, d3.geo.path, and d3.geo.graticule, with SVG paths generated for land, countries, and boundary meshes.

Loading thumbnail…

Airy’s Minimum Error

This example demonstrates the Airy minimum-error projection, a pseudocylindrical map projection optimized to minimize distortion, applied to a world map. The visualization displays the globe with graticules and country boundaries, with a subset of countries (e.g., the U.S., Mexico, Canada) highlighted in dark gray. The map is rendered as SVG using D3.js v3, specifically with the `d3.geo.airy` projection, `d3.geo.path`, and `d3.geo.graticule` APIs, along with the topojson library to load and process world-50m.json data. The projection is rotated, centered, and scaled to fit a 960×640 viewport.

Loading thumbnail…

Chamberlin Trimetric

This example visualizes the world using the Chamberlin trimetric projection, a custom map projection defined with `d3.geo.chamberlin` from the extended geographic projections plugin. The map displays land masses and country boundaries in black and white, clipped to a graticule outline. The code builds the SVG output with D3.js version 3, using `d3.geo.path` for geometry and `topojson` to convert a GeoJSON world dataset from a gist into features and meshes for rendering.

Loading thumbnail…

Ordinal Tick Filtering

This example demonstrates how to filter tick labels on an ordinal axis by displaying only every other letter. A D3 v3 SVG axis renders the alphabet from A to Z, with the tick format function returning null for odd indices to hide those labels. The axis uses d3.svg.axis with an ordinal scale and rangePoints, while the text and line styling come from standard SVG CSS classes.

Loading thumbnail…

Stroke Dash Interpolation

A closed path, rendered as a dark stroke using a cardinal-closed line generator, loops through seven points on an SVG canvas. A dashed gray duplicate of the same path overlays it, while the dark stroke animates its `stroke-dasharray` from a zero-length dash to the full path length and back, creating a continuous drawing effect. The animation uses `transition.attrTween` with `d3.interpolateString` and `getTotalLength()` to compute the path length, cycling indefinitely via the transition’s `end` event. The example relies on D3 v3’s `d3.svg.line` and SVG path elements.

Loading thumbnail…

Pie Chart Update, III

A pie chart with a donut layout transitions between two datasets, apples and oranges, loaded from a TSV file. The view shows the same arcs morphing between different values, with missing entries treated as zero to maintain object constancy. Two radio buttons switch the active dataset, triggering a 750-millisecond arc tween using D3’s `transition.attrTween` and `d3.interpolate`, which updates the stored angles in `_current`. The chart uses D3 v3’s `d3.layout.pie`, `d3.svg.arc`, and SVG `path` elements, with a timed automatic switch to oranges after two seconds.

Loading thumbnail…

Pie Chart Update, IV

This example demonstrates animated updates to a pie chart using D3’s data-join with a key function, switching between fruit categories. A set of radio buttons lets the user choose a fruit, and the chart’s arcs smoothly transition to reflect the regional counts for that fruit. The visualization renders as SVG, using `d3.layout.pie` and `d3.svg.arc` to compute and draw the arcs, while `d3.nest` groups the tab-separated dataset by fruit. Arcs are added, removed, and repositioned via `path.enter()`, `path.exit()`, and `path.attr("d", arc)`, with colors assigned by `d3.scale.category20()`.

Loading thumbnail…

Pie Chart Update, V

This example shows an animated pie chart that updates when the user selects a fruit type via radio buttons. The chart uses a data-join with a key function to smoothly transition arcs between states, preserving the identity of each region’s slice. Built with d3.v3, it leverages `d3.layout.pie`, `d3.svg.arc`, and `transition.attrTween` to interpolate arc geometry over 750 milliseconds. The data comes from a TSV file, nested by fruit with `d3.nest`, and the SVG paths animate by finding neighboring arcs to minimize movement.

Loading thumbnail…

Adaptive Resampling

Adaptive resampling recursively subdivides input polygons, applying the Douglas–Peucker perpendicular distance check to determine whether additional samples are needed. The animation cycles through eight stages, starting with a red equator as a polyline of five coordinates and progressively refining it through resampling. Each stage shows the projected resampled points, with black circles and lines highlighting newly inserted samples and their original positions. The example uses d3.geo.equirectangular, d3.geo.interpolate, and d3.geo.path, rendering with SVG and transitions, and demonstrates the adaptive subdivision of a geographic line on a graticule sphere.

Loading thumbnail…

TopoJSON Parallax

A stack of four SVG layers forms a parallax map of the United States, with each layer shifting at a different rate relative to the mouse position. The bottom layer shows a blurred land glow, followed by the land fill, county boundaries, and state boundaries on top. The visualization uses `d3.json` to load TopoJSON from a gist, `d3.geo.albersUsa` for the projection, and `d3.geo.path` to render the geographic features. Mouse movement triggers CSS 3D transforms on each SVG to create the depth effect.

Loading thumbnail…

TopoJSON Layers

This example animates the four layers of a U.S. TopoJSON map—a glowing land silhouette, a solid land fill, county boundaries, and state boundaries—by fading each SVG layer in and out in sequence. Using d3.geo.path with the Albers USA projection, the code fetches US GeoJSON data via d3.json and converts it with topojson.feature and topojson.mesh to render the paths. Each layer is styled with distinct SVG filters and strokes, and the cyclic animation is driven by chained transitions on the opacity property.

Loading thumbnail…

Rotating Orthographic

This rotating orthographic projection displays a graticule and the equator as animated SVG paths on a sphere. It uses the d3.geo.orthographic projection with a rotating view, updating the projection’s rotation based on a timed loop. The sphere, graticule, and equator are drawn as SVG paths via d3.geo.path, with the animation driven by d3.timer incrementally adjusting the rotation angles.

Loading thumbnail…

Transversing Equirectangular

Animated equirectangular projection of the world sphere, with a red equator and graticule lines, rotates the globe to show how the projection distorts paths. The animation cycles through three phases: a pure rotation, a zoom-out with a simultaneous SVG rotation, and a return. Built with D3 v3, it uses `d3.geo.equirectangular`, `d3.geo.path`, and `d3.geo.graticule`, and animates via D3’s `.transition()` and `.tween()` methods to recompute geographic paths in real time.

Loading thumbnail…

Rotating Transverse

Two animated map projections rotate in sync on a single canvas: a transverse equirectangular (Cassini) projection on the left and a transverse Mercator on the right. Each frame, `d3.geo.equirectangular` and `d3.geo.mercator` recompute their rotation via `d3.timer`, while `d3.geo.path` renders land from TopoJSON world-110m data and a graticule. The canvas context is manually rotated by 90 degrees to align the transverse orientation.

Loading thumbnail…

Scale-Dependent Sampling

This example animates a map projection zooming in and out, demonstrating scale-dependent sampling. As the equirectangular projection scales from 145 to 4,640, the graticule and sphere outline remain smooth, while the red equator line is resampled; its resampled points are drawn as circles, showing how point density changes with map scale. The animation uses D3 v3’s `d3.geo.path`, `d3.geo.graticule`, and `d3.interpolate` to tween the projection's scale and translation, rendering to a Canvas via a buffered path context that extracts the resampled coordinates.

Loading thumbnail…

Line Simplification

This example demonstrates line simplification, a technique that reduces the complexity of geographic shapes by removing points based on their calculated area. Using a United States land mass dataset loaded via TopoJSON, it animates the transition between high and low simplification thresholds, cycling the minimum area from 0.1 to 100 square pixels and back. The visualization uses d3.simplify, a custom algorithm that employs a min-heap to prioritize point removal by triangle area, and renders the results with d3.geo.path and SVG. A text label displays the current threshold and the percentage of points retained.

Loading thumbnail…

Resampling Comparison

This example compares the Van der Grinten projection with and without adaptive resampling, displayed side-by-side for direct visual comparison. The left map shows coarse polygonal artifacts in Antarctica, while the right map uses D3’s resampling to produce smoother edges. It uses the d3.geo.path projection API with a configurable precision value. Land and boundary data come from a world-110m GeoJSON file, rendered as SVG paths with graticules.

Loading thumbnail…

Resampling Comparison

This example compares the Larrivée map projection with and without adaptive resampling, highlighting polygonal artifacts in Antarctica that disappear when resampling is enabled. Two side-by-side SVG maps render world land and country boundaries from TopoJSON data, each using a distinct projection precision value. The code employs D3 v3’s `d3.geo.larrivee` projection, `d3.geo.path`, and a graticule, with the projection’s precision adjusted dynamically to demonstrate the difference. The visualization is built with d3.geo.projection.v0, topojson.v1, and renders entirely in SVG.

Loading thumbnail…

Albers without Resampling

This example demonstrates the Albers equal-area conic projection applied to a world map, comparing land and boundary rendering with and without coordinate resampling. The map displays graticules, country boundaries, and landmasses in black and white, using Geographic Information System data from a TopoJSON file of 110m resolution. The code uses d3.geo.conicEqualArea and d3.geo.path, with the projection’s precision set to zero before drawing the land and country meshes via topojson.feature and topojson.mesh. A graticule layer and a sphere outline are added using d3.geo.graticule, all rendered as SVG elements.

Loading thumbnail…

Albers with Resampling

This example shows a world map in an Albers equal-area conic projection, with landmasses drawn in dark gray, country boundaries in white, and a graticule overlaid on a sphere outline. It uses d3.geo.conicEqualArea with a precision setting for resampled geometries, and d3.geo.path to render the projected features. Graticule lines are generated via d3.geo.graticule, while the land and boundary data come from a TopoJSON file fetched with d3.json, processed through topojson.feature and topojson.mesh. The SVG output uses class-based styling for strokes and fills.

Loading thumbnail…

No Antimeridian Cutting

This example shows a world map rendered with D3’s Albers projection but without antimeridian cutting, allowing continuous display across the 180° meridian as the user drags to rotate the globe. The map redraws on mouse or touch movement via canvas 2D context, iterating over TopoJSON land features. The interaction uses `d3.geo.rotation` and a custom raw projection wrapper around `d3.geo.conicEqualArea`, while `d3.geo.path` handles geographic projection to screen space. Land data comes from the world-110m TopoJSON file.

Loading thumbnail…

Kentucky Population Density

This example displays population density across Kentucky counties using a choropleth map. A threshold color scale with regularly-spaced breaks assigns color to each county based on population per square mile, while a legend with an axis shows the mapping. The visualization uses d3.geo.conicConformal projection, d3.geo.path for rendering, and TopoJSON data for county boundaries. The code loads county data via d3.json, computes density from population and area properties, and appends SVG paths with tooltips showing county names and densities.

Loading thumbnail…

Custom Easing

Four orange squares fall onto a gray canvas, each using a custom parameterized bounce easing function with different heights. The example shows how to implement a custom easing function for D3 v3 transitions, where the function must return 1 when t ≥ 1 to end correctly. Using `d3.select`, `transition`, and `.ease()`, four squares animate sequentially with a delay, demonstrating SVG rendering and animation with `d3.scale.ordinal` for positioning.

Loading thumbnail…

Exit, Update, Enter

Three divs demonstrate D3's enter-update-exit pattern with staggered transitions. An existing "update" and "exit" element bind to new data, turning the update orange while the exit fades red and removes itself. A new "enter" element fades in green after a delay. The example uses D3 v3's `selection.data`, `transition.delay`, and `style` to chain animations, with explicit delay calculations based on whether exit and enter selections are empty.

Loading thumbnail…

Exit, Update, Enter II

This example demonstrates the enter, update, and exit pattern in D3 using chained transitions. Three divs are bound to an array of strings, with the exit selection turning red and fading out, the update selection turning orange, and the entering div fading in with green text. The code explicitly chains transitions using `transition.transition` and applies each phase through `transition.each`. It uses D3 v3 and a key function that falls back to the element’s text content for existing nodes, showing how to coordinate staged updates with timed animations.

Loading thumbnail…

Vector Tiles

This example displays vector-tiled map data, rendering both road networks and building footprints over San Francisco. The visualization loads GeoJSON tiles from an external OpenStreetMap vector-datasource service and projects them using `d3.geo.mercator` and `d3.geo.path`. It employs the custom `d3.geo.tile` helper to compute visible tile coordinates at the current zoom level, then asynchronously fetches and draws each tile’s features as SVG paths. Road types are distinguished by stroke colors, while buildings appear as solid black polygons.

Loading thumbnail…

Snowden’s Route

A world map in the Kavrayskiy VII projection traces Edward Snowden’s flight path from Honolulu to Hong Kong, Moscow, Havana, Caracas, and Quito as a red line. Red-ringed markers label each airport with its three-letter code. The map renders via D3’s geo projection API, using `d3.geo.kavrayskiy7()`, `d3.geo.path()`, and a geographic graticule, overlaid with land and country boundaries from a TopoJSON source loaded through `topojson.feature` and `topojson.mesh`.

Loading thumbnail…

Extradition Treaties

A choropleth shades countries by the date of their oldest bilateral extradition treaty with the United States, using purple for older agreements and orange for newer ones, while gray indicates no treaty. The map shows the United States in black and includes a tooltip listing all treaty dates for each country. Built with d3.v3, it uses `d3.geo.path` for the Natural Earth projection, `d3.scale.linear` with HCL interpolation for coloring, and TopoJSON for world boundaries. Data comes from a TSV file of treaty dates.

Loading thumbnail…

Projected Choropleth

A choropleth map shows unemployment rates by U.S. county, using a blue sequential color scale with nine quantized classes for rates from 0 to 15 percent. State boundaries appear as white lines, while counties are drawn as SVG paths. The map uses pre-projected TopoJSON data, created via the `topojson` command-line tool with the `d3.geo.albersUsa()` projection, and renders using `d3.geo.path()`. County geometries and unemployment rates are joined into a single file during preprocessing, eliminating separate data loads. This variation of the classic unemployment choropleth simplifies the workflow by embedding the projection and data join directly into the TopoJSON generation step.

Loading thumbnail…

Great Arc

This example visualizes a great arc between Washington, D.C. and Beijing as a red LineString on an equirectangular projection. The projection is rotated to keep the entire arc visible without interruption. It also renders a graticule, land masses, and country boundaries from a TopoJSON world-50m dataset. The code uses d3.geo.equirectangular, d3.geo.path, d3.geo.graticule, and topojson.feature to draw the SVG elements.

Loading thumbnail…

Alaska Albers

This example displays Alaska using the EPSG:3338 Alaska Albers equal-area projection, rendered with SVG paths for land and county boundaries over a graticule grid. It filters Alaska state and county geometries from a TopoJSON file of U.S. data, styling land in dark gray and boundaries in white. The code uses `d3.geo.conicEqualArea` with specified rotation, center, and parallels, along with `d3.geo.path`, `d3.geo.graticule`, and `topojson.feature`/`topojson.mesh` to draw the shapes.

Loading thumbnail…

DRY Bar Chart

A DRY bar chart displays letter frequencies from a TSV dataset using ordinal and linear scales for x and y positioning. The visual encoding is abstracted into composed functions: value accessors, scale mappings, and data-to-display maps, avoiding repetition. Rendered in SVG with D3 v3, it draws steelblue rectangles whose heights reflect frequency percentages, and includes formatted axes with a "Frequency" label. The code separates concerns by defining xValue, xScale, xMap and yValue, yScale, yMap before binding data via `d3.tsv`.

Loading thumbnail…

New York Block Groups

This example displays all 13,837 census block groups for New York as a single vector map, showing each polygon with a uniform thin black stroke and no fill. The visualization is rendered as an SVG using a `d3.geo.path()` projection, while the map data is loaded as TopoJSON from a local file and converted to a mesh with the `topojson.mesh()` API. The code projects the geographic coordinates for display, with the styling kept intentionally minimal to emphasize the block-group boundaries.

Loading thumbnail…

Gradient Bump

Each row of the tab-separated data becomes a bump chart path connecting three categorical ordinal positions, a, b, and c, across the horizontal axis. The vertical position encodes each row's weight value, and the stroke width is proportional to that same weight. For each segment between positions, the stroke uses a linearGradient with userSpaceOnUse coordinates, interpolating between two HCL color scales per column using d3.interpolateHcl. A white halo path is drawn beneath to provide contrast. The visualization uses d3.svg and d3.scale.ordinal to arrange the staggered curves, demonstrating a gradient-based bump chart prototype.

Loading thumbnail…

Concurrent Transitions II

A black cross glyph rotates continuously while its red stroke pulses in width. The animation uses concurrent D3 transitions on a parent `g` element and a child `path` element, with `transition.attrTween` interpolating a rotation transform from 0 to 720 degrees and `transition.style` animating `stroke-width` between 30 and 0 pixels. The SVG path is generated with `d3.svg.symbol().type("cross")`.

Loading thumbnail…

U.S. Urban Areas

This example displays the locations of urban areas across the United States, using data from the 2008 U.S. census. It uses D3 version 3, loading a TopoJSON file of the country and rendering the urban area geometries as a single SVG path. The code leverages `d3.json` to fetch the data, `topojson.feature` to extract the `uac` object, and `d3.geo.path` to project and draw the map.

Loading thumbnail…

No Zoom on Context Menu

This example demonstrates how to selectively disable D3's zoom behavior by intercepting the mousedown event. A grid of fine lines fills an SVG, and panning works only with the left mouse button; right-click or control-click triggers a colored pulse animation instead of zooming. The code uses `d3.behavior.zoom`, registers a `mousedown` listener, and calls `d3.event.stopImmediatePropagation()` to prevent the zoom handler from firing. Red pulses mark stopped events, while green pulses show successful zoom triggers.

Loading thumbnail…

Left-Aligned Ticks

This example shows a bottom-oriented time axis where tick labels are left-aligned instead of centered, placing each label to the right of its tick mark. The code uses a d3.time.scale with an extended domain and range, adding one month on each side to reserve space, and d3.svg.axis with the “bottom” orient. After rendering, a post-selection targets all text elements and sets x and y offsets with text-anchor “start” to shift the labels. The visualization renders as SVG with d3.v3.

Loading thumbnail…

Brush Transitions

A scatterplot of 5,000 random points displays a red brush selection over a central region. Dragging or creating a new selection highlights points within the brush extent, while releasing the mouse triggers a smooth animated transition of the brush back to its original 100-by-100 pixel default position. The example demonstrates D3 3.3's brush transitions, implemented with `d3.svg.brush`, a quadtree for efficient point lookup, and `transition.call` to reapply brush extents during animation.

Loading thumbnail…

Mitchell’s Best-Candidate

Delaunay triangulation reveals the structure of points generated by Mitchell’s best-candidate algorithm, adding 2,500 points gradually over time. The animation shows the Voronoi-linked edges connecting each point to its nearest neighbors, redrawing the complete triangulation each frame as new points appear. The code uses `d3.geom.voronoi()` to compute links, a quadtree via `d3.geom.quadtree()` for efficient distance checks, and a Canvas 2D context for stroking the resulting line network. The point generation progressively slows as the density increases.

Loading thumbnail…

Zoom Center

By setting the zoom behavior's center, this example fixes the focal point of mousewheel zooming to the center of the canvas, rather than the default cursor position. A set of concentric circles, generated from a range of radii, shows the zoom transformation clearly. The visualization uses `d3.behavior.zoom` with an explicit `.center` array and redraws a group container on each zoom event. The SVG renders the axis circles and a red center marker, with the D3 v3 library handling the interaction and scaling.

Loading thumbnail…

Zoom Transitions

Animated grid lines on a canvas demonstrate D3’s zoom transitions, which smoothly pan and scale the view every five seconds to a new random location. The example uses `d3.behavior.zoom` with linear scales, and `transition.call` to invoke the zoom’s translate and event methods. Grid rendering relies on the Canvas 2D API, drawing vertical and horizontal lines based on the current domain, with line width scaling by zoom level.

Loading thumbnail…

Dynamic Simplification

This example shows a map of the United States that continuously simplifies its boundaries, alternating between depicting all counties and reducing them to a coarse outline. The animation cycles through progressive shapes while preserving topology. The code uses `topojson.presimplify` to precompute point importance, a custom `d3.geo.transform` geometry stream to filter points based on a dynamic area threshold, and `d3.geo.path` to render the result onto a Canvas via its 2D context, driven by `transition.tween` and `d3.interpolate`.

Loading thumbnail…

Dynamic Simplification II

This example combines map zooming with dynamic simplification. As the map zooms in and out, the simplification area threshold adjusts based on the current scale, keeping the map visually clear and rendering quickly. Points outside the viewport are simplified much more heavily than those inside, approximating viewport clipping. The code uses `d3.geo.transform` to filter points, `d3.behavior.zoom` for interaction, and `d3.geo.path` with a Canvas context to draw the TopoJSON data (us-states.json), animating between zoom levels with `transition`.

Loading thumbnail…

OPHZ Zooming

A map of U.S. counties continuously zooms between a national overview and a detailed close-up of San Francisco. The sequence repeats automatically, using D3’s `d3.behavior.zoom` and `d3.geo.clipExtent` for viewport clipping. TopoJSON geometry is pre-simplified and dynamically simplified with `d3.geo.transform` based on zoom scale, then rendered as stroked paths on Canvas.

Loading thumbnail…

Plant Hardiness Zones

This map of plant hardiness zones displays the average annual extreme minimum temperature from 1976–2005 across the contiguous United States, using a divergent blue-to-red color scale. It renders the topojson data via Canvas, with d3.geo.path drawing each polygon and the context’s fillStyle applying the temperature-based color. A separate SVG overlay provides a color legend with a d3.svg.axis and tick marks. The zones are sorted by temperature and drawn in order, with data sourced from Bill Morris’ Open Plant Hardiness Zones project.

Loading thumbnail…

Dynamic Simplification III

This example demonstrates dynamic simplification of a filled polygon representing US land masses, where the level of detail adapts during zooming. The effect is subtle because the polygon fill hides most topological changes. Animated transitions repeatedly zoom between a close-up of the Chesapeake Bay and a full view of the country. The visualization uses d3.geo.path with a custom d3.geo.transform to filter points based on an area threshold, rendered on a Canvas via the context API, with d3.behavior.zoom and TopoJSON data.

Loading thumbnail…

Map Zooming II

Moving the mouse across the map smoothly interpolates a zoom between San Francisco and New York. The visualization renders United States state boundaries as a canvas-drawn mesh using d3.geo.path with a custom projection that applies dynamic simplification and clipping during the zoom. It uses d3.interpolateZoom, d3.geo.transform, and d3.geo.clipExtent to control the transition, adjusting the scale and translate values based on the pointer's horizontal position. The underlying TopoJSON data is pre-simplified with topojson.presimplify, and the rendering occurs entirely through the Canvas 2D API.

Loading thumbnail…

Map Zooming III

A map of the United States is drawn with canvas, and moving the mouse horizontally smoothly interpolates between three zoom levels centered on San Francisco, New Orleans, and New York. The example uses a linear scale with `d3.interpolateZoom` to map mouse position to a zooming transform, and `d3.geo.transform` for simplification. It renders TopoJSON state boundaries clipped by `d3.geo.clipExtent`, using D3 v3’s `d3.geo.path` with a canvas context.

Loading thumbnail…

Population Choropleth

A population choropleth of U.S. counties uses a logarithmic color scale to show population density, ranging from pale yellow to dark blue. The map projects counties with d3.geo.albersUsa() and renders them as SVG paths via d3.geo.path. Density is calculated by dividing each county’s population (from the 2010 Census shapefile, converted to TopoJSON) by its projected area, with the color domain set between the 1st and 99th percentiles. The topojson.feature API extracts county geometries for display.

Loading thumbnail…

U.S. State Mesh

This example visualizes the starting point of every arc in a TopoJSON file of U.S. state boundaries, rendered as a black dot on a mesh of state outlines. It loads the topology from `us.json` and uses `d3.geo.path()` with a `null` projection to draw the mesh. The code then plots each arc's start coordinate as a small circle, applying a custom `transform` function to map the TopoJSON coordinates using the file's `transform.scale` and `transform.translate` values. The visualization highlights how polygon boundaries are decomposed into shared arcs, revealing the topology's underlying structure.

Loading thumbnail…

Ring Extraction

This example animates the extraction of individual polygon rings from the U.S. states topology. It begins with a play button that, when clicked, hides the control and sequentially extracts each ring, drawing it in red and fading it out. The animation uses D3’s `transition`, `duration`, and `remove` methods alongside TopoJSON’s `topology` and `feature` APIs. The base map is rendered as a static SVG mesh via `d3.geo.path`, while the extracted rings are appended as separate SVG paths. The underlying data is a simplified `us.json` TopoJSON file of U.S. states.

Loading thumbnail…

Junction Finding

This example visualizes the topology of the contiguous United States by drawing the mesh of internal boundaries and marking junction points where three or more arcs meet. It uses the TopoJSON library to compute the mesh from the `us.json` topology file, with `d3.geo.path` rendering the SVG paths. Circles are placed at junctions by counting arc endpoints, and the transformation scales coordinates to map space using the topology's transform metadata.

Loading thumbnail…

Simple Junctions

This example illustrates three different ways to connect line segments at a junction, each drawn as an SVG path. It shows how the visual outcome changes based on whether the paths share a common point or are drawn with separate start and end coordinates, affecting the apparent connectivity. The code uses raw SVG elements, including `path` and `circle` tags, with inline styling for the stroke and fill properties. The rendering approach is entirely static, using fixed coordinate positions within three translated `<g>` groups to compose the diagram.

Loading thumbnail…

Ring Cutting

Clicking the play button hides the control and animates the cutting of every US state polygon into its constituent rings. The animation shows red boundary segments being separated from the remaining blue paths, with cuts processed one by one and fading out over time. The visualization uses TopoJSON state data, D3’s geo path for rendering, and SVG transitions to animate the cuts.

Loading thumbnail…

Arc Deduplication

The animation demonstrates arc deduplication during TopoJSON topology construction, replaying each arc of U.S. state boundaries as a stroked line. Red arcs appear first, then blue arcs highlight duplicate paths shared between states. Using d3.json, d3.geo.path, and topojson.mesh, the visualization reconstructs coordinates from quantized delta-encoded arcs and animates SVG path transitions with setInterval. A play button triggers the sequence, which runs until all arcs are traced and faded.

Loading thumbnail…

Save SVG as PNG

This example demonstrates a workflow for converting a dynamically generated D3 SVG into a static PNG file, ensuring pixel-perfect consistency between the two. The process first uses the SVG Crowbar bookmarklet to extract the SVG from the browser, then loads that SVG into an HTML page with a Canvas element, drawing it via the Canvas API’s `drawImage` method. Finally, the canvas’s `toDataURL` method exports the rendered image as a PNG, which is automatically downloaded using an anchor element with a `download` attribute.

Loading thumbnail…

Fitting Affine Projection

This example demonstrates an affine transformation fitted to user-defined points. A grid of blue source lines is mapped to a set of black target lines based on the positions of three draggable circles. The code solves a least-squares problem using Gaussian elimination, and the resulting transformation matrix is displayed in a textarea. The visualization is built with D3 v3, using SVG for rendering and d3.behavior.drag for interactive manipulation of the control points.

Loading thumbnail…

Subsecond Ticks

A line chart plots value against time with subsecond precision, using a time scale for the x-axis and a linear scale for the y-axis. The bottom axis displays ticks at fractional seconds, demonstrating correct behavior for millisecond-level time domains. Built with D3 v3, the example uses `d3.svg.axis` for tick generation, `d3.svg.line` for the path, and `d3.time.scale` for mapping dates. Data is loaded from a tab-separated file via `d3.tsv`, with timestamps converted from Unix seconds into JavaScript `Date` objects.

Loading thumbnail…

Treemap Padding

This example demonstrates a treemap visualization of the hierarchical structure of the Flare data set, using padding and color to distinguish nested categories. The treemap uses the `d3.layout.treemap` function with a padding value of 4 to create spacing between rectangles, and a category color scale via `d3.scale.category20c`. It renders each node as an absolutely positioned `div` element, with size and position determined by the layout algorithm. The JSON data is loaded asynchronously using `d3.json`, and each leaf node is labeled with its name, while parent nodes remain unlabeled.

Loading thumbnail…

Superscript Format

A log-scale axis displays powers of ten from 10⁰ to 10⁹, with tick labels formatted using superscript characters (⁰¹²³⁴⁵⁶⁷⁸⁹) via a custom `formatPower` function that maps each digit to its Unicode superscript equivalent. The example uses d3.v3's `d3.scale.log` and `d3.svg.axis`, with tick formatting defined by a custom function passed to `.ticks(10, ...)`. The SVG rendering places the axis with generous top and bottom margins, and the code notes the vertical alignment issue between superscripts and normal digits.

Loading thumbnail…

Superscript Format II

A log-scaled axis spans from 10⁻⁴ to 10⁴, with tick labels that display only the number 10 for each power of ten. The code uses d3.svg.axis for the axis, then post-selects tick text elements, filters for powers of ten, and appends a tspan for the superscript exponent. The exponent is computed from the tick value using Math.log and rendered with a smaller font size via CSS. This approach creates a clean, typographically precise axis label alternative to Unicode superscripts.

Loading thumbnail…

See-Through Globe

A rotating see-through globe displays both the front and back hemispheres simultaneously. The orthographic projection, implemented with `d3.geo.orthographic`, first renders the entire sphere as a light outline, then draws the front-facing land polygons in a darker tone using the `d3.geo.path` API on a Canvas. A graticule overlays the sphere, and the entire scene rotates continuously via a timer. The code loads world-110m GeoJSON data from a gist and relies on `topojson.feature` to extract land polygons.

Loading thumbnail…

See-Through Globe II

A rotating orthographic globe displays both its near and far hemispheres through a see-through effect. The code uses `d3.geo.orthographic` with a 90° clip angle, drawing the front-facing land and graticule in dark tones, then flipping the canvas horizontally with `context.scale` and re-projecting with a 180° longitude offset to render the back-facing polygons in lighter colors. The animation runs on a `d3.timer`, with land data from a TopoJSON world-110m file and rendering via Canvas 2D.

Loading thumbnail…

Delaunay Force Mesh

This example displays a dynamic mesh of 400 nodes connected by links. The visualization shows a force-directed layout applied to the edges of a Voronoi diagram, where connected points repel and attract each other, causing the network to continuously reorganize. The scene is rendered on a Canvas element using the `d3.geom.voronoi` and `d3.layout.force` APIs from d3.v3. The force simulation ticks update the positions, redrawing the links and nodes with stroked paths and filled circles.

Loading thumbnail…

Snowflake Simplification

An interactive stress test of TopoJSON simplification on two quadratic Koch snowflake polygons. The visualization shows how the jagged outlines degrade as a mouse-driven slider raises the simplification area threshold. It uses D3 v3 with `d3.geo.path`, `d3.geo.transform`, and `d3.scale.sqrt` to filter points, with the snowflake geometry generated procedurally via an L-system and pre-simplified with the TopoJSON library.

Loading thumbnail…

Non-Computed Style Tween

This example demonstrates how to animate a non-computed style property using D3 v3’s transition system. It changes the page background from brown to steelblue to black over two sequential 750-millisecond transitions. The code defines a custom `styleTween` function that calls `transition.styleTween` with `d3.interpolate`, reading the current style value directly from `this.style[name]` instead of relying on computed styles. This approach keeps the tween targeted and efficient, showing a pattern for interpolating inline CSS values during animations.

Loading thumbnail…

Virginia Counties

This map of Virginia depicts the boundaries of all counties and independent cities, with a projected conic conformal projection. The visualization loads a TopoJSON file, `va-counties.json`, which contains the state outline, county borders, and city polygons. Using D3 v3 with the `d3.geo.path` and `d3.geo.conicConformal` APIs, the code first draws the state as a gray shape, then overlays white lines for county borders via `topojson.mesh`. The map is centered by calculating the bounds of the state and translating the projection accordingly.

Loading thumbnail…

Bar Chart I

This bar chart visualizes six numeric values—4, 8, 15, 16, 23, and 42—as horizontal bars whose widths are proportional to the data. The chart uses D3 v3’s `d3.scale.linear` to map the domain from zero to the maximum value (42) onto a pixel range of 0–420. Each bar is a styled `div` element with a steelblue background, white text, and a width set via the `style` operator. The code appends these divs using `d3.select` and `.selectAll("div").data(...)`, with the data bound to the DOM. The bars’ labels display the original values.

Loading thumbnail…

Range Transition

A single range input animates from 0 to 1000 over 7.5 seconds, demonstrating a custom property transition. Using D3 v3, the code selects the input element and applies a transition with a duration, then uses `transition.tween` to interpolate the `value` attribute via `d3.interpolate(this.value, this.max)`. Each animation frame updates the input’s value, producing a smooth numeric slide. The example shows how to tween arbitrary DOM properties not covered by standard D3 transitions.

Loading thumbnail…

Wrapping Long Labels

This example demonstrates how to automatically wrap long axis labels onto multiple lines using D3.js (v3) in an SVG render. It visualizes satirical survey data from The Onion explaining why people are leaving Facebook, with each humorous reason plotted as a steel-blue bar. The custom `wrap` function splits label text into words, measures each line’s width via SVG’s `getComputedTextLength()`, and appends `tspan` elements to create multi-line tick labels sized to fit the bar’s range band. The chart uses `d3.scale.ordinal` for the x-axis and `d3.svg.axis` for labeling, with data loaded via `d3.tsv`.

Loading thumbnail…

Parallel Coordinates

This interactive parallel coordinates visualization displays automotive data for cars from the 1970s and 1980s. Users can click and drag along any axis to brush and filter the dataset, or drag axis labels to reorder dimensions. Built with D3 v3, the SVG rendering uses `d3.svg.axis`, `d3.svg.line`, `d3.behavior.drag`, and `d3.svg.brush` to support filtering and dynamic reordering. The cars.csv dataset includes attributes like economy, cylinders, horsepower, and weight.

Loading thumbnail…

Natural Log Scale

A natural-logarithmic y-axis displays a polynomial curve from x=0 to 100, with tick labels formatted as "e⁰" through "e⁹" using Unicode superscripts. The example uses d3.v3 with `d3.scale.log` and `d3.svg.axis`, applying a custom `tickFormat` that converts log values to superscript exponents. The line is drawn with `d3.svg.line`, while the SVG output includes styled axis text and a steelblue path. The data series is generated procedurally as `[x, x²+x+1]` for 100 points.

Loading thumbnail…

Rotating Icosahedron

An orange icosahedron rotates continuously in 3D space, rendered as a set of triangular faces projected with an orthographic camera. The animation uses `d3.geo.orthographic` to map each face’s spherical coordinates onto the screen, and a `d3.timer` updates the rotation over time. Each face’s polygon is checked with `d3.geom.polygon.area()` to hide back-facing triangles, while the paths are drawn as SVG `path` elements. The icosahedron’s vertex geometry is generated procedurally with the `icosahedronFaces` function, which computes latitude and longitude bands based on the golden ratio angle.

Loading thumbnail…

Cluster Dendrogram II

This cluster dendrogram visualizes a hierarchical dataset from a flare.json file, displaying nodes as circles connected by curved links. The layout uses d3.layout.cluster to position nodes, with SVG paths generated using cubic Bézier curves to create distinctive non-intersecting links. Node styling includes white circles with steelblue strokes and text labels, while the entire chart renders at a fixed 960 by 2200 pixel size within an SVG container.

Loading thumbnail…

Clustered Force Layout III

This example shows a clustered force layout where 200 circles are grouped into 10 color-coded clusters, with node sizes varying by cluster. D3’s force layout initializes nodes near their cluster’s center on a circular path, then applies custom cluster and collision forces during each tick to converge on a stable arrangement. An entry transition uses `transition.attrTween` to grow circle radii from zero, delaying collision detection to reduce jitter. The visualization is rendered as animated SVG using D3 v3, with data generated randomly via `Math.random` and `d3.scale.category10` for colors.

Loading thumbnail…

Page Swiping

Five vertical pages, each displaying a large index number on a radial gradient background, alternate between light and dark themes. Using touch input, the user can drag or flick through the pages with momentum-based scrolling. The D3 v3 code listens to touch events, records drag samples to calculate velocity, and animates the final page position and a CSS `translate3d` overscroll effect via `d3.interpolateNumber`.

Loading thumbnail…

New York Census Tracts

A map of New York State census tracts appears in gray, with orange highlighting on hover and dark borders outlining each tract. The visualization uses D3.js (v3) with TopoJSON to load and project geographic data from `ny.json`, and `d3.geo.path()` converts the topology features into SVG paths. The data is filtered to exclude water counties, and tract IDs are displayed as tooltips.

Loading thumbnail…

Solar Terminator (Waterman)

The visualized map shows the current terminator line dividing day and night across the globe, rendered with the Waterman butterfly projection. The animation updates every second, moving the night-shaded region based on a calculated solar position. The code uses the `d3.geo` library, specifically `d3.geo.polyhedron.waterman()`, `d3.geo.circle()`, and `d3.geo.path()`, to project and draw the sphere, graticule, and landmasses from world-50m.json data. The night path’s shape derives from an antipode of the sun’s computed declination and equation of time.

Loading thumbnail…

New York Population Density

A choropleth map of New York State census tracts displays population density, with a color scale ranging from light orange to dark red. Each tract's density is computed by dividing its population, sourced from the ACS_12_5YR_B01003_with_ann.csv file, by its area. The visualization uses d3.geo.path() to render the SVG paths from TopoJSON data, and d3.nest() groups tracts by color for efficient rendering. The map is projected using a custom Mercator projection centered on the state.

Loading thumbnail…

Neighboring Congressional Districts

This example visualizes neighboring congressional districts from the 113th congress, highlighting the hovered district in red and its adjacent districts in orange. It uses topojson.neighbors to detect shared edges between district geometries. The map is rendered with d3.geo.path and an Albers USA projection, displaying district and state borders as white meshes. Hovering triggers a mouseover event that classifies neighboring districts via d3.selectAll, while the underlying geographic data comes from two TopoJSON files.

Loading thumbnail…

Stretched Projection

A custom D3 v3 geo projection stretches the equirectangular world map to fill a 960×500 viewport. The code defines a cylindrical projection function using `d3.geo.projection` to scale latitude coordinates proportionally to the viewport’s aspect ratio, then renders land and country borders with `d3.geo.path` and TopoJSON data. SVG paths display the stretched map with gray land and white country boundaries.

Loading thumbnail…

Now

A south polar azimuthal equidistant projection shows the world map oriented so noon is at the top, continuously rotating to reflect the current time of day. Built with D3 v3, it uses `d3.geo.azimuthalEquidistant` and `d3.geo.path` to render SVG land and boundary shapes from TopoJSON, with a graticule and sphere outline. A `d3.timer` updates the map’s rotation every frame based on the UTC time difference from midnight, creating a live, animated representation of Earth’s rotation.

Loading thumbnail…

Now + Solar Terminator

This visualization displays a world map using an azimuthal equidistant projection, rotated so solar noon is at the top. A semi-transparent blue region overlays the night side of the Earth, defined by the current solar terminator. The map and night boundary update continuously as time passes, recalculating the sun’s position based on a NOAA-derived algorithm. Built with D3 v3, the code uses `d3.geo.circle`, `d3.geo.path`, `d3.geo.azimuthalEquidistant`, and `d3.timer`, rendering SVG paths from TopoJSON world data.

Loading thumbnail…

Mexico

This map of Mexico displays all municipalities as dark gray polygons with white state and municipal boundaries. Hovering highlights a region in orange, and a tooltip shows its name. The visualization uses D3 v3’s `d3.geo.path` with a null projection to render pre-projected TopoJSON data, created from INEGI shapefiles via TopoJSON’s command-line tool. Municipality and state boundaries are drawn from the same TopoJSON mesh.

Loading thumbnail…

Mexico

Mexico’s municipalities are displayed as a dark choropleth map, using a conic conformal projection applied client-side. The visualization renders each municipality as an SVG path, with hover highlighting in orange; state and municipality boundaries are drawn as white lines. The code uses D3’s `d3.geo.path`, `d3.geo.conicConformal`, and `topojson` to create the map from the preprocessed `mx.json` TopoJSON file. The underlying data derives from INEGI’s 2010 municipal geographic database, simplified and converted via `ogr2ogr` and the TopoJSON build script.

Loading thumbnail…

Clone Templates

This example shows how to create an HTML table by defining a row template in the markup and cloning it for each data item. It uses `d3.select`, `cloneNode`, and D3’s data join with an `append` function to instantiate the template, then updates cell text with bound data. The code formats cost and count values with `d3.format`, reads the tab-separated `items.tsv` file, and applies a custom `type` function to coerce numeric fields. All rows are added to the table body via D3 v3.

Loading thumbnail…

Radial Gradient

This example recreates the soft, glowing gradient seen on the Stripe Checkout page, from pale lavender through pink to deep navy. The effect is achieved with a single SVG `radialGradient` element, whose center and radius are set to the corner of a rectangle. The gradient stops define the color sequence, and the rectangle fills the entire viewport to display the continuous color transition.

Loading thumbnail…

Small Multiples III

This example displays small multiples of stock price trends for indices like the S&P 500 and MSFT, using a shared time scale across all panels. Each multiple receives its own linear y-scale, computed independently from the maximum price of its data series, allowing direct visual comparison of relative shape without a common price range. The visualization is rendered as SVG using D3 v3, with lines and filled areas generated via `d3.svg.line` and `d3.svg.area`. Data is loaded from a tab-separated file and grouped by stock symbol using `d3.nest`.

Loading thumbnail…

OMG Particles II

A glowing circle travels smoothly toward the mouse cursor while continuously emitting expanding rings, each drawn as an arc with fading opacity against a dark background. The color of the rings cycles through the HSL spectrum. Built with D3 v3, the animation uses a `d3.timer` loop and `transition.tween` to interpolate ring radius over two seconds, while Canvas 2D rendering with `globalCompositeOperation` set to `lighter` creates additive blending. Mouse movement updates a target position, which is smoothed toward via exponential interpolation.

Loading thumbnail…

Multitouch

This multitouch visualization maps each finger contact to a colored circle on an SVG canvas, with touches tracked by identifier. The example uses D3’s `d3.touches` API to capture touch events and `d3.event` to prevent default scrolling. Newly detected touches enter with an elastic scaling animation via `transition.attr("r", …)`, while removed touches shrink and exit. Circle positions update directly from touch coordinates, and color assignment uses `d3.scale.category10`. The code relies on touch-supporting browsers, such as iOS Safari, to dispatch the appropriate events.

Loading thumbnail…

Multitouch Drag

Twenty colored circles move freely over a full-window SVG canvas. Each circle is draggable with a multitouch pointer, and its position updates live to follow the finger. The code uses `d3.behavior.drag` with `dragstart`, `drag`, and `dragend` handlers to manage interaction, while `d3.select` and `.transition().ease("elastic")` animate the radius from 32 to 48 pixels on grab and back on release. Random starting coordinates come from `d3.range(20).map()`.

Loading thumbnail…

Immediate Transitions

This example demonstrates how to force D3 transitions to complete instantly by overriding `requestAnimationFrame` and `Date.now`. The code uses D3 v3’s `d3.select("body").transition()` with a five-second duration to animate the background to red, but then intercepts animation frame scheduling and advances the clock to infinity, causing the transition to jump immediately to its final state. The browser’s animation loop is bypassed, and the synchronous flush executes all pending callbacks at once.

Loading thumbnail…

Solar Oscillator

This animation visualizes the changing solar terminator, the boundary between day and night, at roughly 5.2 million times real speed. Each frame advances the simulated date by twenty-four hours, making the seasonal shifts in daylight visible as a blue region for night and white for day. Built with d3.v3, it uses `d3.geo.circle` to calculate the terminator, a Kavrayskiy VII projection, and a `d3.timer` to drive the animation. It overlays the night path on top of land and graticule layers from a 50m world TopoJSON file.

Loading thumbnail…

Multitouch Drag II

Twenty colored divs drift across the browser window, each rendered as a circle via CSS border-radius and positioned using a CSS transform translate. Dragging a circle with a mouse or touch lifts it visually: it expands, gains a soft box-shadow, and uses an elastic ease during the size transition. The implementation uses D3 v3’s `d3.behavior.drag` for pointer handling, `d3.scale.category10` for colors, and `d3.interpolate` to animate box-shadow between drag states. Data is randomly generated from 20 coordinate pairs.

Loading thumbnail…

Animation Benchmark

The animation benchmark renders up to 1,000 bouncing boxes, each moving in a circular path while cycling through background colors and displaying a changing count. A slider controls the number of boxes, and the view updates dynamically as the user adjusts it. The visualization uses d3.timer to drive the animation loop, updating each box’s style properties for position, color, and text. The grid is built with cloned DOM elements via d3.select and node.cloneNode, with enter and exit selections managing box creation and removal. Data consists of d3.range values bound to the box views.

Loading thumbnail…

Coastal Graph Distance II

This map of US counties visualizes graph distance from coastal counties. The animation cycles a rainbow color scale based on each county's distance. The visualization uses d3.js version 3, the topojson library for geographic data, and a queue library for asynchronous loading. The color of each county is set using `d3.hsl` based on the distance value, resulting in a rapidly changing, high-saturation effect.

Loading thumbnail…

Border Distance

This visualization shows the distance from any point in the contiguous United States to the nearest border or coastline, using a sequence of concentric buffer strokes around the landmass. It approximates geographic distance by applying stroke widths in projected pixel coordinates, which the author notes is not perfectly accurate. The map is rendered with D3 v3, using `d3.geo.albersUsa` for projection and `d3.geo.path` to draw land and state borders from TopoJSON data. A color scale maps nine distance bands from yellow (near) to dark blue (far).

Loading thumbnail…

State Icons

State Icons displays every U.S. state as a compact 48×48 pixel SVG icon, with each state’s name shown above its clipped silhouette. The visualization uses a single TopoJSON file, pre-processed from USGS data, where each state is projected with its own local coordinate system and simplified via topojson. The code applies `d3.geo.path` with a null projection to render the pre-transformed geometries, and loads the combined data through `d3.json`. This approach preserves recognizable state shapes while fitting them uniformly into the small grid.

Loading thumbnail…

Countdown

This visualization displays a real-time countdown to 9 AM the following day, rendered as large monospaced text in the center of the page. The code uses d3.time.format to produce a timestamp string, d3.time.day and d3.time.day.offset to compute the deadline, and d3.time.second to calculate the remaining time. A recursive tick function updates the text every second using setTimeout, refreshing the display with the current difference between the deadline and the present moment.

Loading thumbnail…

Merging Counties

This example demonstrates merging county boundaries into state boundaries using the TopoJSON 1.6 merge functionality. It visualizes the United States by first displaying a static land mass, then animating the sequential drawing of each state’s borders derived from its constituent counties. The animation uses SVG paths with stroke-dasharray transitions, progressively revealing each state’s outline before fading it out. The code employs `d3.geo.path`, `d3.geo.albersUsa`, `topojson.merge`, and `topojson.mesh` to compute and render the geographic features.

Loading thumbnail…

Merging Counties II

This example displays a single gray landmass of the United States by merging all county geometries into one unified shape. The visualization uses TopoJSON and D3’s `d3.geo.albersUsa` projection with `d3.geo.path` to render the merged polygon. The code loads county data from a remote `us.json` file and applies `topojson.merge` to combine the geometries before drawing the SVG path. The result is a simplified state boundary map without individual county outlines.

Loading thumbnail…

Merging Counties III

This stress test visualizes a random subset of US counties, merged and colored via TopoJSON’s `topojson.merge` API. It shows a constantly cycling animation where new merged polygon groups fade in, highlight with distinct category colors, and fade out. The example uses D3.v3, `d3.select`, `d3.json`, and an AlbersUSA projection to render SVG paths. The underlying data source is a raw JSON file of US geometries from a gist.

Loading thumbnail…

Paint by Numbers

A coloring-book-style map of the United States lets visitors paint individual states by clicking or dragging, with a palette of nine colors selectable via mouse or number keys. The visualization uses d3.geo.albersUsa and d3.geo.path to render state boundaries from TopoJSON, while d3.behavior.drag manages interactive painting. Merged regions are drawn as SVG paths, and the current color assignments are encoded in the URL hash for sharing.

Loading thumbnail…

Paint by Numbers II

This interactive map of U.S. counties lets users paint each county with one of nine colors, with selections shared via a URL hash. Dragging across the map assigns colors, while clicking the legend or pressing number keys switches the active color. Built with D3 v3 and TopoJSON, the visualization uses `d3.geo.albersUsa` for projection, `d3.behavior.drag` for painting, and merges colored counties into SVG paths via `d3.geo.path`. County boundaries are rendered as a mesh, with a background stroke and interactive foreground paths.

Loading thumbnail…

County Bubbles

A map of the United States uses brown circles sized by county population, with a legend for reference and hover tooltips showing the county name and population. The visualization overlays these bubbles on a gray landmass with white state borders, placing each circle at its county’s centroid. Built with D3 v3, it loads a TopoJSON file containing merged county, state, and nation geometries, projects it via `d3.geo.albersUsa`, and draws the map with `d3.geo.path` while sizing bubbles with `d3.scale.sqrt`. Population data comes from the 2012 American Community Survey.

Loading thumbnail…

Congressional District Topology

This example visualizes the adjacency graph of U.S. congressional districts from the 113th Congress, drawing a node-link diagram atop a faded map of the country. District centroids serve as nodes, with edges connecting neighboring districts; districts off the map are excluded, and only links between earlier and later features are drawn. Built with d3.v3, the map uses d3.geo.albersUsa projection and d3.geo.path for rendering, while topological relationships are computed via topojson.neighbors and topojson.feature. The final graph is drawn as an SVG path, merging neighbor pairs with d3.merge.

Loading thumbnail…

Swiss Cantons & Lakes

A map of Switzerland displays gray canton boundaries and semi-transparent blue lakes, highlighting consistent borders where the two coincide. The visualization renders geographic data as SVG paths using `d3.geo.path` and `topojson.feature`, with `topojson.mesh` drawing white canton boundaries. Canton and lake shapes come from a pre-processed `ch.json` TopoJSON file, built from swiss-maps data via `topojson-merge` to ensure shared boundaries align. Hovering over any feature turns it orange.

Loading thumbnail…

Accelerate, Then Coast

An interactive easing function compares constant acceleration with constant speed. A black curve shows the combined ease, with brown and steelblue dashed lines representing acceleration and coasting phases. A slider adjusts acceleration, and an animated circle travels along the path. This example implements the `easeAccelerateThenCoast` function and uses `d3.svg.line`, `d3.scale.linear`, `transition.attrTween`, and SVG rendering in D3 v3.

Loading thumbnail…

Accelerate, Then Coast II

This interactive example visualizes a configurable easing function that reflects the "Accelerate, Then Coast" curve to produce slow-out effects. Two sliders adjust the acceleration exponent and the reflection center, allowing comparison between symmetric in-out easing and asymmetric alternatives. The SVG displays the easing curve with axes, while an animated circle traces its path over five seconds, updating reference lines to show progress. The code uses D3 v3 for scales, axes, transitions, and range inputs, with custom easing functions `easeReflect` and `easeAccelerateThenCoast` implemented in JavaScript.

Loading thumbnail…

Accelerate, Then Coast III

Two large gray and brown gears rotate in interlocking motion, comparing three easing functions via radio buttons: accelerate-then-coast, cubic-in-out, and linear. The animation uses D3 v3’s `d3.transition` and `attrTween` to tween the gear rotation, with custom easing functions `easeAccelerateThenCoast` and `easeReflect` controlling the speed profile. SVG paths drawn by `pathGear` define the gear teeth, while the form switches modes to highlight how each easing affects maximum angular speed and smooth acceleration.

Loading thumbnail…

Interrupting Chained Transitions

A grid of black squares pulses with random colors through chained transitions, each square cycling indefinitely until the “Stop The Music” button interrupts the sequence. Built with D3 v3 and SVG animation, the example shows how to prevent chained transitions from overriding a separate transition by checking `this.__transition__.count` before scheduling the next step. Clicking the button triggers a single non-chained transition that turns all squares dark gray, and the chain stops when the count exceeds one.

Loading thumbnail…

Perspective Transformation

A sailboat image is perspective-transformed onto a mosque background, with draggable corner handles adjusting the projection in real time. The image and a grid of lines are rendered in SVG, while the transform is applied via a CSS `matrix3d` style. The matrix is computed by solving linear equations from four point-pairs using LU decomposition from numeric.js, with `d3.behavior.drag` handling handle movement and preset buttons animating transitions.

Loading thumbnail…

Perspective Transformation II

An interactive perspective projection of a grid is overlaid on a mosque photograph. Four draggable handles define corresponding point pairs, and the grid lines are redrawn in cyan to show the warped result. Clicking preset buttons animates the handles to new positions, smoothly transitioning the grid’s perspective. The transformation matrix is computed by solving linear equations via LU decomposition from numeric.js, with D3.js v3 handling SVG rendering, drag interactions, and tweening.

Loading thumbnail…

Digital Clock

A digital clock displays the current time in hours, minutes, and seconds using seven-segment digits. The same SVG is rendered twice: a blurred underlay provides a glow effect, while a sharp overlay shows the lit segments in bright green. The code clones the SVG node and uses D3’s data join with an array of digit patterns to toggle the `lit` class on each path, updating every second via a recursive `tick` function.

Loading thumbnail…

Prim’s Algorithm

Prim’s Algorithm visualizes the construction of a minimum spanning tree on a grid of randomly weighted edges. A magenta frontier expands from the bottom-left corner, with d3.timer driving the step-by-step animation. Each iteration pops the lowest-weight edge from a custom minHeap, adds it to the tree, and updates the frontier on a canvas. The rendering uses manual Canvas 2D fillRect calls to draw cells and connections, with black indicating unexplored space and white showing the growing tree.

Loading thumbnail…

Random Search

This visualization animates a random search algorithm solving a maze, which was itself generated via random traversal. A magenta path highlights the best-known route from the top-right corner to the bottom-left, updating as the search progresses. The code uses D3 v3's timer API to drive the animation and a Canvas context for all drawing. The underlying maze and search logic are implemented directly with JavaScript arrays and bitwise operations to represent cell connections.

Loading thumbnail…

Random Traversal II

A maze is generated by random traversal and then flooded with colored light. Hue encodes the Manhattan distance from the starting cell, creating a vibrant gradient that reveals the maze’s branching structure. The animation uses a canvas, with `d3.timer` driving the flood fill, while `context.fillRect` paints each cell and corridor. The maze itself is built from an edge-bit array, and the color progression cycles through the HSL spectrum via `d3.hsl`.

Loading thumbnail…

Rainbow Luminance

Two horizontal bands compare the HSL rainbow to its luminance-only counterpart. The top band uses `d3.hsl` to produce the full rainbow, while the bottom band converts that color to HCL via `d3.hcl` and sets chroma to zero, isolating perceived lightness. Both bands are drawn as 1-pixel-wide Canvas images stretched vertically, generated with `createImageData` and `putImageData`, and labeled to the left of each strip. The visualization demonstrates that the HSL rainbow’s brightness varies widely across hues, making it unsuitable for data encoding.

Loading thumbnail…

Random Traversal III

A canvas spanning tree floods with color as an animation, where hue represents Manhattan distance from the root. A Web Worker generates the maze using random traversal, and the main thread colors it via a d3.timer loop, writing pixel data with Canvas `putImageData`. The code uses d3.v3 for color and timing, with bitwise direction flags to track tree edges.

Loading thumbnail…

Wilson’s Algorithm

Wilson’s Algorithm visualizes the construction of a uniform spanning tree via loop-erased random walks on a black canvas. A magenta path grows until it connects to the existing white maze, with loops erased and reconnecting cells turned white. The animation uses a Canvas context with `fillRect` for cells and corridors, managed by `d3.timer`, `d3.range`, and the `globalCompositeOperation` property for path erasure. Starting from one cell, the process accelerates as the maze expands, revealing the tree’s structure.

Loading thumbnail…

Wilson’s Algorithm III

This piece uses Wilson’s algorithm to generate a spanning tree of a canvas, then floods it with color so that hue encodes Manhattan distance from the root. The animation is rendered as a Canvas image using `d3.timer` and `context.putImageData`, with the maze generation offloaded to a worker thread. The code relies on D3’s `d3.select` and `d3.hsl` for styling and color, while the generated tree is visualized in a web page with a “wait” message.

Loading thumbnail…

Random Search II

A maze generated with Wilson’s algorithm is solved through random search. The gray frontier cells expand in random order, while the magenta path highlights the current best-scoring route toward the goal. The visualization uses D3 v3 and Canvas 2D drawing, with a timer running ten random frontier explorations per frame. Cell scores are computed as squared Euclidean distance to the goal, and the animation stops when the goal cell is reached.

Loading thumbnail…

Best-First Search II

Best-first search solves a maze generated with Wilson’s algorithm, animating the exploration on a black canvas. The solver expands cells in order of Euclidean distance to the goal, highlighting the current best path in magenta while marking visited cells. The maze is drawn cell-by-cell using Canvas 2D `fillRect` calls, with the frontier managed by a custom binary heap. The animation steps through ten frontier expansions per frame via `d3.timer`, and the path is traced by backtracking through parent pointers.

Loading thumbnail…

Prim’s Algorithm III

The visualization shows a spanning tree of the canvas generated with Prim’s algorithm, then flooded with color from the root; hue encodes Manhattan distance, creating a distinctive gradient pattern. A Web Worker computes the maze structure using a custom binary min-heap priority queue, while the main thread animates the flood fill via `d3.timer` and writes pixel data directly into a Canvas `ImageData` object. The animation cycles through hues by incrementing a distance counter and calling `context.putImageData` each frame.

Loading thumbnail…

Cubehelix

This example displays a single horizontal strip of continuously varying colors, demonstrating the default cubehelix color scheme. The gradient runs from one color to another across the canvas width, showing the perceptual characteristics of the ramp. The code defines a custom d3.scale.cubehelix using d3.interpolateCubehelix and applies it via a canvas element. It generates pixel data with createImageData and writes the color values directly into the image buffer, which is then rendered with putImageData.

Loading thumbnail…

Cubehelix II

Six color ramps illustrate variations of the Cubehelix color scheme, including reversed, hue-shifted, diverging, and a perceptual rainbow approximation. Each ramp renders as a horizontal gradient on individual Canvas elements, with pixel colors computed via the `d3.scale.cubehelix` plugin and `d3.interpolateCubehelix`. A polylinear scale with multiple domain points creates the diverging ramps. The labels and layout are positioned absolutely via D3 selections and ordinal scales.

Loading thumbnail…

Random Traversal

A black canvas displays a maze being generated cell by cell via a random traversal algorithm. White cells mark the growing maze structure, while magenta highlights the current frontier of possible extensions. The animation progresses in steps, using the Canvas API to draw rectangles for cells and connections. The code implements the algorithm with a frontier array and popRandom selection, using d3.v3's timer for animation control.

Loading thumbnail…

Prim’s Algorithm II

This example generates a maze using Prim’s algorithm and floods it with color to visualize Manhattan distance from the starting cell. As the animation progresses, a hue-changing fill pulses over frontier cells, highlighting the maze’s structure and growth pattern. The maze is drawn to a Canvas 2D context, with each cell and connecting wall filled via `fillRect`. The implementation uses D3 v3’s `d3.timer` for animation and `d3.hsl` for color encoding, while the maze generation relies on a custom binary heap for priority-based frontier expansion.

Loading thumbnail…

Wilson’s Algorithm II

A maze generated by Wilson’s algorithm is flooded with color, where hue encodes the Manhattan distance from the starting cell. The black-and-white maze structure is too noisy for comparison, so the color helps reveal overall maze shape and differences between algorithms. The visualization uses D3 v3 and a Canvas context, animating the flood via `d3.timer`, `fillRect`, and `d3.hsl` to tint each cell as the frontier expands. The maze is built procedurally with loop-erased random walks.

Loading thumbnail…

Better-Only Search

A maze is generated using random traversal, then solved with “better-only search,” a best-first search variant restricted to north and east moves. The canvas renders the maze as a white grid on black, with gray fill marking explored cells and magenta highlighting the current best path. The solver uses a min-heap frontier and animation via d3.timer, updating ten cells per tick to show the search progression toward the goal.

Loading thumbnail…

Randomized Depth-First

A randomized depth-first traversal generates a maze on a black canvas, with the active frontier of possible extensions highlighted in magenta. The algorithm starts in the bottom-left corner and repeatedly pops a frontier edge, carving passages in random directions while ensuring no cycles form. It renders to a 2D canvas using `d3.v3` and a `d3.timer` loop, drawing cells and corridors as white rectangles and spacing gaps. Each step redraws affected cells and frontier edges, with a shuffle applied to the frontier array to randomize the next choice.

Loading thumbnail…

Randomized Depth-First II

A maze is generated using randomized depth-first traversal, then flooded with color to reveal its structure. Hue encodes the Manhattan distance from the starting cell, making the maze’s branching patterns visually comparable. The animation is rendered on a Canvas 2D context, drawing cells and passages incrementally as the flood expands. The code uses D3’s `d3.timer` to drive the animation loop and `d3.hsl` to cycle hue over time, while a custom `generateMaze` function builds the maze and `fillRect` calls paint each cell and connecting corridor.

Loading thumbnail…

Randomized Depth-First III

A spanning tree of the canvas is generated using randomized depth-first traversal and then flooded with color, where hue encodes Manhattan distance from the root. The animation runs in a web worker, with each frame painting new frontier cells via Canvas `putImageData` and `createImageData`. The visualization uses D3’s `d3.timer` and `d3.hsl` for color cycling, while the maze structure is built incrementally by shuffling frontier edges in the worker’s `generateMaze` function.

Loading thumbnail…

Random Traversal IV

This example shows a tree layout applied to a recursively generated maze, producing a branching structure of connected cells. The maze is created using a randomized depth-first traversal that records edge connections, and the resulting tree is rendered as a set of black link paths. The code uses `d3.layout.tree` to compute node positions from the maze’s traversal tree, then draws each link as an SVG path with `M` and `L` commands. The visualization is built with D3 v3 and SVG, with the maze generation logic implemented in plain JavaScript.

Loading thumbnail…

Randomized Depth-First IV

A maze is generated on a 40x40 grid using a randomized depth-first traversal, then converted into a tree structure. The tree layout from D3 is applied to position the nodes, and SVG paths draw the links between parent and child nodes. The code uses `d3.layout.tree`, `d3.select`, and SVG path elements to render the final hierarchical visualization. The tree’s branching pattern visually reflects the maze’s corridors and dead ends, with each node representing a cell and each link a passage.

Loading thumbnail…

Prim’s Algorithm IV

This example visualizes a random maze as a tree, generated using Prim’s algorithm with a randomized priority queue. The path from the root (bottom-right cell) to every other cell branches into a tidy, non-crossing layout produced by the D3 tree layout (`d3.layout.tree`). Links are drawn as straight SVG paths from each parent to its child. The maze itself is built by a custom `minHeap` implementation that selects edges with random weights, ensuring a uniformly random spanning tree.

Loading thumbnail…

Wilson’s Algorithm IV

Wilson’s Algorithm IV applies D3’s tree layout to a maze generated by Wilson’s loop-erased random walk. The maze is represented as a hierarchical tree of connected cells, with SVG paths drawn as straight links between parent and child nodes. The code uses `d3.layout.tree`, `tree.nodes`, and `tree.links` to compute positions, while custom functions `generateMaze` and `generateTree` construct the maze’s spanning tree. The visualization shows the resulting tree structure with black connecting lines against a white background, using D3 v3 and SVG rendering.

Loading thumbnail…

Analyzing Spanning Trees

Four histograms compare the distribution of great-grandchild counts in spanning trees generated by four maze algorithms: randomized depth-first traversal, random traversal, Prim's algorithm, and Wilson's algorithm. Each horizontal bar group shows the probability of a node having zero through eight great-grandchildren across a 200×200 grid. The visualization reveals that randomized depth-first traversal strongly favors long, non-branching passages with many zero-count nodes. The code uses d3.svg.axis, d3.scale.ordinal, and d3.tsv to render the computed data from a TSV file.

Loading thumbnail…

Maze Tree

A maze, generated as a uniform spanning tree via Wilson’s algorithm, is drawn on a black canvas. The tree layout repositions each maze cell from its grid coordinates into a Reingold–Tilford tree, animating the transition over 2.5 seconds with d3 transitions and tweens. The code uses d3.layout.tree, d3.timer, and the Canvas 2D API to redraw links each frame, with nodes sorted by depth.

Loading thumbnail…

Maze Hover

A maze rendered on a Canvas element fills the viewport, with a red path tracing the route from the top-left cell to the current mouse position. As the pointer moves over the grid of cells, the highlighted path updates dynamically, always showing the unique parent-child connection from the hovered cell back to the starting corner. The code uses D3 v3’s `d3.select` and `d3.mouse` to handle pointer events, while `generateMaze` builds the maze with a loop-erased random walk and `computeParents` derives each cell’s predecessor for path reconstruction. The black background and white maze structure are drawn with `fillRect`, with the red overlay repainted on every `mousemove`.

Loading thumbnail…

launchd Startup Script

This example demonstrates how to launch a local HTTP server automatically at user login using macOS launchd. It defines a launch agent that runs the `http-server` command on port 8008, with the working directory set to a specific Gists folder. The configuration uses a plist XML file and the `launchctl` command-line utility to load the agent. This shows a system administration workflow rather than a traditional data visualization, highlighting the infrastructure behind serving web-based visualizations locally.

Loading thumbnail…

Quicksort I

A visualization of the quicksort algorithm shows each row as a snapshot of the array before a partition operation, with lines rotated to represent values. Orange lines indicate left-side elements greater than the pivot that need moving right, while green lines show right-side elements less than the pivot needing movement left. Built with D3 v3, it renders 200 shuffled numbers as SVG lines across multiple rows, each animated on mouseover to display values relative to the pivot using ordinal and linear scales, and uses the `quicksort` function to generate partition states.

Loading thumbnail…

Quicksort II

This visualization shows every recursive step of quicksort on a shuffled array of 200 numbers, with each row representing the array state before recursing into a partition. Red lines mark the chosen pivots, while gray lines indicate inactive elements. The code uses d3.v3 with SVG rendering, employing ordinal and linear scales to map array positions and rotated line marks. The quicksort algorithm is implemented in JavaScript, generating the level data and pivot metadata for each state.

Loading thumbnail…

Quicksort III

Two hundred vertical lines represent an array of shuffled numbers, each line rotated by its value. The animation plays out the swaps of the quicksort algorithm in reverse, showing the array gradually becoming disordered. The visualization uses D3 v3 with SVG line elements, a linear scale for rotation, and an ordinal scale for x-positioning. The quicksort function generates a list of swap pairs, which d3 transitions then animate sequentially, adjusting line transforms on each step.

Loading thumbnail…

Quicksort IV

The visualization animates the quicksort algorithm on 200 shuffled values, rendering each value as a rotated vertical line whose angle reflects its magnitude. A red line marks the active pivot, while black lines indicate the current partition and gray lines show inactive regions. Using D3.js v3 and SVG, the animation replays recorded swap and partition actions in reverse order, updating line positions and classes via `d3.transition`. The code generates the action log by recursively partitioning the array, then drives the playback through chained transition callbacks.

Loading thumbnail…

Mergesort I

The visualization animates the mergesort algorithm on 200 randomly shuffled values. Each value is rendered as a short line segment whose vertical position indicates the current working array and whose rotation reflects its numeric value, creating a dynamic, swirling pattern. The animation uses d3.v3, specifically `d3.transition` to sequence copy and swap actions, while `d3.scale.ordinal` and `d3.scale.linear` map indices, array positions, and values to visual attributes. The SVG lines update their `transform` attributes via `transition.attr("transform", transform)`, demonstrating the sorting process step-by-step.

Loading thumbnail…

Mergesort II

This visualization animates the mergesort algorithm on 200 randomly ordered values, showing how arrays of length 1 are progressively merged into sorted larger arrays. It uses D3.js v3 with SVG line marks to represent each value, rotated based on its magnitude and translated to its current position. The active merge operation is highlighted in black while inactive elements fade to light gray. The animation relies on D3’s transition API with custom start handlers to process merge, copy, and swap actions, and the ordinal and linear scales position the lines in two alternating rows.

Loading thumbnail…

Mergesort III

This visualization shows each pass of the mergesort algorithm as a horizontal row of 200 vertical line segments, with each row representing the array state after one merge phase. The lines are rotated according to their values, creating a waveform-like pattern that reveals the sorting progress from top to bottom. The implementation uses D3 v3 with ordinal and linear scales to position and rotate the lines, and SVG line elements are rendered within separate SVG groups per row. The mergesort function records each intermediate array state, and the code uses `d3.shuffle` and `d3.range` to generate the initial unsorted data.

Loading thumbnail…

Shuffle I

A Fisher–Yates shuffle is animated as 200 vertical line segments, each rotating to illustrate the random swapping of array positions. The visualization uses D3.js v3 with SVG and a transition system that chains animations step-by-step, reversing the shuffle steps to trace the algorithm’s progression. The `d3.scale.ordinal` and `d3.scale.linear` maps data indices to x-coordinates and rotation angles, while the `shuffle` function generates swap pairs for the animation sequence.

Loading thumbnail…

Shuffle II

An array of 200 vertical lines rotates in place to visualize a Fisher–Yates shuffle, with shuffled elements rendered in black while unshuffled ones stay light gray. The animation plays the swap sequence in reverse, shuffling the array from a fully shuffled state back to its original order. Built with D3 v3, it uses ordinal and linear scales, SVG line elements, and chained transitions to update each line’s rotation transform after every swap. The shuffle function generates random pairwise swaps, and the code references DOM nodes directly to swap their positions efficiently.

Loading thumbnail…

Quicksort V

A visualization of quicksort on 100 elements, where each horizontal row represents the array state after a single swap and colored lines trace each element’s positional movement through the sorting process. The code uses d3.v3 with custom SVG path interpolators to render the straight and diagonal segments, and a cubehelix color scale to differentiate elements. Randomly shuffled data is generated with `d3.shuffle` and `d3.range`, and the quicksort algorithm is implemented manually to record swap operations.

Loading thumbnail…

Mergesort IV

Merge sort is visualized as a series of colored paths, one per value, that travel across a timeline from their initial random positions to their final sorted order. The bottom-up merge sort algorithm is shown step-by-step, with each value’s horizontal displacement and color reflecting its current index, using a cubehelix color scale. The visualization uses D3.js v3 with SVG, d3.shuffle, and ordinal scales, while a custom line interpolation and CSS halos enhance the paths.

Loading thumbnail…

Quicksort VI

An animated quicksort network visualizes the sorting process of 100 shuffled values, with time progressing on the vertical axis and each swap rendered as a colored path. The value-to-color mapping uses a cubehelix color scale. The animation is drawn on a Canvas via `d3.transition` and custom tweening, while a precomputed list of swaps drives the sequence. Pressing the Alt key slows the animation. The implementation uses d3.v3, including ordinal and linear scales, and a custom `quicksort` function to generate swap pairs.

Loading thumbnail…

Mitchell’s Best-Candidate II

The animation demonstrates Mitchell’s best-candidate algorithm, a method for distributing sample points with blue-noise spectral characteristics to minimize aliasing. Each new point is chosen from ten gray candidate points, with the red best candidate selected as the one farthest from all existing black points. The visualization shows the search radius from each candidate to its closest existing point as a circle and line. It uses d3.v3 with SVG transitions and a d3.geom.quadtree for efficient nearest-neighbor queries.

Loading thumbnail…

Uniform Random

A grid of 3,000 circles appears one by one at random positions across a 960×500 SVG canvas. Each circle starts with a radius of zero and animates outward to a radius of two pixels via D3's `transition.attr`. The animation uses `d3.timer` to append ten new circles per frame, driven by a custom `uniformRandomSampler` function that returns `[Math.random() * width, Math.random() * height]` coordinates. This demonstrates a simple, lightweight approach to generating and animating random scatter points with D3 v3.

Loading thumbnail…

Mitchell’s Best-Candidate III

D3’s `d3.geom.quadtree` data structure organizes existing points to accelerate nearest-neighbor searches, while `d3.timer` and SVG `transition` animate the progressive appearance of each circle. The algorithm samples ten random candidates per iteration, selects the one farthest from all current points, and draws it with a growing radius, creating a uniform, orderly scatter over the 960×500 canvas.

Loading thumbnail…

Uniform Random II

This example uses 10,000 uniform random samples to reconstruct Van Gogh’s *The Starry Night* as a Voronoi diagram. Each sample point becomes a cell, filled with the color sampled from the original image at that location. The code employs `d3.geom.voronoi` to compute the cells, the Canvas 2D API’s `getImageData` to extract pixel colors, and `d3.rgb` to format fill styles. The source image is drawn to canvas before sampling, and the result offers a stochastic, mosaic-like reinterpretation of the painting.

Loading thumbnail…

Poisson-Disc III

This visualization uses Poisson-disc sampling to place 10,000 points across Van Gogh’s *The Starry Night*, then renders each point as a Voronoi cell colored by the underlying image pixel. The code loads the painting into a Canvas, reads its pixel data via `getImageData`, and fills each cell with the sampled color. It relies on `d3.geom.voronoi` for the cell geometry and a custom `poissonDiscSampler` function to ensure even spacing between points. The output is a stippled, mosaic-like reinterpretation of the artwork, contrasting with uniform random sampling.

Loading thumbnail…

Mitchell’s Best-Candidate IV

This example reconstructs a low-fidelity version of Van Gogh’s *The Starry Night* on a Canvas element. The page loads the original image, samples 10,000 points using a best-candidate algorithm that maximizes spacing between random points, and then draws a Voronoi diagram where each cell is filled with the color of the source pixel nearest the cell’s seed. The implementation uses d3.v3’s `d3.geom.quadtree` for fast nearest-neighbor searches during sampling and `d3.geom.voronoi` to compute the clipped cells. Colors are read directly from the loaded image via Canvas `getImageData` and applied with `fillStyle`. The result is a stylized, mosaic-like approximation of the painting.

Loading thumbnail…

Poisson-Disc

Poisson-Disc uses d3.timer to progressively render a two-dimensional Poisson-disc sampling of 960 by 500 pixels. The animation reveals the algorithm’s output by appending SVG circles that transition their radius from zero to two pixels. The code implements Bridson’s algorithm, based on Jason Davies’ version, which generates evenly distributed random samples without clustering. Each new point is rejected if it falls within a minimum distance (radius 10) of existing points, producing a blue-noise pattern across the canvas.

Loading thumbnail…

Annulus Sampling I

This animation shows the perils of naïve annulus sampling, where points cluster near the inner edge because the radius and angle are chosen uniformly at random. The result is a biased density that does not fill the annular region evenly. The code uses a Canvas context with `d3.select`, `d3.timer`, and explicit `context.arc` and `context.fill` calls to draw the samples over time, adding 50 points per frame until 1,000 total are placed. The static background ring uses an evenodd fill rule to show the sampling region.

Loading thumbnail…

Annulus Sampling II

A static annulus is drawn on a Canvas, with points appearing over time to demonstrate uniform random sampling within the ring. The code uses the D3.js timer to animate the process, plotting 50 new points per frame. Each point’s radius is derived from the square root of a uniform random value scaled between the squared inner and outer radii, ensuring spatial uniformity. The implementation relies on Canvas API calls like `arc()` and `fill()`, with the sampling logic computed via JavaScript’s `Math.random()` and trigonometric functions.

Loading thumbnail…

Poisson-Disc II

This animation illustrates the Poisson-disc sampling algorithm, which generates a set of points with a minimum spacing. Red dots are active samples; one is selected randomly, and up to *k* candidate points (open black circles) are generated in an annulus around it. Candidates are rejected if too close to any existing sample, shown by a gray exclusion zone and black lines to the offending neighbor. Inactive samples turn black, and the process ends when none remain active. The code uses d3.svg.arc for the annulus and CSS transitions for animation.

Loading thumbnail…

Uniform Random III

This example generates 10,000 random points within a fixed width and height, then computes their Voronoi diagram using `d3.geom.voronoi` with a clip extent matching the SVG canvas. Each Voronoi cell is rendered as an SVG path, filled with a color from a cubehelix scale (`d3.scale.cubehelix`) that maps the cell’s polygon area to a hue range. The coloring transitions smoothly from bright green to deep purple as area increases, creating a visually textured mosaic. The code uses D3 v3, the custom cubehelix interpolation library, and random uniform sampling.

Loading thumbnail…

Mitchell’s Best-Candidate V

A Voronoi diagram partitions a 960×500 SVG canvas into colored cells, each filled according to the area of its corresponding polygon using a cubehelix color scale from d3.scale.cubehelix. The cell sites are generated by a best-candidate sampler that uses d3.geom.quadtree to efficiently find the farthest point from existing samples. The animation-free rendering fills paths via d3.geom.voronoi and d3.geom.polygon, demonstrating a blue-to-purple gradient across irregularly sized regions.

Loading thumbnail…

Poisson-Disc IV

This example generates a set of points using a Poisson-disc sampling algorithm and renders them as a clipped Voronoi diagram. The SVG paths are filled with a color mapped from each polygon’s area using a cubehelix color scale, creating a smooth gradient across the canvas. The code uses d3.geom.voronoi for the diagram, d3.scale.cubehelix for coloring, and d3.svg for rendering. The Poisson-disc sampler is based on Jason Davies’ implementation, with a fixed radius of 5.68 pixels.

Loading thumbnail…

A Less-Angry Rainbow

Three rainbow color scales are compared in two horizontal bands each, rendered as 1-pixel-high Canvas images stretched vertically. The first band shows the original colors, while the second band removes chroma (sets `c = 0` via `d3.hcl`) to reveal lightness variation. The scales include HSL, HCL, and a cubehelix scale built with `d3.scale.cubehelix` and a custom `d3.interpolateCubehelix` interpolation. The code uses D3 v3 and Canvas `putImageData` to draw each scale.

Loading thumbnail…

Map Pan & Zoom I

A black-and-white world map renders on a light gray background using the Mercator projection. This example demonstrates map panning and zooming through the `d3.behavior.zoom` API, which applies SVG transforms to a group containing the geographic paths. The map is built from TopoJSON world data with `d3.geo.path`, and the zoom scale is limited to 1–8×. A transparent overlay rect captures pointer events, enabling the interactive behavior.

Loading thumbnail…

Map Pan & Zoom II

This example demonstrates interactive pan and zoom on a world map using a dynamic Mercator projection. The map renders country landmasses as black paths, with white boundaries and a light gray sphere background, all within an SVG element. Using the `d3.behavior.zoom` API, user drag or scroll actions trigger reprojection and redraw the geospatial data via `d3.geo.path`. The underlying geographic data is loaded as JSON from a gist, and the projection translates and scales dynamically with each zoom event.

Loading thumbnail…

Map Pan & Zoom III

A world map rendered on a Canvas element supports pan and zoom interactions via the d3.behavior.zoom API. The map uses pre-projected geographic geometry from a TopoJSON file, with d3.geo.path using a null projection so that only the canvas transform changes during zoom, avoiding re-projection. Country boundaries and land masses are drawn as filled and stroked paths, with strokes scaled inversely to maintain constant width.

Loading thumbnail…

Map Pan & Zoom IV

This example demonstrates fast map panning and zooming on a Canvas. It uses pre-projected geometry from a `world.json` file, rendered via d3.geo.path. Pan and zoom use `d3.behavior.zoom`, with dynamic simplification via a custom `d3.geo.transform` and viewport clipping via `d3.geo.clipExtent`. The map shows country boundaries and a sphere outline.

Loading thumbnail…

Reprojecting CSV with ogr2ogr

This example demonstrates how to convert a CSV file containing projected coordinates (EPSG:2263) into unprojected longitude and latitude values (EPSG:4326). The conversion relies on a virtual dataset defined in a VRT file, which specifies the source CSV, its geometry type, and the source coordinate system. The command-line utility `ogr2ogr` from the GDAL library performs the reprojection, outputting a new CSV with the transformed coordinates. The VRT uses the `PointFromColumns` geometry encoding to interpret the X and Y columns as spatial points.

Loading thumbnail…

Merging States

A world map rendered in dark gray with white mesh borders around individual states merges all country subdivisions into a single landmass feature via `topojson.merge`, producing one orange-outlined polygon. The code builds this from Natural Earth Admin 1 data, using `d3.geo.mercator`, `d3.geo.path`, and `d3.geo.graticule` to draw graticule lines. An orange arc artifact is noted as a possible merge or dataset bug.

Loading thumbnail…

Back-facing Hemisphere

A hemisphere of the Earth’s graticule rotates slowly, with red lines marking the front-facing half and gray lines the back. The animation uses a d3.geo pipeline, first rotating the source data, then clipping to a circle with `clipCircle`, projecting via an orthographic projection, and finally rendering to a Canvas context using `contextSink`. The graticule data comes from `d3.geo.graticule()`.

Loading thumbnail…

Multiple Rotations

An animated canvas displays a rotating globe. The graticule and sphere are drawn using D3’s geometry pipeline, which applies two sequential rotations—a fixed tilt and a time-based spin—before orthographic projection and clipping. The code uses `d3.geo.pipeline` with `d3.geo.rotate`, `d3.geo.clipCircle`, and `d3.geo.project`, rendering via a `contextSink`. The graticule is generated by `d3.geo.graticule`.

Loading thumbnail…

Closest Line Segment

A brushless interaction demonstrates nearest-neighbor search over line segments. As the mouse moves, a red highlight identifies the closest segment to the cursor, with the active segment brought to the front. The example builds a binary tree of segment bounding boxes to accelerate the search, using a custom min-heap to prune distant branches. The segment geometry derives from a sine wave, rendered as SVG paths via `d3.geo.path`. The search logic is implemented in a standalone `tree.js` module, while `d3.mouse` handles coordinate tracking.

Loading thumbnail…

Line Segment Intersection

An interactive line segment intersection test visualizes a red segment controlled by the mouse crossing a black horizontal sine wave. A spatial index tree organizes the wave's segments, and as the mouse moves, the d3.geo.path projection is used to redraw the test line, highlighting any intersecting segments in red. The example uses D3.js and a custom tree.js data structure to efficiently query for collisions based on bounding-box extents.

Loading thumbnail…

Named Transitions

This example demonstrates concurrent transitions on a single SVG path by using named transitions in D3 3.5. A black cross-shaped symbol, rendered with a red stroke, rotates continuously via the “twizzle” transition while its stroke width pulses with the “plonk” transition. Each animation uses `transition.attrTween` and `transition.style` with `d3.interpolateString`, and recursively reschedules itself with `each` and `transition.duration` to create an ongoing, non-interfering loop.

Loading thumbnail…

Equirectangular Fisheye

An interactive world map applies fisheye distortion to an equirectangular projection, magnifying countries and graticules near the cursor while compressing them elsewhere. The distortion follows mouse or touch movement, recentering the projection on the pointer. The example uses D3 v3’s `d3.geo.path` and `d3.geo.projectionMutator` with custom `fisheye` functions, rendering to a Canvas 2D context with `clearRect`. It loads TopoJSON land and boundary data from the world-110m dataset, drawing land, country borders, and a graticule with distinct stroke styles and alpha values.

Loading thumbnail…

Counterclockwise Arc

Two d3.svg.arc paths illustrate the visual difference between clockwise and counterclockwise arc direction in D3 v3. The first arc runs from π/4 to 3π/4, while the second reverses those angles to create a counterclockwise sweep. Each path has a text label placed along its curve using SVG textPath, with the text following the arc’s direction. The example renders scalable vector graphics in an SVG container, using the arc generator’s startAngle and endAngle properties to define the geometry and orientation.

Loading thumbnail…

Pie Padding

This example demonstrates a pie chart with small gaps between its slices, created using a hardcoded array of eight numeric values. The `d3.layout.pie` function with a `padAngle` of .02 adds parallel-sided padding between arcs, while approximately preserving their relative areas and angles. An `d3.svg.arc` defines the donut shape, and the chart is rendered as SVG paths, with each slice colored using `d3.scale.category10`.

Loading thumbnail…

Arc Corners

This example demonstrates D3’s rounded-arc capability by rendering a donut chart where each slice has rounded corners and small gaps between adjacent segments, using the Fibonacci sequence as sample data. The visualization is drawn as SVG, with the arcs generated by `d3.layout.pie` and `d3.svg.arc`’s `cornerRadius` and `padAngle` options. Overlaid on the chart are faint reference circles that mark the exact positions where the arc corners are rounded, computed manually from each slice’s angles and radii. The code also applies a category color scale and semi-transparent fills to distinguish the slices.

Loading thumbnail…

Rounded Corner

This example demonstrates how to compute a rounded corner between a line and a circle, using geometric offsets and circle-line intersection formulas. The SVG rendering shows the original line, the outer circle, a dashed offset circle, and the resulting corner circle in red, along with its origin and tangency points. The code relies on D3.js v3 to append SVG elements and markers, while performing manual trigonometric calculations for the perpendicular and parallel offset lines, and solving the intersection to place the corner circle. The visualization clarifies the construction steps without any interaction or animation.

Loading thumbnail…

Pie Padding II

Seven pie slices represent the Fibonacci sequence, with angular padding between arcs separating them. A continuous animation cycles the padAngle from zero to its maximum value and back, causing the gaps between slices to expand and contract while their relative areas remain unchanged. The example uses D3 3.5’s `d3.layout.pie` with `.padAngle()` and `d3.svg.arc`, rendering SVG paths with a group element centered in the viewport. A `d3.timer` applies a cubic-in-out easing over 7.5 seconds, updating each arc’s path data frame-by-frame.

Loading thumbnail…

Circle in Sector

The visualization displays a circular sector that continuously expands and contracts, enclosing a perfectly tangent inscribed circle. An animated wedge traces the space between the circle and the sector's arc, using paths for the sector and wedge, and a circle element for the inner shape. The animation is driven by `d3.timer` with a `cubic-in-out` easing function over a 7.5-second loop, while `d3.svg.arc` computes the sector’s geometry. Custom geometry, via the `cornerTangents` function, calculates the tangent points needed to keep the circle precisely fitted, with all shapes rendered as styled SVG elements.

Loading thumbnail…

Arc Corners II

Animated pie charts cycle through a transition where each slice’s corner radius and inner radius morph between sharp and rounded, and the gaps between slices alternately collapse and expand. The visualization uses the Fibonacci sequence as its data. Built with d3.v3, it relies on the `d3.layout.pie` and `d3.svg.arc` APIs, rendered as SVG paths, with a cubic-in-out easing function driving the 2.5-second animation loop.

Loading thumbnail…

Arc Corners IV

A donut chart presents eight sequential values from a hardcoded Fibonacci-like array as colored wedges with rounded outer corners. The d3.svg.arc generator applies a cornerRadius of 20 pixels, while d3.layout.pie sets a padAngle to separate slices. Rendered as SVG paths in a centered group, each wedge uses a category10 color scale. The visualization highlights how rounded corners and padding soften the classic pie chart aesthetic, using D3 v3’s layout and shape APIs.

Loading thumbnail…

Extending Arcs

Hovering over a slice of this pie chart causes it to extend outward and darken, emphasizing that segment while the padding between arcs stays constant. The chart uses D3.js v3 with a `pie` layout and an `arc` shape with a fixed `padRadius`. Data is an inline array of Fibonacci numbers. Mouseover and mouseout events trigger `transition.attrTween` to smoothly interpolate each arc's `outerRadius`, with a delay on mouseout, while SVG paths handle the rendering.

Loading thumbnail…

Named Transitions II

This example demonstrates how D3 3.5’s named transitions allow concurrent animations on the same SVG circles. Users toggle a position transition that moves circles vertically and a size transition that scales their radius; the “position” and “size” names prevent these transitions from interrupting each other. Unchecking the “Named Transitions” checkbox uses null names, causing the second transition to cancel the first, as seen when circles fail to complete their movement. The interactions rely on `transition.attr` with specified delays and durations, driven by button click handlers that toggle boolean state.

Loading thumbnail…

Spiral Triangle

A mesmerizing, topologically impossible animation shows a spiral of black-stroked white squares rotating and translating within two triangular clipping regions. The piece recreates a GIF by PATAKK, using an SVG scene with upper and lower clip paths. The code uses d3.v3’s `d3.selectAll`, `d3.range`, and `d3.timer` to drive square transforms, while each square’s position and rotation are computed from a normalized index and elapsed time.

Loading thumbnail…

Spiral Triangle II

Three rotating triangles made of small squares converge in the center, with each square cycling through a smooth cubehelix color palette. The animation uses multiple `d3.timer` callbacks to update square positions and rotations, while `d3.scale.cubehelix` maps time-based domain values to color. Sixty squares per triangle move horizontally and spin at a constant angular speed, clipped to two regions that divide the SVG canvas. The code relies on D3 v3 selection methods and SVG transforms to coordinate the layered motion.

Loading thumbnail…

Spiral Triangle III

A grid of 71 small cross-shaped symbols rotates in a spiral pattern around a triangle, with colors shifting through a cubehelix scale. The animation is clipped into upper and lower regions of the SVG canvas, and each symbol moves outward while rotating at a constant angular speed. The code uses D3 v3's `d3.timer` for animation, `d3.svg.symbol` for cross paths, and a custom `d3.scale.cubehelix` with three HSL stops to interpolate fill colors over time.

Loading thumbnail…

State Grid

This example arranges US state abbreviations into a compact ASCII-art grid, with eight states highlighted in a contrasting color. It shows a static map-like layout where each state is a labeled square, and the selected states are visually emphasized. The visualization is implemented with D3 v3, parsing the embedded ASCII grid from a script tag to position SVG rectangles and text elements. State data is hardcoded in the HTML, and d3 selections are used to append and style each grid cell.

Loading thumbnail…

Delaunay Force Mesh II

Two hundred force-directed points settle into a stable layout, with a Delaunay mesh overlaid and filtered to draw only links shorter than 100 pixels, revealing clusters and local connectivity. The simulation uses the `d3.layout.force` API, while the mesh is computed with `d3.geom.voronoi`; both render to a Canvas via `getContext("2d")`. One fixed node follows the mouse, pulling the network interactively, and the display updates continuously, drawing gray edges and white-ringed black points.

Loading thumbnail…

Delaunay Force Mesh III

This visualization shows a force-directed mesh of points initially distributed via Poisson-disc sampling, with a Delaunay triangulation overlaid as connected gray lines. A fixed root node is pulled by mouse movement, while all nodes gravitate toward their original sample positions. The code uses `d3.layout.force` for the physics simulation, `d3.geom.voronoi` to compute the mesh links, and renders the result on a Canvas via the `getContext("2d")` API. Each tick redraws the links and nodes, with points styled as white-stroked black dots.

Loading thumbnail…

Rainbow Circle

A rainbow ring is constructed from 500 individual SVG path segments, each an arc slice that together form a circular band. The color of each slice encodes its angular position via the HSL color space, creating a smooth spectral gradient around the circle. The example uses D3 v3’s `d3.svg.arc` to generate the path geometries and `d3.hsl` to compute fill colors, with segment angles derived from a range over 2π radians. The rendering is entirely SVG, placed within a 960 by 960 pixel viewport.

Loading thumbnail…

XML Parsing

This example shows a bar chart of letter frequencies in English, ordered from A to Z. It demonstrates how to load an external XML file using `d3.xml` and parse it with the selectors API, specifically `querySelectorAll` and `getAttribute`. The code uses D3 v3 to bind the parsed data to SVG rectangles, with ordinal and linear scales for the axes. Data resides in a simple XML file with `<letter>` elements, and the chart updates on hover with a color change.

Loading thumbnail…

Parent Data

A test of hierarchical selections and parent data in D3 4.0, this example builds a 3×3 HTML table by chaining `selectAll` and `data` calls. The inner cells display their x- and y-coordinate labels, with the parent row data passed through the selection’s parent context. Rendered as SVG-independent DOM elements, it uses the d3-selection module’s `enter().append()` pattern, demonstrating how child selections inherit and access parent datum during data joins.

Loading thumbnail…

Easing Functions

This chart displays 31 of D3’s easing functions in “in” mode, plotting each function as a line across a square coordinate system. The x-axis shows normalized time from 0 to 1, while the y-axis shows the eased output, which can sometimes exceed this range. The code uses D3 v3 with SVG rendering, building axes and lines via `d3.svg.axis` and `d3.svg.line`.

Loading thumbnail…

Easing Functions II

Easing Functions II displays D3’s built-in easing functions in “out” mode across a grid of small multiples, with each chart plotting the normalized time *t* on the x-axis against the eased time *ease(t)* on the y-axis. The visualization uses d3.svg.axis and d3.svg.line to render axes and curves, with hover interactions highlighting individual functions in red. It embeds pre-release D3 4.0 easing code via a gist, acknowledging a known bug in D3 3.x for elastic and bounce easing. The SVG output is generated with d3.scale.linear for both axes.

Loading thumbnail…

Easing Functions III

This chart compares D3’s built-in easing functions in “in-out” mode by plotting each as a line on a shared grid. The x-axis shows normalized time t from 0 to 1, and the y-axis shows the eased output ease(t). Each function is rendered as an SVG path using a d3.svg.line generator, with axes created via d3.svg.axis. The code includes a pre-release D3 4.0 easing library, and hovering highlights a line in red.

Loading thumbnail…

HCL Interpolation

This example demonstrates color interpolation in the CIELCH color space, showing how hue transitions along the shortest path between two colors. An animated gradient sweeps horizontally across a canvas, with the starting and ending hues continuously shifting over time. The visualization uses the `d3.interpolateHcl` function from the d3-color module and the `d3.timer` function from the d3-transition module to drive the animation and render the gradient pixels with Canvas `putImageData`.

Loading thumbnail…

HCL Interpolation II

A canvas displays a single horizontal strip of animated color that cycles through hues. The strip updates every frame using `d3.timer`, computing a gradient from one HCL color to another with `d3.interpolateHclLong`. The code writes RGB values into an `ImageData` buffer and draws it with `putImageData`, showing the long path between hues 360° apart.

Loading thumbnail…

HCL Color Space

A two-dimensional cross section of the HCL color space maps hue from 0° to 360° vertically and luminance from 100 to 0 horizontally, with chroma held constant at 50. The visualization uses d3.hcl to compute RGB values for each pixel, writing them directly to a Canvas `ImageData` buffer. The resulting gradient reveals how perceived color and brightness shift across the HCL space, rendered at a 960×500 resolution.

Loading thumbnail…

Cubehelix Interpolation

This example demonstrates color interpolation in Cubehelix color space by rendering a horizontal gradient across a 960-pixel canvas. The visualization uses d3-color, specifically the `d3.cubehelix` interpolation method, to smoothly transition between colors along the visible spectrum. The single-row canvas is stretched vertically via CSS to create a tall, banded display. The code implements the full d3-color library inline, including color parsing, RGB and HSL conversions, and the Cubehelix interpolation logic, all rendered through the Canvas 2D API without additional libraries.

Loading thumbnail…

Cubehelix Color Space

A two-dimensional cross section of the Cubehelix color space shows hue from 0° to 360° along the vertical axis and lightness from 1 to 0 along the horizontal, with saturation held constant at 1. The canvas renders these colors by mapping each pixel coordinate to a Cubehelix value and converting it to RGB using the d3-color library. The visualization demonstrates the full gamut of the color space through a continuous gradient.

Loading thumbnail…

Cubehelix Interpolation II

A single-row canvas at 960 by 1 pixels renders a continuous horizontal color gradient, testing how interpolation behaves in Cubehelix color space. The code uses D3’s color module to compute the transition between two endpoint colors, drawing each column to the canvas with the `fillRect` method. This demonstrates how the Cubehelix model’s hue, saturation, and lightness axes produce a smooth, perceptually balanced ramp.

Loading thumbnail…

RGB Color Picker

This interactive RGB color picker displays three horizontal channel strips (red, green, blue) as Canvas gradients, each with a draggable marker. The current color is composed from the selected values in all three channels, shown as a white/black marker line. The visualization uses D3 v3 with `d3.scale.linear`, `d3.interpolateRound`, `d3.svg.axis`, and the `d3.behavior.drag` interaction. Each strip is rendered with `createImageData` and `putImageData` on the Canvas, while SVG axes provide tick labels.

Loading thumbnail…

Lab Color Picker

This interactive tool visualizes the CIELAB color space by displaying three horizontal gradient strips, one for each of the L, a, and b channels. Dragging a marker along a strip adjusts that channel’s value, and all three strips update to show the resulting color as a vertical slice through the space. The example uses d3.v3 for scales, axes, and drag behavior, with the gradients rendered to Canvas via `createImageData` and `putImageData`, converting between Lab and RGB using `d3.lab` and `d3.rgb`.

Loading thumbnail…

HCL Color Picker

This example presents an interactive HCL color picker with three horizontal channel strips for hue, chroma, and lightness. Each strip displays a gradient of colors, and the user can drag a marker along any channel to adjust that component, with the current color shown as a white pixel and its predecessor as black. The visualization uses D3 v3 with SVG axes for channel scales and Canvas `createImageData` and `putImageData` to render the per-pixel gradients. The HCL color is converted to RGB via `d3.rgb`, and dragging is handled with `d3.behavior.drag`.

Loading thumbnail…

HSL Color Picker

Three horizontal color-gradient strips display the hue, saturation, and lightness channels of an HSL color model. Dragging any strip updates the selected color value, and each strip re-renders to show the resulting color variation. The visualization uses D3.js for axis rendering and drag behavior, while Canvas `putImageData` writes per-pixel RGB values for the gradients.

Loading thumbnail…

Cubehelix Color Picker

This example presents an interactive Cubehelix color picker with three horizontal channel strips for hue, saturation, and lightness. Each strip renders a gradient swatch on a canvas element with an SVG axis below it, using d3.svg.axis to label the value ranges. The code relies on d3-color’s `cubehelix` and `hsl` functions to convert channel values into displayable colors, drawing the gradient bars programmatically via canvas `getImageData`. The interface allows direct manipulation of each channel to explore the three-dimensional color space.

Loading thumbnail…

Connected Particles II

A field of 100 small particles drifts vertically on a dark canvas, with translucent gray circles drawn between any pair that comes within 100 pixels of each other. As particles move, their connecting arcs fade in and out based on proximity, creating a shifting network of temporary links. The animation runs via a custom d3-timer loop, using Canvas arc and fill operations per frame. Each particle’s horizontal position is fixed, while vertical velocity varies randomly, causing them to wrap around the edges.

Loading thumbnail…

Canvas Bar Chart

This bar chart displays the relative frequency of each English letter from A to Z, using a familiar alphabetized ordering along the x‑axis. The chart is rendered entirely to a Canvas element using raw drawing commands rather than SVG. It relies on d3.scaleBand for the categorical x‑axis, d3.scaleLinear for the numeric y‑axis, and d3.requestTsv to load the tab‑separated data. All rectangles, tick marks, and axis labels are drawn directly via the Canvas 2D context, with tick formatting applied through scale's tickFormat method.

Loading thumbnail…

Connected Particles III

This example renders 200 particles as small circles on an HTML5 Canvas, with each particle moving via a random walk that includes velocity damping. Lines connect pairs of particles whenever their distance is less than 60 pixels, with line opacity varying based on proximity, turning fully opaque below 40 pixels. The simulation uses a custom timer based on `requestAnimationFrame`, and the drawing relies on Canvas methods like `beginPath`, `arc`, `moveTo`, and `lineTo`. Both particle positions and connection lines are updated each frame, creating a dynamic web of interactions.

Loading thumbnail…

Color Mesh

A Voronoi diagram partitions a 960 by 500 canvas into cells, each filled with a color derived from its sample point's distance from the center using the CIELAB color space. The samples are generated via a Poisson-disc sampling algorithm to ensure even spacing. The visualization renders as an SVG using `d3.geom.voronoi` with clipped extents, and each cell's fill and stroke are set by the `d3.lab` color function. The code builds upon a provided `poissonDiscSampler` implementation.

Loading thumbnail…

Monocomb

Monocomb is an animated canvas visualization of a bee-like form, built with the d3-timer and d3-color libraries. It continuously draws a stochastic, particle-based structure that resembles a honeycomb or swarm, using a custom physics simulation driven by requestAnimationFrame. The piece renders directly on a black background, with colors generated procedurally through the d3-color API. Its motion and form emerge from timer-driven updates, creating an evolving, abstract biological pattern.

Loading thumbnail…

Delaunay Circles

A field of randomly walking points forms a continuously updating Delaunay triangulation. Each triangle in the mesh contains an inscribed circle, with the circles rendered in a dark color against a light background. The animation runs on an HTML canvas, with the Voronoi and Delaunay calculations handled by the d3-voronoi library, while the points themselves are displaced using a simple random-walk algorithm. The code demonstrates the geometric relationship between the triangular mesh and the inscribed circles, which change as the points drift across the viewport.

Loading thumbnail…

Delaunay Circles II

A field of points connected by Delaunay triangles animates in a loop, with each triangle’s interior filled by a circle whose radius grows until it touches the triangle’s edges. The canvas redraws every frame, shifting point positions via a time-based function to continually recompute the triangular mesh and its inscribed circles. The visualization uses the `d3-voronoi` library for the Delaunay triangulation and draws directly to a 2D Canvas via JavaScript, with animation driven by a simple time step and no external data source.

Loading thumbnail…

Delaunay Circles III

A set of circles animates continuously, with positions influenced by a Delaunay triangulation derived from a set of points. The rendering uses a Canvas element and the d3-voronoi library to compute the triangulation, while d3.forceSimulation likely drives the point movement. The visualization updates each frame, showing the evolving geometric relationships between the moving circles.

Loading thumbnail…

Voronoi Circles

Voronoi Circles uses D3’s Voronoi tessellation to partition a canvas into regions around moving points, with each region filled by a colored circle that pulses and shifts in size. The animation, rendered with the Canvas API, computes the Voronoi diagram via `d3.voronoi` and updates the drawing each frame. The example demonstrates how Delaunay-based spatial subdivision can drive a simple, rhythmic visual effect.

Loading thumbnail…

Colorcomb II

A Voronoi diagram of hundreds of colored cells animates on a black canvas, with each cell’s color shifting over time toward a shared palette. The visualization is rendered using the `d3-voronoi` library, which computes the tessellation, while a Canvas drawing loop continuously updates the cell fills. The animation derives from per-cell color interpolation, creating a slowly morphing mosaic of polygons. The code is a single self-contained HTML file using JavaScript and the Canvas API, with no external data source beyond the procedurally generated initial cell positions and colors.

Loading thumbnail…

Matplotlib Colormaps

Four examples of perceptually uniform color scales from Matplotlib. The visualization displays the viridis, magma, plasma, and inferno colormaps as horizontal gradient strips on separate Canvas elements. Each strip renders a sequence of hex color values defined in the canvas `data-scale` attribute, and the `<canvas>` elements are styled with a fixed height and a black border. The code uses the canvas API with `width` and `height` attributes to draw the gradient directly, with no external JavaScript libraries, and the color data originates from a static `README` file describing their implementation.

Loading thumbnail…

Smallest Enclosing Circle

Five semi-transparent circles are scattered across an SVG canvas, each draggable with the mouse. As the user drags them, a thin, dark ring continuously updates to show the smallest circle that contains all of them. The visualization uses D3 v3’s `d3.behavior.drag` for interaction and computes the enclosing circle with a recursive implementation of Welzl’s algorithm, including an Apollonius-based solution for the circle tangent to three given circles. The result is rendered as SVG shapes, with the outer ring and an inner offset ring styled via CSS classes.

Loading thumbnail…

Improved Circle Packing

This visualization uses D3 4.0’s improved circle-packing layout, which computes the smallest enclosing circle for each node to fit circles more tightly than earlier versions. The example displays the hierarchical Flare JSON dataset, with circle size proportional to leaf values and color distinguishing top-level branches. It renders directly to a Canvas element via the d3 pack layout, avoiding SVG’s DOM overhead. The code also includes a bundled d3-xhr library for asynchronous data fetching.

Loading thumbnail…

Nightly Show

This example re-creates a map projection for The Nightly Show with Larry Wilmore, showing a Mollweide world map with land masses, country boundaries, a graticule, and a spherical outline. It uses the `d3.geo.mollweide` projection, `d3.geo.path`, `d3.geo.graticule`, and TopoJSON to load world-50m.json data. The rendered SVG draws land in dark gray, boundaries in white, and graticule lines, with styles for stroke and fill. The code fixes the map rotation and scale to approximate the show’s logo.

Loading thumbnail…

Transition to Default

A single circle cycles through random HCL colors as an inline style, then transitions back to its default fill. Every 2.5 seconds, d3.hcl assigns a new fill, followed by a 2-second transition. The transition’s fill function temporarily removes the inline style, reads the computed default from the stylesheet, restores the original color, and returns the default, so the circle fades back to dark gray. This illustrates a workaround for d3.v3’s transition.style behavior, which lacks built-in null handling. The example uses SVG rendering with D3’s selection and transition methods.

Loading thumbnail…

Fitted Symbols

This example cycles through D3’s built-in symbol types, scaling each shape to fit a fixed rectangular bounding box. A symbol path’s type changes every two seconds, and its size is recalculated from the bounding box’s aspect ratio using `getBBox`. The SVG rendering includes a gray rectangle as the target region, with a 1.5-second transition animating the shape’s new area. The code uses `d3.svg.symbol`, `d3.svg.symbolTypes`, and path transitions to demonstrate dynamic fitting.

Loading thumbnail…

Rounded Arc Test

Animated test of rounded and padded arcs rendered to Canvas with d3-shape. The Fibonacci sequence data is visualized as a pie chart, with arcs transitioning between square and fully rounded corners. Using d3-shape’s `arc` and `pie` APIs, the animation cycles every 2.5 seconds, adjusting `cornerRadius` via d3-ease’s `cubicInOut`. Stroke styles and a gray outline highlight the changing geometry.

Loading thumbnail…

Kernel Smoothing

This example visualizes kernel smoothing by plotting raw count data over time as small, semi-transparent steel-blue symbols, then overlaying a smooth black trend line that averages nearby values with an Epanechnikov kernel. The data, loaded from a CSV file, is parsed with `d3.utcParse` and drawn to a Canvas context. The custom smoothing curve is implemented via `d3.line` with a `kernelSmooth` curve factory, which computes weighted averages over a specified bandwidth. The visualization uses D3 v4 for scaling and plotting, and the result is a clear comparison between the noisy observations and the smoothed pattern.

Loading thumbnail…

T-minus Time

This example shows a rocket-launch countdown timeline spanning one minute before and five minutes after a specified epoch, with axis labels formatted as T-minus and T-plus relative times. The visualization uses two UTC time scales in d3.v3: a primary scale for positioning in absolute time and a translated scale solely to compute tick values relative to the epoch. The SVG axis is rendered with d3.svg.axis and a custom tickFormat function, while toRelative and toAbsolute convert between the two time spaces.

Loading thumbnail…

Convex Hull

A set of one hundred normally distributed points is enclosed by their convex hull, a steel-blue polygon computed with Andrew’s monotone chain algorithm via the `d3-polygon` `hull` function. As the mouse moves, the first point is repositioned and the hull is recomputed in real time. The visualization is drawn on a Canvas using the standard `canvas` API, with the underlying point set generated by `d3-random.normal` from the `d3-random` library.

Loading thumbnail…

D3 Outline Logo

This example displays the D3 logo as a high-contrast outline, designed for the official D3 sticker. It renders two overlapping SVG `<use>` elements referencing a single `<path>` definition: the first applies a thick black stroke, while the second fills the shape with white to create the outlined effect. The logo is drawn entirely with hand-coded path data, and the page styles set a light background. No JavaScript or D3 APIs are used; the visualization relies solely on static SVG markup.

Loading thumbnail…

Percentage Change

This visualization tracks the hypothetical performance of an AAPL investment from January 2008, showing the percentage change in stock price over time on a log scale. The chart uses D3 v3 with an SVG line plot, where the y-axis displays relative price changes (e.g., +100%, -50%) via a custom tick formatter. A log scale accurately represents proportional gains and losses, while a secondary linear scale generates uniformly spaced axis ticks. The data comes from a TSV file containing daily closing prices.

Loading thumbnail…

Percentage Change II

This visualization depicts daily stock price changes as a percentage relative to the initial value, using a logarithmic y-axis to emphasize proportional shifts. A black line traces the full time series, while the area beneath it is filled with two distinct colors—green for periods above the baseline and purple for those below—achieved through clipping rectangles defined in SVG `<defs>`. The chart uses D3 v3’s `d3.svg.axis`, `d3.svg.line`, and `d3.svg.area` APIs, with data loaded via `d3.tsv` from a tab-separated file. Tick labels format the change as percentages, and the axis includes a subtle highlight for the zero-change tick.

Loading thumbnail…

Arc Padding II

Seven wedges of varying size form a donut chart, with each slice tinted by a semi-transparent fill and outlined in a thin stroke. The example highlights `d3.arc` with a `padAngle` of 0.03, spacing adjacent arcs apart. It draws using Canvas 2D via the arc’s `.context`, processing an array of Fibonacci numbers through `d3.pie`. The chart renders on a 960×500 canvas, with d3.v4 alpha providing the shape and layout helpers.

Loading thumbnail…

Arc Padding III

A radial visualization of seven wedges uses arc padding to create gaps between segments. The example applies a `d3.arc` generator with specified inner and outer radii and a `padAngle` of 0.03, rendered on a Canvas via the `context` parameter. Drawn with `d3.pie` and Fibonacci data, the semi-transparent fills and stroke outlines are applied through Canvas path operations on the computed arcs.

Loading thumbnail…

Arc Corners

This example visualizes the Fibonacci sequence [1, 1, 2, 3, 5, 8, 13] as a pie chart with rounded corners. Slices appear semi-transparent with distinct colors, separated by white strokes, and the outer edge of each slice has small circle outlines marking the corner positions. The visualization uses d3.arc with a cornerRadius setting to draw the rounded slice shapes, while d3.pie computes the angles. Rendering occurs on a Canvas element, with context settings like globalAlpha and stroke properties controlling appearance. The corner circles are drawn using a second d3.arc instance.

Loading thumbnail…

Arc Corners II

This example demonstrates the `cornerRadius` option for D3’s arc generator, which rounds the corners of pie-slice shapes. Seven arcs, sized by Fibonacci numbers, are drawn in translucent colors over a white stroke on a Canvas. The code uses `d3.pie()` to compute angles, `d3.arc()` with `cornerRadius` to generate paths, and the Canvas 2D API (`context.fill`, `stroke`) for rendering. A second pass overlays small circles at each corner to highlight the rounded geometry.

Loading thumbnail…

Waterfall

This waterfall chart shows changes in regional values, with each horizontal bar representing a region’s positive or negative contribution relative to a running cumulative total. The chart displays both the incremental change and the resulting cumulative value as labels on each bar. The visualization uses D3 v4 with SVG rendering, employing `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the categorical y-axis, and `d3.axisBottom` and `d3.axisLeft` for axes. Data is loaded from a TSV file and styled with CSS classes to distinguish positive and negative bars.

Loading thumbnail…

Color via Clipping

A line chart displays daily temperatures over several months, with the line split into two colors—red above a 55°F threshold and black below. The D3 v3 SVG implementation uses clipping paths (`clipPath` and `rect`) to divide the drawing area, applying each clip to a separate line path rendered from the TSV data via `d3.svg.line`. The `d3.time.scale` and `d3.svg.axis` handle temporal positioning and axes.

Loading thumbnail…

Bullet Charts

The bullet chart displays multiple quantitative measures—such as revenue, profit, and customer satisfaction—as compact horizontal bars, comparing each against qualitative ranges (shaded backgrounds) and marker lines. Built with d3.bullet, the visualization loads data from a JSON file and uses SVG for rendering. An update button triggers randomized transitions via `chart.duration` and `transition.attr` methods, animating the bars, markers, and ticks smoothly. The layout is based on Stephen Few’s design, with the `bullet.js` implementation handling scale, positioning, and tick formatting.

Loading thumbnail…

Voronoi Test (N=2)

The example shows a Voronoi diagram computed from two fixed points, with each cell and its corresponding point circle filled using the same color from `d3.scale.category10()`. Using d3.v3 and SVG, the code applies `d3.geom.voronoi` to generate the cell polygons, then renders them as `path` elements with a hover effect that increases fill opacity. The circles are positioned via `transform` translations, and both layers receive black strokes from the shared CSS rule.

Loading thumbnail…

Sankey Interpolation

A line chart plots five data points from a CSV file with a custom interpolation method. The `interpolateSankey` function creates a smooth, horizontal-tangent curve between points, mimicking a Sankey diagram's flow aesthetic, while the `d3.svg.line` and `d3.svg.axis` APIs render the SVG path and axes. Data is loaded via `d3.csv` and scaled with `d3.scale.linear`.

Loading thumbnail…

Creating Thumbnails with GraphicsMagick

This example demonstrates a batch image processing workflow using GraphicsMagick’s `gm convert` command. It shows how to automatically generate uniform thumbnails from a folder of PNG images, first cropping each source to a 1920x1000 region offset by (312, 510) pixels, then resizing the crop to 230x120 pixels. The shell script iterates over all PNG files in the `source` directory, processes each one, and saves the results to a `target` folder. The approach relies on Bash array expansion and the `gm` command-line tool’s `-crop` and `-resize` operators.

Loading thumbnail…

Gall–Peters

This example demonstrates the Gall–Peters projection, an equal-area map projection that preserves relative sizes of landmasses. The visualization displays a dark world map with country boundaries drawn in white, overlaid on a graticule grid. The map is rendered using SVG via the d3.geo.path and d3.geo.cylindricalEqualArea APIs, with the projection configured with a 45-degree parallel. Geographic data comes from a 50m-resolution world TopoJSON file, processed through the topojson library to extract land and boundary features.

Loading thumbnail…

Chained Transitions

This example shows a line chart of daily temperatures for New York and San Francisco, with radio buttons to switch between the two cities. When a button is clicked, the line and its label first animate to the new data values, and then the y-axis rescales to fit the new range. Built with d3.v3, the SVG chart uses d3.time.scale, d3.scale.linear, d3.svg.line, and d3.svg.axis, and chains two d3 transitions to sequence the line movement and axis update.

Loading thumbnail…

Update-Only Transition

This example demonstrates how to apply a transition exclusively to updating nodes in a D3.js visualization, leaving newly entering nodes unaffected. Initially, two circles appear at ordinal x-positions. After a delay, the data binding updates to shift one circle and add a new one. The transition—changing radius and fill color to orange—is defined before the `.enter().append()` call, so it only animates the existing circle, while the new circle appears green without transitioning. D3.v3’s selection and transition API, including `.transition().attr()`, `.style()`, and `.remove()`, coordinates the update, entry, and exit phases in SVG.

Loading thumbnail…

Zoom + Pan

This example demonstrates how to pan and zoom a chart using D3.js v3. It renders an SVG with axes and a filled background rectangle, using linear scales for the x- and y- dimensions. The `d3.behavior.zoom` API links the zoom behavior to the scales, allowing mouse wheel and drag interactions to rescale the axes. When zooming occurs, the axes are redrawn to reflect the updated scale ranges. The code sets a zoom scale extent between 1 and 32, and uses `d3.svg.axis` to produce the tick marks and grid lines.

Loading thumbnail…

Donut Multiples

Donut multiples display age-group population proportions for each U.S. state as small pie charts, with a legend mapping seven age brackets to distinct colors. The charts are generated from a CSV file parsed via d3.csv, with d3.scale.ordinal assigning colors, d3.layout.pie computing arc angles, and d3.svg.arc rendering the donut segments as SVG paths. Each state’s label appears centered within its donut, highlighting proportional differences across regions.

Loading thumbnail…

The Gist to Clone All Gists

This example demonstrates a practical workflow for backing up or synchronizing a GitHub user’s public gists. It first clones every gist from a specified GitHub account over SSH, using a paginated API fetch to retrieve the list of gists and the Node.js `https` module to authenticate via an OAuth token. It then shows a complementary bash script that iterates through local directories, committing any changes with an empty message and pushing them back to their remote origins. The visualization highlights the interplay between the GitHub REST API and command-line Git operations for batch repository management.

Loading thumbnail…

WebPlatform.org SVG Logo

This example recreates the WebPlatform.org logo as a scalable SVG graphic, combining geometric line shapes and text in the Bitter web font. The logo displays eight colored segments—orange, red, cyan, purple, and blended hues—formed by reusing two path definitions with transforms and clipping paths. The SVG markup uses inline styles, `<use>` elements, and `<clipPath>` to layer the shapes precisely. The result is a crisp, responsive logo suitable for Retina displays, print, and presentation slides, with selectable text and potential for animation or interactivity.

Loading thumbnail…

Voronoi tests

A test suite of 33 mini Voronoi diagrams rendered as SVGs checks edge cases for the `d3.geom.voronoi` API, focusing on degenerate configurations of one to four points. Each square plot shows clipped Voronoi cells and source points, demonstrating how the algorithm handles collinear points, duplicate ordering, and single-point inputs. The examples are generated with `d3.geom.voronoi()` with a clipping extent, using `d3.select` and inline SVG paths and circles. The source data is hardcoded in the script, comprising point arrays laid out in a grid of small graphs.

Loading thumbnail…

Interactive Gnomonic

An interactive map renders the world in a gnomonic projection, a perspective view where great circles appear as straight lines. Moving the mouse over the SVG scene reorients the projection’s center by rotating it based on the cursor’s position, updating the displayed landmasses. The visualization uses d3.geo.gnomonic and d3.geo.path to draw the topojson world-110m data, with d3.scale.linear mapping pixel coordinates to longitude and latitude for rotation.

Loading thumbnail…

Interactive Orthographic

This interactive orthographic map displays a world landmass that the viewer can rotate by moving the mouse. As the cursor moves, the projection’s center re-orients to the new longitude and latitude, redrawing the SVG paths in real time. Built with D3 v3, it uses `d3.geo.orthographic`, `d3.geo.path`, and a linear scale to map pixel coordinates to degrees. The geographic data comes from a TopoJSON file (`world-110m.json`) loaded via `d3.json`, with features extracted using `topojson.feature`.

Loading thumbnail…

Satellite Projection Test

A tilted perspective satellite projection of the eastern seaboard, viewed from above Newburg, N.Y., overlays a red 1° graticule on a scanned reference map. The code uses d3.geo.satellite() with custom distance, rotation, and tilt parameters, and manually offsets the projection to align the graticule with the map image. It renders the graticule as an SVG path via d3.geo.path(), using d3.geo.graticule() to define the extent. The background image is loaded from a local readme.png file, and the graticule is clipped to a small area around the reference coordinates.

Loading thumbnail…

Rotating Winkel Tripel

A rotating Winkel Tripel projection continuously spins the world map around its longitude axis. The example shows both landmasses and graticule lines drawn on a canvas, with the rotation driven by a timer that updates the projection’s rotation each frame. It uses D3 v3 with the `d3.geo.winkel3` projection, `d3.geo.path`, and Canvas 2D context, while loading world-110m TopoJSON data. The graticule and its outline are stroked separately to distinguish the grid from the map frame.

Loading thumbnail…

Interactive Stereographic

An interactive stereographic projection of world landmasses responds to mouse movement by recentering the map on the cursor’s geographic coordinates. The visualization uses D3 v3’s `d3.geo.stereographic` projection with a clip angle of 125 degrees, updating the path geometry via `projection.rotate` and `d3.geo.path` on every mousemove. It renders territory from a TopoJSON world-110m dataset, loaded via `d3.json`, as SVG paths that are continuously redrawn to reflect the shifting pole of projection.

Loading thumbnail…

Sticky Force Layout

D3’s force layout runs with 13 nodes and 18 links from `graph.json`, rendered as SVG circles and lines. Dragging a node during the layout’s drag behavior sets its `fixed` property to true on `dragstart`, preventing the simulation from moving it afterward; double-clicking clears that flag. The force layout automatically resumes on `dragmove`, so the repositioned node continues to affect neighbors. Fixed nodes turn red, and the code uses `d3.layout.force`, the drag behavior, and explicit `tick` handlers to update positions.

Loading thumbnail…

Rotating Equirectangular

This example displays the world map using an equirectangular projection that continuously rotates horizontally. The visualization is rendered on an HTML5 Canvas element using the D3.js v3 and TopoJSON libraries, with a timer-driven animation. The projection’s rotation angle updates over time based on elapsed milliseconds, clearing and redrawing the filled land polygons each frame. World geometry comes from a remote GeoJSON file of 110-meter resolution, processed with `topojson.feature` and drawn via `d3.geo.path` with Canvas context.

Loading thumbnail…

Rotating Orthographic

An orthographic projection of the world rotates continuously, showing a dark outline of the continents against a circular boundary. The rotation is driven by a timer that recalculates the projection’s center based on elapsed time and a fixed velocity. The example uses `d3.geo.orthographic()`, `d3.geo.path()`, and `topojson.feature()` to render the land from a `world-110m.json` dataset as SVG. The code also applies a 90-degree clip angle and updates the path’s `d` attribute on each tick, with styling from a CSS circle element.

Loading thumbnail…

Sortable Table with Bars

This example displays demographic data for U.S. states as a sortable HTML table, where each age-bracket column is rendered as a horizontal bar chart. Clicking a column header re-sorts the table rows by the proportion of the population in that age range, with bar lengths proportional to that share. The visualization uses D3 v3 to load the CSV data with `d3.csv`, then builds the table structure with `d3.select`, `selectAll`, and `.data`, appending SVG elements to each cell. The bars are drawn as `rect` elements whose widths are calculated from the percentage values, with hover styling applied via CSS.

Loading thumbnail…

Map Projections

This interactive visualization compares 41 map projections across four distortion metrics—accuracy at 40°, scale, areal, and angular distortion—using parallel coordinates. Each projection is a polyline crossing four vertical axes, with lower values indicating better performance. Users hover over any line or axis label to highlight that projection and dim all others. The data, transcribed from Natural Earth Projection, is rendered as SVG using d3.v3, with axes and chart elements built via d3.svg.axis and d3.svg.line, and loaded from a TSV file.

Loading thumbnail…

Winkel Tripel Graticule

This example displays a global graticule—a mesh of latitude and longitude lines—projected using the Winkel Tripel projection, with a thicker outline emphasizing the map’s outer boundary. The visualization uses D3 v3’s `d3.geo.winkel3()` projection, `d3.geo.path()` to render the projected geometry, and `d3.geo.graticule()` to generate the grid. The graticule lines and outline are drawn as SVG paths, with the projection scaled and centered to fit a 960×500 canvas.

Loading thumbnail…

Aitoff Graticule

This visualization displays a global graticule—the network of latitude and longitude lines—projected using the Aitoff map projection. The black graticule lines are drawn as SVG paths, with a thicker outline marking the projection’s outer boundary. The code uses the D3.js v3 library, specifically `d3.geo.aitoff()`, `d3.geo.path()`, and `d3.geo.graticule()`, to generate the geographic coordinates and render them as vector graphics.

Loading thumbnail…

Rounded Rectangle

This example demonstrates how to draw a rectangle with rounded corners on only its right side using an SVG path. The code defines a function, `rightRoundedRect`, that constructs the necessary path data using absolute and relative commands, including an arc for the rounded corners. It uses D3.js v3 to append the path to an SVG container and centers it within the viewport. The visual result is a single gray shape with a black stroke, illustrating a technique commonly applied in custom chart annotations and UI elements.

Loading thumbnail…

Resizable Force Layout

A force-directed graph displays a network of nodes and links that automatically reflows when the browser window changes size. The visualization uses D3 v3's `d3.layout.force` to simulate physical forces on the nodes, while a `resize` event handler updates the SVG dimensions and calls `force.size` and `force.resume` to re-optimize the layout. Nodes and links are rendered as SVG circles and lines, with the graph structure loaded from a local `graph.json` file—a collection of 250 interconnected nodes with circular link patterns.

Loading thumbnail…

Force-Directed Graph

A force-directed graph displays 13 nodes and 18 links, using a physical simulation to position the circles and lines in an organic, interconnected layout. The D3 v3 code constructs an SVG scene with `d3.layout.force`, applying a negative charge to repel nodes and a tick handler to update the `x`, `y`, `cx`, and `cy` attributes of the line and circle elements. The graph’s structure is defined by a hard-coded nodes array and links array, representing an abstract network for the visualization.

Loading thumbnail…

Letter Frequency

A bar chart shows the relative frequency of each letter in English text, from A to Z, with the tallest bar representing E. The chart uses an ordinal scale with `rangeRoundBands` to position bars, applying a 10% inner padding and a 20% outer padding. Frequencies are loaded from a tab-separated file and rendered as SVG rectangles via D3 v3, with axes drawn using `d3.svg.axis`.

Loading thumbnail…

Line Interpolation

This example demonstrates a custom line interpolation method in D3 v3 that connects data points with elliptical arcs instead of straight line segments. The visualization plots 20 generated data points on a scatterplot with axes, drawing a smooth arc between each consecutive point using SVG path commands. The custom interpolator is implemented by overriding d3.svg.line’s interpolate function to join coordinates with the "A 1,1 0 0 1" arc segment syntax, while the line’s x and y accessors map the data through linear scales. Circles mark each original data point, rendered with SVG.

Loading thumbnail…

Monotone Interpolation

This example demonstrates monotone interpolation, a curve-fitting method that produces a smooth line through a series of points without overshooting the local data range. Six yearly data points from 2001 to 2006 are plotted as white circles with steelblue outlines on a chart with time-scaled X and linear Y axes. The code uses D3 v3’s `d3.svg.line` with the `"monotone"` interpolator to generate the SVG path, while `d3.time.scale` and `d3.scale.linear` handle the axes. The chart is rendered as an SVG element with axis and line classes styled via CSS.

Loading thumbnail…

d3.time.format localization

A clock displays the current time in Russian, updating every second. The example demonstrates locale-specific formatting in d3.time.format, using the `%c` directive to render a localized date and time string. The page uses d3.v2.min.js with the `d3.select` API to update an HTML `h1` element. The D3 library is built with the `ru_RU` locale, which changes the output of `d3.time.format`. An animation, driven by `setInterval`, refreshes the displayed time at a one-second interval.

Loading thumbnail…

d3.time.scale nice

This example demonstrates D3’s automatic handling of time-based axis tick spacing using the `d3.time.scale` constructor. A blank SVG canvas with 100-pixel margins displays an empty bottom axis, whose tick intervals are computed via the `.nice(d3.time.week)` method to create evenly spaced, clean week boundaries. The code explicitly sets a domain of two `new Date` instances (both the current time), then maps that domain to a 760-pixel range. Rendering relies on `d3.svg.axis` for the axis and ticks, while the SVG is assembled via chained `d3.select("body").append("svg")` commands.

Loading thumbnail…

d3.tsv

This example demonstrates loading and plotting tab-separated values from an external TSV file using the D3.js library. The chart displays five data points as circles on a simple scatterplot, with linear scales mapping x and y coordinates to SVG positions. The code uses the `d3.tsv` method to fetch and parse the file, then converts string values to numbers with the unary plus operator. Axes are rendered via `d3.svg.axis`, and the SVG circles are appended with the `.point` class, showing basic data parsing and visualization in a minimal setup.

Loading thumbnail…

Custom Tweens

A single cross-shaped symbol, drawn with the SVG path API via `d3.svg.symbol`, rotates continuously in the center of the frame. The example demonstrates how a custom transition interpolator overrides default behavior: `transition.attrTween` combines `d3.interpolateString` to animate the transform attribute from "rotate(0)" to "rotate(720)", enabling a full double spin that the standard numeric interpolation would ignore. Each ten-second transition loops indefinitely through the `each` event, showcasing attribute tweening in a minimal SVG animation.

Loading thumbnail…

Multi-Value Maps

This example demonstrates D3’s multi-value map syntax, which lets developers set multiple attributes or styles in a single call using an object literal. The visualization shows a scattered arrangement of ten semi-transparent circles placed at random positions and sizes on an SVG canvas, alongside a centered text label. The code uses `selection.attr` and `selection.style` with map arguments, and defines attribute values as constants or functions of data. It relies on d3.v3 and renders entirely through SVG elements.

Loading thumbnail…

Rainbows are Harmful

This example uses a rainbow color scale to recolor an existing image, demonstrating how the popular hue-cycling ramp distorts perceptual ordering. It loads a bitmap via an HTML `Image` object, draws it to a Canvas, and then reads its pixel data with `getImageData`. The code remaps each pixel’s red channel using `d3.scale.linear` with an HSL interpolation from 0 to 360 degrees, then writes the new RGB values back with `putImageData`. The result visibly replaces the original colors with a smooth but misleading spectrum, illustrating the scale’s perceptual non-uniformity.

Loading thumbnail…

Heightmap

A global 8-bit heightmap from NASA's Shuttle Radar Topography Mission is remapped with a diverging HCL color scale. Elevation values, read via the Canvas `getImageData` and `putImageData` APIs, are rescaled so that land elevation quantiles at the 5th, 50th, and 95th percentiles map to red, yellow, and blue, respectively. The example uses a `d3.scale.linear` with `d3.interpolateHcl` to maximize contrast, drawing the result to a canvas element.

Loading thumbnail…

Ordinal Axis

This example demonstrates how an ordinal axis displays categorical data along the x-axis, using fruit names as evenly spaced point labels. A single SVG graphic renders the axis with tick marks and text, created through D3.js v3’s `d3.scale.ordinal()` with `rangePoints()` and the `d3.svg.axis()` component. The code configures a bottom-oriented axis within a fixed margin and canvas size, styling labels via CSS.

Loading thumbnail…

Collision Detection (Canvas)

This example demonstrates a force-directed layout with collision detection among 200 nodes. A fixed root node acts as a repulsive force, while the user can move it by mousing over the canvas, causing nearby nodes to repel away. The visualization uses the d3.layout.force simulation library, with a d3.geom.quadtree for efficient spatial collision checks. Rendering is done on an HTML5 Canvas via the getContext("2d") API, drawing all nodes as steelblue circles on each tick. The code is adapted from a talk on force layouts, showing real-time interaction and physics-based movement.

Loading thumbnail…

Heatmap (2D Histogram, CSV)

This heatmap displays the frequency of values across dates and time buckets, with color intensity representing the count. The visualization uses a 2D histogram where each rectangle's fill color maps to the count value, from white to steelblue. Built with D3 v3, the code loads CSV data via `d3.csv`, parses dates with `d3.time.format`, and renders the tiles as SVG rectangles. Axes and a color legend are generated using `d3.svg.axis` and the linear scale functions.

Loading thumbnail…

Tree Layout Orientations

Four small multiples show the same minimal tree rendered in four orientations: top-to-bottom, right-to-left, bottom-to-top, and left-to-right. Each panel uses `d3.layout.tree` to compute node positions, then draws curved links with `d3.svg.diagonal` and circles for nodes. The orientation is applied by projecting the layout coordinates through per-panel accessor functions that swap or invert x and y values. The tree data comes from a small `graph.json` file with two nested children.

Loading thumbnail…

Scatterplot with Multiple Series

This scatterplot displays two series, y1 and y2, as colored dots plotted against a shared x-axis, with each series distinguished by a different fill color from a categorical scale. The data is loaded from a CSV file using d3.csv, and the script dynamically extracts series names by filtering the CSV columns. Scales are set with d3.scale.linear, and axes are rendered via d3.svg.axis. Points are drawn as SVG circles, grouped into series containers, with coordinates mapped through the x and y scales. The visualization relies on D3 v3 and SVG rendering.

Loading thumbnail…

Force Layout with Canvas

This example shows a force-directed graph rendered on a canvas element instead of in SVG, using d3.layout.force to compute the layout and the Canvas 2D API’s `getContext` and `arc` for drawing. The graph loads node and link data from a local `graph.json` file, with nodes drawn as steelblue circles and links as gray lines. The simulation runs continuously, updating the canvas on each tick event by clearing the frame and redrawing the nodes and links. Unlike the SVG version, nodes are not draggable, but the canvas approach offers modest performance improvements.

Loading thumbnail…

Transform Interpolation

Two D3 v3 SVG animations demonstrate alternative interpolation of CSS transforms. Left, `d3.interpolateTransform` decomposes transforms canonically, so a transition from "rotate(180)translate(0,-100)" to "rotate(360)translate(0,-100)" animates via a translate-rotate path. Right, a `d3.tween` using `d3.interpolateString` interpolates the raw transform strings, rotating angle only. Each animation cycles with `transition.attrTween` and a recursive `each("end")` handler, with a circle and label centered in each group.

Loading thumbnail…

Animated Clipped textPath

This example animates an SVG path while simultaneously clipping curved text against it, so the text appears to draw itself along the arc. A blue arc path transitions over five seconds using `transition.attrTween` with a `d3.svg.arc` generator, while a `<textPath>` references a static hidden path and a `clipPath` uses the animated path via a `<use>` element. The code relies on D3 v3, SVG, and a 960×500 viewport, with the text “Hello, curved textPath!” clipped to the moving path’s shape.

Loading thumbnail…

Animated textPath

This example animates a blue arc expanding while the text “Hello, curved textPath!” follows its path. The code uses d3.svg.arc with interpolated angles and a transition.attrTween on the path’s “d” attribute. Two WebKit workarounds are shown: selecting textPath by class and repeatedly resetting its xlink:href attribute to force redraw. The SVG includes a path and textPath element, with the text appearing scrunched at the start due to the technique’s limitations.

Loading thumbnail…

Mirrored Easing

A click on the title triggers a one-second animated transition of its background color from white to red and back to white. The example shows how to construct a mirrored easing function by composing an existing cubic-in-out easing with itself, so that the transition reaches its destination at the halfway point and then returns to its origin. The `mirror` function accepts either a function or a named easing string by invoking `d3.ease`, and the animation is driven through the `transition` API’s `duration` and `ease` methods on a D3 selection.

Loading thumbnail…

Twitter SVG Logo

This example renders the Twitter logo as a single SVG path built entirely from elliptical arc segments, rather than the more common cubic Bézier curves. The path data specifies each curve using SVG’s `A` command with explicit radii and rotation. The author derived the arc geometry from circle-circle intersection math, referencing Upperdog Interactive’s CSS-based logo as a visual guide. The result is a clean, mathematically precise vector approximation of the logo, shown in a light blue fill on a plain background.

Loading thumbnail…

Cross-linked Mouseover

This example shows an interactive tree diagram where hovering over a leaf node highlights all other nodes sharing the same `type` field—either “wild” or “domesticated”—by turning them red. The implementation uses d3.v3 with the `d3.layout.tree` and `d3.svg.diagonal` for layout and links, and SVG rendering for nodes and paths. Each node’s G element receives a computed class attribute based on its type, and mouseover/mouseout handlers call a `highlight` function that selects nodes by class and toggles an `active` class to override the fill color.

Loading thumbnail…

Shape Tweening

A loop animates the state of California morphing between its natural geographic shape and a circle. The tweening moves vertices along straight-line paths in a projected 2D plane, with the circle generated by redistributing points based on the polygon's perimeter distances. The code uses the d3.geo Albers projection, d3.geom.polygon for area and centroid calculations, and SVG path transitions with a 5000ms duration. The state boundary comes from the included california.json GeoJSON file.

Loading thumbnail…

Icosahedron

An animated icosahedron rotates beneath a fixed circular clipping boundary, revealing its wireframe edges in a spherical orthographic projection. The shape is generated from a custom D3 geodesic module that subdivides the twenty triangular faces of an icosahedron and projects their vertices onto a sphere. D3’s `d3.geo.orthographic` projection and `d3.geo.path` render the multipolygon geometry as SVG paths, with a `d3.timer` updating the projection’s rotation over time.

Loading thumbnail…

Geodesic Grid

A rotating geodesic polyhedron wireframe displays a shimmering, three-dimensional grid atop a fixed circular frame. The visualization uses d3.geodesic to generate a subdivided icosahedron’s edges, rendered as an animated SVG path via d3.geo.path with an orthographic projection. The d3.timer continuously updates the projection’s rotate parameters, creating smooth, continuous motion.

Loading thumbnail…

Icosahedron

This example depicts a rotating icosahedron projected from a sphere using an orthographic projection. The solid’s faces, edges, and vertices are drawn as SVG paths, with faces filled in light gray, edges semi-transparent black, and points as black dots with white strokes. The geometric data is generated procedurally in JavaScript, calculating vertex positions from spherical coordinates. A d3.timer continuously updates the projection’s rotation along two axes, and the path generator re-renders each SVG element on every tick, creating a smooth animated spin using D3 v3’s geo and SVG utilities.

Loading thumbnail…

Stacked Radial Area

Three radial layers are drawn as stacked areas in polar coordinates, each representing a categorical series (a, b, c) across seven time steps. The chart reads as a circular time series with a Sunday axis at top. It uses d3.layout.stack, d3.svg.area.radial, and a cardinal-closed interpolator; the axes are drawn with d3.svg.axis. Data comes from a CSV loaded with d3.csv. The code also outlines limitations, such as the continuity across the Sunday boundary and non-radial interpolation.

Loading thumbnail…

Duration Histogram

This histogram displays the distribution of 1,000 randomly generated duration values drawn from a log-normal distribution with a median of 30 minutes, binned into 20 uniform intervals. The bars show the count of durations falling within each time range, with the x-axis using a linear scale and custom tick labels formatted as times via `d3.time.format`. Built with D3 v3, the chart uses `d3.layout.histogram` to bin the data, `d3.svg.axis` for the axes, and renders as SVG with `shape-rendering: crispEdges` for sharp bar edges.

Loading thumbnail…

Molecule

A force-directed layout draws a molecular graph, with atoms as colored, size-scaled circles and bonds as connecting lines. Each node is labeled with its chemical symbol from the data file, and bonds are drawn thick or as double lines based on the bond value. The visualization uses `d3.layout.force` for simulation and SVG for rendering, reading atom and bond data from a JSON file. The code offsets double bonds by overlaying a white separator line on the thicker stroke.

Loading thumbnail…

UT1 - UTC

This visualization shows the deviation between UT1 and UTC over time, with a line chart plotting daily offsets from 1973 onward. A mousemove feature reveals a crosshair and circle at the nearest data point, and duplicated x-axis labels are stroked in white for readability. Built with D3 v3, it uses d3.time.scale, d3.svg.axis, and d3.svg.line to render the SVG, while the data comes from a JSON array of precision numeric offsets.

Loading thumbnail…

Lab and HCL Color Spaces

Four horizontal gradients compare color interpolation across RGB, HSL, Lab, and HCL color spaces. Each row renders a 960-pixel-wide linear scale transitioning from pale yellow to dark blue, using `d3.scale.linear` with the respective `d3.interpolateRgb`, `d3.interpolateHsl`, `d3.interpolateLab`, or `d3.interpolateHcl` method. The code draws each gradient into a 1-pixel-high Canvas via `putImageData`, then stretches it vertically for display. This juxtaposition reveals how perceptually uniform Lab and HCL spaces avoid the muddy midtones visible in RGB and HSL interpolation.

Loading thumbnail…

Manual Axis Interpolation

This example demonstrates a custom axis transition in D3, animating a slow zoom from a three-year time span down to a single day. The visualization uses `d3.time.scale.utc` and `d3.svg.axis` to render the x-axis, while a manual `tween` callback redraws the axis synchronously for each animation frame, unlike the automatic interpolation typically used. The transition runs over 8.5 seconds, with the code defining two date domains and interpolating between them via `d3.interpolate`. The axis is redrawn continuously within an SVG container, showing intermediate tick labels as the scale changes.

Loading thumbnail…

Pedigree Tree

Pedigree Tree shows family lineage as a horizontal dendrogram where parent nodes branch upward into their ancestors, with each person labeled by name, lifespan, and location. The layout uses d3.layout.tree with a custom separation function that spaces parent sets twice as far apart as individual parents. Leaf nodes extend with elbow paths beyond the main diagram to accommodate their labels. The SVG rendering loads hierarchical JSON data and displays it using D3 v3’s tree layout, with crisp-edged link paths and multiple text elements per node.

Loading thumbnail…

Rectilinear Grid

A mouse-driven rectilinear distortion grid demonstrates a fisheye effect on a Cartesian coordinate system. D3 v3 and SVG render vertical and horizontal paths spaced every 20 pixels, with finer 6-pixel segments preserving curve continuity. As the mouse moves, `d3.fisheye` recalculates the focal point, and the `line` generator maps each point through the fisheye function to update path attributes, creating a localized magnification that bends the grid around the cursor.

Loading thumbnail…

Fisheye Grid

A collection of SVG grid lines demonstrates fisheye distortion, where lines warp and magnify around a focal point that follows the mouse cursor. Heavy grid lines from d3.range for x- and y-axis positions are redrawn with path elements, and a d3.fisheye filter transforms each point on the lighter continuous lines based on its distance to the moving center. The example shows raw SVG paths updating dynamically with mouse movement, emphasizing the distortion effect.

Loading thumbnail…

Tree Layout from CSV

A tree layout visualization reads hierarchical relationships from a CSV file with source-target pairs, such as A1 to A2 and A2 to A3. Using d3.v3, it dynamically builds nodes and links from the data, rendering a tidy tree where parent and child relationships are clearly shown through straight lines and small circles. The example specifically uses d3.layout.tree for node positioning and d3.svg.diagonal for link paths, with a white-stroked node style and black link lines. The SVG output displays a simple three-node chain, illustrating how a flat two-column CSV can be transformed into a structured tree diagram.

Loading thumbnail…

Force Layout from CSV

This example shows a small force-directed network graph created from a CSV file, with circles representing nodes and lines representing links. It reads the edge list `graph.csv` and builds a node map from the source and target columns. The layout uses the D3 v3 `d3.layout.force` module, rendering with SVG elements. The code loads the CSV with `d3.csv`, then starts the simulation; on each tick, it updates the `x` and `y` coordinates of the circles and lines. Node dragging is enabled via `force.drag`.

Loading thumbnail…

W3C Validation Errors

This example shows the most common W3C validation errors, ranked by frequency, using a horizontal bar chart. A gray bar represents each error’s count, and hovering highlights it in steelblue while the error message is displayed to its left. The data comes from a JSON file, loaded with `d3.json`, and the chart is built with D3 v3’s ordinal scale and SVG. The bars are drawn as `rect` elements, with axes using `d3.svg.axis` and a linear scale for the value domain.

Loading thumbnail…

Azimuthal (Orthographic) Projection

This visualization displays world country boundaries using an azimuthal orthographic projection, creating a globe-like view with a 90-degree clip angle. The map renders as SVG paths with gray fills and white strokes. The code loads geographic data from countries.json and projects it using d3.geo.orthographic() and d3.geo.path() from D3 v3.

Loading thumbnail…

Albers Projection

This example displays a map of the United States using the Albers projection, with each state drawn as a filled gray polygon with white outlines. The visualization loads GeoJSON data from a remote `us.json` file via `d3.json`, which is then converted into SVG paths using `topojson.feature` and `d3.geo.path()`. The map is rendered as a single SVG path element within a 960×500 canvas, demonstrating a basic static choropleth without additional interactivity or styling layers.

Loading thumbnail…

Albers Projection

This example displays a map of the United States using the Albers projection, a conic equal-area projection commonly used for national-scale choropleths. It renders the geographic boundaries as gray SVG paths with white strokes, loaded from a local `states.json` GeoJSON file. The code uses the D3 v3 library, specifically the `d3.geo.albers()` projection and `d3.geo.path()` to project and draw the feature collection.

Loading thumbnail…

Simplifying and cleaning Shapefiles.

This example demonstrates how to simplify and clean geographic data by rounding coordinates within a TopoJSON file. It uses D3’s `d3.round` function to reduce each point’s precision to two decimal places, then outputs the cleaned result as a JSON string. The code maps over the nested structure of polygons, line strings, and points, applying the rounding operation at each coordinate level. The visualization gallery shows the transformed data as plain text, highlighting the coordinate simplification process. The source is a GeoJSON-derived TopoJSON file, processed entirely in the browser with D3 v3.

Loading thumbnail…

Force Layout & Matrix Market Format

A force-directed network diagram visualizes the structural graph of the HB/can_161 sparse matrix from the University of Florida Sparse Matrix Collection. The D3.js v3 code uses `d3.layout.force` to simulate node physics and renders circles and lines as SVG elements. Data is parsed from Matrix Market format by filtering comment lines and constructing node and link objects. The layout responds to drag interactions via `force.drag`, updating node positions and link coordinates on each tick.

Loading thumbnail…

Force-Directed Graph with Mouseover

A force-directed graph displays patent litigation and licensing relationships among technology companies, using D3.js v3’s `d3.layout.force` to position nodes and links. Dragging nodes is enabled via `force.drag`, while mouseover and mouseout events trigger a 750-millisecond transition that grows and shrinks each node’s circle radius from 8 to 16 pixels. The SVG rendering updates positions on each tick, with labels next to each circle and link lines drawn between sources and targets. Data comes from a hardcoded array of link objects naming companies like Microsoft, Apple, and Samsung.

Loading thumbnail…

SVG Swarm

Five hundred steel-blue circles drift in a simulated swarm, their velocities and positions updated each frame with a simple particle model. D3.js v3 binds the data to SVG circle elements, translating each via the `transform` attribute and scaling its radius based on velocity. A `d3.timer` callback drives the animation, while a live FPS counter in the page header reports the update rate. The visualization compares SVG rendering performance against a canvas-based alternative, using D3's linear scales to map the particle coordinates to pixel space.

Loading thumbnail…

Canvas Swarm

A swarm of 500 points drifts and bounces across a canvas, each point’s velocity and position evolving through a simple physics model with random impulses and damping. The animation runs at a target frame rate, with a live FPS counter displayed. The visualization uses D3’s `d3.range`, `d3.scale.linear`, and `d3.timer` APIs, and renders via Canvas `getContext("2d")`, drawing each point as an arc with `beginPath` and `fill`/`stroke`. The data is procedurally generated—no external dataset—and the canvas is cleared each frame with `clearRect`.

Loading thumbnail…

Text Along a Path

This example shows how to place text along a curved path using SVG’s `textPath` element. A visible gray curve is defined in the SVG `<defs>` section, and the sentence "We go up, then we go down, then up again." follows that path via an `xlink:href` reference. The code uses D3 v3 to build the SVG structure, appending a `<path>`, a `<text>` with a `<textPath>`, and a `<use>` element to display the curve.

Loading thumbnail…

"Elbow" Dendrogram

This dendrogram visualizes the hierarchical structure of the “flare” dataset, displaying its nested categories and leaves as a vertical tree. The layout uses an “elbow” connecting style, drawing orthogonal paths between parent and child nodes. The example is implemented with the D3.js v3 library, employing `d3.layout.cluster` for the tree layout. Nodes are rendered as circles with text labels, and the visualization is drawn using SVG paths and shapes. The source data is loaded from a local `readme.json` file.

Loading thumbnail…

click-to-zoom via transform

Clicking a US state zooms to that state via a SVG transform transition, while clicking the background resets the view. The map renders TopoJSON data through `d3.geo.albersUsa` projection and `d3.geo.path`, with state borders drawn from a topology mesh. An orange highlight marks the active state, and stroke width inversely scales with zoom. The interaction uses a `g.transition()` to animate `translate` and `scale` attributes over 750 milliseconds.

Loading thumbnail…

click-to-center via transform

Clicking a U.S. state smoothly shifts the entire map to center that state, using a transform transition on a group element. The map renders TopoJSON state boundaries via `d3.geo.albersUsa` and `d3.geo.path`, while a click handler computes each state's centroid with `path.centroid` and animates the group's `translate` attribute over 750 milliseconds. Clicking the background or the already-centered state re-centers the view.

Loading thumbnail…

click-to-center

Clicking any US state shifts the Albers USA projection so that state becomes the center of the map, with a smooth animated transition re-drawing all state boundaries and borders. The visualization uses D3 v3’s `d3.geo.path` with a `d3.geo.albersUsa` projection, TopoJSON for state geometry, and SVG paths with click handlers. A background click re-centers the map, while clicking the already-centered state also returns to the default view.

Loading thumbnail…

mousewheel-zoom + click-to-center

This example demonstrates interactive zooming and panning on a map of the United States using mousewheel events and click-to-center functionality. The visualization uses an Albers USA projection rendered as SVG paths, with state boundaries drawn from TopoJSON data loaded via `d3.json`. D3’s `d3.behavior.zoom` handles wheel zoom and drag panning, while a click on any state triggers a smooth 700-millisecond transition that recenters the projection on that state’s centroid. The `d3.geo.path` generator updates the path data during both zooming and click-driven transitions, and the code explicitly manages the projection’s translate and scale properties to synchronize with the zoom behavior.

Loading thumbnail…

Hive Plot (Areas)

This example demonstrates a hive plot using the d3.hive.link API extension, which positions nodes on multiple radial axes and connects them with curved bezier paths. The visualization shows a synthetic network of 12 links between three axes, with each link colored by its group membership. The code manually defines the link data and uses d3.scale.ordinal for axis angles, d3.scale.linear for radial distances, and d3.scale.category20c for colors. The SVG diagram is drawn with the D3 v3 library, and axes are rendered as concentric lines with fill and stroke styles.

Loading thumbnail…

Hive Plot (Links)

This hive plot visualization uses three radial axes to arrange six nodes, with curved links connecting them based on source and target relationships. The D3.js code builds the SVG scene using the `d3.hive.link()` API to generate cubic Bézier curves between axis points, while `d3.scale.ordinal` maps angular positions and `d3.scale.linear` maps radii. Nodes are colored by their axis index via `d3.scale.category10`, and the static example uses hardcoded data arrays.

Loading thumbnail…

Histogram Chart

This histogram chart visualizes the Irwin–Hall distribution by generating 10,000 random samples and grouping them into bins. Built with D3 v3, it employs the reusable chart module pattern, where a `histogramChart()` function configures scales, axes, and bars. The chart uses `d3.layout.histogram` for binning, an ordinal x-scale for bar positions, and an SVG rendering with a bottom axis. The code also demonstrates the use of `d3.rebind` to expose histogram properties and the x-axis tick format, while the parent script generates sample data via `Math.random`.

Loading thumbnail…

Month Axis

A month axis displays a horizontal time scale spanning the year 2012, with a tick for each month. The code uses `d3.time.scale` to map a date domain to pixel coordinates, `d3.svg.axis` for the bottom-oriented axis, `d3.time.months` for tick spacing, and `d3.time.format` to render month abbreviations as labels. The SVG output places tick text to the right and below each mark.

Loading thumbnail…

Automatic Text Sizing

A circle-packing diagram displays the hierarchical Flare dataset, sizing each bubble by leaf-node value and placing every label inside its circle. The visualization uses the d3.layout.pack layout to compute circle positions and radii, then renders SVG circles and text. Each label’s font size is calculated dynamically using `getComputedTextLength` and the circle’s radius, shrinking text automatically to fit within the available space. Hovering highlights a node’s circle in orange.

Loading thumbnail…

Multi-Foci Force Layout

A multi-foci force layout arranges 200 nodes into 10 distinct color-coded clusters, each pulled toward its own focal point along the horizontal axis. The visualization uses a custom gravity function to move nodes toward cluster centers and a collision detection routine built on a quadtree to prevent overlapping circles. Rendered as SVG with D3 v3, the code employs `d3.layout.force`, `d3.scale.ordinal` for focal positions, and `d3.geom.quadtree` for efficient proximity checks, with node radii derived from a logarithmic distribution.

Loading thumbnail…

Force Layout Multiples (Independent)

Ten independent force-layout multiples run side by side, each containing a cluster of circles sized by a square-root scale and colored by category. The code generates 200 random nodes distributed among 10 groups using d3.layout.force, with a custom collide function that leverages d3.geom.quadtree to resolve overlaps. Each cluster is rendered as an SVG group translated along a horizontal ordinal scale, with drag support and tick updates shown in d3.v3.

Loading thumbnail…

Input Value Interpolation

This example demonstrates D3's ability to animate an HTML input element’s value through a custom transition. A single range slider animates from 0 to 255 over 7.5 seconds after a 1.5-second delay. The visualization uses a custom tween function, `valueTween`, which relies on `d3.interpolateNumber` to smoothly interpolate the slider’s `value` property. The transition is applied via D3’s `.tween` method, and the slider itself is selected using `d3.select`. The code shows how D3 can manipulate standard HTML form elements, not just SVG.

Loading thumbnail…

Clustered Force Layout II

Ten clusters of colored circles drift and separate on a dark background, with each cluster gathering around its largest member while circles avoid overlapping. The visualization uses d3.layout.force with custom cluster and collide forces, leveraging d3.geom.quadtree for collision detection and d3.scale.category10 for colors. Data is procedurally generated in the browser, with 200 circles of varying radii across 10 groups, rendered as SVG elements.

Loading thumbnail…

Clustered Force Layout I

This clustered force layout visualizes 200 circles organized into 10 color-coded clusters, with each circle’s size varying by cluster. The d3.v3 force layout uses two custom forces: a cluster force that pulls circles toward the largest node of the same color, and a collide force using d3.geom.quadtree to prevent overlaps. Circle separation differs between same-color and different-color pairs. The SVG rendering updates circle positions on each tick event, with colors assigned via d3.scale.category10.

Loading thumbnail…

Point-Along-Path Interpolation

A steelblue circle travels indefinitely along a closed Catmull–Rom spline path, interpolating its position over ten seconds per loop. Seven fixed white-ringed points mark the path’s control vertices. The SVG animation uses D3’s `transition.attrTween` with the path’s `getTotalLength` and `getPointAtLength` methods to compute each frame’s coordinates, while `d3.svg.line().tension(0)` defines the curve geometry.

Loading thumbnail…

Order

This example demonstrates how a user can reorder a list of five items (A–E) through clicks. The initial list is rendered as an HTML `<ul>` using D3’s `d3.select` and `selectAll` chains, with each item bound to the first row of a hardcoded 5×5 string array. Clicking an item triggers the `reorder` function, which calls `.data()` on the existing `li` nodes with that click’s corresponding row, then applies D3’s `.order()` to smoothly animate the reordered elements.

Loading thumbnail…

Smooth Scrolling

This example demonstrates a playful, self-scrolling page where a series of "Whee!" headings cascade down the viewport, driven entirely by a D3.js transition. The page uses a custom tween, defined via `d3.transition().tween`, to interpolate the window’s vertical scroll offset from its starting position to the bottom of the document. Specifically, `scrollTween` creates an interpolator with `d3.interpolateNumber` and applies it inside the tween’s returned function, calling `scrollTo` on each tick. The animation begins after a delay, smoothly propelling the reader through the page’s content over 7.5 seconds.

Loading thumbnail…

Autofocus

This example demonstrates how keyboard input can trigger a data visualization update on a web page. It uses a simple input field and listens for keydown events on the document window to display the numeric key code of the pressed key. The code relies on D3 version 3’s `d3.select` and `d3.event` APIs to manage element selection and event handling, and it updates the input element’s value property with the key code. The interaction is minimal, focusing on immediate visual feedback without additional data processing or rendering.

Loading thumbnail…

Irregular Histogram

This irregular histogram visualizes income distribution by adjusting the height of each bar to represent the quotient of people per income unit, a technique aligned with standard histogram normalization. The visualization loads data from an `income.csv` file and renders in SVG using the D3.js v3 library, employing `d3.scale.linear` for both axes and `d3.svg.axis` for tick marks. Each bin’s width is derived from the varying income ranges (e.g., 8.8, 30, 49.9), and the first bin is discarded to anchor the scale. The chart uses a steelblue fill for the rect elements and displays clear axis labels.

Loading thumbnail…

Irregular Histogram (Lollipop)

This example shows the income distribution of a population using an irregular histogram rendered as vertical lollipop sticks. Each line’s height encodes the number of people in a given income bracket, with the x-axis positioned at each bin’s income value and the baseline at the bottom. The visualization uses d3.v3 with SVG lines, a linear x and y scale, and d3.svg.axis for the axes. The data is loaded from a local CSV file, and the bin values are coerced to numbers before setting scale domains.

Loading thumbnail…

Transition Speed Test

This example demonstrates the speed of D3’s transition engine by animating a 48×48 grid of small square divs from white to black. Clicking the button triggers a one-second transition on all 2,304 elements simultaneously, changing their background-color and outline-color. The code uses d3.select, d3.range, and transition().duration().style() to apply the animation, responding to a click event on a button. The grid is rendered as HTML divs styled with CSS floats, and the transition is built entirely with D3 v3, avoiding jQuery or CSS-only approaches.

Loading thumbnail…

Sortable Bar Chart

A bar chart displays 24 random values from a normal distribution, with bars sorted and animated into ascending or original order every five seconds. The reordering uses d3.transition with staggered delays per bar to make individual movements traceable, referencing Heer and Robertson’s animated transitions. Built with d3.js v3, the chart uses d3.scale.ordinal with rangeRoundBands for vertical positioning, while bar rectangles and text labels are rendered as SVG elements. The x-axis is drawn via d3.svg.axis, and sorting is triggered by a setInterval toggling the index order.

Loading thumbnail…

Quicksort

The visualizer shows the Quicksort algorithm sorting a shuffled array of 240 items as a fan of lines, with the current pivot highlighted in red. Each step is animated via a timer, swapping line positions to reflect array changes. The code uses d3.v3 with a linear scale for angular displacement and an ordinal scale for horizontal positioning, rendering SVG lines and driving the animation through `setInterval`. The data is generated by a Fisher–Yates shuffle and processed through the quicksort function.

Loading thumbnail…

One Path for All Links

This example shows the character interaction network from *Les Misérables* as a force-directed graph, where all links are drawn as a single SVG path element. The path’s `d` attribute is rebuilt on every tick of the force simulation, joining each link’s source and target coordinates into one compact string. Nodes are rendered as circles positioned by the same `d3.layout.force` API, and the layout runs interactively with drag support. The data comes from the bundled `miserables.json` file.

Loading thumbnail…

Cost of Living - Parallel Coordinates

A parallel coordinates plot displays the cost-of-living index for 90 cities across six dimensions—consumer price, rent, consumer price plus rent, groceries, restaurant price, and local purchasing power. Each city appears as a polyline connecting its values on vertical axes, with grey background lines for all cities and blue foreground lines for those selected via brushing. The visualization uses D3 v3, reading a CSV file, scaling each dimension with d3.scale.linear, and enabling interactive brush filters that hide non-matching lines.

Loading thumbnail…

Drag Multiples

A grid of sixteen small SVG circles, each in its own separate SVG element, can be dragged independently within the bounds of its cell. The example demonstrates the `d3.behavior.drag` API, using its `origin` accessor and `drag` event to update circle positions. Each circle is constrained to its local coordinate space, with position clamped between the radius and the SVG width or height. The code uses d3.v3 and renders the visuals as SVG, with the data derived from a static array of sixteen identical starting points.

Loading thumbnail…

Expandable Menu

The expandable menu displays a two-level, nested list using HTML elements. Clicking a top-level item reveals its associated sub-items. The visualization uses a static dataset defined in code, containing two parent objects with name and links properties. The implementation utilizes the D3.js v3 library to bind the data to list items and manages the expand interaction via the `d3.select` API and the `on("click", expand)` event handler, appending a new nested `<ul>` on demand.

Loading thumbnail…

Table of Progress

Rows of hexadecimal identifiers appear in a table-like list, each with a progress bar that fills from left to right over a random duration before the row collapses and is removed. New rows are created asynchronously, simulating a dynamic queue of tasks. The visualization uses D3.js v3 with chained transitions: `transition().duration().ease("linear")` animates the bar’s width, while a second transition delays the row’s height collapse and removal. Data is generated procedurally via `Math.random()` for durations and creation intervals, with no external dataset.

Loading thumbnail…

selection.order

This example demonstrates how `selection.order` reorders DOM elements to match the order of their bound data. Three initial divs are created from an array, then the selection is re-bound to a longer array with a key function. New divs are appended for entering elements, and `div.order()` repositions all divs so their document order matches the data order. The code uses d3.v3 with basic selections, data joins, and the `text` operator, showing a simple before-and-after ordering effect.

Loading thumbnail…

SVG foreignObject Example

This example demonstrates that HTML content from an external file can be embedded and displayed directly within an SVG canvas, showing a structured text layout with a heading and paragraphs. The code uses D3's `d3.select` to target the body and append an SVG element, then creates a `foreignObject` that nests a complete XHTML body using `d3.html`. The `xhtml:body` element is styled with a specific font and populated with placeholder text, highlighting how SVG can contain rich HTML formatting through the foreignObject API.

Loading thumbnail…

Left-Aligned Ticks

A one-year time axis is rendered as a horizontal bar chart, with the gridlines extending downward and the tick labels left-aligned at the start of each year. The example uses D3 v3’s `d3.svg.axis` and `d3.time.scale` to generate the ticks, applying a `tickPadding(-2)` and adjusting the text `x` and anchor properties to shift labels right of the baseline. The SVG output contains a light gray rectangle for the plot area, white gridlines, and black tick marks.

Loading thumbnail…

Square Circle Spiral Illusion

Six concentric rings of small squares rotate at different speeds via SVG transforms, creating a spiral-like square illusion against a gray background. Alternate squares are stroked white for contrast. The animation uses `d3.timer` and `d3.selectAll` with `attr("transform")` to update rotation based on elapsed time, while each ring’s squares are generated from `d3.range` and positioned with `translate` and `rotate`. The code runs on D3 v3 and relies on SVG `rect` elements.

Loading thumbnail…

Circles

A field of 1,000 small circles drifts randomly across an SVG canvas, wrapping around the edges when they exit the viewport. A text label in the corner displays a live frames-per-second counter. The animation uses `d3.timer` to update each circle's `cx` and `cy` attributes every frame, with positions stored in a data array generated from `d3.range(1000)` and `Math.random`. The code runs on D3 v3 and renders purely with SVG elements.

Loading thumbnail…

D3 PJAX

This example demonstrates a PJAX-style navigation interface where clicking links updates the page content without a full reload, using the browser’s History API to manage the back and forward buttons. The code defines a `pjax` function that attaches click handlers to all `ul li a` links, calls `history.pushState` with the target URL, and loads the new page fragment via `d3.html`. It replaces the content of `#main` with the corresponding element from the fetched document and re-applies the link handlers. A `popstate` listener loads the previous state when the user navigates backward or forward.

Loading thumbnail…

Pie Chart Update, II

Clicking the radio buttons in this donut chart switches the displayed metric between apple and orange counts from the `data.tsv` file. The chart uses a `d3.layout.pie` and `d3.svg.arc` to create the donut shape, with paths initially drawn and stored. On selection, the pie’s value function changes, and `transition().attrTween("d", arcTween)` animates the arcs over 750 milliseconds by interpolating between the stored and new angles.

Loading thumbnail…

Pie Chart Update, I

This example shows an interactive donut chart whose displayed metric changes when the user selects a radio button. The chart initially renders apple counts from a TSV file, then after two seconds automatically switches to orange counts, updating the arc angles accordingly. Using D3 v3, the code employs `d3.layout.pie` and `d3.svg.arc` to compute and draw SVG path arcs, while the `change` event handler redefines the pie’s value function and redraws the arcs. A `color` scale from `d3.scale.category20` assigns distinct fills to each segment.

Loading thumbnail…

Transform Transitions

A grid of colored squares animates in response to mouse hovers, demonstrating smooth interpolation between different 2D SVG transforms. Each rect transitions from its original translate to a combined translate, scale, and rotate, then shrinks and fades before being removed. The code uses d3.v3 transitions with `.attr("transform")` to leverage matrix decomposition, automatically decomposing transforms into canonical translate, rotate, scale, and skew components. The visualization is built with a data-joined SVG rect per grid cell, filled with HSL colors based on position, and rendered entirely through D3’s selection and transition APIs.

Loading thumbnail…

SVG feGaussianBlur

This example demonstrates SVG’s Gaussian blur filter effect applied to an image of GitHub’s Octocat mascot. A range input controls the blur intensity, updating the `stdDeviation` attribute of an `feGaussianBlur` element in real time. The code uses D3 v3 to create the SVG container, append the filter definition, and bind the input’s change event to the blur update function. The image is loaded asynchronously and rendered as an SVG `<image>` element with the filter reference.

Loading thumbnail…

Log-Log Plot

A log-log plot displays three curves for the functions f(x) = x, x², and x³ across a range from 0.1 to 100, using logarithmic scales on both axes. The code loads data from a TSV file and renders it as SVG paths through d3.svg.line, with logarithmic scales via d3.scale.log and axes via d3.svg.axis. A legend identifies each curve by its formula, and a clipPath confines the lines to the plotting area.

Loading thumbnail…

D3 and Custom Data Attributes

This example shows how D3’s `datum` operator can read HTML5 custom data attributes from DOM elements and use that data for sorting. The code selects all list items, binds each element’s `dataset` object—containing the `username` attribute—via `.datum()`, then reorders the list with `.sort()` based on `d3.ascending` on the username values. It uses D3 v3 directly on a static, two-item unordered list, making no external data requests or canvas rendering.

Loading thumbnail…

Point-Along-Path Interpolation

A small circle animates repeatedly along a fixed arc path, demonstrating how to interpolate a point’s position along an existing SVG path. The example uses D3 v3 and SVG’s native `getTotalLength` and `getPointAtLength` methods to compute the circle’s coordinates at each step. A `transition.attrTween` drives the animation, updating the circle’s `transform` attribute over five seconds, then restarting it via the transition’s `each("end")` event. The path itself is drawn with `d3.svg.arc` and rendered as a gray filled shape with a pointer cursor.

Loading thumbnail…

The Euro Debt Crisis

This visualization presents two chord diagrams comparing international debt relationships during the Euro crisis: one showing how much each country lends (creditors) and another showing how much each owes (debtors). Built with D3 v3, it uses the `d3.layout.chord` and `d3.svg.chord` APIs to render arcs and quadratic Bézier chords from a CSV matrix. The ordinal color scale highlights risk categories, and hover tooltips display exact amounts in billions.

Loading thumbnail…

Sunburst with Distortion

This sunburst chart displays a hierarchical dataset (flare) using a radial partition layout. It shows the data’s structure as nested arcs, where each node’s arc size reflects its value. The chart supports interactive distortion: clicking a node repositions its siblings and rescales the clicked node to occupy 80% of its parent’s arc, with a 750-millisecond animated transition via `transition.attrTween`. The visualization is built with D3 v3, using `d3.layout.partition` and `d3.svg.arc` for geometry, and it renders as SVG.

Loading thumbnail…

Pie Multiples with Nesting

Four small donut charts display the distribution of airline carriers at four US airports. Each chart represents a single airport, with arcs sized by passenger count and colored by carrier. The visualization loads CSV data from `flights.csv` and groups entries by airport using `d3.nest`. The `d3.layout.pie` computes arc angles, while `d3.svg.arc` generates the SVG paths, with a rotated label added for larger segments.

Loading thumbnail…

Pie Multiples

Four small donut charts display proportional breakdowns for each row of a two-dimensional numeric array. D3 v3’s `d3.layout.pie` computes arc angles, while `d3.svg.arc` renders the path shapes. Each chart uses an inner and outer radius, with colors assigned by index from `d3.scale.category20c()`. The SVG elements are generated per row, and the totals for each row differ.

Loading thumbnail…

DOM-to-Canvas using D3

This example shows a canvas scenegraph implemented using custom namespaced DOM elements, where moving the mouse appends `custom:circle` elements that grow and fade over two seconds. A timer continuously redraws the canvas by iterating over the DOM children, mapping each element’s attributes to Canvas API calls like `beginPath` and `arc`. The code uses D3 v3’s `d3.select`, `d3.event`, `d3.timer`, and `d3.ns.prefix` to manage the custom namespace and transitions, demonstrating an alternative to SVG for customized rendering scenarios.

Loading thumbnail…

D3 Show Reel

The D3 Show Reel demonstrates a sequence of animated transitions between ten visualization types—including line charts, stacked areas, streamgraphs, grouped bars, and a donut—using monthly stock closing prices for four tech companies over ten years. Built with D3 v3, the example leverages `d3.svg.line` and `d3.svg.area` generators, along with `d3.time.scale` for date scaling and `d3.nest` for grouping data by symbol. Each transition morphs the existing SVG elements with `transition()` calls, animating attributes like `d`, `fill-opacity`, and `transform` over 1.5-second durations. The result is a polished, dynamic showcase of D3’s flexibility for custom, data-driven motion graphics.

Loading thumbnail…

Multi-Foci Force Layout

Five fixed nodes serve as force foci that attract and repel moving nodes in a 2D space. As the mouse moves, the user spawns new nodes with random radii and colors; these nodes are pulled toward a focus matching their type while colliding with each other via a quadtree. The simulation runs on D3 v3’s force layout with custom attraction and collision logic, rendering everything as SVG circles with animated transitions that remove nodes after three seconds. The `d3.layout.force` API drives the physics, and `d3.geom.quadtree` accelerates collision detection.

Loading thumbnail…

Merge Sort

Two hundred forty line segments, each encoding an array value by rotation angle, animate through seven passes of bottom-up merge sort. Randomly shuffled values are rendered as SVG lines, with each pass showing sorted sub-arrays as groupings of parallel bars. The animation uses `d3.shuffle`, `d3.scale.linear`, and `transition.attr` to smoothly rotate lines into new positions. The design resembles wind gusting over grass, making sorted runs visually distinct.

Loading thumbnail…

Force Layout with Mouseover Labels

This example visualizes a character co-occurrence network from *Les Misérables*, using a force-directed layout to position nodes. Hovering over a node highlights it by turning the circle black and revealing its text label. The implementation uses D3 v3’s `d3.layout.force` and `d3.geom.voronoi` to create invisible cell paths around each node, expanding the hover target area. Nodes and links are rendered as SVG circles, lines, and paths, with data loaded from a JSON file.

Loading thumbnail…

Force Layout with Tooltips

A force-directed graph displays character relationships from *Les Misérables*, using a JSON dataset of nodes and links. The layout positions characters as images and links as lines, with hover tooltips revealing names. Built with D3 v3, it leverages the `d3.layout.force` simulation and SVG rendering, updating positions dynamically via the `on("tick")` event.

Loading thumbnail…

Force Layout from Adjacency List

This example demonstrates a force-directed graph layout using data from a JSON adjacency list. Nodes are rendered as circles and edges as lines in an SVG canvas. The layout physics, including collision detection and link constraints, are handled by the `d3.layout.force` API, while node dragging is enabled via `force.drag`. The graph is initialized from the `graph.json` file, which defines connections between 24 numbered nodes, and the simulation updates node and link positions on each tick.

Loading thumbnail…

Pixymaps (Scrolling)

A scrolling map of San Francisco pans continuously leftward, with a tile-based image rendered to a Canvas element. The example uses the `pixymaps` library to manage view coordinates and tile loading, while the D3.js timer drives a subtle acceleration that increases scroll speed. Map tiles are loaded from CloudMade, and the view is projected using `d3.geo.mercator` to center the map. The animation updates the canvas by panning the view and re-rendering the image each frame.

Loading thumbnail…

Pixymaps (Dragging)

This example shows a draggable, tile-based map of San Francisco rendered on an HTML5 Canvas using `pixymaps` with D3 v3. Users pan the view by dragging the mouse, which triggers `view.panBy()` and re-renders the map. The map tiles are loaded from CloudMade and OpenStreetMap, with a cached, least-recently-used tile system. The map projection uses `d3.geo.mercator`, and the viewport transforms the canvas with a CSS `matrix3d` translation.

Loading thumbnail…

Dots

A force-directed simulation scatters and repels 300 small circles within a square field, with each new dot entering at the center and easing outward through an animated radius transition. The code uses the `d3.layout.force` API for physics, appends `circle` elements to an SVG canvas, and triggers a `transition` with a `Math.sqrt` easing function. Data points are generated procedurally with random offsets, and the simulation stops once the node count exceeds 300.

Loading thumbnail…

Axis Component

This interactive example showcases D3’s axis component, which simplifies adding reference lines and labels to custom visualizations. It plots S&P 500 monthly price data from 2000 to 2010 as a line with an area fill, using `d3.svg.axis` for both x- and y-axes. Clicking the chart triggers a random zoom on the x-axis, causing the ticks to smoothly transition via `svg.transition().duration(750)`. The visualization is rendered as SVG, with axes styled for crisp edges and clipped paths for the data series.

Loading thumbnail…

getBBox

This example demonstrates how to retrieve and display the bounding box of SVG text using the `getBBox()` method. A large text element reading "Hello, getBBox!" is rendered in the center of the canvas, and the code then calculates its exact bounding rectangle. A semi-transparent gray rectangle is drawn over that measured area, highlighting the precise dimensions and position of the text. The implementation uses D3 v3 to append the SVG elements and calls `text.node().getBBox()` to obtain the geometry, with styling applied via inline attributes.

Loading thumbnail…

Small Multiples

This visualization shows monthly stock prices for multiple symbols as a grid of small multiples, with each chart displaying a time-series line and area fill for a single stock. The x-axis spans the common date range across all symbols, while the y-axis is independently scaled per chart to accommodate local price ranges. Built with D3 v3, the code loads CSV data via `d3.csv`, nests entries by symbol using `d3.nest`, and renders SVG paths using `d3.svg.area` and `d3.svg.line`.

Loading thumbnail…

Stacked Bar Chart

This stacked bar chart displays mortality causes among British troops during the Crimean War by month from 1854 to 1856, breaking down deaths into wounds, other, and disease. Using D3 v3’s stack layout, the code computes cumulative layer offsets and renders each cause as a distinct colored bar segment with ordinal time-scaled x-axes and a linear y-axis. The SVG visualization, styled with category10 colors, loads tab-separated data via `d3.tsv` and leverages `d3.svg.axis` for formatted month and tick labels.

Loading thumbnail…

Bounded Force Layout

This example demonstrates a force-directed graph constrained within a fixed rectangular boundary. It visualizes character relationships from *Les Misérables*, with nodes colored by group and connected by gray links. The simulation uses the `d3.layout.force` API, and during each tick event, node positions are clamped so their centers remain within the SVG canvas bounds, accounting for a fixed radius. The graph is rendered as SVG circles and lines, with data loaded from a JSON file.

Loading thumbnail…

Rounded Rectangles

A grid of 25 rounded rectangles animates toward the mouse position while continuously rotating, with each rectangle’s fill color drawn from a categorical scale. Driven by a d3.timer, each tick updates the rectangles’ center coordinates and rotation angle based on their distance to the cursor. The SVG shapes use `rx` and `ry` attributes, and the code leverages D3’s data binding, `d3.scale.category20c`, and a `mousemove` event to track the pointer. This example adapts a Paper.js demo into D3 with animated transforms.

Loading thumbnail…

Segmented Lines

Four time series are drawn as thick segmented lines, each segment colored green, gray, or red based on its slope via a linear color scale from 0 to π. Circles mark every data point, while the y-axis is scaled to the maximum of all series, loaded from a local JSON file. The code uses d3.svg.line with segment arrays generated by a helper function, and applies stroke styling through d3.scale.linear and Math.atan2 on segment endpoints.

Loading thumbnail…

Arc Clock

Three ring-like arcs display the current hour, minute, and second, with each arc filling proportionally to its unit and updating every second. A label beneath each arc shows the numeric value and unit letter. Built with D3 v3, the visualization uses SVG paths and `d3.svg.arc` for geometry, while `transition.attrTween` and an elastic easing animate the arc changes. The `update` function redraws the clock using `Date` methods like `getHours`, `getMinutes`, and `getSeconds`.

Loading thumbnail…

Collapsible Force Layout

This interactive visualization uses a collapsible force-directed layout to display a hierarchical dataset of software clusters. Orange leaf nodes represent individual items, while blue nodes indicate packages that can be expanded or collapsed by clicking. The underlying tree structure is flattened for the simulation, with links computed via `d3.layout.tree`. Node positions update on each tick of the `d3.layout.force` simulation, with SVG circles and text labels rendered dynamically based on the current node state.

Loading thumbnail…

Absolute-Positioned Tooltip

This example demonstrates an SVG rectangle that displays an absolute-positioned tooltip showing the cursor’s page coordinates. A mouseover event reveals a gray div, mousemove updates its text and left/top style properties with d3.event.pageX and pageY, and mouseout hides it. It uses d3.select, d3.append, and d3.event APIs from d3.v3.

Loading thumbnail…

Linear Gradient

This example demonstrates a full-screen rectangle filled with a diagonal linear gradient. The gradient transitions from a solid green color at the top-left corner to a solid red color at the bottom-right corner, using the `pad` spread method. The visualization is rendered as SVG, constructed with the D3.js v3 library. It uses `d3.select` to append an `svg` element, defines a `linearGradient` inside a `defs` block with two `stop` elements, and applies the gradient as a fill via a URL reference.

Loading thumbnail…

Date Ticks

This example demonstrates how D3’s time scale and axis API can animate date tick marks as the domain’s upper bound randomly shifts. A bottom-oriented SVG axis is created with `d3.time.scale` and `d3.svg.axis`, formatting tick labels as month/day strings. Every few seconds, `setInterval` triggers a transition that updates the axis domain to a new random date, smoothly redrawing the ticks and grid lines via `.transition().duration()`. The chart uses no external data, only a generated sequence of dates between January 2 and a random day in late January, with the axis centered vertically on a 960×500 SVG canvas.

Loading thumbnail…

Venn Diagram with Clipping

Three overlapping circles create a Venn diagram by clipping full-canvas rectangles, with each circle pair and the central triple intersection filled with its own distinct color. The SVG rendering uses `d3.select` and `d3.append` to construct a `defs` element containing three `clipPath` circles, then applies those clip paths to colored rectangles. A white rectangle, clipped by all three circles, marks the center overlap, while complementary colors (yellow, cyan, magenta) fill the pairwise intersections on a dark background.

Loading thumbnail…

Venn Diagram with Opacity

Three overlapping circles form a Venn diagram, with each pair and the central triple intersection visible through translucent fills. The example shows how fill-opacity creates blended regions where circles overlap, using brown, steelblue, and green semi-transparent colors. The code draws static SVG circles via d3.select and append, setting explicit cx, cy, and r coordinates and applying style("fill-opacity", ".5") to each circle. No interaction or dynamic data is involved; the visualization relies solely on SVG styling to communicate set relationships.

Loading thumbnail…

OMG Particles!

A mouseover-driven particle burst fills the screen with expanding, fading rings. Each pointer movement inserts a new circle into the SVG, which grows over two seconds and fades away, creating a trail of colorful, overlapping ripples. The example uses D3.js v3, with a transition on the circle’s `r` and `stroke-opacity` attributes, and generates hues via `d3.hsl`. The background is a static SVG rectangle that captures pointer events.

Loading thumbnail…

Force-Directed Symbols

A force-directed layout continuously adds random geometric symbols to an SVG scene. Every second, a new shape—drawn from `d3.svg.symbolTypes`—appears and repels existing nodes, causing them to drift apart. The `d3.layout.force` simulation handles the physics, while each `path` element updates its transform on every tick. Symbols render in steel blue with white strokes and are draggable via `force.drag`.

Loading thumbnail…

Force-Directed Graph

A force-directed graph visualizes the hierarchical structure of the Flare data set. The example uses a d3.layout.force simulation to position nodes and links, with SVG for rendering. Clicking a node toggles its children, expanding or collapsing that portion of the tree. The code relies on d3.v3 APIs, reading the JSON data from "readme.json" and styling nodes with colors to distinguish leaf nodes, parents, and collapsed branches.

Loading thumbnail…

Multi-Foci Force Layout

A stream of circles enters the scene at regular intervals, each assigned one of three focal points. The circles gravitate toward their assigned focus, creating three distinct clusters that shift as new nodes are added and older ones settle. Using D3 v3’s `d3.layout.force`, the example overrides the default tick handler to manually steer each node toward its focus, with the simulation’s alpha value controlling the easing. The SVG circles are colored via a categorical scale based on their focal point ID, and the animation runs indefinitely via `setInterval`.

Loading thumbnail…

Multi-Foci Force Layout

A multi-foci force layout clusters 100 circles into four groups using D3’s d3.layout.force with position Verlet integration. Custom forces push nodes up, down, and sideways based on their index, while d3.event and force.drag enable mouse interaction. Clicking the page perturbs node positions with random offsets, and the simulation resumes. SVG circles render with a categorical color scale and animate smoothly via the tick event.

Loading thumbnail…

Superformula

A single SVG path displays a superformula shape, with a set of slider controls for adjusting its parameters (m, n1, n2, n3, a, b) and buttons to switch among 21 named presets such as asterisk, circle, star, and heart. The code builds the shape using the d3.superformula plugin, which generates the path from a polar equation, and renders it via d3.svg.line. Sliders update the shape in real time through D3’s selection and property binding.

Loading thumbnail…

Superformula

The Superformula gallery displays 22 distinct geometric shapes generated from parametric equations, with each small blue shape representing a named superformula variant. Clicking any small shape animates the large central square into that shape’s form via a 500-millisecond `transition` that interpolates the path’s control points using `d3.superformula` and `.attr("d", …)`. The visualization uses D3 v3 with SVG rendering, leveraging ordinal scaling for shape placement and both small and large path elements styled with CSS hover effects.

Loading thumbnail…

Line Tension

Ten interpolated curves pass through a shared set of nine data points read from a TSV file, each drawn with a different tension parameter from 2/3 to 1 and colored from brown to steelblue. The visualization demonstrates the effect of tension on the cardinal spline interpolation provided by `d3.svg.line` with its `tension` method. The axes are generated using `d3.svg.axis` with linear scales on a 960×500 SVG canvas; each data point’s position is also marked by a hollow white circle.

Loading thumbnail…

Square Grid

This visualization displays a changing quantity as a grid of colored squares, where each square represents one unit, arranged so small rows of ten, groups of one hundred, and large rows of one thousand allow quick reading of exact counts by powers of ten. The count updates randomly, with squares animating in and out using `transition.attr("width", 0)` and `transition.delay` based on index. The SVG rendering uses `d3.select` and `d3.range` to manage the cells, and a `d3.interpolateNumber` tween animates the text label. The code uses the D3 v3 library and an interval timer to trigger updates.

Loading thumbnail…

Force Layout from List

This example converts an HTML nested list of links from a personal blog into a force-directed graph. D3.js v3 uses the `d3.layout.force` API to simulate physical repulsion and attraction, with SVG circles representing each list item and lines for parent-child connections. The hidden list serves as the data source, and the layout runs continuously, updating node positions and link endpoints on each tick.

Loading thumbnail…

Labeled Force Layout

A labeled force-directed graph displays character relationships from *Les Misérables*, with each node represented by a GitHub favicon image and a text label. The D3 v3 layout (`d3.layout.force`) simulates physics with gravity, charge, and link distance to position nodes, while SVG lines depict connections. The code loads `graph.json` containing nodes and links, then updates node transforms and link coordinates on each tick event.

Loading thumbnail…

Radial Arc Diagram

An interactive radial arc diagram displays a small network of four people—Bob, Jane, Sue, and Tom—arranged in a circle, with curved paths connecting each person to their listed connections. The visualization loads data from a local JSON file and renders nodes as circles with labels, using d3.scale.ordinal with rangePoints to position them angularly around a central point. Each link is drawn as an arc using a custom curve function that calculates chord lengths, while node labels flip orientation when positioned on the left side of the circle. The code relies on d3.json for data loading and SVG elements with D3’s enter/update selections.

Loading thumbnail…

Banded Arcs

Twenty evenly spaced banded arcs radiate from the center of an SVG canvas, forming a circular pattern of lightblue segments with dark outlines. Built with D3 v3, the example uses an ordinal scale with `rangeBands` to divide 2π radians into angular bands, then renders each arc via the `d3.svg.arc` generator. Each path spans half of its allocated band, leaving gaps between segments, with radii fixed near the canvas edge. The code generates a static visualization, drawing all arcs in a single SVG group.

Loading thumbnail…

d3.geo.tiler

This example demonstrates an interactive map of weather stations in California using tiled image layers from CloudMade and custom point overlays. The `d3.geo.tiler` API organizes station locations from stations.json into a quadtree structure, enabling efficient data retrieval per map tile. The Polymaps library handles map navigation, while D3.js manages the tile-specific SVG rendering of station markers and labels. The visualization showcases the integration of D3's geographic projections with Polymaps' tile-based mapping system for scalable point data visualization.

Loading thumbnail…

Google Maps + D3

This example overlays a custom D3 visualization on an interactive Google Map, plotting California weather station data as brown circles with labeled markers. The map displays terrain tiles from the Google Maps API, while the overlay is drawn using D3’s `d3.json` to load station coordinates and attributes. Each marker is rendered as a separate inline SVG element, positioned via the Google Maps projection’s `fromLatLngToDivPixel` method when the overlay is added. The code combines the Google Maps JavaScript API with D3’s selection and data-binding capabilities to synchronize the dynamic overlay with the map’s pan and zoom.

Loading thumbnail…

Polymaps + D3, Part 2

This example combines Polymaps and D3 to display weather station locations across California on a tiled base map. The map uses CloudMade image tiles with a compass control, while D3 renders SVG circles and labels for each station from a JSON file. As the map pans or zooms, the `map.on("move")` event updates the marker transforms using `map.locationPoint` to project geographic coordinates into screen positions. The stations are grouped in an SVG `<g>` element inserted beneath the compass layer, with circles styled with a brown semi-transparent fill.

Loading thumbnail…

Polymaps + D3

This example combines Polymaps and D3 to render an interactive map with a custom data layer. The map displays image tiles from CloudMade as a base layer, and overlays circles representing weather station locations from a local `stations.json` file. Each station is positioned using geographic coordinates projected through a `locationPoint` function within the Polymaps layer, with circle and text elements added via D3's selection API. The map includes interactive pan and zoom controls and a compass overlay.

Loading thumbnail…

Grouped Bar Chart

This example presents a grouped bar chart with 20 samples across 4 series, rendered in SVG using D3 v3. The chart’s bars are positioned by two ordinal scales, `x0` for categories and `x1` for series, with a linear `y` scale mapping values from 0 to 1. Each series is assigned a distinct color via `d3.scale.category10`. Data is randomly generated, and axes are drawn using `d3.svg.axis`. The code emphasizes scale composition and grouped layouts rather than interactivity.

Loading thumbnail…

Fill-Rule Evenodd

This example demonstrates how the SVG `fill-rule: evenodd` property affects the rendering of US state boundaries. When a user hovers over a state, its corresponding path is displayed in steel blue with a semi-transparent fill, while all other states are hidden. The code uses D3’s `d3.geo.path` with an Albers projection and TopoJSON to load geographic data from `us.json`. A separate invisible hover layer manages mouse events, toggling visibility through `mouseovered` and `mouseouted` functions.

Loading thumbnail…

Circular Layout (Raindrops)

A circular layout of raindrop-shaped paths radiates from the center, each filled with a shared linear gradient that shifts from pale blue to deep navy. A random size and radial distance are applied to each of the 358 shapes, creating a scattered, organic dispersion. Built with D3 v3 and SVG, the example constructs each raindrop using a custom path generator that calculates a circle with a pointed tail based on a size parameter. The transform attribute combines rotation and translation to position every drop around the circle.

Loading thumbnail…

Circular Layout (Slider)

A circular layout of 180 arc-shaped segments, colored on a brown-to-steelblue scale, visualizes random values distributed by angle and radius. A range slider controls the radial display, fading arcs in and out based on their angular distance from the slider’s current value. The d3.v3 code builds the visualization using nested `g` elements, `d3.svg.arc` for geometry, and `d3.scale.linear` for mapping. The animation reveals each arc via chained transitions on `fill-opacity`, while the slider input event updates the opacity based on angular difference.

Loading thumbnail…

Circular Layout (Recursive)

A circular layout visualizes ten concentric rings, each divided into 90 wedge-shaped segments. The example derives these shapes recursively, with each ring’s path geometry generated from radial distances scaled from 180 to 240 pixels and angular slices of π/90 radians. Colors interpolate from brown to steelblue across the rings. The implementation uses D3 v3’s linear scales for radius and fill, and builds SVG paths via `d3.svg.arc` within nested `selectAll` and `enter` calls. The data is procedural, created with `d3.range(10)` for rings and angle increments.

Loading thumbnail…

Circular Layout (Arc)

A circular layout of concentric arcs radiates outward from a central point, with each arc’s color shifting from brown to steel blue as its radius increases. The visualization encodes two linear scales—one mapping radius size and another mapping fill color—onto a grid of 180 rotated groups. Built with D3 v3, the code uses `d3.svg.arc` to generate each path segment, with `innerRadius` and `outerRadius` driven by the same scale. Rotating each group by successive 2-degree increments creates the full circular pattern. The data is generated synthetically via `d3.range`, not from an external source.

Loading thumbnail…

Circular Layout

The example shows a circular pattern of 180 radial spokes, each containing ten small circles that recede and shift in color outward from the center, producing a sunburst-like mandala effect. It uses D3 v3 to generate the SVG structure, with each spoke rotated incrementally via `transform` attributes. Circle positions and fills are mapped linearly through `d3.scale.linear`, transitioning from brown to steelblue along a radius of 180 to 240 pixels. All shapes have black strokes, and the rendering relies on SVG elements created through data joins on `d3.range` values.

Loading thumbnail…

Moiré Patterns

This interactive visualization shows a moiré pattern created by overlapping two sets of concentric circles. The base layer contains 110 circles with increasing radii, while a second set of 60 circles follows the mouse cursor, dynamically scaling their radii based on cursor position. Built with D3.js v3 and rendered as SVG, the pattern uses the `svg.on("mousemove")` event and `d3.mouse` to update circle transforms, producing shifting interference effects as the two circle families intersect.

Loading thumbnail…

stroke-dasharray

Ten horizontal black lines are rendered across the SVG canvas, each displaying a distinct stroke-dasharray pattern. The dashes increase in length from the top line to the bottom, while the gap between dashes remains constant at five pixels. Using D3 v3, the code binds an array of ten numbers to `line` elements and sets each line’s `stroke-dasharray` attribute to `${d + 1},5`. The lines are evenly spaced vertically across the 960×500 viewport, with a consistent stroke width of 15 pixels.

Loading thumbnail…

Voronoi Tesselation

This example visualizes a Voronoi tessellation of 100 random points within an SVG canvas, with each cell filled by a random HSL color and vertices marked as small circles. Moving the mouse repositions the first vertex, dynamically recomputing the tessellation and updating only the paths whose geometry changed. The code uses the D3 library’s `voronoi` function from the `jit/voronoi.min.js` module, along with SVG path elements and `d3.svg.mouse` for mouse coordinates. The rendering is immediate, without animations or transitions.

Loading thumbnail…

Focusable Maps

Two interactive maps sit side-by-side, each in its own `div` element, and each can be focused independently via the `tabindex` attribute. Using the Polymaps library, each map renders a CloudMade tile layer (styles 998 and 999) served from OpenStreetMap data, with the `org.polymaps` API handling map display and `po.interact()` enabling pan and zoom. The `tabindex` on the containing `div` elements makes each map a separate focusable region, so keyboard navigation can target one map without affecting the other.

Loading thumbnail…

Image Processing

This example demonstrates real-time image processing on map tiles using Polymaps and HTML5 Canvas. The map loads a static image from a URL and renders it through a custom canvas layer, where each tile’s pixel data is read with `getImageData` and halved in intensity before being written back via `putImageData`. The code uses `po.canvas()` to define the layer, `drawImage` to place the source, and `createImageData` to prepare the output. The result shows a visibly darkened version of the original image across the panning map.

Loading thumbnail…

Image Markers

This example uses Polymaps to display an interactive map centered on Oakland, California, with CloudMade tile imagery. It loads GeoJSON crime data from the Oakland CrimeSpotting API and replaces each geographic point with a small Twitter favicon image marker. The map supports pan and zoom via `po.interact()`, and the markers are positioned using fixed scaling at zoom level 12.

Loading thumbnail…

Fancy Markers (No Gradient)

This example displays a map of crime incidents in Oakland for a single day, replacing default GeoJSON point markers with custom SVG icons. It uses Polymaps to build the interactive map, with CloudMade tiles and OpenStreetMap data as the basemap. The code loads crime records from the CrimeSpotting API, then post-processes each feature after the `load` event, swapping the original point element for a marker icon appended from the Raphaël icons library. The markers are scaled and positioned using the existing transform attributes.

Loading thumbnail…

Hover Markers

This example uses Polymaps and the CrimeSpotting API to display a map of Oakland, California, with 100 crime data points as fixed-size circles. The map is created with `po.map()` and `po.geoJson()`, loading GeoJSON features that are styled with CSS classes for hover effects. When hovering, the datapoint markers change color from lightsteelblue to lightcoral, highlighting individual incidents. The map includes a CloudMade tile layer and supports zooming between levels 10 and 16, with crime data filtered for a single day in April 2010.

Loading thumbnail…

Resizable Markers

This example demonstrates an interactive map of crime data for Oakland, California, where a slider dynamically resizes the displayed points. The map is built with the Polymaps library, using a CloudMade tile layer as the base and the `org.polymaps.geoJson` object to render the data. A jQuery UI slider calls the GeoJSON layer’s `reshow()` method, triggering a `show` event that updates the `r` attribute on each plotted circle, effectively scaling the markers based on the slider’s value. The data originates from the Crimespotting API.

Loading thumbnail…

Donuts

Three nested donut charts show spending by department—Accounting, Sales, and Consulting—with each ring divided into salary, equipment, travel, and extra costs. The example uses the ProtoVis API within an HTML page, calling `pv.Scale.linear` for angular scales and a `pv.Panel` with `pv.Wedge` marks, sized by inner and outer radii. Labels are centered via an anchored `pv.Label`. Data comes from an inline JavaScript array with static numeric values.

Loading thumbnail…

Heatmap

This heatmap blends a base map with three point locations that are transformed into radial gradients, showing how they are highlighted on a map. The visualization combines a CloudMade tile layer and OpenStreetMap data, with the points loaded as GeoJSON features. The map uses the Polymaps library, and its `load` callback dynamically adjusts each point’s radius based on the current zoom level while assigning a green gradient fill with fading opacity.

Loading thumbnail…

Caravaggio’s Bacco (1597)

A viewer displays the full-resolution painting of Caravaggio’s *Bacco* as a deep-zoom navigable map. The visualization loads tiled image data from Haltadefinizione, with a tile URL template adjusted by zoom, column, and row values. It uses the Polymaps library (`org.polymaps`) to create the map, control pan and zoom interactions, and render a compass overlay. The map’s initial center is at latitude 0, longitude 0, with a zoom level of 3, and the image layer forces a minimum zoom of 3.

Loading thumbnail…

Labeled points

This example displays a Polymaps map of Oakland crime incidents as labeled points. It adds a text label to each GeoJSON point feature by creating an `svg:text` element with `po.svg`, positioning it with the circle’s `transform`, and centering it via `text-anchor` and `dy`. The code styles the circles with a steelblue stroke, and the map layers CloudMade tiles with the crime data from crimespotting.org.

Loading thumbnail…

Van Wijk & Nuij Zooming

This example demonstrates a smooth and efficient zooming and panning animation for interactive maps, based on the algorithm by Van Wijk and Nuij. It uses Polymaps to render Bing Maps imagery and animates the map's center and zoom level over time. The JavaScript code calculates a path between two map states, applying logarithmic interpolation to create a natural, accelerated motion. The animation is triggered by a search query, which finds a location and animates the map to focus on it.

Loading thumbnail…

Sequential Tiles

This example demonstrates a rainbow-colored tile grid that visualizes the sequence of map tiles in a web mapping interface. Each tile at a given zoom level is assigned a color based on its sequential position, creating a visible gradient that shows the order and layout of map tiles. The visualization uses the Polymaps JavaScript library’s `po.map()` and `po.layer()` APIs, with a custom `rainbow` function that calculates a hue from the tile’s column and row indices. The code also includes a custom `hsl` function for color conversion, and the map is configured with a 32x32 tile size and zoom level 4.

Loading thumbnail…

Hilbert Tiles

This example uses a Hilbert curve to lay out a grid of colored tiles, demonstrating how a space-filling curve preserves spatial locality compared to a sequential layout. The map, built with Polymaps, renders rainbow-colored tiles whose hue is derived from the Hilbert index of each tile’s position, so adjacent tiles always display adjacent colors in the spectrum, even as the user zooms and pans. The code defines a custom Hilbert function, applies it in a Polymaps layer to generate SVG rectangles, and computes their fill colors with a custom HSL-to-RGB conversion.

Loading thumbnail…

Fancy Markers

This example shows a Polymaps-based map of Oakland crime data, replacing the default circular GeoJSON point markers with custom pin-style vector icons. The markers are dynamically colored using three categorical linear gradients, each representing a crime category (violent, property, or quality-of-life). The code creates SVG `use` elements referencing a marker path from the Raphael.js icon library, then post-processes loaded GeoJSON features to swap in these styled markers based on crime categorization. The map uses CloudMade tile imagery and CrimeSpotting data, with icons sorted by latitude for render order.

Loading thumbnail…

CSSOM/SVG Test

This example tests how WebKit handles SVG bounding-box measurements by comparing three different API results for a single rectangle. It uses a plain SVG `rect` element with percentage-based dimensions inside an HTML page, then displays the reported sizes from `getBBox()`, `getBoundingClientRect()`, and `getClientRects()[0]` as text rows. The expected dimensions are computed from the viewport and shown alongside, making it easy to spot discrepancies between the SVG specification and CSSOM implementations. The code directly manipulates the DOM with `createElementNS` and relies on native browser geometry methods, with no external libraries.

Loading thumbnail…

Loupe

A loupe-style lens overlays two different CloudMade tile layers on a Polymaps map, using the `po.loupe` API to render a circular focus region with a draggable center and resizable border. The example loads tiles from the CloudMade 998 and 999 map styles for OpenStreetMap data, with the outer map showing one style and the inner lens another, optionally zooming between them via a `zoomDelta` property. Interaction is handled by Polymaps' `po.interact` and `po.hash` for panning and URL state, while SVG elements styled in CSS draw the loupe’s thick black and light borders.

Loading thumbnail…

Minecraft Overviewer

This example displays a zoomable, pannable map of a Minecraft world rendered as square image tiles, generated from sample Overviewer output. The visualization uses Polymaps to handle map interactions, zooming, and tile loading, with a custom `minecraft` function that computes tile URLs based on the current zoom level and coordinates. It supports five zoom levels and centers initially on a latitude of -45 degrees, showing how a game world can be explored through a standard slippy-map interface.

Loading thumbnail…

CSS3 Modal Button

This example shows a CSS3-based modal button that prevents accidental destructive actions, such as launching a missile, by requiring two clicks within a 500-millisecond window to confirm the action. The first click changes the button’s label to “Are you sure?” and applies a pulsing animation, while moving the mouse out cancels the confirmation. Implemented with plain HTML, CSS3 transitions and keyframe animations, and native JavaScript event listeners, the code directly manipulates the button’s class and innerHTML to toggle its visual state and reset after five seconds.

Loading thumbnail…

Pale Dawn

This example displays a tiled map of the world using the Polymaps library, with a calm “Pale Dawn” tileset from CloudMade that provides a subdued background for overlaying data points. The map renders spherical mercator tiles from OpenStreetMap data through an `org.polymaps` map instance, adding standard interaction controls via `po.interact()` and a compass. The visualization uses a single `po.image()` layer with a URL template for fetching 256x256 PNG tiles, and includes attribution to CloudMade and OpenStreetMap contributors under a CCBYSA license.

Loading thumbnail…

Streamgraph

This streamgraph visualizes 20 synthetic data layers across 400 time samples, using the protovis library’s `pv.Layout.Stack` with an “inside-out” ordering and “wiggle” offset to minimize slope changes. The chart renders smooth, colored areas whose thickness reveals each layer’s magnitude, with data generated by a bump function in `stream.js`. The visualization adapts to the browser window size via `pv.Scale.linear`, and each area’s fill uses a random color ramp with semi-transparent strokes.

Loading thumbnail…

GraphicsMagick Cheat Sheet

This example presents a single-shell cheat sheet for GraphicsMagick, a command-line image processing tool. It demonstrates how to make a non-square image square by adding transparent padding using the `montage` command with `-geometry 1024x1024` and `-background none`. The displayed code shows the exact shell syntax and flags needed to achieve this operation, serving as a quick reference for users. The visualization itself is a static code listing, with the rendering approach being the monospaced text output of the script.

Loading thumbnail…

Time of Day

This visualization plots Eric Fischer’s tweet rate per hour over eight months, collapsing all days onto a single 24-hour cycle. It uses a UTC time scale with a seven-hour offset to approximate Pacific Time, and each dot represents one minute’s average tweets per hour. The code relies on d3.v3’s `d3.time.scale.utc`, `d3.svg.axis`, and `d3.svg.symbol` to render the SVG scatterplot. Data is loaded from a CSV, with raw counts normalized by 327 days and converted to an hourly rate.

Loading thumbnail…

Catmull–Rom Curves

Three interactive canvases compare Catmull–Rom curve interpolation under uniform, chordal, and centripetal parameterization, using the same seven control points rendered as white polylines. Each canvas overlays a static image of the curve, while a slider adjusts the alpha parameter via the `data-alpha` attribute. The code uses `d3.shape.line` with the `"catmull-rom"` interpolator and a Canvas 2D context to draw the paths. The example is based on Yuksel et al.’s research on parameterization effects, highlighting how each method handles overshoot and intersections differently.

Loading thumbnail…

New Splines!

Eleven points along a two-dimensional curve are rendered as small filled circles on a canvas. Four differently colored splines pass through the same set of points, comparing a cubic interpolation against several Catmull-Rom variants with tension values of 0.0, 0.5, and 1.0. The example uses d3-shape’s line generator with the canvas context, d3-scale’s category10 color scale, and draws axes and points directly through Canvas 2D API calls.

Loading thumbnail…

Color Mesh II

This example displays a colorful abstract image made of triangular cells formed by a Delaunay triangulation of a Poisson-disc sample of points. The visualization is rendered as SVG paths in a browser using the D3 v3 library, specifically calling `d3.geom.voronoi` to compute the triangulation. Each triangle is filled and stroked with a color determined by the `d3.lab` color space, which maps the centroid’s distance from the center to a luminance and hue gradient, creating smooth color transitions across the canvas. The underlying point distribution is generated via a custom Poisson-disc sampler, ensuring evenly spaced vertices.

Loading thumbnail…

Infinite Queue

A queue processes tasks across six parallel slots, each rendering a horizontal bar that animates its width, then collapses and fades before removal. The demo appends div elements via d3.select and transitions, scheduling new tasks with setTimeout to sustain activity. A sentinel task that never invokes its callback keeps the queue running indefinitely, using d3.queue’s defer method. The code highlights the queue’s unbounded memory growth as results accumulate, a trade-off of this infinite-lifecycle pattern.

Loading thumbnail…

D3 Bookmarklet

This example demonstrates a bookmarklet that injects D3.js into any webpage by appending a dynamically created script element to the document head. The code specifically loads D3 version 3 from the d3js.org CDN using the `document.createElement` and `document.head.appendChild` APIs. It shows how to enable D3 functionality on pages that do not already have it, making the library available for future interactions. The bookmarklet relies solely on this script injection mechanism, with no additional data or visualization logic included.

Loading thumbnail…

Stitching States from Counties

This example demonstrates how to stitch together individual county boundaries into state outlines. It converts a TopoJSON file of US counties into a state-level map by identifying arcs that are shared only within a single state and merging them into continuous paths. The code uses D3.js to load and process the topology, tracks arc membership per state, and reconstructs polygons by connecting fragment chains. The resulting map is rendered using the standard D3 `geoPath` projection.

Loading thumbnail…

Underscore’s Equivalents in D3

This example demonstrates equivalent implementations of Underscore.js collection methods using vanilla JavaScript and D3.js, covering operations such as each, map, reduce, find, contains, invoke, pluck, max, min, sortBy, and groupBy. The code pairs each Underscore snippet with its D3 or native alternative, highlighting differences in behavior, such as d3.max returning the maximum value rather than the corresponding object, and d3.nest() for grouping. It serves as a practical reference for developers migrating from Underscore to D3 or modern JavaScript.

Loading thumbnail…

Counting Weekdays

This example demonstrates how to count the number of weekdays between any date and January 1, 1970, using the custom `weekday` function, which also provides an `invert` method to reverse the calculation. The code defines helper functions `weekdaysInYear` and `weekdayOfYear` to compute weekday totals per year and per date, accounting for skipped weekends. It relies on the D3.js library’s `d3.time` methods, such as `d3.time.dayOfYear` and `d3.time.year`, to extract day-of-year and year information from JavaScript `Date` objects, enabling accurate weekday arithmetic without external data.

Loading thumbnail…

Finite State Stream

This visualization demonstrates how GeoJSON path rendering can be optimized by maintaining a finite state machine that tracks whether the path context is currently inside a line, polygon, or at its first point. Using the `d3.geoPath` context API, the code selectively issues `moveTo`, `lineTo`, `arc`, and `closePath` calls based on the state bits, avoiding redundant drawing operations. The `pointRadius` parameter controls the size of point markers, while `polygonStart` and `polygonEnd` toggle polygon state to manage closed shapes efficiently. This stateful approach minimizes the number of context switches and drawing commands issued to the underlying rendering engine.

Loading thumbnail…

GeoJSON Transforms

This example demonstrates how GeoJSON geometry types can be transformed into simplified or filtered representations by applying custom point, line, and polygon handlers. It builds on the D3 geo module’s type dispatch system, explicitly defining default handlers for Feature, FeatureCollection, and GeometryCollection objects alongside primitive geometries. The code uses d3_geo_type and d3_noop to create a reusable translator, showing how to override or extend processing for each GeoJSON type. The rendering approach is not shown, focusing solely on the data-transformation pipeline.

Loading thumbnail…

Shared Data

This interactive map visualizes the population distribution of the United States by rendering state and county boundaries alongside state centroids. Built using D3.js, the visualization combines `d3.geoPath` to project and draw the geographic shapes from the included `us-states.json` and `us-counties.json` files, while `d3.geoPath` also handles the state centroids from `us-state-centroids.json`. The map is rendered dynamically, displaying the detailed boundaries and population data sourced from the provided gist.

Loading thumbnail…

Projection Contexts

This example demonstrates composable context wrappers for custom geographic projections in D3. It shows how d3.geoPath’s streaming geometry output can be intercepted at multiple stages—first through a radians-and-rotate context, then through a project-and-transform context, and finally through an antimeridian-intersection handler that splits lines crossing the ±180° meridian. The projection.line method chains these contexts to convert spherical coordinates to planar canvas coordinates. The code relies on D3’s geo-projection internals and the Canvas 2D context, illustrating a low-level approach for building tailored projection pipelines.

Loading thumbnail…

Clean Up for Natural Earth GeoJSON

This example presents a command-line Node.js script for cleaning Natural Earth GeoJSON data. It reads a GeoJSON collection from standard input and outputs a simplified version, retaining only the `name` property and an `id` derived from either the `ISO_A3` or `FIPS` code. The script uses `JSON.parse` and `JSON.stringify` for data processing, and it rounds all coordinate values to six decimal places via a custom `round` function applied to `Polygon`, `MultiPolygon`, and `LineString` geometries. The process logs warnings for invalid country codes.

Loading thumbnail…

Lazy Scale Domain

This example demonstrates how to defer a scale’s domain definition until after data loading, highlighting the flexibility of D3’s linear scale. Using `d3.scale.linear()`, it initializes a scale with only a range, then after fetching data via `d3.json`, it computes the maximum value with `d3.max(data)` and assigns the domain. This modular pattern separates scale creation from data-dependent configuration, enabling reusable code where the data source remains dynamic. The visualization itself is not drawn here—the code stops at updating the scale, showing the setup phase for later rendering.

Loading thumbnail…

Git-backed Node Blob Server

A minimal Express server responds to root requests by reading a Git blob from a repository. The example demonstrates a Git-backed blob server, using the `gitteh` library to open a local repository and retrieve a specific blob by its SHA-1 hash. The retrieved blob’s data is then sent back as the HTTP response, showing how raw Git objects can be directly served over HTTP. The code explicitly uses `express` for routing and `gitteh.openRepository` together with `repository.getBlob` to access the content.

Loading thumbnail…

CSV Syntax Definition

This example defines a TextMate grammar for syntax highlighting Comma-Separated Values (CSV) files. It specifies patterns to recognize quoted strings, escaped double quotes, and comma separators, assigning distinct scope names like `string.quoted.csv` and `keyword.operator.comma.csv`. The grammar is written in the plist-based `CSV.tmLanguage` format, intended for use with editors and highlighters that support TextMate language definitions. The rules show how to match field boundaries while preserving escaped characters within quoted sections.

Loading thumbnail…

Google Hurdles

This example animates a Google Doodle as a hurdles-style race, where the logo repeatedly leaps and lands in a rhythmic loop. The visualization is driven entirely by synthetic keyboard events, which the code dispatches to the document’s `hplogo` element via the standard DOM `Event` API. A `setInterval` triggers left- and right-arrow keydown, keypress, and keyup events every 10 milliseconds, simulating a rapid jogging motion. The rendering is purely DOM-based, relying on the browser’s built-in event handling to animate the logo, with no external visualization library such as D3 or Canvas.

Loading thumbnail…

Circle-Circle Intersection

This example shows the two intersection points where a pair of overlapping circles meet, updating live as the circles move under a force simulation. The circles are positioned by `d3.forceSimulation`, and each frame the code extracts their current centers and radii to compute the chord endpoints via a custom `intersections()` function based on the standard geometric formula. The two crossing points are then drawn as small blue dots, while the circles themselves are rendered as SVG circles. The implementation uses D3’s simulation and selection APIs to bind data and update positions smoothly.

Loading thumbnail…

Read File or HTTP

This example demonstrates a small utility for reading text content from either a local file or a remote HTTP URL, abstracting the source so callers can use a single `get` function. The code shows a Node.js script that checks the URL protocol: if it starts with `http:`, it uses the `http.get` method to stream the response, collecting data chunks and joining them as a UTF-8 string; otherwise, it falls back to `fs.readFile` with a `"utf8"` encoding. Both paths invoke a callback with either an error or the resulting body, making the helper suitable for loading data files or web resources in server-side visualizations.

Loading thumbnail…

Cube Metrics Client (Node.js + WebSockets)

This example demonstrates a minimal Node.js client for streaming time-series metric data from a Cube server over WebSockets. It connects to the `/1.0/metric/get` endpoint, sends a JSON query requesting the sum of requests at five-minute intervals over a two-day period, and logs each incoming UTF-8 message until 762 responses arrive. The code uses the `websocket` library to manage the connection, sending a structured query and closing the socket after the expected number of messages is received.

Loading thumbnail…

The first commented line is your dabblet’s title

A full-width SVG rectangle is dynamically recolored based on its initial CSS background. The example demonstrates a minimal D3.js interaction: a single `d3.select` call targets the `rect` element and applies a solid red fill, overriding the page’s gradient styling. The HTML contains the SVG markup, while the CSS sets a pink-to-yellow linear gradient as the page background. The script loads D3 from a remote URL and uses the `style` method to mutate the SVG shape’s presentation, showing how D3 can directly manipulate existing DOM nodes.

Loading thumbnail…

Node + MySQL + JSON

This example demonstrates a Node.js server that serves JSON data from a MySQL database to a front-end visualization. It sets the server’s timezone to UTC and uses Express to handle HTTP requests, with the `connect-gzip` middleware compressing responses. A GET endpoint for `/things/:id.json` queries a MySQL table named `things` via the `mysql` client, selecting fields like `name`, `favorite_color`, and `airspeed_velocity` based on the numeric ID from the URL, then returns the result as JSON. The code shows a direct pipeline from database query to API response, ready for consumption by a client-side chart.

Loading thumbnail…

d3.create + selection.adopt

This example demonstrates two new D3 API methods, `d3.create` and `selection.adopt`, through their source code diffs. `d3.create` constructs a new element (namespaced or not) and wraps it in a selection, while `selection.adopt` moves existing nodes from another selection into the current context by appending them as children. The diff also shows changes to `selection.select` and `selection.selectAll` to pass the group index as a third argument to the selector callback, enabling hierarchical context for these operations. The code is written against the core `d3.selection` prototype and uses standard DOM methods like `document.createElementNS` and `appendChild`.

Loading thumbnail…

Prototype Chart Template (WIP)

This prototype defines a reusable pie chart component using the D3.js library, specifically through the `d3.create` and `d3.select` APIs to construct and manage an SVG scene. The code exposes a minimal fluent interface—`pie.data` and `pie.parent`—for setting the chart’s data source and attaching it to a parent element, while a private `redraw` function returns the chart object without yet performing any actual drawing or computation. The example shows only the structural scaffolding of a visualization, with no data bound or visual output generated; its rendering behavior remains unimplemented at this stage.

Loading thumbnail…

2D Matrix Decomposition

This example demonstrates how a 2D transformation matrix can be decomposed into its fundamental components: translation, rotation, scale, and skew. The visualization shows a small interface where users can manipulate a matrix, and the code, using the `transform.js` file and the D3.js library, computes and displays these decomposed values. It leverages SVG DOM APIs such as `createElementNS` to parse transformation strings, then applies linear algebra operations like dot products and normalization to extract the parameters. The implementation provides a custom `d3_transform` object with `translate`, `rotate`, `scale`, and `skew` properties, offering a clear breakdown of matrix decomposition.

Loading thumbnail…

Transition End

This visualization demonstrates a custom D3.js transition extension that defers transition completion until all elements in a selection finish their current animation. The code overrides `transition.end` by creating a new transition with staggered delays equal to each node’s existing delay plus duration, ensuring the promise resolves only after the slowest element settles. Using the D3 selection internals, it groups nodes and computes per-element timing, then applies the original easing function. The example relies on D3’s transition API to coordinate asynchronous behavior, making it useful for choreographing complex multi-stage animations where precise sequencing matters.

Loading thumbnail…

Pointing

This example shows a scatterplot of 100 random points, with dot color scaled from orange to brown based on y-value and a label revealing each dot’s precise y-value upon hover. Using Protovis, the visualization employs `pv.Behavior.point()` on a root panel to track mouse movement and trigger `point` and `unpoint` events on individual dots. A singleton nested panel tracks an active state per dot, toggling label visibility via `anchorTarget().active()`. Random jitter is applied to x-positions, and axes are drawn with `pv.Rule` and `pv.Label` from linear scales.

Loading thumbnail…

Gist 619560

This visualization loads a map using Polymaps and merges it with a local fork via a shell script. The code demonstrates a version-control workflow rather than a graphical output, as it logs git commands piping the `mbostock/master` branch into the local tree. The primary rendering relies on Polymaps’ tile-based mapping, while the surrounding repository management shows how to integrate external contributions. The example pairs a geographic data display with a practical Git merge, highlighting maintenance of a live mapping project through `git remote`, `fetch`, and `merge` operations.

Loading thumbnail…

Polymaps / JSONP Queue

This example demonstrates Polymaps loading geographic data asynchronously through a JSONP queue. It shows how the library fetches map tiles from a remote server using a callback-based mechanism, enabling cross-domain requests without CORS. The code extends `po.queue` with a `jsonp` function that injects a script tag, substituting a generated callback ID via the `{C}` placeholder in the URL template. The `Url.js` patch adds support for this placeholder, allowing the queue to manage multiple simultaneous requests while tracking active loads and cleanup procedures.

Loading thumbnail…

polymaps.appspot.com

A web app serves pre-scraped GeoJSON boundary data for US states and counties from a Google App Engine backend. The app's URL handlers route requests for state or county data, while a Python scraper fetches OpenStreetMap data via ModestMaps, clips geometries using Shapely, and outputs compressed GeoJSON at multiple zoom levels. The frontend, not shown, would likely render these features as interactive polygons, with the server enabling cross-origin requests for client-side visualization.

Loading thumbnail…

Polymaps / Procedural Perlin

This example displays a procedurally generated Perlin noise pattern rendered as a map using Polymaps. A web worker computes the noise values for each tile, writing RGB pixel data into an array, which is then posted back and displayed as a colorful texture. The code implements Ken Perlin’s classic noise algorithm from scratch, including fade, lerp, and gradient functions, and uses the `postMessage` API to communicate tile data asynchronously. The visualization demonstrates how noise can be generated on demand for arbitrary zoom levels and map coordinates.

Loading thumbnail…

Base64.js

This example demonstrates a compact implementation of Base64 encoding in JavaScript, showing how binary data can be converted into a six-bit character representation using the standard Base64 alphabet. The code defines a function, `encode`, that iterates over the input string’s character codes and constructs the output by bit-shifting values and selecting characters from a lookup string. It uses standard JavaScript string methods like `charCodeAt` and `charAt` alongside bitwise operators, with no external libraries or visualization components involved. The example serves as a clear, minimal demonstration of encoding logic rather than a data-driven graphic.