F

FrissAnalytics

@FrissAnalytics·216 public vizzes

Loading thumbnail…

gradient path

A circular path is drawn as a gradient stroke that smoothly transitions through pink, purple, and back to pink, with a partially hidden segment indicated by a transparent gap. The example samples the SVG path uniformly using `getTotalLength` and `getPointAtLength`, then generates a series of quads and computes stroke outlines with custom line-join logic. Each quad is rendered as a separate filled SVG path, and its color is interpolated via `d3.interpolateRgbBasis`, with opacity controlled by the path position relative to the `complete` fraction. This technique produces a smooth, colorful gradient along the stroke without relying on SVG linear or radial gradients.

Loading thumbnail…

Force layout on canvas with zoom/pan and drag

A black canvas displays a force-directed network of small white nodes with red exceptions, connected by white edges. The example uses D3 v4 and d3-force v1, with d3.forceSimulation managing the layout. Users can pan, zoom, and drag nodes via d3.zoom and d3.drag, with all rendering performed directly on the canvas 2D context. Node positions update on each simulation tick, and the graph is drawn from a local data.json file.

Loading thumbnail…

d3 force states v4

This example uses D3 v4’s force simulation to create a draggable, distorted map of the lower 48 U.S. states. It first draws the state boundaries as SVG paths using `d3.geoPath` and TopoJSON data from `us-10m.v1.json`, then computes state centroids and connects neighboring states via a Voronoi tessellation (`d3.voronoi`). The simulation applies `d3.forceManyBody`, `d3.forceLink`, and `d3.forceCenter` to let users pull states apart while maintaining link distances. The view shows the map’s shapes and links shifting dynamically as the simulation runs, with drag interactions handled by `d3.drag`.

Loading thumbnail…

network fade | d3v4 es2015

This interactive network visualization uses d3.forceSimulation to lay out a small graph of 13 nodes and 16 links loaded from a local graph.json file. Hovering over a node fades all unrelated elements, highlighting the node and its first-degree neighbors along with their connecting links. The code uses d3v4 and ES2015 syntax, renders to SVG, and applies a fade effect by adjusting stroke and fill opacity while swapping between solid and faded arrow markers.

Loading thumbnail…

Zoomable Force Directed Graph d3v4

This graph uses a force-directed layout to arrange a network of named characters, with gray links showing relationships and black circles for nodes. Users can zoom and pan the entire visualization via mouse interactions. The example is built with d3.v4, using d3.forceSimulation with d3.forceLink and d3.forceManyBody, and renders to SVG. The node and link data are hardcoded in the script, with links flagged as allies or enemies.

Loading thumbnail…

D3 in Action Chapter 11 - Example 6

This example demonstrates a hybrid rendering technique for large-scale network visualizations, using 3,000 nodes connected by roughly 1,000 random links. It first draws the nodes as red SVG circles, which retain mouse interactivity, while simultaneously rendering the edges on an overlay HTML5 Canvas for performance. A force-directed layout, driven by `d3.layout.force()`, updates node positions on each tick, clearing the canvas and redrawing the link strokes before repositioning the SVG circles. The approach balances interactivity with animation speed, leveraging both the Canvas `getContext("2d")` API and D3’s selection logic.

Loading thumbnail…

EuroVis 2019 Twitter interaction network

This interactive node-link diagram maps the Twitter interaction network around the EuroVis 2019 conference, where each node is a user and links represent retweets, replies, or quotes between them. Node color intensity reflects tweet activity, with darker nodes indicating users who tweeted more using the #EuroVis hashtag. The visualization combines two force-directed layout algorithms: it first applies Random Vertex Sampling from d3.forceManyBodySampled() for a fast initial layout, then refines it with 10 iterations of the Barnes-Hut simulation from d3.forceManyBody(). Rendered with D3 v5 as an SVG, this example highlights a hybrid approach to scalable network layout. Data is sourced from a gist by FrissAnalytics and is available under a BSD-3-Clause license.

Loading thumbnail…

canvas + drag + zoom + fixed nodes

This example shows a force-directed network graph rendered on a canvas, where nodes settle into a fixed layout once the simulation ends. Users can drag individual nodes and zoom or pan the entire visualization with the mouse. The code uses D3 v4’s d3.forceSimulation with charge, link, and centering forces, and handles canvas rendering through the 2D context with transform scaling and translation. Node and edge data are loaded from an external JSON file, with pre-defined edge connections.

Loading thumbnail…

Force layout on canvas with zoom/pan and drag

A force-directed network layout renders nodes and edges on a canvas with zoom, pan, and drag interactions. The visualization uses `d3.forceSimulation` to position nodes based on charge, link, and centering forces, while `d3.zoom` and `d3.drag` handle transformations and node fixation. Data comes from a local `data.json` file containing node IDs and links. Nodes are drawn as circles, with one node colored red via a custom `col` property, on a black background.

Loading thumbnail…

part 3, Zoom and Panning with D3.js and canvas

This example demonstrates interactive zooming, panning, and brushing of a synthetic scatterplot containing 10,000 random data points, rendered with a hybrid SVG–Canvas approach. The D3.js v4 code overlays an SVG layer for axes and controls on top of a Canvas layer for efficient point drawing, using `d3.zoom` and `d3.brush` to handle transformations and selections. A toolbar offers Reset, Zoom, and Brush modes, where zooming rescales axes via `d3.scaleLinear` and redraws points with `Canvas` arc primitives, while brushing highlights the selected region on the SVG layer.

Loading thumbnail…

Cold Force Dragging

This example adapts d3-drag to a d3-force simulated network graph, freezing nodes in place after the layout settles. On drag start, the targeted node is fixed to the pointer via `simulation.fix`; when the gesture ends, it remains fixed, and the simulation’s "end" event triggers a `settled` function that pins all nodes at their final positions, keeping the graph cold. The visualization uses the classic *Les Misérables* co-occurrence dataset, with gray links and circles colored red when fixed. The author is FrissAnalytics, built with D3 v4 and rendered using SVG.

Loading thumbnail…

animated bar chart with labels

This animated bar chart displays the percentage of school districts meeting a connectivity benchmark for the years 2015 through 2018, with the final year highlighted in orange. Built with D3 v4, the SVG visualization uses `d3.scaleBand` and `d3.scaleLinear` to map years and values, while `d3.axisBottom` renders the x-axis ticks. Bars and their percentage labels grow sequentially via `transition().duration(600).delay()` as the dataset is read from an inline JavaScript array.

Loading thumbnail…

Input Value Interpolation

This example animates the value of an HTML range input from 0 to 255 over 7.5 seconds, visually demonstrating how a transition can interpolate a DOM property. It uses a custom `valueTween` function that returns a closure over `d3.interpolateNumber`, which computes the numeric interpolation between the input’s current value and the target. The transition, chained via `d3.select("input").transition()`, applies this tween to the `value` attribute, updating the slider’s position in real time. The page includes no external data, relying solely on D3 v3’s transition and tween APIs.

Loading thumbnail…

vertical jittered line (grids)

This example renders a grid of vertical jittered lines, where each line is drawn within a brick-shaped cell and perturbed by random offsets in both x and y directions. It uses d3.gridding to arrange 3,050 data points into a brick layout, then d3.line with curveBasis to draw each path from five sequentially spaced points. The random jitter is applied via Math.random() within the line generator, producing a scribbled, hand-drawn aesthetic. The visualization is built with D3 v4 and rendered as SVG paths.

Loading thumbnail…

Interpolate anything with React Motion

This example shows how React Motion can drive an interactive color and text animation. When the user presses and holds the central area, a single interpolated value `t` animates from 0 to 1, causing the background to transition between two colors and the text to shrink while displaying the progress as a percentage. The code uses React Motion’s `Motion` and `spring` components for the animation, and d3’s `d3.interpolateHclLong` to create the color interpolator, while `d3.format` formats the numeric value. The rendering relies on React’s virtual DOM, with event handlers for mouse and touch input.

Loading thumbnail…

van Wijk Smooth Zooming

This example demonstrates smooth zooming transitions between two positions and scales over a static hexbin mesh. The visualization uses `d3.interpolateZoom` to interpolate between two center coordinates and zoom levels, with an SVG `g` element animated via `transition.attrTween`. The code renders a hexagonal grid mesh using the d3.hexbin library, with circular markers highlighting the start and end points. The animation loops indefinitely, alternating direction between the two views, and uses the `transform` function to calculate the appropriate translation and scaling for each frame.

Loading thumbnail…

Brush Transitions

Five thousand random points are drawn in an SVG scatterplot. A draggable brush region highlights points inside it in red, and after the mouse is released, the brush smoothly animates back to its original position from the default extent. The example uses D3’s `d3.svg.brush`, `d3.geom.quadtree` for efficient point selection, and a transition on the brush call to animate the extent, interrupting any ongoing transition if the user interacts again.

Loading thumbnail…

Brush Transitions

This example demonstrates brush transitions, a feature introduced in D3 3.3, where a rectangular brush automatically animates back to its default position after the user finishes dragging or selecting a new region. The visualization shows 5,000 random points with a brush overlay; as the brush moves, points within the current extent are highlighted red using a quadtree-based search. The code uses `d3.svg.brush`, `d3.geom.quadtree`, and `d3.scale.identity`, with SVG circles for rendering. Applying the brush to a `transition` (rather than a selection) smoothly returns the brush to its original extent, and interacting with the brush interrupts any ongoing transition.

Loading thumbnail…

Ordinal Axis

This example demonstrates how to draw a simple ordinal axis using D3.js. It creates a bottom-oriented axis with four categorical values—apple, orange, banana, and grapefruit—positioned evenly across the chart width using the `d3.scale.ordinal` and `rangePoints`. The rendering is done via SVG elements, with axis ticks and labels styled through CSS classes. The code uses `d3.svg.axis` to generate the axis, and the margin convention places the axis within a fixed-size SVG canvas. The data is hardcoded as an array of fruit names, and no external data source is loaded.

Loading thumbnail…

Convex Hull

A set of 100 randomly positioned points forms a convex hull, depicted as a rounded, padded blue polygon that encloses the outermost points. Users can move the first point by moving the mouse and add new points by clicking, which recomputes the hull in real time. The example uses d3.geom.hull to calculate the polygon boundary and d3’s selection and data-join methods to update the SVG circles and path. Drawing occurs in SVG with d3.v3, and the hull’s thick stroke visually pads the geometric outline.

Loading thumbnail…

minimalistic circle grid

A minimalistic circle grid displays ten uniformly sized circles arranged in a single vertical column, each positioned at a fixed radius. The visualization uses D3 v4 with the `d3.gridding()` layout function to compute the grid coordinates from a simple array of ten data points. Circles are rendered as SVG elements, translated to their calculated `cx` and `cy` positions within an 800-by-600 viewport. The example relies on the external `d3-gridding` plugin to handle the layout, with no additional styling or interaction beyond the basic geometric arrangement.

Loading thumbnail…

Grid layout

A grid layout arranges points and rectangles into evenly spaced rows and columns, with new items added and removed in a cycling animation. Two separate grids are rendered side-by-side in an SVG: one uses points with `d3.layout.grid`’s `.points()` mode, the other uses bands with `.bands()` and padding. The code leverages `d3.select`, `d3.range`, and the `transition` API to smoothly animate changes as the data array grows and shrinks, demonstrating how layout calculations update dynamically.

Loading thumbnail…

Plasma

This interactive visualization simulates charged particles—large crimson protons and small darkslategrey electrons—that attract and repel based on an inverse-square magnetic force, while non-elastic collision prevents overlap. Sliders adjust the particle count and the positive/negative ratio, showcasing the emergent clustering dynamics. Built with D3.js, it uses `d3.forceSimulation` with custom `forceMagnetic`, `forceBounce`, and `forceSurface` plugins, rendering as SVG circles updated on each tick. The code defines particle generation from a density parameter and applies hard boundary limits to keep them on screen.

Loading thumbnail…

Sankey Gradients

A Sankey diagram visualizes patient flow from referral through surgery, with links colored by gradients that blend the colors of their source and target nodes. The diagram is built using D3.js and a custom `d3.sankey` module, which handles node positioning and link layout. The SVG rendering defines unique linear gradients for each link, created via the `defs` element, with colors derived from a categorical scale. The chart is interactive, allowing nodes to be dragged, which triggers a relayout of the links.

Loading thumbnail…

D3 & Font-Awesome

This example demonstrates how to combine D3 with Font Awesome to create an interactive row of clickable social media icons. It shows a static, horizontally arranged set of six square brand icons—including Twitter, Facebook, LinkedIn, YouTube, GitHub, and Google Plus—that respond to user mouse events. The visualization uses D3’s data join to bind an array of icon names to newly appended `<i>` elements, while Font Awesome supplies the glyphs via CSS classes. Hovering changes the background color to light gray, clicking turns it gray and logs the icon name to the console, and releasing restores the hover state. The code relies on D3’s selection and style methods, plus Font Awesome’s CSS framework, with no external data source.

Loading thumbnail…

Hierarchical Edge Bundling

This hierarchical edge bundling visualization maps the dependency structure of the Flare class hierarchy into a circular layout. Using D3 v4’s `d3.cluster` and `d3.radialLine` with `d3.curveBundle`, it draws bundled SVG paths that connect each class to its imports. Hovering over a node highlights incoming dependencies in green and outgoing dependents in red via CSS classes. The data comes from the bundled `flare.json` file, which lists each class and its imports.

Loading thumbnail…

Interactive tool for creating directed graphs using d3.js.

This interactive tool lets users build and edit directed graphs entirely in the browser. Nodes are created with a shift-click, connected by dragging between them, and can be deleted or retitled, while the whole graph supports pan and zoom. The visualization uses d3.v3’s `d3.behavior.zoom` and `d3.behavior.drag` to manipulate SVG circles and paths, and includes file upload and download via the FileSaver API. The code uses `d3.select` for event handling and manipulates the DOM directly, with a JSON format for saving graph data.

Loading thumbnail…

Text Transition I

A large number in a heading transitions continuously between random values up to one million, using a tween to interpolate the numeric value and reformat it with comma separators via `d3.format`. The animation runs in a repeating loop, with each cycle lasting 2.5 seconds followed by a 1.5-second pause. The code uses D3 v4’s `transition.tween` and `d3.interpolateNumber` to smoothly change the text content, unlike `transition.text`, which only sets the value once.

Loading thumbnail…

Swarmalator

A swarm of colored circles self-organizes into dynamic patterns, with each particle's hue representing its internal phase. The simulation uses `d3.forceSimulation` to integrate pairwise interactions that combine spatial attraction with phase coupling, controlled by adjustable parameters J and K. Colors transition smoothly via an HSL mapping, while an optional temperature mode recolorings particles based on their kinetic energy using an Inferno colormap. The visualization runs on a Canvas element, rendered in real time as the swarm evolves and responds to mouse interaction.

Loading thumbnail…

Treemap 4.0

This treemap visualizes the hierarchical structure of the Flare dataset, with each leaf node represented as a rectangle sized by its numeric value and colored by its top-level category. A dropdown menu above the chart lets users dynamically switch between five tiling algorithms for the treemap layout. The example uses the `d3_hierarchy` treemap API, setting the tile method based on the selected option, and renders the result as SVG using `d3.csv` to load the data from flare.csv.

Loading thumbnail…

Hamilton characters #2

This visualization maps the speaking appearances of characters from the musical *Hamilton* across its songs and lines. It shows each character's presence by arranging colored circles on a grid, where circle radius represents the number of lines in each song for that character. The circles are positioned near labels for each character and use a force-directed layout via `d3.forceSimulation` with `forceX`, `forceY`, and `forceCollide` to cluster appearances. Data is loaded from `characters.json` and `lines.json`, and the circle positions are updated on each simulation tick.

Loading thumbnail…

Gooey Effect

Sixty purple circles animate between a regular grid and a clustered circle, creating a smooth gooey merging effect. The transition is driven by an SVG filter using `feGaussianBlur` and `feColorMatrix`, with the blur values tweened via `transition.attrTween`. D3 v4’s `d3.forceSimulation` handles the clustering physics, while staggered `transition` delays on circle positions emphasize the organic flow. The effect alternates between the two states on a loop.

Loading thumbnail…

Another Earth(s)

Three orbiting Earths circle a central point against a black background, each with a distinct color and orbital radius. The visualization renders world landmasses from a World Atlas GeoJSON file, updated per frame via an orthographic projection. Using d3.geoPath and d3.geoOrthographic, the code rotates each planet’s projection and applies a timed transform to animate both the land path and a colored sphere along its circular orbit. This SVG-based animation runs continuously, with white orbit rings marking each path.

Loading thumbnail…

Solar System

A pseudo-3D solar system rendered in SVG with D3 v4, showing all eight planets arranged in a row, each rotating at relative velocities to Earth. Orthographic projections and radial gradients provide shading, while hover interactions reveal radius, tilt, and day length for each planet. The visualization includes a starfield background and planetary graticules, driven entirely by D3 selections and scales.

Loading thumbnail…

Draggable Images

Four circular portraits are rendered in an SVG scene, each showing a doctor’s image from an external URL, clipped to a circle and outlined with a gray ring. Using D3 v4’s `d3.drag` behavior, each group of image, clip-path, and outline can be dragged freely across a warm beige background, with the dragged element lowered behind the others on release. The code also defines a Gaussian blur filter and includes commented-out resizing transitions, though active functionality is limited to dragging.

Loading thumbnail…

D3 in Action Chapter 7 - Example 1

This example renders a world map from GeoJSON data using D3.js version 3.5.5. It displays country boundaries as gray, semi-transparent polygons with black outlines on an SVG canvas. The code loads `world.geojson` via `d3.json()`, applies a Mercator projection with `d3.geo.mercator()` and `scale(277)`, and draws each feature using `d3.geo.path()` with the projection applied. The map is sized at 1000 by 1000 pixels, centered via the projection's translate settings.

Loading thumbnail…

India Mercator

This visualization displays a map of India with its states and union territories, along with major city labels. It uses a Mercator projection and colors each subunit with a category-based color scale. The code employs D3.js v4 with `d3.geoMercator`, `d3.geoPath`, `d3.scaleOrdinal`, and `d3.schemeCategory20`, alongside TopoJSON for geographic data. Functions automatically center and scale the map to fit the window, draw outer boundaries, subunit boundaries and labels, and place city names from the included `india.json` topology.

Loading thumbnail…

Bubble Update Pattern II

This example demonstrates a bubble update pattern where circular elements are drawn as SVG path elements instead of standard circle shapes. The visualization uses a custom `circleToPath` function to generate circular paths, with data derived from a randomized alphabet sequence. Using d3.pack for hierarchical layout and d3.transition for smooth animations, circles exit, update, and enter with color and size changes every 1.5 seconds. The implementation leverages D3 v4’s data join pattern, selecting all `path` and `text` elements to handle dynamic state changes in the visualization.

Loading thumbnail…

Particle viSFest

A grid of small colored rectangles forms the word “viSFest,” with each rectangle initially scattered across the black canvas before a force simulation pulls them toward their target positions. Moving the mouse creates a wrecking-ball node that repels nearby rectangles, causing the text to slosh and deform before settling back. The code uses d3.forceSimulation with forceX, forceY, and forceCollide, while d3.scaleSequential with interpolateRainbow colors each rectangle based on its x-coordinate. The initial text shape is rasterized via Canvas getImageData, and rendering uses SVG rect elements without the gooey filter.

Loading thumbnail…

Data join example

Five circles rendered in SVG display scores for named individuals from a hardcoded data array. The example demonstrates joining data to graphical elements: `d3.selectAll('circle')` selects the existing circle nodes, then the `.data(scores)` method binds each score object to a circle, and the `.attr('r', ...)` call sets circle radii proportionally to the score values. The visualization relies on the D3.js library (version 4.2.2) and uses plain JavaScript array manipulation.

Loading thumbnail…

d3-force testing ground

This interactive demo lets users experiment with the various forces available in d3-force by adjusting sliders and toggles. It visualizes a network of characters from *Les Misérables* as SVG circles and lines, using `d3.forceSimulation` with configurable `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, `d3.forceCenter`, `d3.forceX`, and `d3.forceY` forces. Users tweak parameters like charge strength, collision radius, and link distance to see how each force shapes the layout, with node size and stroke reflecting current settings. Dragging nodes pauses and resumes the simulation via `d3.drag()`.

Loading thumbnail…

Cluster Dendrogram

This cluster dendrogram visualizes a hierarchical dataset of insurance-related entities and attributes, using a node-link diagram. The leaf nodes represent individual data fields like Claim, Policy, and their sub-attributes, arranged along the right edge, while internal nodes cluster them hierarchically. The chart uses D3.js v4, employing the `d3.cluster()` layout algorithm and `d3.stratify()` for data parsing. Each node is depicted as a circle with gray and dark internal colors, while curved links connect parent and child nodes. The data is rendered as an SVG with 960px width, showing a non-radial dendrogram where classes align at the same depth.

Loading thumbnail…

Radial Tidy Tree

This example presents a radial tidy tree visualization of the Flare class hierarchy, arranging nodes in concentric circles around a central root. The code uses the `d3.tree` layout with a radial size of 360 degrees, projecting Cartesian coordinates to polar form via a custom `project` function. Data is loaded from `flare.csv` and processed with `d3.stratify` to establish parent-child relationships. Nodes are rendered as SVG circles with labels, connected by curved cubic Bezier paths using `d3.csv` for data ingestion and the `enter` selection pattern for element creation.

Loading thumbnail…

Gradient Along Stroke

This example shows a single thick SVG path rendered as a continuous gradient that transitions from green to red along the stroke, which can indicate directionality. Using the D3 v4 library, the code samples points uniformly along the path with `getPointAtLength`, then computes miter joints via line-line intersection for each segment. Each segment is filled and stroked with a color interpolated by `d3.interpolateRainbow` based on normalized path length, creating the gradient effect while avoiding antialiasing artifacts.

Loading thumbnail…

Rainbow Worm

A rainbow-colored, segmented worm undulates across a dark background. The animation continuously reshapes the sine wave path, with each segment’s hue mapped from its horizontal position via an HSL color scale. Built with D3.js v3, the visualization uses SVG paths and a timer-driven update loop. The code manually computes thick, joined strokes for each quad of points, with width and color varying by segment, recreating the peristaltic motion from the original Protovis example.

Loading thumbnail…

can't we all get along?

Three groups of 300 force-directed nodes are drawn with different web technologies—black circles on an HTML5 Canvas, blue circles in SVG, and red circles as absolutely-positioned divs. The example uses d3.v3’s `d3.layout.force` for simulated collision and mouse movement interaction, plus `d3.behavior.zoom` for pan and zoom on the shared coordinate scales. It demonstrates how Canvas, SVG, and DOM elements can be updated together in a single `tick` handler via `map.redraw`, showcasing interoperability among rendering approaches.

Loading thumbnail…

(d3v4) Force Layout w highlights

This example shows a force-directed network graph of character interactions from *Les Misérables*, rendered as SVG nodes and links. Hovering over a node or link highlights its connections by fading unrelated elements, while a tooltip displays names, groups, and link strength. Dragging nodes repositions them, and double-clicking releases them from the fixed position. The visualization uses d3.forceSimulation with link, charge, and center forces, plus d3.drag for interaction and d3.schemeSet3 for coloring nodes by group.

Loading thumbnail…

Rasterized SVG

This example demonstrates a custom rasterization function that converts SVG shapes into a grid of colored pixels on a canvas, aiming to enable mesh generation for 3D printing. A D3.js slider controls pixel size, and the code samples path outlines using `getPointAtLength` and `getTotalLength` to test point-in-polygon membership. The rendering shows a D3 logo alongside an orange circle, with each grid cell filled based on the SVG fill color, and includes animated pixel-fill effects on a canvas overlay.

Loading thumbnail…

pack forever

A black background hosts a yellow-and-blue bubble chart that continuously grows as new circles are added every 295 milliseconds. The visualization shows a force-directed packing layout where each new circle pushes existing ones aside to make room. The code uses d3.forceSimulation with forceX, forceY, forceLink, and forceCollide to compute positions, while d3.pack and d3.stratify generate the initial layout from random data. Circles transition smoothly via d3 transitions in SVG, with sizes scaled by a d3.scaleLinear function.

Loading thumbnail…

D3 voronoi interaction

This example demonstrates how Voronoi diagrams improve hover interaction on a scatterplot by partitioning the chart area into cells around 50 randomly generated points. Clicking the chart reveals the Voronoi overlay, while moving the mouse highlights the nearest data point with a colored ring and displays its properties in a text output. The implementation uses D3 v4’s `d3.voronoi` layout with the `find()` method to locate the closest site, alongside `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` for scales and axes. Points and axes are rendered as SVG elements within an HTML page.

Loading thumbnail…

Enclosing Force Circles

This example visualizes pay ratios at London universities, where each enclosed circle represents an institution and the dots inside it correspond to the ratio between the lowest and highest pay. The circles are arranged in a grid layout. The code uses `d3.forceSimulation` with `d3.forceX`, `d3.forceY`, and `d3.forceCollide` to position the dots, and `d3.packEnclose` to draw a larger circle around each cluster. Hovering over a circle reveals its numeric ratio, with colors mapped by a linear scale from cyan to magenta. The data comes from the `paygaps.js` file.

Loading thumbnail…

Nepal Topographic Contours

This visualization renders a map of Nepal and Tibet using topographic contour lines. Each contour path is colored along a continuous green color scale based on its elevation property, ranging from 2,000 to 6,000 meters. The map uses D3.js version 3 with a Mercator projection and `d3.geo.path` to draw the SVG paths from a TopoJSON file derived from NOAA’s ETOPO1 elevation data, processed in QGIS. Hovering over a contour highlights it in red.

Loading thumbnail…

Collapsible Force Layout

This interactive visualization displays the hierarchical structure of the Flare dataset using a force-directed layout, with collapsible internal nodes. In the default view, only the top-level "flare" node and its immediate children are visible. Clicking an internal node toggles the visibility of its descendant nodes, with collapsed packages rendered in blue, expanded packages in light blue, and leaf nodes in orange. The code uses d3.layout.force for the physics simulation, d3.layout.tree for computing parent-child links, and SVG elements for rendering nodes and links.

Loading thumbnail…

Radial Tidy Tree

This example presents a radial tidy tree visualization of the Flare class hierarchy, arranging nodes in concentric circles around a central root. The code uses the `d3.tree` layout with a radial size of 360 degrees, projecting Cartesian coordinates to polar form via a custom `project` function. Data is loaded from `flare.csv` and processed with `d3.stratify` to establish parent-child relationships. Nodes are rendered as SVG circles with labels, connected by curved cubic Bezier paths using `d3.csv` for data ingestion and the `enter` selection pattern for element creation.

Loading thumbnail…

Beeswarm

A beeswarm plot displays the distribution of numeric values from a CSV dataset, with each circle representing a data point positioned along a logarithmic x-axis. The circles are arranged using d3.forceSimulation with forceX, forceY, and forceCollide to prevent overlap. A Voronoi overlay via d3.voronoi improves hover interaction: hovering over any cell highlights the corresponding circle in red, and a tooltip shows the data point’s ID and value. The visualization renders in SVG with an axis label and tick formatting.

Loading thumbnail…

d3-force-attract: mouse attract II

Fifty circles with randomized positions and radii are rendered as an SVG. The visualization demonstrates a multi-force physics simulation where a force-based layout continuously attracts the circles toward the current mouse location while a separate collision force keeps them from overlapping. The example uses `d3.forceSimulation()` and `d3.forceAttract()` from the d3-force-attract library, with per-node attract strength defined via the `inertia` property. A mouse-move event updates the attract target and restarts the simulation, updating circle positions on each tick.

Loading thumbnail…

Modifying a Force Layout II

This animated SVG example demonstrates how to add and remove nodes and links from a force-directed graph while keeping transitions smooth. The visualization cycles through a small set of three nodes, periodically re-adding and removing one node and its connections. The code uses d3.forceSimulation with forceManyBody, forceLink, forceX, and forceY, applying the general update pattern via `node.exit().transition()` and `link.exit().transition()`. It also relies on `transition.attrTween` to keep exiting links visually attached to moving nodes during removal.

Loading thumbnail…

Easing

A dropdown menu selects one of 26 easing functions from d3-ease, and the chart renders its curve as an SVG line path with axes showing normalized time t from 0 to 1 on the x-axis and eased time ease(t) on the y-axis. Two animated dots trace the curve: one moves along the path while the other slides vertically, both updating via d3.timer every 3 seconds. The visualization uses d3.scaleLinear, d3.line, and d3.axisBottom/Left with SVG rendering, and changes the function dynamically by reading the select element’s value to call the corresponding d3.ease method.

Loading thumbnail…

Cluster Dendrogram

A cluster dendrogram displays the hierarchical structure of the Flare class hierarchy data, with leaf nodes aligned along the right edge and internal package nodes positioned to the left. The visualization uses d3.cluster() to compute node positions and d3.stratify() to construct the tree from parent-id pairs. SVG rendering draws cubic Bézier curves for links and circles with text labels for each node, using the Flare dataset curated by Jeff Heer.

Loading thumbnail…

Force Transition

A force-directed simulation arranges 100 circles into two distinct clusters, which switch positions when a button is clicked. The chart also includes a quantitative x-axis, making the clusters' locations measurable. Built with D3 v4, it uses `d3.forceSimulation` with `d3.forceX`, `d3.forceY`, and `d3.forceCollide` forces; clicking toggles the strength of the two horizontal forces, causing the groups to slide and swap sides. The simulation is rendered as SVG and animated on each tick, with the source code compiled from ES6 using the Babel browser library.

Loading thumbnail…

Squaring the circle, part 1

This example shows a geometric experiment that builds regular grids by arranging points along the outlines of concentric polygons, with the number of sides and spacing adjustable via a dat.GUI control panel. It starts with a central dot and adds successive layers of rings, each ring containing points distributed evenly along the polygon’s perimeter. The visualization uses D3.js version 4.3 to render SVG circles and paths, with configurable parameters for polygon sides, radius, point size, and opacity. The code dynamically recalculates point positions on any parameter change, demonstrating how circular paths can be approximated and transformed into structured grid-like formations.

Loading thumbnail…

Erdős–Rényi Force Directed Graph

This visualization shows an Erdős–Rényi random graph, where nodes are placed along an Archimedean spiral and edges appear based on a user-controlled probability. Red nodes are those with no connections, and the number on each node displays its degree. Built with D3 v2’s force layout, the example uses SVG text and lines for rendering, with a dat.GUI panel to adjust node count, link probability, and force parameters like charge and gravity. A mousewheel zoom control also changes the node count dynamically.

Loading thumbnail…

Triangulation morphing #2

This animation morphs between U.S. state polygons using triangulation, cycling through all 48 contiguous states in a continuous sequence. It starts by showing a single state, then gradually subdivides it into many smaller polygons before merging them into the next state. The process uses the earcut library to triangulate polygons and TopoJSON for topology operations, while d3’s `transition.attrTween` and `interpolateString` handle the smooth path interpolation. Each state’s fill color shifts through a cool color palette during the transition.

Loading thumbnail…

Force Brush

A force-directed graph of character co-occurrences from *Les Misérables* allows interactive selection of nodes via a rectangular brush. Dragging the brush highlights nodes within the selected region in red, while an empty brush click deselects all nodes. Using `d3.layout.force` for the physics simulation and `d3.svg.brush` for selection, the graph colors nodes by their group with a category20 scale, drawing links weighted by co-occurrence strength.

Loading thumbnail…

D3 | Dorling map using force layout

This visualization shows a Dorling map where each country is represented as a circle positioned by longitude and latitude coordinates, with circle size encoding a numeric value and color a separate range value. A force-directed network layout adjusts the circles to avoid overlap, while an overlaid Voronoi grid enhances interactivity by providing stable hit areas for selecting countries. The map is built with D3 v3, using data from `dorling-coordinates.json` and `dorling-countries.json`, and the force simulation and Voronoi diagram are rendered via D3’s force layout and `d3.geom.voronoi` APIs. The Voronoi grid is visible in development mode but hidden in production.

Loading thumbnail…

Grid Multi Foci Force Layout

This example shows a grid multi-foci force layout that clusters circles representing project statuses and owners. Each node is colored by a categorical scale and positioned near one of several fixed focal points arranged in a grid, with node radius encoding a numeric value. The visualization uses D3 v3’s force layout to simulate attraction toward these foci, with an ordinal x-scale mapping statuses to columns. Data is drawn from an inline JavaScript array, and rendering is done via SVG circles with jQuery used for window sizing.

Loading thumbnail…

Force-Directed Layout with Convex Hull

A force-directed layout arranges 100 nodes into four groups, each distinguished by color and encircled by a semi-transparent convex hull that updates live as the nodes move under simulated forces. The D3.js code nests nodes by group using `d3.nest()`, then draws the hulls by recomputing their paths with `d3.geom.hull` during the `force.on("tick")` callback. The SVG animation also supports dragging and re-randomizing positions to demonstrate the clustering.

Loading thumbnail…

Circle Packing Transition

A circle packing layout transitions between two data dimensions, resizing leaf circles from water content to protein content for a dataset of cheeses. The example uses d3.layout.pack with a custom value function, binding CSV data from nutrients.csv to SVG circles. Calling pack.value to switch the metric, then rebinding data and applying a three-second transition with .attrTween-like position and radius interpolation animates the re-layout.

Loading thumbnail…

Layered gravity with weak side constraints, mass and wind-up

A force-directed graph demonstrates a custom gravity model that pulls nodes toward assigned layers while managing collisions as if they have mass. Tweakable parameters adjust side-constraint strength and a windup factor for unmixing, with live metrics tracking alpha value, tick times, and frame rate. The visualization uses d3.layout.force for the physics simulation and d3.geom.quadtree for collision detection, rendered as SVG circles with color-coded layers.

Loading thumbnail…

Bubble Chart

This bubble chart encodes the Flare class hierarchy in circle areas, packing hundreds of values into a compact space. It shows the relative size of each class by area, with colors distinguishing top-level packages and labels clipped within each bubble. The visualization uses d3.pack for the circle-packing layout, d3.hierarchy to structure the CSV data, and d3.scaleOrdinal with a category color scheme. Text labels are placed as tspans within clip paths, with hover tooltips showing full IDs and formatted values.

Loading thumbnail…

http://stackoverflow.com/questions/32510101/d3-why-is-enter-selection-not-showing-any-transition-for-a-donut-chart?noredirect=1#comment52896340_32510101

This example demonstrates a dynamic donut chart that updates its data every 750 milliseconds, with smooth animated transitions for the arc segments and labels. The visualization uses D3.js 3.5.6 to render SVG paths and text, employing `d3.layout.pie` for data binding and `transition.attrTween` with a custom pie tween to interpolate start and end angles. A color scale assigns each category a distinct hue, while a center text element displays the total sum. The code includes custom label rotation logic to keep text readable around the ring.

Loading thumbnail…

Bounded Force Layout - Columns by Depth

This example uses a bounded D3 force layout to visualize energy flows from source to use, with nodes colored by depth and positioned in columns according to their hierarchical level. The code applies a custom tick function that nudges nodes toward depth-based x-coordinates while constraining them within the SVG bounds, creating a structured layout. It uses d3.svg.axis-free SVG rendering with d3.layout.force, D3 v3, and a simple D3 tooltip on mouseover showing node names. The dataset is a graph of energy production and consumption categories with weighted links.

Loading thumbnail…

Force-Directed Layout

A force-directed layout arranges a small tree of nodes and links in a web page, with nodes as circles and links as gray lines. The graph data comes from a `graph.json` file, and the visualization uses the D3.js libraries `d3.layout.force` and `d3.scale.category20` to compute and render the positions. During the simulation, a weak tree force pushes source nodes upward and target nodes downward, while the layout engine handles charge and link distance to spread the network.

Loading thumbnail…

Voronoi-based point picker

This example demonstrates a Voronoi-based point picker that lets users hover over the clipped Voronoi cell around each point to highlight both the cell and the corresponding circle. Using D3.js with the `d3.geom.voronoi` API, the code generates 100 random vertices and computes their Voronoi diagram, then clips each cell with `clipPath` elements. Mouseover and mouseout events toggle the fill color of the path and the point circle from light gray to blue. The underlying data is purely synthetic, created via `Math.random()`.

Loading thumbnail…

Voroni & Chromatic Scale

This visualization displays a Voronoi tessellation of 2,000 random points, with each polygon’s fill color mapped through a chromatic scale. The example uses D3 v4.0 with the `d3.voronoi` layout, `d3-scale-chromatic`’s `d3.interpolateRdYlBu` for continuous ColorBrewer coloring, and SVG paths for rendering. On mouseover, all polygon fills recolor based on the Euclidean distance from the hovered point’s coordinates, creating an interactive distance-based heatmap effect.

Loading thumbnail…

d3-voronoi-treemap usage

This example shows the global economy by GDP as a Voronoi treemap, where the area of each cell represents a nation's economic weight, grouped by continent. The treemap is generated using the `d3-voronoi-treemap` plugin, which tesselates a circular polygon into nested, weighted cells. The data is loaded from a JSON file containing country GDP values, and visual hierarchy is computed with `d3.hierarchy`. The rendering uses SVG paths and text labels, with hover effects on each cell.

Loading thumbnail…

Cushion Voronoi

A Voronoi diagram partitions the screen into cells, each anchored by a randomly placed site. This example renders the cells as cushioned shapes by filling each polygon with a radial gradient that transitions from white at the site’s coordinates to black at the edges, visually encoding distance from the nearest site. The gradient is defined in SVG `defs` and applied via the `fill` attribute on each `path` element. The code uses `d3.voronoi` from D3 v4 to compute the polygons and positions 20 circular site markers, with the `d3-selection-multi` plugin for setting multiple attributes at once.

Loading thumbnail…

Cushion Voronoi

This visualization shows a Voronoi diagram of 20 randomly placed sites, with each cell shaded by a radial gradient centered on its site. Darker regions indicate higher cost to reach the nearest site. The example uses the `d3.voronoi()` API to compute cell polygons from random points, then renders them as SVG paths filled with `radialGradient` definitions in user space. Each site is marked with a gray circle, and the gradient extends 300 units from the center, creating a cushioned, 3D-like depth effect.

Loading thumbnail…

Grouped Force Layout

This visualization uses a grouped force layout to cluster the character network from *Les Misérables* by community. Draggable nodes are colored by group, with links showing connections, while a Voronoi overlay dynamically partitions the space to visually reinforce each cluster’s territory. The simulation runs on `d3.forceSimulation` with link and charge forces, and custom logic on each tick adjusts node positions toward their group’s centroid. The Voronoi cells, rendered as SVG paths via `d3.voronoi`, update continuously as the layout settles or as users drag nodes.

Loading thumbnail…

Voronoi Spanning tree - short paths

This example builds a Voronoi spanning tree on 1,500 random points using d3.voronoi, with SVG rendering. It visualizes short paths by hopping from each cell to its neighbor that is nearest to a moving root point, computed via a custom `diagram.find` function. As the mouse moves, the tree updates in real time, showing only the edges that link sites along efficient routes toward the cursor. The code leverages d3.v4’s voronoi layout and SVG line elements to display the redrawn spanning tree.

Loading thumbnail…

Collision Radius Transition

A collision-radius transition uses the d3.forceSimulation API to animate 100 circles of varying radii toward the center of a 400x400 SVG canvas. Forces include d3.forceX, d3.forceY, d3.forceCenter, and d3.forceCollide, which pushes overlapping nodes apart. Clicking the “grow” or “shrink” buttons triggers a transition on the fifth circle, interpolating its radius via d3.interpolate and restarting the force simulation to rebalance the layout.

Loading thumbnail…

Octocat Force Layout

This visualization displays a force-directed network of nodes arranged in a grid pattern, where black nodes represent the Octocat silhouette and additional colored nodes (blue drops, green octocats) depict related elements. The nodes connect via links that form a dynamic, interactive mesh. Using D3.js v3, the force layout simulation runs on a Canvas element and updates in real time, with all nodes and links rendered through the Canvas 2D context. The code references a local JSON file to define node positions and colors, and it employs the `dat.gui` library to provide adjustable parameters like friction, link distance, and gravity.

Loading thumbnail…

Collision test with D3 4.0

Five particles in a D3.js 4.0 force-directed simulation demonstrate the inelastic nature of the built-in `collide` force. Two distinct sizes—four large dust particles and one small gas molecule—move and bounce within a bounded Canvas, colliding with each other and a vertical wall. The simulation runs via `d3.forceSimulation` with a `d3.forceCollide` radius function. Unlike elastic collisions, momentum is conserved but kinetic energy is not, as visible in the particle velocities after impacts. The particles are rendered as red, outlined circles on a transparent Canvas.

Loading thumbnail…

Movie Genre, Rating and Budget

This visualization displays movies as bubbles in a force-directed chart, with each bubble’s position along the x-axis encoding IMDB rating and its y-axis position encoding genre. Bubble size represents the movie’s budget, and color encodes the rating value. The chart uses the `d3.forceChart()` plugin, which is built on `d3.layout.force`, to gently shift bubbles toward their target x and y positions while preventing overlaps through collision detection. Data comes from the ggplot2 `movies` dataset, filtered to include only post-2000 films with budget and rating information, and rendered as SVG circles.

Loading thumbnail…

Wrapping Long Labels 2.0

This example demonstrates how to wrap long axis labels onto multiple lines in a horizontal bar chart, using satirical survey data from The Onion about why people are leaving Facebook. The chart displays six humorous reasons as categories on the x-axis, with corresponding percentage values plotted on the y-axis. The code uses the d3.svg.axis API to generate the axes, and a custom wrap function that leverages the getComputedTextLength() method on SVG text elements to measure and split label text into multiple tspans. The data itself is loaded from a TSV file using the d3.tsv method, and all rendering is done as SVG elements.

Loading thumbnail…

Easing Test

Nine labeled circles, each corresponding to a named easing function, sit at the left of a dark-orange ruled track. A click triggers a one-second `transition` that animates the circle’s `cx` attribute to the right using the selected easing, then returns after a delay. Built with D3 v3, the SVG uses `transition.ease` to apply functions like `elastic` and `bounce`, with mouseover recoloring the circles. The data is a hardcoded array of easing names.

Loading thumbnail…

Margin Convention

A demonstration of the D3 margin convention for laying out SVG charts. The visualization shows nested rectangles and axis arrows with labels that clarify the positions of margins, padding, and the coordinate origin. The code uses `d3.select` to append an SVG, `d3.svg.axis` for the bottom and right axes, and `d3.scale.identity` for linear scaling. It explicitly defines `margin` and `padding` objects in JavaScript and translates a G element to establish the chart origin, rendering axes and annotations in SVG.

Loading thumbnail…

Voronoi Labels

This visualization demonstrates a heuristic for labeling scatterplots using Voronoi tessellation. A set of 200 normally distributed points is rendered as small circles, with each point's Voronoi cell drawn as a gray polygon. A orange line connects each point to its cell’s centroid. The code only labels points whose cell area exceeds a threshold (2000), placing the index number at the point’s position. The label’s orientation—top, right, bottom, or left—is determined by the angle between the point and its cell’s centroid, computed using `Math.atan2`. Implemented with D3 v3, it uses `d3.geom.voronoi` with `clipExtent` and `d3.geom.polygon` to generate and analyze cells.

Loading thumbnail…

Static Force Layout

A static force-directed graph layout renders 100 linked nodes as circles and lines in SVG, computed with d3.forceSimulation, d3.forceManyBody, d3.forceLink, d3.forceX, and d3.forceY. The simulation is stopped and looped through a fixed number of ticks before drawing the final positions, avoiding incremental updates. A brief loading text appears while the layout computes asynchronously via d3.timeout.

Loading thumbnail…

Navigate and Zoom around graph

This interactive graph visualization uses a force-directed layout to arrange nodes connected by links. Users can pan by clicking the background, zoom with the mousewheel, and drag individual nodes. Middle-clicking a location adds a new node at that point. The d3.v3 library provides the force simulation, zoom behavior, and drag interactions, while nodes and links are rendered as SVG elements. The graph displays a network with labels on each node, and buttons allow freezing, thawing, or fitting the graph to the viewport.

Loading thumbnail…

Context menu for SVG elements

A context menu appears at the mouse cursor when the user right-clicks a central square in an SVG canvas. The menu, built with D3 v3, lists three text items and is styled with hover effects. The code defines a reusable `contextMenu` function that automatically measures text to size menu entries, and attaches the menu using D3's `on('contextmenu')` event with `d3.event.preventDefault()`. Clicking anywhere else on the body removes the menu.

Loading thumbnail…

d3js - enter(), update() and exit()

A bar of five orange circles sits along a horizontal axis, with a button to swap between two data arrays of different lengths. Using D3 v3, the example demonstrates the data-join pattern: `enter()` appends new circle elements when longer data arrives, `exit()` removes surplus circles when data shrinks, and a `.transition()` updates all remaining circles’ radii and positions. The axis is drawn as simple SVG `line` elements with `text` labels, and the dataset label updates with each toggle.

Loading thumbnail…

Canvas Voronoi

This example visualizes a Voronoi diagram of 100 randomly generated points, with the cell containing the mouse position highlighted in red. As the cursor moves, that site and its cell update in real time. The diagram is rendered entirely to a Canvas 2D context using the d3-voronoi API, computing both cell polygons and Delaunay links. The code draws all cells with black strokes, site markers as small circles, and semi-transparent link lines, demonstrating how d3-voronoi outputs geometric data suitable for immediate canvas drawing.

Loading thumbnail…

Force Layout with Voronoi Cells and Add/Remove Node functionality

A force-directed graph renders colored nodes as Voronoi cells, with each cell clipped to a circular boundary and labeled by index. Users toggle between add and remove modes via a button, then click cells to dynamically insert or delete nodes, updating the layout in real time. The visualization uses d3.forceSimulation for physics, d3.voronoi to compute cell polygons, and d3.drag for node repositioning, with all elements drawn as SVG.

Loading thumbnail…

Modifying a Force Layout with Voronoi Polygons for Dragging and Mouseover of Grouped Elements

This example demonstrates a D3 v4 force-directed graph whose three nodes can be dragged individually, while a Voronoi polygon behind each grouped element expands the clickable and hover area. Hovering activates a node's entire group, highlighting its circle and revealing its hidden text label. The simulation uses `d3.forceSimulation` with charge, link, and center forces, and recomputes the Voronoi overlay on every tick via `d3.voronoi`. The code dynamically adds and removes nodes and links on timed intervals using `d3.interval` and `d3.timeout`, updating the SVG paths, lines, and circles accordingly.

Loading thumbnail…

d3 src tree transitions

This visualization compares the directory structures of D3 versions 1.29.7, 2.10.3, and 3.0.0pre using an animated radial Reingold-Tilford tree. Using the `d3.layout.tree` and `d3.svg.diagonal.radial`, it transitions between three datasets loaded from TSV files, showing how the library's source files were reorganized across versions. Node and link transitions animate opacity, position, and text styling, with version labels fading in and out. The code relies on d3 v2, Underscore.js for nesting helper functions, and SVG rendering.

Loading thumbnail…

thing 0001

A word rendered as text is represented by hundreds of small squares that drift randomly across the screen before settling into the letterforms. The visualization rasterizes the word "enj" onto a hidden canvas using `fillText` and `getImageData`, sampling pixel coordinates as target positions. Each square is a `<rect>` whose position is animated by `d3.forceSimulation`, using `forceX`, `forceY`, and `forceCollide` to move particles toward their targets while preventing overlap. The color and stroke width vary with distance from the center, drawn on both SVG and canvas elements using D3 v4 and the `d3-scale-chromatic` color scale.

Loading thumbnail…

Rotating Cube

A rotating steel-blue cube appears in a Three.js scene, with its vertical and horizontal rotation controlled by two range sliders. The example builds a basic scene with a `PerspectiveCamera`, `BoxGeometry`, and `MeshBasicMaterial`, then adds an `EdgesGeometry` wireframe to highlight the cube’s edges. It is based on the Three.js “Creating a scene” guide and uses the library’s `WebGLRenderer` for canvas-based rendering, with no external data source.

Loading thumbnail…

Canvas area charts zoom on click using d3.interpolateString

This example displays two time-series area charts—solar photovoltaic and building load power—rendered on an HTML5 Canvas using d3.area with a step curve, while SVG axes and a zoom button sit atop. Clicking the button toggles zoom between the full domain and a defined date range using d3.zoom and interpolated scale transitions via interpolateString. The hybrid approach combines Canvas for efficient drawing and SVG for interactive elements, with data loaded from a CSV file and scales updated to animate the view.

Loading thumbnail…

Zoomable Area Canvas with Retina

This zoomable area chart displays time-series power consumption data from the TBLkW.csv file, showing hourly values in kilowatts. The visualization initially presents the full dataset, and users can zoom in using the mouse wheel through d3.zoom, which rescales the time axis via `rescaleX`. Unlike typical implementations, the zoom does not center over the cursor, and the area is rendered with an explicit clip path on a Canvas element using D3 v4’s `d3.area` with a step curve. The code also handles high-DPI displays by adjusting the canvas resolution for sharper visuals on retina screens.

Loading thumbnail…

Departures board

A D3.js split-flap departure board cycles through city names on a black background, with each letter animating through an infinite CSS rotation via `animationiteration` events. The board advances through a shuffled list of cities, updating three rows of flaps per cycle using `d3.select` and `d3.queue`. Text and styling come from a Google Fonts "Roboto Condensed" typeface, while the flip effect relies on `@keyframes` `flipFront` and `flipBack` transforms, with timing accelerated by a "fast" class.

Loading thumbnail…

Departures board

This visualization simulates a split-flap departure board, displaying three rotating rows of city names with a yellow-on-black aesthetic. Each letter flips sequentially through the alphabet until it reaches its target, mimicking the mechanical clatter of a real airport display. The code uses D3 v4’s selection, data binding, queue, and timer APIs to manage letter transitions, while CSS 3D transforms and keyframe animations create the flip effect. An `animationiteration` event triggers the next letter change, and a shuffle process cycles through a hardcoded list of city names.

Loading thumbnail…

Smoother polygon transitions

A state morphs into the next in an animated sequence, with the polygon smoothly transitioning between shapes while yellow and magenta dots mark corresponding vertices. The code uses D3.js and TopoJSON to load U.S. state boundaries, then adds evenly spaced points to equalize vertex counts and finds the optimal winding by minimizing squared distances between point pairs. SVG and D3 transitions animate both the path and circles as states cycle through a shuffled order.

Loading thumbnail…

Rainbow spinner #2

This example displays a continuously rotating rainbow ring on a canvas, with a white gap that stretches and shrinks as the animation cycles. The code uses d3.arc with a canvas 2D context to draw 181 colored segments, each filled and stroked with d3.interpolateRainbow. A d3.timer drives the rotation by updating an angle offset, while d3.select transition with a custom tween on "angle" alternately stretches the start or end edge of the gap, creating a rhythmic pulsing effect.

Loading thumbnail…

Rainbow spinner

Animated SVG loading spinner renders 181 rainbow-colored arc segments using D3's `d3.arc` and `d3.interpolateRainbow`. The 960×500 canvas orbits the spinner around its center via `d3.timer`, while a clip path continuously stretches a plain arc's angle using `transition.attrTween`, alternating between expanding and contracting to mimic an Android-style loader.

Loading thumbnail…

Stippling

This stippling example uses a capacity-constrained point distribution algorithm to render a portrait of President Obama from a grayscale source image. The canvas displays 2000 colored sites, each with 15 assigned points, which iteratively swap points and recenter to achieve a uniform, dense stipple pattern. The animation runs in a loop, redrawing the points and site locations every frame. The code uses Canvas `getImageData` to read pixel density, then applies a custom algorithm with flat typed arrays (`Float32Array`, `Uint32Array`) to optimize performance in the browser.

Loading thumbnail…

Circles Legend

This example demonstrates a legend for circle-marked data, using the same linear scale as the main visualization to encode values. It shows three reference circles sized for data values of 50, 150, and the maximum value, with dotted leader lines and numeric labels indicating the encoded quantity. The implementation uses D3 v4’s `d3.scaleLinear` for the mapping, SVG circles, lines, and text elements, and reads sample data from an inline array. A distinct visual pattern links each circle’s radius to a numeric value through the shared scale.

Loading thumbnail…

d3 workshop Tulp

Fifty red circles orbit a central point, each sized by a random count and positioned by its similarity to a clicked circle. Clicking a circle moves it to the center, increments its count, and reseats all points by a distance function. The example demonstrates animated transitions with d3.scaleLinear for radius and color, d3.scaleSqrt for size, and SVG circle elements, using a click handler and transition duration of 800ms.

Loading thumbnail…

Normalized Stacked Bar Chart

A normalized stacked bar chart displays age-group distributions as proportional segments across U.S. states, with each bar totaling 100% to facilitate cross-state comparison. The visualization uses D3 v4’s `d3.stack` with the `stackOffsetExpand` offset, scales via `d3.scaleBand` and `d3.scaleLinear`, and renders SVG rectangles. Data comes from a CSV of state population figures, sorted by the share of residents under 5 years old. A legend and axis with percentage ticks are included, all styled with D3’s default categorical color scheme.

Loading thumbnail…

Stacked Bar Update Pattern

This example demonstrates the D3 general update pattern for smoothly animating changes in a stacked bar chart as new random data arrives every second. Seven individuals are displayed along the x-axis, with colored segments representing six categorical values, while the y-axis scale adjusts to accommodate the new total sum for each person. The code uses `d3.stack` with `d3.stackOrderNone`, a ColorBrewer qualitative palette, and `d3.scaleBand` paired with `d3.scaleLinear`. Transitions are driven by D3’s `transition()` method, with data generated via the jeezy library and helper functions from `d3-marcon` for layout.

Loading thumbnail…

Sorting the Grid

64 circles in a square grid encode three random attributes: size, color, and id. Users sort the grid by clicking “sort by” links for id, size, or color. The d3.layout.grid library positions nodes in a fixed grid; the d3.comparator library builds multi-key sort comparators that reorder the data. Clicking triggers an animated transition using `node.transition()` with a stagger delay, moving circles to their new sorted positions while adjusting radius and fill via d3 scales.

Loading thumbnail…

X and Y force splits

This example uses D3.js to visualize a dataset with multiple categorical dimensions. It shows how a force-directed layout can split nodes along the X and Y axes according to the data's "Location" and "System" attributes, grouping points into organized clusters. D3's `d3.forceSimulation` applies X and Y force constraints that align nodes to their respective category scales, while an interactive button toggles between grouped and force-split arrangements. The visualization renders as an SVG with animation, using `d3.scalePoint` and `d3.forceX`/`d3.forceY` to map the data. Node size encodes the "Count" value, and colors distinguish different nodes.

Loading thumbnail…

stroke-dasharray

Ten black horizontal lines on a white SVG canvas demonstrate ten different stroke-dasharray styles, from a nearly solid line to a heavily dashed pattern. The example generates each line by mapping a data array from `d3.range(10)` to vertical positions, setting the `stroke-dasharray` attribute to `(d + 1) + ",5"` for increasing dash lengths. Using D3 v3 and SVG line elements, the code renders fixed-width strokes with a consistent 15-pixel stroke width to highlight the dash patterns.

Loading thumbnail…

Polar plot

This polar plot visualizes the parametric function sin(2t)cos(2t) as a red line on a circular grid. The plot uses a custom angular orientation, proceeding counterclockwise from 3 o'clock, which differs from D3's default clockwise radial direction starting at 12 o'clock. The code leverages `d3.svg.line.radial` to draw the line, with a linear scale mapping data values to radii. It also constructs radial and angular axes using SVG groups, circles, and lines, with a dashed style for the grid.

Loading thumbnail…

Radial Dendrogram

A radial dendrogram visualizes a hierarchical dataset as branching curved links radiating from a central root, with each leaf node labeled. The code uses D3 v4’s `d3.stratify` to convert the flat flare.csv–style data into a hierarchy, then applies the `d3.cluster` layout to position nodes radially. SVG paths are drawn for links, and circles and text represent the nodes. The data originates from a gist and is rendered statically without interaction.

Loading thumbnail…

Particle collision

A swarm of 1,500 glowing particles falls and collides within shifting circular walls and a planet-like boundary, leaving colorful motion trails on a black canvas. The simulation uses `d3.forceSimulation` with custom collision, gravity, and wall-locking forces, rendered via Canvas 2D. Two particle groups cycle through D3 color interpolators (e.g., `d3.interpolateViridis`, `d3.interpolateMagma`), and randomized settings for radius, gravity, and palette timing make each reload unique.

Loading thumbnail…

D3 Liquid Fill Gauge

Six animated liquid fill gauges display percentage values inside circular containers, with each gauge customized through different colors, wave heights, speeds, and text positions. Clicking any gauge triggers an update that animates the value and wave behavior. The implementation uses D3 v3 with SVG rendering, building wave shapes from generated data points and scaling functions. The `loadLiquidFillGauge` function returns an object with an `update` method, which transitions the gauge to a new randomly generated value while animating the wave rise, scroll, and text count-up effects.

Loading thumbnail…

Force-Based Cartogram to Bubble Chart

A force-directed cartogram of U.S. county demographics smoothly transitions into a bubble chart, cycling through population attributes by sex, Hispanic origin, and race. Using `d3.forceSimulation`, `d3.forceCollide`, and `d3.forceX`/`d3.forceY`, circles representing counties are initially positioned by real geographic coordinates (cx, cy), then repelled by collision forces. A click toggles a mode where the force layout is replaced by a clustered arrangement along a horizontal axis, with bubbles sized and colored by the selected demographic variable via `d3.scaleLinear`, `d3.scaleCluster`, and `d3.hsl` accents. Data comes from Duke University’s county population estimates.

Loading thumbnail…

Red-Black Binary Tree

This example visualizes insertions into a self-balancing red-black binary tree, animating each new node as it traverses the tree and recolorings occur. The tree layout is computed with `d3.forceSimulation`, applying force-directed positioning with gravity toward parent nodes and depth-based vertical placement. The visualization renders on both SVG and Canvas, selectable via radio buttons, using `d3-quant` and `d3-canvas-transition` to share code between rendering backends. A random uniform generator supplies node values, and insertions trigger timed animations that update the tree structure incrementally.

Loading thumbnail…

Slippy map + extent indicator

The visualization combines a full-screen slippy map with a small inset globe that shows the current map extent. The globe uses an orthographic projection with radial gradients to create a shaded, three-dimensional appearance, while the main map displays Stamen tiles with an overlaid semi-transparent polygon indicating the visible region. Built with D3 v3, the example uses d3.geo.orthographic, d3.geo.path, and d3.geo.graticule, and loads world land and country boundaries from TopoJSON files, with city points from a GeoJSON places file.

Loading thumbnail…

Particles

Hundreds of small, colored rectangles converge into the word “FRISS” before scattering apart. They then reform and slosh around as the mouse moves, creating a gooey, viscous effect. The code rasterizes text by drawing it to a Canvas and using `getImageData` to identify pixel locations as target points. A `d3.forceSimulation` with `forceX`, `forceY`, and `forceCollide` animates the elements, while an SVG filter applies the gooey blur and color matrix.

Loading thumbnail…

Force layout zoom to node

A force-directed network graph displays character relationships from the *Les Misérables* data. Clicking any node smoothly animates the view to zoom and center on that element. The D3 v3 implementation uses `d3.layout.force` for the physics simulation and a custom `d3.behavior.zoom` to manage scale and translation. SVG elements are updated on each tick, and a 750ms transition animates the camera to the selected node's bounding box, resetting on subsequent clicks.

Loading thumbnail…

Directed Graph Editor

This interactive editor demonstrates graph creation and manipulation, showing nodes connected by directed edges with arrowheads indicating direction. Users can add nodes by clicking empty space, add edges by dragging between nodes, and select or modify elements via keyboard shortcuts. The code uses d3.forceSimulation for layout and d3.drag for node repositioning, with SVG paths and circles as the primary rendering elements. The example implements various interaction states, including reflexive edges, directional toggles, and visual feedback for selected components.

Loading thumbnail…

Threshold Key

This example displays a horizontal threshold key with colored rectangles that map to a d3.scaleThreshold’s range, and tick marks positioned by a d3.scaleLinear. The key’s extent is set by the linear scale’s domain of 0 to 100%, with ticks labeled as percentages or numbers. The code builds the key by inverting each color’s extent from the threshold scale and inserting rectangles before the axis ticks. The visualization mirrors a New York Times map of police stops involving force, using SVG rendering and a gist-hosted data source.

Loading thumbnail…

Tidy Tree vs Dendogram

This example compares two hierarchical layout methods—the tidy tree (`d3.tree`) and the cluster dendrogram (`d3.cluster`)—by animating a small dataset through six sequential views: vertical, radial, and horizontal orientations for each layout. The transition shows how the cluster aligns all leaf nodes at a common depth, while the tree aligns nodes sharing the same parent. Using d3.v4 with SVG elements and 5-second transitions, the code updates link paths via `d3.linkVertical`, `d3.linkHorizontal`, and `d3.linkRadial`, and repositions nodes accordingly. A button or script cycles through the layouts automatically.

Loading thumbnail…

Pie Chart Rotation on Click

This interactive pie chart displays population data by age group, with each wedge rotating to the bottom when clicked. Built with D3 v4, the visualization uses `d3.pie` and `d3.arc` to generate SVG paths, while a `transition` on the containing `<g>` element rotates the entire chart so the selected wedge aligns with the bottom. Label text rotates in the opposite direction to stay upright, and clicks are handled via the `.on("click")` method. The data is hardcoded in the script, and the chart is styled with ordinal color scales for the seven age categories.

Loading thumbnail…

Project to Bounding Box

This example demonstrates how to center a map on a specific geographic feature and scale it to fill the viewport. It isolates Ohio from a GeoJSON dataset of US states, calculates the feature's bounding box, and applies Albers projection with custom scaling and translation to fit the map. The visualization renders the full US states in gray, state boundary mesh lines in white, and highlights the selected Ohio outline in dark gray. The code uses d3.geo.albers, d3.geo.path, and the topojson library for feature extraction and mesh generation.

Loading thumbnail…

d3.geoPath + Canvas

This example renders the U.S. state boundaries from the `us-atlas` TopoJSON file onto an HTML5 Canvas element. It uses `d3.geoPath` with a Canvas context to draw the map, demonstrating that this projection API works outside of SVG. The code fetches the geographic data from `10m.json`, converts it with `topojson.mesh`, and strokes the resulting paths with a single `beginPath` and `stroke` call. The approach eliminates SVG overhead by relying on Canvas rendering.

Loading thumbnail…

U.S. Counties TopoJSON Mesh

This example displays a mesh of U.S. county boundaries derived from a TopoJSON shapefile, rendered as a black outline with small circles marking each polygon’s coordinate origin. It uses d3.json to load the TopoJSON data, then topojson.mesh and topojson.transform to build the mesh and map coordinates. The outline is drawn with d3.geoPath, while circles are positioned using the transform function, showing the raw geometry structure rather than a filled choropleth. The data comes from the U.S. Census Bureau via the us-10m.v1.json file, and the visualization renders entirely in SVG.

Loading thumbnail…

TopoJSON Collection

This example presents a gallery of TopoJSON files converted from original shapefiles and GeoJSON sources, covering world countries, continents, and administrative subdivisions by country. The visualization uses d3.v4 and renders a static SVG scene with a text caption, as the core function is to make the collection discoverable rather than display mapped data. The code initializes an SVG canvas and adds a label referencing the repository’s README, while the data sources are documented as Natural Earth and DIVA-GIS.

Loading thumbnail…

Zoom to bounding box d3.v4

Clicking a US state zooms the map to that state’s bounding box, with a smooth 750-millisecond transition, while the user can also freely pan and zoom. The example uses d3.v4’s `d3.zoom` and `d3.geoPath` with an Albers USA projection, rendering state features as SVG paths from TopoJSON. Zooming is triggered by computing the path bounds and applying `d3.zoomIdentity.translate().scale()` via `transition.call(zoom.transform)`. Clicking the background resets the view, and active states highlight in orange, with the mesh and stroke width updating on zoom.

Loading thumbnail…

arc tween example

An animated arc chart demonstrates pie-segment transitions using D3 v4’s `transition.attrTween`. A white foreground arc rotates to a new random angle every few seconds, while a segmented, multicolored ring around it sequentially fills or empties its sections. The code defines arc generators via `d3.arc`, binds data from a fixed array, and computes path interpolations between angles using `d3.interpolate`. SVG elements render the background ring and active arcs, with transitions triggered by `d3.interval`.

Loading thumbnail…

Scatterplots with D3 and Quadtrees

A scatterplot of 50 randomly generated points uses interactive brushing to highlight selected data, listing their labels and recoloring them in tomato. The implementation leverages a quadtree for efficient spatial lookup, and a "Reveal quadtree" button triggers a slowed animation of the quadtree traversal during brushing. Built with D3 v4, the visualization renders in SVG and uses `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and a custom `d3.quadtree` structure.

Loading thumbnail…

force layout with pies

A force-directed network diagram represents nodes as pie charts, showing group proportions within each node connected by links. Two nodes display their data as colored arcs, with the force layout positioning them and updating their translation on each tick. The example uses D3 v3's `d3.layout.force` and `d3.layout.pie`, along with `d3.svg.arc`, to render SVG paths and lines. Hardcoded data defines two nodes with three proportional groups and a single link, with distances and charges controlling the layout.

Loading thumbnail…

County Topology

This graph displays the topology of U.S. counties, with each node positioned at its county centroid and links connecting neighboring counties that share a border. The visualization uses TopoJSON’s `topojson.neighbors` to identify adjacent counties and `d3.geoPath` to compute centroids from simplified geometry. A background map and white county mesh provide geographic context, while black lines trace the adjacency network. The code loads data from the us-10m.v1.json file and renders entirely in SVG using D3 v4.

Loading thumbnail…

World Tour

An orthographic globe rotates between countries, highlighting each one in red while its name appears below. The visualization cycles through all nations alphabetically, pausing briefly on each before spinning to the next. It uses D3 v3’s `d3.geo.orthographic` projection and `d3.geo.path` with a Canvas context to draw land, borders, and the highlighted country. TopoJSON provides the world geometry, and a TSV file supplies country names. Animation is driven by `d3.transition` with a custom `tween` that interpolates the projection’s rotation.

Loading thumbnail…

click-to-zoom via transform

Clicking a US state smoothly zooms the map to that state, centering it and enlarging it fourfold; clicking again restores the full national view. The example builds an interactive state map with D3, using `d3.geo.albersUsa` for the projection and `topojson` to process geographic data. Zoom animation is driven by D3 transitions, which update an SVG `g` element’s `transform` attribute and adjust the stroke width to maintain visual consistency. State borders and a clickable background rect facilitate the interaction, with active states highlighted in orange.

Loading thumbnail…

Force-Directed States of America

A force-directed graph rearranges the lower 48 U.S. states using links derived from a Delaunay triangulation of their centroids. Gray state polygons and connecting lines render in SVG, with the layout computed by `d3.layout.force`. The code loads TopoJSON data via `d3.json` and uses `d3.geo.path` to project state shapes. Users can click and drag any state, causing the simulation to re-position the linked nodes dynamically.

Loading thumbnail…

Force with Springy Links

A network of one hundred nodes linked in a branching tree structure renders with wavy, spring-like curved edges instead of straight lines. Dragging nodes with the mouse repositions them while the force simulation dynamically updates the paths. Using d3.forceSimulation for layout and d3.drag for interaction, the `wave` function computes each link path by sampling sine-wave offsets along the straight line between connected nodes, with the wave frequency scaled to the link’s length. Node radii and colors are randomly assigned from a categorical scale, and the d3-marcon library provides the full viewport canvas.

Loading thumbnail…

Range Slider

This example presents a range slider visualization that lets users drag a handle to select a numeric value between 0 and 100. A large circular dragger and a triangular pointer both respond to mouse drags, with a label updating to show the current percentage. The implementation uses the d3-marcon library for layout, along with d3-scaleLinear for mapping data values to pixel coordinates, d3-drag for interactive dragging, and d3-axisBottom for rendering the scale. The slider’s body, axis, and dragger are styled via CSS classes.

Loading thumbnail…

zoomable sunburst with sunlight colors

This zoomable sunburst diagram displays hierarchical data with arc labels, using the Flare dataset. Clicking an arc zooms into that subtree, the center circle zooms back out, and the background resets the view. The visualization uses D3 v4’s `d3.partition`, `d3.arc`, and `d3.scaleOrdinal` with a 30-color palette from the Sunlight Foundation Style Guide. Labels render along curved paths via `d3.path` and `textPath`, with animated transitions driven by `transition.attrTween` and interpolated scales. A white contour stroke improves label readability.

Loading thumbnail…

Axis Transition

A linear x-axis centered vertically in a full-screen SVG repeatedly updates its domain to a random value between 10 and 10,000 every second. Each update triggers a smooth transition of the axis tick positions using D3 v4’s `d3.interval` and the `.transition().call(x_axis)` pattern with `d3.axisBottom`. The example is built with the `d3-marcon` helper library for margin conventions and renders purely as a demonstration of animated scale-domain changes.

Loading thumbnail…

Lasso in d3 v4 with Canvas

A lasso tool selects and recolors randomly distributed points rendered on an HTML canvas. Dragging the cursor draws a dashed polygon on an overlaid SVG layer, which closes when the cursor nears its starting point. On completion, `d3.polygonContains` filters points inside the selection, recoloring chosen points black and unselected ones light gray. The visualization uses D3 v4’s drag behavior for interaction, `canvas` for point rendering, and SVG for the lasso path.

Loading thumbnail…

part 2, Zoom and Panning with D3.js and canvas

This example demonstrates zooming and panning across a scatterplot of 10,000 randomly generated points, with axes updating in real time. It uses a Canvas overlay for point rendering and an SVG layer for the axes, both driven by D3 v4’s `d3.zoom` and `d3.zoomIdentity`. A reset button triggers a smooth transition back to the default view. The `rescaleX` and `rescaleY` methods adjust linear scales on each zoom event, while `context.clearRect` and `arc` handle the drawing.

Loading thumbnail…

part 1, Zoom and Panning with D3.js and canvas,

This example shows a canvas-based scatter plot of 10,000 random data points, with the page built for future brushing interactions. It uses D3.js v4 to create SVG axes and labels, while rendering the points themselves on a separate HTML5 canvas element for performance. The code initializes linear scales for both x and y dimensions, draws the axes with `d3.axisBottom` and `d3.axisLeft`, and plots each point using the Canvas API’s `arc` and `fill` methods. The canvas is positioned over the SVG using CSS classes, demonstrating a hybrid rendering approach.

Loading thumbnail…

graph annotation - draggable clusters

This example shows an annotated network graph of character relationships from Les Misérables, with draggable nodes and dynamic circle annotations that surround clusters by group. Using d3.forceSimulation, the graph updates annotation positions on each tick, while the d3-annotation library renders callout circles with labels. The code enables drag interactions on nodes and touch-event support, with pointer-events disabled on annotation subjects to allow node manipulation beneath. Data comes from the embedded graph.json file, rendered as SVG.

Loading thumbnail…

D3-Force: Split Categorical

This example visualizes GDP data for 15 countries, grouped by continent, as circles in a force-directed layout. A button toggles a categorical split, applying an invisible categorical axis so nodes align by continent using `d3.forceX` with a `d3.scalePoint` domain. The simulation uses `d3.forceSimulation` with `d3.forceManyBody` and centering forces, rendering to SVG circles and text labels. Data loads from a CSV via `d3.csv`.

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 single unit. The code uses D3 v4’s `d3.zoom` to handle user input, applying the transform directly to the canvas context via `translate` and `scale`. Points are drawn with the Canvas 2D API’s `arc` method, and the zoom behavior redraws all points on each event. No semantic distortion occurs—the entire visualization scales uniformly.

Loading thumbnail…

Margin Convention

A demonstration of the D3 margin convention for laying out SVG charts. The visualization shows nested rectangles and axis arrows with labels that clarify the positions of margins, padding, and the coordinate origin. The code uses `d3.select` to append an SVG, `d3.svg.axis` for the bottom and right axes, and `d3.scale.identity` for linear scaling. It explicitly defines `margin` and `padding` objects in JavaScript and translates a G element to establish the chart origin, rendering axes and annotations in SVG.

Loading thumbnail…

D3 V4 zoom with Axis explained

This example demonstrates an interactive zooming technique for scatterplot-style visualizations using D3.js version 4. A red SVG viewport contains a single circle and two axes, with a transparent rectangle serving as the zoom control surface. The implementation uses `d3.zoom()` to capture mouse interactions and applies the event's transform to rescale both the linear x and y axes via `rescaleX()` and `rescaleY()`. Axis updates are handled through `d3.axisBottom` and `d3.axisLeft`, while the data circle is repositioned using the same transform, creating a synchronized zoom effect without clipping.

Loading thumbnail…

Zoom + Pan

A D3.js line chart with grid-like axes supports interactive panning and zooming, controlled by dragging and mouse-wheel gestures. The view resets via a button, triggering a smooth animated transition back to the default domain using `d3.behavior.zoom`, `d3.scale.linear`, and `d3.transition().tween`. The SVG rendering showcases the axis updates, while the button click remaps the scales programmatically and rebinds them to the zoom behavior.

Loading thumbnail…

Brush Handles d3v4 II

This example demonstrates a D3 v4 brush with custom resize handles on a scatterplot of 800 random points. The brush selects a horizontal range along the x-axis, highlighting points within the selection by adding an “active” class. Custom path-based handles replace the default brush edges, using a `brushResizePath` function to draw arrow-like grips. The code uses `d3.brushX`, `d3.axisBottom`, and `d3.scaleLinear`, with the brush’s `start`, `brush`, and `end` events driving the highlighting logic via `d3.event.selection`.

Loading thumbnail…

Brush Handles

This example shows an 800-point scatterplot with a draggable, visible brush handle range selection. The brush is rendered as two semi-circular handles on either side of the selection extent, which the user can drag to resize the range. The code extends `d3.brushX` with custom `path` elements and uses `d3.arc` to define their shapes. When the brush moves, a `brushmoved` function updates the handle positions and highlights the selected circles by toggling an "active" class, which changes their fill opacity.

Loading thumbnail…

Brush Slider Test

This example demonstrates a brush-style slider that filters a numeric range, displaying the selected minimum and maximum values as text above the axis. Rendered as SVG, it uses D3 v4’s `d3.brushX()` to create the interactive selection and `d3.brushSelection` to read the current range. The x-axis is generated with `d3.axisBottom` and a linear scale, with the brush initially positioned between 20 and 50 via `brush.move`. The code also notes key API changes from D3 v3 to v4, such as handling brush extents on the brushed element.

Loading thumbnail…

Sunburst Tutorial (d3 v4), Part 1

This tutorial demonstrates a basic d3.v4 sunburst visualization, showing hierarchical data as concentric arcs that encode node size through angular width. It uses an inline JSON dataset describing topics and subtopics, rendered as SVG paths via the `d3.hierarchy`, `d3.partition`, and `d3.arc` APIs, with an ordinal color scale from `d3.schemeCategory20b`. The code walks through HTML setup, data structure, variable initialization, and SVG group transforms to center the chart.

Loading thumbnail…

interactive svg + canvas plot

An interactive plot combines 200 randomly positioned circles, with half rendered as blue SVG elements and half as black canvas shapes. A single d3.layout.force simulation drives collision detection and movement for all nodes, while d3.behavior.zoom enables panning and zooming. The SVG circles update via attribute transforms, and the canvas layer redraws its context on every tick.

Loading thumbnail…

Force Layout with multiple labelled edges between nodes

This example shows a force-directed graph with multiple labeled edges between nodes, where each edge carries a distinct text label. The visualization uses D3 v3’s `d3.layout.force` to position three nodes, while custom functions `countSiblingLinks` and `getSiblingLinks` detect parallel links between the same source and target. The `arcPath` function draws curved paths for each sibling edge, and invisible paths with text elements display the labels along the curves. Data comes from a hardcoded set of edges containing lyrical phrases.

Loading thumbnail…

d3-brush example

A minimal interactive brush demonstration renders a 400 by 400 SVG rectangle, where the user drags to select a rectangular region. The example uses the d3-brush API from D3 version 4 to track selection coordinates, logging the starting and ending positions to the browser console during brushing and reporting the absence of a selection when the brush is cleared. The code defines the brush extent to match the full drawing area and attaches start, brush, and end event handlers.

Loading thumbnail…

Adjustable Link Strength

This example displays a force-directed graph of character relationships from *Les Misérables*, rendered as nodes and links on a Canvas. A slider control adjusts the link strength parameter of the simulation, and the graph dynamically repositions to reflect the new force balance. The visualization uses D3 v4’s `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter`, and on each slider input it updates the link strength and restarts the simulation with `simulation.alpha(1).restart()`. The network data comes from the included `miserables.json` file.

Loading thumbnail…

Shape Tweening

A D3.js shape-tweening animation morphs the outline of California into an equivalent circle and back again, repeatedly. The SVG path’s `d` attribute is updated through chained transitions, each lasting five seconds, using the projected polygon coordinates from the included GeoJSON file. The code computes a circle with matching perimeter length and area, placing the state’s border points along it via a custom `circle` function.

Loading thumbnail…

Force Layout with labels on edges

This example shows a force-directed graph where nodes are labeled and every edge carries a text label that follows the link’s path, with arrowheads marking direction. The visualization relies on d3.v3’s `d3.layout.force` to position nodes and update links on each tick. Edge labels are rendered by appending `<textPath>` elements to hidden `<path>` elements, which reference the edge’s ID, allowing the label to orient automatically along the line. Node positions, edge coordinates, and label locations are all updated in the force’s tick handler, and data is pulled from a hardcoded JavaScript array.

Loading thumbnail…

D3-Force: Split Continuous

A force-directed graph of countries by GDP uses `d3.forceSimulation` with `d3.forceX` and `d3.forceManyBody` to position nodes on an SVG canvas. The "Toggle Split" button switches between a centered layout and one where nodes are pushed along a continuous linear scale mapping GDP values from left to right, with labels showing the domain endpoints. Data comes from a CSV file, and the simulation’s alpha and restart methods control the transition between states.

Loading thumbnail…

Circular bounds

A force-directed network of 80 circular nodes is confined within a circular boundary. Each node has a random radius and is subject to repulsive charge and gravity forces. The visualization calculates the maximum and minimum x-coordinate for a given y-coordinate within the circle, and vice versa, to keep nodes inside the circular pool. This example uses `d3.layout.force()` and follows a variation of Mike Bostock's bounded force layout, adapting its rectangular bounds to circular ones. The SVG rendering includes a styled pool circle and nodes with a light fill.

Loading thumbnail…

Force Simulation with Voronoi Diagram

An interactive scatterplot maps national GDP and continent onto a force-directed layout of proportional circles. Each country is a node whose position balances simulated attraction, collision, and many-body repulsion forces, and a Voronoi diagram partitions the canvas into cells around the moving nodes. The visualization uses D3 v4’s `d3.forceSimulation`, `d3.forceManyBody`, `d3.forceCollide`, and `d3.voronoi` APIs, rendering SVG circles and paths. Users can drag nodes, which updates the simulation and recomputes the Voronoi tessellation in real time.

Loading thumbnail…

Group-in-a-box layout

A group-in-a-box layout visualizes interactions between characters in Les Misérables, grouping nodes by their community (detected via Louvain modularity) inside rectangular cells. Within each group, a force-directed simulation positions nodes, while links show both intra- and inter-cluster connections. The code uses D3 v4’s `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, `d3.forceCenter`, and a custom `forceInABox` force that moves nodes toward foci computed from a treemap layout. Data is loaded from `jean.json` and rendered as SVG circles and lines.

Loading thumbnail…

Concentric circle force layout graph in D3.v4

This example visualizes a network of research papers on Real-Time Bidding for online advertising, showing papers as nodes and citations as links. The force-directed layout organizes papers into concentric circles by publication year, with more recent papers near the center. Nodes are colored by year and are draggable, with the graph supporting zooming and panning. The visualization uses D3.v4's `forceSimulation` API with `forceLink`, `forceManyBody`, `forceCenter`, and `forceCollide` forces to compute dynamic node positions. It renders nodes and links as SVG elements with animated transitions, and loads paper metadata from a JSON data file. Zoom interaction is implemented via D3's `zoom` object with configurable scale extents.

Loading thumbnail…

Add elements using .enter and .append

Four orange squares animate in from zero width when the page loads, displaying the letters A through D. Clicking the "do it!" button triggers a transition that shrinks the squares to zero width and removes them, while the code binds new data E and F to the same selection. The example demonstrates D3’s data join using `.enter()` and `.append()` for initial elements, and `.exit()` with `.transition()` and `.remove()` for deletion. It relies on `d3.select` and `d3.selectAll` with data arrays `myData1` and `myData2`.

Loading thumbnail…

D3 circle Mask

Three visualizations compare different approaches to handling overlapping circles in SVG: default rendering, semi-transparency with `fill-opacity`, and SVG masks. The masked version uses a `defs` element containing `mask` definitions that hide the inner portion of each larger circle by overlaying a black circle, revealing only the visible outer ring. Built with D3 v4, the example uses `d3.select`, `selectAll`, and `.enter().append()` to create the circle elements, while the mask logic relies on SVG's native `mask` attribute and `url()` references within the inline JavaScript.

Loading thumbnail…

Force Simulation

This force-directed layout shows the relative GDP of countries as node size, colored by continent, with a gentle pull toward the center. The simulation uses `d3.forceSimulation` with `d3.forceX`, `d3.forceY`, `d3.forceCenter`, `d3.forceManyBody`, and `d3.forceCollide` to position circles, which are rendered as SVG. The chart reads country data from a CSV file, sorts nodes so larger ones appear behind, and supports dragging circles to interactively perturb the layout.

Loading thumbnail…

Connected Network Reduction

This example visualizes a connected network of nodes and weighted edges, representing a graph loaded from a CSV file. It uses a force-directed layout with `d3.forceSimulation`, `d3.forceLink`, and `d3.forceManyBody` to position the nodes. When the user clicks and holds the mouse, the visualization highlights the minimum spanning tree (MST) of the graph, computed via Kruskal’s algorithm with a custom `DisjointSet` data structure. Edge thickness and color (black to red) encode weight, with the MST selectively dimming non-tree edges during interaction.

Loading thumbnail…

D3 + Vue.js

This cluster dendrogram visualizes the Flare dataset, showing hierarchical relationships between software classes and modules as a tree of nodes and links. Built with Vue.js, the SVG rendering is driven by Vue’s template syntax, replacing D3’s `enter`/`exit`/`update` with reactive computed properties that bind data changes directly to the chart. This approach highlights Vue’s strength in building re-usable, reactive components for data-driven visualizations, while D3 handles the layout and scales. The example demonstrates how Vue can manage the DOM bindings and updates, making the chart more maintainable in complex applications.

Loading thumbnail…

Navigate and Zoom around graph

This example demonstrates an interactive graph visualization that users can navigate by panning across the background, zooming with the mousewheel, and dragging individual nodes. A force-directed layout, powered by `d3.layout.force`, positions and animates the nodes and links, with SVG rendering for all elements. Middle-clicking on the background adds new nodes at the cursor’s location, while buttons freeze, thaw, or fit the entire graph to the viewport. The zoom behavior uses `d3.behavior.zoom`, and the fit function computes the graph’s bounding box via `getBBox` to adjust the view transform.

Loading thumbnail…

Decision Tree III

This visualization displays a decision tree of farmers market data, branching through product categories like baked goods, cheese, and vegetables to reveal patterns in market offerings. The tree uses an organic, gooey aesthetic with SVG filters for blur and color matrix effects, while animated nodes and edges grow outward using d3’s tree layout and the `.ancestors()` function to position descendants at ancestor depths. Built with d3.v4 and Vue, it renders in SVG with smooth transitions, sourcing real market attributes from a JSON dataset.

Loading thumbnail…

dynamic update graph

A dynamic network graph incrementally reveals nodes and edges over time, simulating real-time evolution of a network. Each second, a new connection may appear, with new circles fading in and lines smoothly transitioning to new positions via the force-directed layout. The example highlights a timestamp counter in red and uses d3.forceSimulation with charge and link forces to position elements. It styles nodes with d3.scaleOrdinal and d3.schemeCategory20b, and renders everything as an SVG with animated transitions.

Loading thumbnail…

Force Directed Graph Toggle to Circle

This interactive visualization presents the character co-occurrence network from *Les Misérables* as a force-directed graph. Users toggle between the physics-based layout and an arranged circle formation. The D3.js v3 code uses `d3.layout.force` for the initial graph and applies a one-second transition via `transition().duration(1000)` to animate nodes and links into circular positions. The example is a fork of a gist by bricof, based on Mike Bostock's original force-directed graph example.

Loading thumbnail…

Animated Arcs

Four concentric animated arcs rotate continuously around a central point, each with a distinct color and its own random start and end angles. The arcs periodically change their sweep length and position, creating a dynamic, looping visual rhythm. Built with D3 v4, the example uses SVG paths and `d3.interval` to trigger transitions, while `transition.attrTween` and `d3.interpolate` smoothly animate each arc’s angles. The code generates random data for four arcs with varying radii and colors, drawing them with the `d3.arc` shape generator.

Loading thumbnail…

winter force

Two groups of colored nodes—blue and green—hover near the center of a canvas, responding to mouse clicks on Split and Unite buttons that reconfigure their positions. The visualization renders each frame to a 2D Canvas context, using `d3.forceSimulation` with `d3.forceManyBody`, `d3.forceX`, and `d3.forceY` to control attraction and separation. Clicking Split drives the blue cluster to the left and green to the right; Unite pulls them back toward overlapping centers while adding `d3.forceCollide` to keep nodes from merging. Node positions, colors, and radii are set per object, with 200 blue and 50 green circles generated randomly.

Loading thumbnail…

Arc generator (centroid)

This example demonstrates how to compute and display the centroid of each arc in a donut chart, using the centroid to position labels. The visualization renders five colored arcs with white text labels placed at their geometric centers. The code uses the D3.js library, specifically the `d3.arc()` generator with `innerRadius` and `outerRadius` settings, and calls `arcGenerator.centroid()` to calculate label coordinates. The SVG output is styled with orange fills and bold white text, with data provided as an array of angle values in radians.

Loading thumbnail…

Element rotation with point-along-path interpolation

A small triangle and a text label move along a dashed path, with the triangle’s rotation updating to match the tangent of the curve at each point. The label displays the computed angle in degrees as the element travels back and forth. Built with D3.v3, it uses `d3.svg.line` for the path, `transition.attrTween` with `translateAlong` for motion, and `getPointAtLength` plus `Math.atan2` to derive orientation. The underlying data is random values mapped through a linear scale.

Loading thumbnail…

Town/county switch with topojson

A choropleth of New Hampshire toggles between town and county boundaries, fading town polygons to faint outlines while emphasizing county borders. The animation cycles automatically every 1.5 seconds. Using D3 v3 and TopoJSON, the code loads a local GeoJSON topology, renders paths via `d3.geo.path()` with a null projection, and transitions opacity on SVG elements. County meshes are derived from FIPS codes using `topojson.mesh()`.

Loading thumbnail…

d3-force testing ground

This interactive demo lets users experiment with the various forces available in d3-force by adjusting sliders and toggles. It visualizes a network of characters from *Les Misérables* as SVG circles and lines, using `d3.forceSimulation` with configurable `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, `d3.forceCenter`, `d3.forceX`, and `d3.forceY` forces. Users tweak parameters like charge strength, collision radius, and link distance to see how each force shapes the layout, with node size and stroke reflecting current settings. Dragging nodes pauses and resumes the simulation via `d3.drag()`.

Loading thumbnail…

D3 v4 - force layout

This example shows a force-directed graph with 100 randomly generated nodes and links, rendered as SVG circles and lines. The code builds the network using `d3.forceSimulation` with forces for link distance, collision, charge, centering, and X/Y positioning, then updates node and link positions on each tick. Nodes are draggable via `d3.drag`, and drag events adjust the simulation’s alpha target to restart or settle movement. The data is synthesized in the script, and the visualization initializes from a blockbuilder.org fork.

Loading thumbnail…

Example Authors

This example uses a circle-packing layout to display the hierarchical structure of authors aggregated by their domains, with each author's circle size proportional to their number of contributions. The visualization, built with D3 v4 and rendered as SVG, employs the `d3.pack` API to compute the circle positions and sizes based on the hierarchical JSON data. Interactive hover states highlight the ancestors of the hovered node by applying a CSS class, while leaf nodes show truncated text labels using `clipPath` elements.

Loading thumbnail…

Enclosing Force Circles

This visualization depicts the pay ratio between the lowest and highest salaries at London universities. Each university is represented by a cluster of dots, with the number of dots indicating the ratio (e.g., 18:1), and the circle enclosing them color-coded from cyan to magenta based on that ratio. Hovering over a circle reveals the exact ratio and highlights the enclosure. The code uses `d3.forceSimulation` with `d3.forceX`, `d3.forceY`, and `d3.forceCollide` to arrange the dots, and `d3.packEnclose` to compute the enclosing circles around each cluster. Data is hardcoded in `paygaps.js`, and the SVG output includes interactive tooltips for each circle.

Loading thumbnail…

Accretion

A particle system simulates accretion, where dark gray attractive particles draw in and merge with crimson repellent particles, repelling them instead. Two sliders control particle density and the proportion of attractive versus repellent forces. The visualization uses D3’s `d3.forceSimulation` with `d3.forceMagnetic` for inverse-square attraction/repulsion, `d3.forceBounce` for inelastic collisions, and `d3.forceSurface` to keep particles within the SVG canvas, with controls updating particle poles dynamically.

Loading thumbnail…

d3.v4 collapsible force zoomable draggable radial tree using svg

This example shows a collapsible hierarchical dataset rendered as a radial tree, with nodes positioned by a custom circular projection and forces. Built with D3 v4, it combines a force simulation (`d3.forceSimulation`) with link, charge, center, collide, x, and y forces, along with zoom and drag behaviors. The visualization uses SVG and loads data from a JSON file (`data.json`), allowing users to expand and collapse nodes while the layout repositions dynamically.

Loading thumbnail…

beeswarm on square and circle path

A beeswarm animation arranges 300 colored circles along a square path, then morphs the path into a circle using the Flubber library’s shape interpolation. The code uses d3.forceSimulation with forceCollide, forceX, and forceY to pack the circles onto the path, while transition.attrTween animates the path shape change. A button triggers the switch between square and circular layouts. Data values map to colors via d3.scaleSequential with an interpolateRainbow scale, and each bee’s position is calculated from its path length using node.getPointAtLength.

Loading thumbnail…

d3.v4 collapsible force zoomable draggable radial tree using svg

This example shows a collapsible hierarchical dataset rendered as a radial tree, with nodes positioned by a custom circular projection and forces. Built with D3 v4, it combines a force simulation (`d3.forceSimulation`) with link, charge, center, collide, x, and y forces, along with zoom and drag behaviors. The visualization uses SVG and loads data from a JSON file (`data.json`), allowing users to expand and collapse nodes while the layout repositions dynamically.

Loading thumbnail…

Enter-Update-Exit in Force Layout

This example demonstrates how to apply the enter-update-exit pattern to a D3 force layout, where node and link positions update continuously on each tick. A user-triggered update generates new random data, merges it with existing nodes, and maintains old node positions across re-renders. The code uses d3.layout.force and underscore.js to manage data, with SVG circles and text for nodes and lines for links. Entering and exiting elements are handled through d3 data joins with key functions, while existing nodes preserve their coordinates via the maintainNodePositions function.

Loading thumbnail…

Modifying a Force Layout

This example shows a small force-directed graph with three nodes, A, B, and C, that repeatedly changes structure over time. It initially displays three isolated nodes; after one second, the nodes form a triangle of links, then node C is removed with its connections, and later re-added, cycling every second thereafter. Built with d3.v4, the code uses `d3.forceSimulation` for layout physics and applies a general update pattern with `node.data` and `link.data` to join dynamic datasets. The SVG render updates each tick via the simulation's `on("tick", ticked)` callback, repositioning circles and lines accordingly.

Loading thumbnail…

Quadtree

A quadtree accelerates two-dimensional point filtering in an interactive scatterplot. The visualization shows 2,500 random points that users select by dragging a rectangular brush. Orange points are scanned by the algorithm but not selected, while red points fall within the brush extent. The code uses d3.quadtree to recursively subdivide space and d3.brush for interaction, rendering SVG circles and cell outlines.

Loading thumbnail…

Blocks Graph

This visualization displays a force-directed network of mentions among bl.ocks examples. Each node represents a block, colored by its author, and links show when one block's README references another. The graph is rendered on a Canvas using d3.forceSimulation with forces for many-body repulsion, link attraction, and positioning, and supports interactive dragging and hover to reveal block details. It uses cleaned data from Micah Stubb’s original 2016 dataset.

Loading thumbnail…

D3 Selectable Force-Directed Graph

This interactive D3 visualization demonstrates a force-directed network graph where nodes can be repositioned through dragging. Users can select multiple nodes using shift-click or by drawing a selection rectangle, enabling simultaneous movement of grouped nodes. The graph renders as an SVG using d3.forceSimulation, with selection semantics similar to window managers: clicking a node selects it exclusively, while shift-clicking toggles individual nodes. The implementation includes a zooming behavior via a custom d3.svg.brush for rectangular selection and a zoomer for scaling and panning the entire graph.

Loading thumbnail…

Cluster layout

A blue square animates from 200 to 500 pixels wide after a one-second delay, then turns red when clicked. The example demonstrates D3 transitions and event handling using `d3.select` and the selection’s `.transition()`, `.delay()`, `.duration()`, and `.on("click")` methods. The page uses D3 version 4.2.2, loaded from a CDN, with inline CSS styling for the square’s dimensions and background color. No data is loaded; the visualization relies entirely on programmatic style changes to illustrate basic interactive animation.

Loading thumbnail…

zoomable, draggable force layout with labels

This interactive force-directed graph displays ten labeled nodes (A through J) connected by links, with Font Awesome icons as labels overlaid on colored circles. The layout uses D3 v4’s `d3.forceSimulation` for physics-based positioning, combined with `d3.drag` for node dragging and `d3.zoom` for canvas zoom and pan. Node positions are bounded within the SVG viewport, and an HTML slider controller adjusts an external value. The black background, custom fonts, and Bootstrap controls frame the visualization, which reads node and edge data from a local `data.json` file.

Loading thumbnail…

fresh block

A static tree diagram displays a small genealogical hierarchy of nine named individuals, including Eve, Cain, Seth, and Abel. The visualization renders internal and leaf nodes as distinct gray circles connected by curved links, with text labels for each name. The code builds the hierarchy from a flat array of name-parent pairs using `d3.stratify()` and renders it as SVG, though no layout algorithm or simulation is applied.

Loading thumbnail…

Bubble Chart

This bubble chart visualizes the Flare class hierarchy, packing hundreds of circles into a square space where each circle’s area encodes a numeric value. The D3 v4 code uses the `d3.pack()` layout, an ordinal color scheme (`d3.scaleOrdinal` with `schemeCategory20c`), and SVG rendering. Text labels, clipped to their circles, split class names across multiple lines. Data is loaded from a CSV file via `d3.csv()`.

Loading thumbnail…

Red Dots On A Map

This visualization renders a map of the United States covered in red dots, with the number of dots dynamically displayed in the corner. It uses Poisson-disc sampling to distribute non-overlapping dots across landmasses, refined by a point-in-polygon test to ensure dots remain within state boundaries. The code relies on d3.geo.albersUsa for projection, d3.geo.path for drawing geographic features, and a Canvas context for rendering. The user can adjust the dot radius using a mousewheel or the dat.GUI slider, which triggers redraws.

Loading thumbnail…

Marvel Characters | Force layout with images

This interactive force-directed graph visualizes Marvel characters, grouped by Heroes, Villains, and Teams, with each node displaying a character image. The layout uses the `d3.layout.force()` API for physics-based positioning and SVG rendering. Clicking a character reveals their real name and a link to their Marvel webpage, while hovering temporarily enlarges the image. The visualization also includes draggable nodes and animated transitions between states, powered by D3.js v3.

Loading thumbnail…

Obama’s Diverse Base of Support - Interactive Feature - NYTimes.com

This interactive map shows how support for Obama shifted across U.S. counties between the 2004, 2008, and 2012 elections, using color to indicate shifts toward Democratic or Republican voting. The visualization is built with D3.js, combining SVG for state boundaries and a canvas layer for animated county-level data points, which are rendered as colored dots that move and fade according to the selected election year. It uses `d3.geoPath` to draw the map and a custom button interface to toggle between years, with the underlying data provided in `data.js`.

Loading thumbnail…

Clustered Network

This clustered network visualization renders the coappearance relationships between characters in Victor Hugo’s *Les Misérables*, using weighted edges to show how often characters appear together in the same chapter. The view groups characters by community structure, displaying individual nodes as small circles and collapsed groups as larger clusters surrounded by translucent convex hulls. Clicking a node expands or collapses its group, while dragging any element moves the entire graph. The code builds the layout with the D3 v2 force layout, computes hull paths via `d3.geom.hull`, and animates transitions on SVG elements.

Loading thumbnail…

Quadtree - nearest neighbor

Clicking on the diagram places a yellow query point and a quadtree nearest-neighbor search identifies its closest orange base point, highlighted red. The d3.geom.quadtree recursively visits green rectangles, with color saturation indicating depth, while untested base points remain gray. Only orange points are measured for Euclidean distance, and the code uses d3.svg and SVG circles and rectangles to render the animated search process.

Loading thumbnail…

Quadtree Search

This example visualizes a quadtree spatial index by rendering its hierarchical rectangular cells as SVG rectangles. As the mouse moves, it searches the quadtree for the nearest of 2,500 randomly generated points, highlighting the closest point in red. The visualization uses the d3.quadtree API to build and search the index, with d3.select and d3.mouse handling mouse events. The quadtree’s cells are drawn via the visit method, while points are displayed as SVG circles.

Loading thumbnail…

Motion blur - Diagonal movement & Multiple filters

Fifteen circles radiate outward from a central point, each moving diagonally with a one-directional Gaussian blur filter applied via SVG’s `feGaussianBlur`. Clicking toggles the blur on and off, switching the title between “With” and “Without motion blur filter.” The code builds multiple `<filter>` elements, one per circle, and rotates each circle’s group so the blur aligns with its movement angle. It uses D3.js (v3) for data binding, SVG transforms, and event handling, with filters manipulated via `style("filter", ...)`.

Loading thumbnail…

Force-Directed Graph with Drag/Zoom/Pan/Center/Resize/Labels/Shapes/Filter/Highlight

This interactive force-directed graph displays network data with draggable nodes, zoom and pan controls, and double-click-to-center functionality. Nodes vary in size, shape, and color based on properties like score and type, with text labels that avoid occlusion. The visualization supports filtering by node shape, score, and link strength, plus hover highlighting of first-order neighborhoods and click-to-fade effects. Built with D3 v3, it uses d3.layout.force for simulation and d3.behavior.zoom, rendering as SVG with data loaded from a JSON file.

Loading thumbnail…

Search Collapsible Tree

This interactive visualization extends the D3.js collapsible tree layout with a Select2 search box, allowing users to locate and expand paths to leaf nodes in a hierarchical dataset. Typing a node name highlights the route to that node in red, dynamically toggling collapsed branches as needed. The tree uses an SVG rendering with animated transitions, while the search functionality relies on a recursive tree-traversal function and Select2’s event handling.

Loading thumbnail…

Simple line chart

This simple line chart visualizes a dataset of monthly values from January to December 2016. The chart plots a black line connecting twelve data points, with each point represented by a circle. Hovering over a circle highlights it in red, draws a dashed vertical guide line, and displays the value in a green tooltip. The visualization uses D3 v3, rendering SVG elements with ordinal and linear scales, a D3 line generator, and JSON data loading for the dataset.

Loading thumbnail…

Nest Treemap

This treemap visualizes the total paid fare for Home Office air travel in 2011, hierarchically grouped by supplier, destination, and ticket class. The size of each rectangle encodes the aggregate cost, with labels showing the supplier, destination, and class. Built with D3 v4, it uses `d3.nest` to define the hierarchy and `d3.treemap` for layout, rendering the leaves as absolutely-positioned HTML divs. Data is loaded from the provided CSV file, and values are formatted as dollar amounts.

Loading thumbnail…

Stacked Area Chart

This stacked area chart shows the daily market share of popular web browsers from June to September 2015, using data from Clicky Web Analytics. The visualization encodes time on the x-axis and percentage share on the y-axis, with each browser represented by a distinct color from `d3.schemeCategory10`. The code loads and parses a TSV file using `d3.tsv`, computes stacked positions with `d3.stack`, and renders the areas with `d3.area`. It employs `d3.scaleTime`, `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.extent` for scaling and domains, while axes are generated with `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

Bounded Force Layout

The visualization shows a bounded force-directed graph of the character co-occurrence network from *Les Misérables*, with nodes restricted to stay within the rectangular SVG canvas. The code leverages the custom `d3.layout.force` API from D3 v3 to simulate the physics, while the `tick` callback clamps each node's `cx` and `cy` attributes to the range `[radius, width - radius]` and `[radius, height - radius]`. The graph reads from a `graph.json` file, and the force simulation is driven by `force.drag` for user interaction.

Loading thumbnail…

Collision Detection

This example demonstrates a collision-detection simulation using D3.js v4, displaying 1000 circles of varying sizes that repel each other while being pulled toward the center of a 960×960 canvas. The visualization uses `d3.forceSimulation` combined with `d3.forceCollide`, `d3.forceX`, and `d3.forceY` to compute particle positions, while rendering occurs via Canvas 2D API calls like `clearRect` and `context.arc`. The force-collision algorithm prevents overlaps by iterating collision checks twice per tick, and randomized radii from 4 to 18 pixels create the visual variety. All drawing is handled directly on the Canvas element rather than through SVG, producing a smooth real-time animation.

Loading thumbnail…

Pie charts labels

This variation of a donut chart demonstrates how to label each slice with text and leader lines that extend outward. A button click triggers a transition to new random data, with all elements—arcs, labels, and polylines—smoothly animating to their new positions. The visualization uses D3.js v3, employing `d3.layout.pie` for the pie layout, `d3.svg.arc` for the donut and outer arcs, and `transition.attrTween` with `d3.interpolate` to morph values. Text labels are positioned via `outerArc.centroid` and aligned left or right based on the slice’s mid-angle.

Loading thumbnail…

fresh block

A blank SVG canvas displays the monospace text “My first block on blockbuilder.org!” positioned at x=120 and y=200, styled at 36 pixels. The example uses d3.select to append an SVG element to the body, then d3 append and attr methods to set its dimensions and add the text element with style properties. This minimal demo shows how to create a basic SVG text visualization with D3 v4, using no external data and rendering directly to the page.

Loading thumbnail…

Network | Basic usage

A network of 50 nodes is arranged in a circular pattern, with one node highlighted in red, and the entire layout collapses inward toward the center over time. The example demonstrates basic usage of the vis.js library, using its `vis.Network` constructor with physics disabled to maintain fixed positions. The animation is driven by a JavaScript `setInterval` timer that repeatedly calls `network.getPositions()` and `network.moveNode()` to scale each node's coordinates toward the origin over 100 steps, creating a smooth shrinking effect.

Loading thumbnail…

Network | Basic usage

This example demonstrates a basic network graph with five labeled nodes and four edges, where a short animation moves the nodes from a central starting point to their original precomputed positions. Using the vis.js library, it initializes a `vis.Network` with a `vis.DataSet` for nodes and edges, disables physics, and then retrieves node positions with `network.getPositions()`. A `setInterval` timer iterates through steps, computing convex combinations of start and target coordinates to call `network.moveNode()` for each node, creating a smooth transition over 500 milliseconds.

Loading thumbnail…

using renderUI based input in a Shiny Module

This example demonstrates a Shiny module with two side-by-side scatterplots of the mtcars dataset, each letting users select x and y variables via dropdown menus. The left plot’s controls are generated dynamically using `renderUI` and `uiOutput`, while the right plot uses static `selectInput` widgets. Both plots are rendered with `renderPlot` and a helper function that calls `ggplot2`’s `geom_point`. The module is defined with `scatterOuput` and `scatter`, connected via `callModule`, showing how to mix dynamic and fixed UI elements within a modular Shiny app.