T

Thanaporn-sk

@Thanaporn-sk·354 public vizzes

Loading thumbnail…

D3: Unit Bar Chart with Brush and Zoom

This example visualizes message-sending activity over time as a unit bar chart, where each orange circle represents a message sent on a given date, with the y-axis showing the count of messages per day. The chart combines a main focus panel with a smaller context panel below, enabling both brush-based selection and zooming to explore specific date ranges. It loads data from a CSV file, using D3 v4’s time scale, axis, brushX, and zoom APIs to render the SVG scatter plot and synchronize the two panels. The total message count for the visible range updates dynamically as the user interacts.

Loading thumbnail…

Geological Timescale v4

This interactive visualization presents the geologic timescale as a horizontally scrollable, zoomable column chart. Users can click on a time interval to expand it into smaller subdivisions, revealing the full hierarchy from eons down to stages. The chart is built with D3 v5, using the `d3.partition()` layout on a hierarchical structure loaded from a JSON file. Data comes from the Paleobiology Database. Rectangles are colored by interval and animated concurrently as the hierarchy is navigated, with drag-to-pan functionality for exploring the timescale.

Loading thumbnail…

D3.js: Animating Stacked-to-Grouped Bars

This example demonstrates interactive stacked bar charts that can transition into grouped bar charts, allowing users to switch between the two modes via radio buttons. The visualization uses D3.js v3 and Underscore.js templates to render SVG elements, with jQuery managing the tooltip display and control interactions. Each bar segment is clickable and animates between stacked and grouped arrangements using D3’s transition system, while the chart’s series (Yes, No, Maybe) are color-coded and can be toggled to highlight specific data layers.

Loading thumbnail…

Figure 5.12 - Popout

This visualization recreates Figure 5.12 from Tamara Munzner’s book, demonstrating how different visual channels enable pre-attentive popout: tilt, size, shape, proximity, and shadow direction, while parallel line pairs fail to stand out from distractors. The display arranges six labeled panels in a 2×3 grid, each containing a grid of marks where one target differs from the others. The code uses D3 v4 to append SVG rectangles and circles, applies drop-shadow SVG filters for the shadow-direction panel, and calculates frame positions and mark spacing programmatically.

Loading thumbnail…

Flocking

This interactive visualization demonstrates a flocking simulation where 30 agents move according to repulsion, orientation, and attraction zones, with colors indicating the current influence (red for repulsion, blue for attraction-only, green for orientation-only, turquoise for both). Users can adjust the three zone radii via number inputs, play, pause, or step through time using d3.interval, and click or drag points to inspect their radii and direction lines. The code uses d3.v4 with SVG rendering, d3.zoom for panning, and d3.transition for smooth radius changes.

Loading thumbnail…

Smoothed D3.js Radar Chart

This smoothed D3.js radar chart plots ten nodes by their scores across multiple axes, using percentage labels and circular grid levels to show relative magnitudes. The visualization sorts data areas by average value so smaller blobs render on top, and aligns axis lines with labels by adjusting the angle slice. Built with D3 v4, it uses `d3.scaleLinear` for radius scaling, `d3.forceSimulation` for node layout, and SVG rendering with a glow filter. The data comes from JSON objects with node IDs and scores, and the chart includes an interactive tooltip and legend.

Loading thumbnail…

Radial Force

This example demonstrates a custom radial force in D3.js that positions nodes into two distinct concentric circles. Red nodes cluster at a radius of 100 pixels, while blue nodes form a larger circle at 200 pixels. The simulation uses `d3.forceSimulation` combined with a custom `forceRadial` function and `d3.forceCollide` to prevent overlap. Node positions are rendered as SVG circles, with the force updating their `cx` and `cy` attributes on each tick.

Loading thumbnail…

Customer Dimensions - Dairy

A radial bar chart titled "Customer Dimensions – Dairy" visualizes five attributes—Price, Health, Convenience, Quality, and Inspiration—each scored from a CSV file. The chart uses D3 v4 to render SVG paths as animated arcs, with colors (green, blue, grey) encoding category levels (High, Medium, Low). Hovering reveals tooltips with the attribute name and score, while a legend clarifies the color-coding. The animation is driven by `transition.attrTween` with a cubic interpolator, and axes are drawn with `d3.arc` and radial guides.

Loading thumbnail…

Polar Plot (v4)

This polar plot visualizes the function 1 + cos(t) over the domain [0, 2π], with the result drawn as a red line. The chart uses a radial grid with dashed circular axes and angular tick labels in degrees. Built with D3 v4, the code employs `d3.radialLine` to generate the curve and `d3.scaleLinear` to map data values to radial distances. The SVG rendering includes axis circles, rotated angle labels, and radial grid lines, following an adaptation of Mike Bostock’s original polar plot example.

Loading thumbnail…

Chart

This chart visualizes a radial network with two concentric rings of nodes, connected by curved links that represent relationships between outer and inner points. The visualization is interactive, as hovering over a node highlights its connected links in navy blue. Built with D3 v4, the code uses `d3.line()` with a Catmull-Rom curve for the circular outlines and a custom link function to draw quadratic Bézier paths. The data is computed geometrically, positioning 24 outer and 12 inner nodes around a center, with 14 predefined source-target connections.

Loading thumbnail…

MB zoom circles in and out

This example shows a set of four colored circles on a white background that zoom in and out when clicked. Clicking a circle smoothly transitions the viewport to center on that circle and scale it up, while clicking the background resets the view. The code uses d3.zoom with a zoom transform, d3.transition for the 750-millisecond animation, and SVG circle elements. Circle positions and radii come from an inline JSON array, and the zoom behavior applies a transform to a group element containing the circles.

Loading thumbnail…

Industry Employment Visualization

This interactive visualization shows the distribution of employment across 20 industry sectors for all US states, with horizontal bars representing each state's share of its workforce in each industry. Users can filter by year (1990 and 2016) and highlight four geographic regions via buttons, while hovering reveals state names. The chart uses d3.v5 with SVG rendering, d3.scaleOrdinal for regional colors, and animated transitions when switching datasets. Data comes from the Bureau of Labor Statistics’ Quarterly Census of Employment and Wages.

Loading thumbnail…

Zoomable Treemap Bar Chart

This zoomable treemap bar chart visualizes U.S. trade imports and exports from 1995 onward, with each year split into two bars for import and export values. Clicking a country zooms into its trade data, while a checkbox toggles between raw and inflation-adjusted figures. The visualization uses D3 v4’s `d3.hierarchy`, `d3.treemap`, `d3.scaleBand`, and `d3.axisBottom` to render SVG rectangles and axes, with transitions animating the zoom. Data comes from the U.S. Census Bureau’s foreign trade balance records.

Loading thumbnail…

Zoomable Treemap Bar Chart

This interactive visualization combines a treemap and a bar chart to show U.S. trade balances across countries and years. Users can click a country to zoom into its trade data, adjusting for inflation via a toggle, with nodes animating to their new positions. Built with D3 v4, the chart uses `d3.json` to load Census data, `d3.hierarchy` for structure, and `d3.scaleBand` and `d3.scaleLinear` for axes. The implementation handles divide-by-zero `NaN` values during treemap transitions.

Loading thumbnail…

Blocks Graph - w/thumbnails

This interactive block graph shows a network of D3 examples, where each node represents a gist and links connect related blocks. The graph is rendered as a Canvas using D3's force simulation (`d3.forceSimulation`) with charge, link, and position forces. Hovering over a node triggers a tooltip that loads and displays the gist’s thumbnail image via `loadTooltipThumb`. The node data comes from `graph.json`, which lists gist IDs, user names, and descriptions. The visualization uses D3 v4 and a WebGL/Cavas approach to handle the dynamic layout and hover interactions.

Loading thumbnail…

D3 v4 Stacked Bar Chart with Negative Values - CFNAI Data

This stacked bar chart visualizes the Chicago Fed National Activity Index (CFNAI), breaking down monthly economic data into four component categories that can be either positive or negative. The bars are stacked to show the contribution of production, employment, consumption, and sales components to the overall index. A black line overlays the chart to display the three-month moving average of the total CFNAI values. Built with D3 v4, the visualization uses SVG rendering with `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` to position bars and draw the trend line, with data loaded from a JSON file.

Loading thumbnail…

D3 v4 Stacked Bar Chart with Negative Values - CFNAI Data

This stacked bar chart displays the Chicago Fed National Activity Index (CFNAI) from 1967 onward, breaking the index into four economic components that can be positive or negative. A black line overlays the bars to show the three-month moving average of the total index. Built with D3 v4, the visualization uses `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` for the moving average, and custom logic to stack positive and negative values separately. Data comes from a local `cfnai.json` file, with an SVG-rendered legend and axis.

Loading thumbnail…

stacked/grouped

This interactive visualization compares U.S. state population distributions across seven age groups, with radio buttons toggling between grouped and stacked bar chart layouts. Built with D3.js version 3.5, it uses ordinal and linear scales, categorical color encoding, and SVG transitions. The animation shifts bars between stacked and side-by-side arrangements over 500 milliseconds. Population data comes from a CSV file, and hover tooltips are implemented through SVG text elements.

Loading thumbnail…

Small multiple histograms

Small multiple histograms display the distribution of event dates by region, with three separate charts for Asia, Africa, and America. Each chart shows yearly bins using d3.histogram with time-based thresholds, and labels each non-empty bin with its count. The example loads a CSV file with d3.csv, parses dates using d3.timeParse, and nests rows by region via d3.nest. All charts share a global y-axis scale for count, rendered as SVG with d3.axisBottom showing year tick marks.

Loading thumbnail…

fractal

This visualization renders an interactive tree fractal using nested SVG circles. It shows how mouse position controls branch angle and iteration depth, with the total count of rendered circle elements displayed at the bottom. As the mouse moves, the fractal regenerates in real time, offering a tangible sense of SVG performance limits when element counts grow large. The code uses D3.js v4 with selections and data joins to manage circle updates, while a recursive function calculates each circle’s position and radius.

Loading thumbnail…

circular calendar

A circular calendar visualization arranges the days of the year as concentric arcs, with each month represented by a colored ring segment and individual day cells marked within. The example plots specific project dates—marked with distinct colors and symbols—onto this radial timeline, while the current day is highlighted as a special point. Built with D3 v4, the code uses `d3.arc` to draw the arcs, `Date.prototype.getDOY` to compute day-of-year angles, and SVG paths for rendering. The underlying data is a small hardcoded array of date–project pairs.

Loading thumbnail…

circular calendar

This circular calendar visualizes a year of events as concentric rings, with each month occupying a colored arc segment and individual days marked along the circumference. Event markers, color-coded by project (DS, N, S, special), appear as highlighted points on their corresponding dates. The visualization is built with D3 v4, using SVG paths and arcs generated via `d3.arc()` with computed start and end angles derived from each day-of-year. The code also defines custom arc segments for months and spring/summer/autumn color schemes, with a large “middle” text element at the center.

Loading thumbnail…

Flocking boids

A canvas-based flocking simulation that animates hundreds of boids following Craig Reynolds’ classic behavioral rules of alignment, cohesion, and separation. Clicking on the canvas adds new boids. The default “By Movement” coloring shades each boid via d3.interpolateWarm based on a moving average of its acceleration magnitude, while an alternative “Rainbow” mode assigns colors via d3.interpolateRainbow. A dat.GUI panel adjusts parameters like flockmate radius, velocities, and starting formations, with each frame rerendering trails on two stacked canvas elements.

Loading thumbnail…

Document

This example shows multiple randomly generated time-series line charts, each with a y-axis label and colored lines. Users can brush to zoom into a time range and drag to pan across the data, with a clip path preventing overflow. The visualization is built with D3 v4, using `d3.brush`, `d3.drag`, `d3.scaleTime`, and `d3.voronoi` for hover interactions, rendered as SVG with animated updates.

Loading thumbnail…

Canvas area charts zoom on click using d3.interpolateString

This example shows two time-series area charts for energy data (PV and TBL kilowatts) rendered on a Canvas layer, with an SVG layer for axes and a clickable zoom button. Clicking the button triggers a smooth zoom animation into a specific date range using `d3.interpolateString` to interpolate between domain values. The code uses d3.v4, `d3.area`, `d3.zoom`, and `d3.scaleTime`, drawing to a scaled Canvas context (for retina displays) while keeping the SVG for interactive elements. The data is loaded from a CSV file containing hourly readings.

Loading thumbnail…

Zoomable Area Canvas with Retina

This example shows a zoomable area chart of power consumption data (TBLkW) recorded at hourly intervals from late December 2014 through early January 2015. The chart is rendered on a Canvas element using D3 v4’s `d3.area()` generator with a step curve, while axes and tick labels are drawn directly via the Canvas 2D context. A `d3.zoom()` behavior rescales the time scale on pan and zoom events, and the chart supports high-DPI displays by adjusting the canvas backing store ratio. The data is loaded from an external CSV file.

Loading thumbnail…

timeline lollipop chart

This timeline lollipop chart compares the tenures of six global car company CEOs, showing the year each executive was placed in charge of their group. The chart uses a D3.js v4 SVG rendering with a lollipop-style presentation, where each CEO's start year is marked as a dot on a horizontal timeline. The visualization uses `d3.csv` to load the data, `d3.scaleBand` for the y-axis categories, and `d3.scalePoint` for the x-axis years, with alternating row backgrounds for readability. The data comes from a CSV file listing the person, company, and year.

Loading thumbnail…

google timeline

This example shows a timeline chart for U.S. presidential and cabinet positions, using the Google Charts loader with the `timeline` package and `google.visualization.Timeline`. The data table includes positions, person names, and start/end dates, with rows grouped by row label disabled via the `groupByRowLabel` option. The chart renders into a fixed-height div, using the Google Charts API rather than D3 directly, though D3 v4 is loaded in the page.

Loading thumbnail…

timeline chart with zoom

This timeline chart displays 15 vehicle intervals from their start to end dates, with each vehicle assigned to its own horizontal SVG band. The visualization uses D3v4’s time scale, axis, nesting, and zoom behavior, which is applied to a full-page overlay rect; panning and zooming rescale the x-axis and updates each band’s rectangle positions and widths via the zoom transform. Data is generated randomly in `data.js`, and the tooltip shows the raw date strings on hover.

Loading thumbnail…

timeline

This visualization displays a timeline of asset locations and transit periods across a multi-day period, with each row representing a different asset (such as "MJ", "Raj", or "Mahesh Car"). The code uses D3.js version 4, rendering SVG rectangles whose horizontal positions and widths correspond to entry and exit times via `d3.scaleTime()`. Vertical placement is determined by a series number, with larger, semi-transparent rectangles for location dwell times and smaller, opaque pink bars for transit intervals. Zone-level stops are also included, shown in distinct colors, and the data is loaded from external JSON files using `d3.json()`.

Loading thumbnail…

Timelines Chart

This example demonstrates a swimlane-style timelines chart for visualizing multiple time-series groups, where each line is divided into colored segments. Segments are colored using a continuous heatmap scale or, in this instance, a categorical ordinal scale, with randomly generated labels from A to Z. The visualization arranges time-series into six distinct groups and allows interactive exploration through zooming and a brushable timeline at the bottom. Built with the `TimelinesChart()` D3 component from the `timelines-chart` library, it processes randomly generated data produced by the `getRandomData` function in `random-data.js`.

Loading thumbnail…

Swimlane using d3.js

A swimlane timeline charts randomly generated work items across labeled lanes, color-coding each item as past or future relative to the current date. The main chart uses a D3 time scale with Sunday and month tick marks, while a smaller overview panel provides a zoomable navigation brush. The code updates D3 v2 to v4, replacing legacy APIs with `d3.scaleTime`, `d3.axisBottom`, and `d3.axisTop` for time-based axes and rendering. Items are positioned using linear y-scales per lane, with lanes automatically subdivided to avoid overlapping intervals.

Loading thumbnail…

Categorized Timeline Using Dates

This visualization displays a categorized timeline of wars involving the United States during its first 100 years, using data from Wikipedia. Events are grouped into five distinct lanes—colonial, native, internal, European, and Latin American conflicts—each rendered as horizontal bars within its own row. The example uses the d3.timeline layout from the d3.layout.timeline plugin, with D3 v4’s scaleOrdinal for color mapping and d3.csv to load the data. Rectangles are positioned and sized based on the timeline’s computed start and end coordinates, with each category separated vertically.

Loading thumbnail…

Election History

This visualization displays over two centuries of U.S. presidential election results as a grid of colored cells, one per state and election year, with fill color indicating the winning party and opacity reflecting vote share. Built with D3 v4, it uses SVG rectangles mapped via `d3.scaleBand` for both axes, and adds a hover-based tooltip that highlights the corresponding row and column while showing vote totals and party percentages. A button toggles the vertical sorting between alphabetical and chronological state order using an animated transition.

Loading thumbnail…

A year of weekly running mileage

This radial heat-histogram visualizes a year of weekly running mileage, with distance and elevation for each run shown as colored bars around a circular timeline. The visualization uses a masked area path to color the chart dynamically based on adjustable weekly mileage thresholds, with interactive sliders controlling the color transitions between low, middle, and high zones. Built with D3 v4 and moment.js, it renders SVG elements and includes hover tooltips for detailed run information, with data loaded from a JSON file.

Loading thumbnail…

Radial Stacked Bar

This example shows the population distribution of U.S. states across age groups using a radial stacked bar chart, where each state occupies a wedge and the stacked segments represent age categories. The chart uses d3.stack to compute the stacked series, d3.scaleBand for the angular axis, and a custom d3.scaleRadial for the radial extent. It renders SVG paths via d3.arc with padded angles, and includes circular grid lines, state labels rotated around the perimeter, and a legend for age groups. The data comes from a CSV file.

Loading thumbnail…

CodePen - Redesigned - Company Employees Hierarchy Chart

This interactive hierarchy chart visualizes a company’s employee structure using a force-directed graph rendered in SVG. Users can explore departments and individual employees through animated nodes, with a searchable side panel that displays matching profiles. The chart is built with D3.js, employing its force simulation for layout and animated transitions. Data is embedded in the source, and styling follows a custom Roboto-based design with hover tooltips for entity details.

Loading thumbnail…

X and Y force splits

An interactive network diagram showing how service requests spread across locations, nodes, and systems. The visualization uses node-link diagrams with animated force-directed layouts, allowing users to toggle between grouping by location or system via buttons. Data is loaded from a JSON file and rendered as SVG circles sized by request count, with color encoding for node names. The example uses d3.forceSimulation, d3.scalePoint, and d3.scaleOrdinal to implement the splitting behavior.

Loading thumbnail…

Orbital Trajectory

An interactive simulation of orbital trajectories shows a blue satellite orbiting a central red mass, with its path traced as a dotted trail on a canvas. The velocity slider adjusts the satellite’s initial tangential speed relative to orbital velocity, demonstrating circular, elliptic, or hyperbolic paths based on gravitational physics. The number of trajectory sample points is also user-controllable. The visualization uses `d3.forceSimulation` with `d3.forceMagnetic` to model gravity, rendering the trail via Canvas `fillRect` calls and the satellite as an SVG circle.

Loading thumbnail…

Binary Star System

This example visualizes the orbital trajectory of a satellite around a dynamically adjustable binary star system. Two red stars are fixed, while a blue satellite moves under an inverse-square attraction force, with its path traced as a dotted line. Users can add or remove stars by double-clicking, drag any node to reposition it, and adjust the satellite’s initial velocity or trajectory prediction length via a GUI. The simulation uses `d3.forceSimulation` with the `d3-force-magnetic` attraction force, rendering trails on a canvas and interactive elements as SVG, with controls built using `dat.GUI`.

Loading thumbnail…

Zoomable Sunburst with Labels

This interactive sunburst chart displays hierarchical data with arc labels, allowing users to click any arc to zoom into that subtree, click the center circle to zoom out, or click the canvas to reset. The visualization uses a D3.js v4 partition layout with linear and square-root scales, rendering SVG paths and text elements. It employs `d3.hierarchy`, `d3.arc`, and animated transitions via `transition.attrTween`, while labels are positioned along the arcs using `textPath` elements. The data comes from a JSON file of the Flare dataset, and text is hidden when it does not fit within an arc segment.

Loading thumbnail…

Timelines Chart

This example demonstrates a swimlane-style timelines chart for visualizing multiple time-series groups, where each line is divided into colored segments. Segments are colored using a continuous heatmap scale or, in this instance, a categorical ordinal scale, with randomly generated labels from A to Z. The visualization arranges time-series into six distinct groups and allows interactive exploration through zooming and a brushable timeline at the bottom. Built with the `TimelinesChart()` D3 component from the `timelines-chart` library, it processes randomly generated data produced by the `getRandomData` function in `random-data.js`.

Loading thumbnail…

3D Radial Force

This example visualizes a 3D radial force layout, where two classes of nodes are attracted to the surfaces of concentric spheres with radii of 300 and 600 pixels, respectively. The 700-node dataset, with one class in brown and the other in steelblue, demonstrates how radial attraction and collision forces organize the nodes into distinct spherical shells. The visualization relies on the `3d-force-graph` library for WebGL rendering and the `d3-force-3d` library, which provides the `d3.forceRadial` and `d3.forceCollide` functions to drive the simulation.

Loading thumbnail…

3D Force-Directed Tree

This visualization renders the D3 v4 dependency tree as a 3D force-directed graph, where each hierarchical level is locked to its own horizontal plane to emphasize the tree’s structure. Nodes represent files and directories, sized by file size and colored by module, with the data loaded from a local CSV file. It uses the `3d-force-graph` library for Three.js/WebGL rendering, `d3-force-3d` for the force simulation, and `d3.forceCollide` for collision detection, with node labels displayed on hover.

Loading thumbnail…

D3 | Dorling map using force layout

A Dorling map displays countries as circles sized by an encoded value, positioned near their geographic centers using a force-directed layout. The D3.js v3 visualization applies a Voronoi grid to enable stable country selection and prevent interactive flickering. Circle color and area map to data values from the provided JSON files, with country labels overlaid. The implementation utilizes D3's force simulation and Voronoi functions, with an optional developer mode to reveal the underlying grid structure. Coordinates and country attributes are loaded from external JSON data sources.

Loading thumbnail…

Joyplot Update Pattern II

Nine labeled density curves, one for each name from a hardcoded array, form an updating joyplot. Every second, `d3.interval` regenerates random data via `makeData` and `jz.num.randBetween`, and `d3.area` redraws the stacked shapes with a basis curve. SVG transitions update the path geometry, with white strokes separating alternating steelblue and lightskyblue areas, while baselines and axis labels remain static. The code uses `d3.scaleBand` and `d3.scaleLinear` to position the bands and an `d3.axisBottom` for the x-axis.

Loading thumbnail…

Joyplot

This joyplot visualizes the peak time of day for sports and leisure activities, showing the number of participants throughout the day compared to peak popularity. Using D3 v4 with SVG rendering, the chart displays overlapping area charts for each activity, ordered by their peak time, revealing patterns like morning and evening workouts, midday hobbies, and late-night outings. The data comes from the American Time Use Survey, processed with R and loaded from a TSV file. The code uses `d3.area`, `d3.scaleTime`, `d3.scaleBand`, and `d3.nest` to structure and render the overlapping distributions.

Loading thumbnail…

blockup

This animation shows a car racing around the Australian Grand Prix circuit, with its speed visibly adjusting based on the curvature of the track. The vehicle accelerates on straights and brakes into corners, while vector lines indicate the steepness of each curve. A speedometer dial and a lap-time chart track the car’s progress. Built with Vue, the visualization uses D3 v4’s `d3.interval`, `d3.line`, `d3.scaleLinear`, and SVG transitions to move the car and render dynamic elements.

Loading thumbnail…

Force-simulated Solar System

This interactive simulation depicts the solar system with bodies rendered true-to-scale, revealing the vast emptiness of space. The visualization uses a force-simulated engine, `d3.forceSimulation`, paired with the gravity-like `d3-force-magnetic` attraction force, to derive orbital trajectories from celestial mass and distance configurations. The code loads body data from a JSON file and renders it on a Canvas element, using `chroma` for colors. A "Size distortion" slider exaggerates body diameters for visibility, while radio buttons lock the view onto a selected body, and scroll-wheel zooming adjusts speed.

Loading thumbnail…

blockup

The visualization animates Formula 1 cars racing around the Melbourne Grand Prix circuit, with a real-time leaderboard tracking position, gaps, and lap times alongside a line chart plotting each car's speed fluctuations. Car movements are simulated with randomized speed changes, and the code uses d3.interval to drive the animation, d3.line and d3.scaleLinear for the chart, and SVG paths for the track.

Loading thumbnail…

Timelines Chart

This example demonstrates a swimlane-style timelines chart for visualizing multiple time-series groups, where each line is divided into colored segments. Segments are colored using a continuous heatmap scale or, in this instance, a categorical ordinal scale, with randomly generated labels from A to Z. The visualization arranges time-series into six distinct groups and allows interactive exploration through zooming and a brushable timeline at the bottom. Built with the `TimelinesChart()` D3 component from the `timelines-chart` library, it processes randomly generated data produced by the `getRandomData` function in `random-data.js`.

Loading thumbnail…

Curlies

The visualization displays a dense grid of 2,500 small, convex blob shapes, each rotating and scaling independently against a brown stroke on a canvas. As the animation progresses, the entire grid expands uniformly from a scale of 1 to 2.5, with each blob’s rotation speed varying randomly. The code uses `d3.range` to generate the grid, `d3.polygonHull` to create each blob from random points, and `d3.line` with `d3.curveCatmullRomClosed` for smooth outlines. Rendering relies on the Canvas 2D context, driven by a `d3.timer` loop that applies translation, rotation, and scaling transformations.

Loading thumbnail…

Teacher Wages

This chart compares the distribution of annual wages for elementary and high school teachers across U.S. states. Each state displays a box-and-whisker plot, with the box spanning the 25th to 75th percentile and the median shown as a central tick, while outer ticks mark the 10th and 90th percentiles. Two side-by-side panels allow direct comparison between the two occupations, and a radio button group at the bottom sorts states alphabetically or by either teacher type’s median wage. The visualization is built with D3 v3, using SVG for rendering and an animated transition when sorting changes. Data originates from the Bureau of Labor Statistics.

Loading thumbnail…

Canvas Rossler attractor

This example visualizes the Rössler attractor, a chaotic dynamical system, by plotting its trajectory across three 2D projections (XY, XZ, and YZ planes) alongside a rotated 3D main view. It uses a Canvas 2D context to render the attractor paths with a linear gradient, while SVG is used for the coordinate axes and arrow markers. The code relies on d3.line and d3.curveCardinal for path generation, and applies custom rotation and orthographic projection functions to map 3D points to 2D space.

Loading thumbnail…

A year of weekly running mileage

A radial heat-histogram visualizes a year of weekly running mileage, using color-coded arcs to distinguish low, middle, and high distance zones based on adjustable threshold sliders. The underlying masked SVG paths are redrawn and selectively colored as thresholds change, while yellow and blue bars represent individual run distance and elevation, with hover tooltips for details. The code uses d3.v4 with moment.js and moment-range for date handling, and d3.json to load the run data from a gist.

Loading thumbnail…

Sankey with circular links

This example visualizes a Sankey diagram with circular links, showing the flow of values between interconnected processes where links can loop back to earlier stages. The diagram uses the `d3-sankey-circular` library to handle cyclic dependencies, rendering nodes as rectangles and links as curved paths. A set of animated stroke-dasharray paths, updated via `setInterval`, visually indicates the direction of flow along each link. The data is hardcoded in `example-data.js`, and the visualization is built with D3 v4, rendering to SVG with interactive hover effects that highlight connected nodes and links.

Loading thumbnail…

Small Multiples

This example visualizes fantasy football draft picks as small multiples, with each of the 14 teams shown in its own panel. The visualization displays player names, positions, and team affiliations across 40 draft rounds, using SVG text elements. The data is loaded from an inline JavaScript array and rendered with D3 v4, with a simple mapping of draft rounds to coordinate positions. The animation component suggests interactive or sequential highlighting of picks, though the specific transitions are not explicitly defined in the visible code.

Loading thumbnail…

d3-force testing ground

This interactive demo provides a testing ground for adjusting the forces in a force-directed graph layout. Using the `d3.forceSimulation` API, it visualizes the connections of the classic *Les Misérables* character co-occurrence network, rendered as SVG nodes and links. A control panel allows the user to enable or disable and tune parameters for individual forces, including `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, `d3.forceCenter`, and directional pull forces, with an alpha bar to monitor simulation activity.

Loading thumbnail…

How many shades of blue do you need?

This example shows how many discrete shades of blue are needed to create a smooth gradient from light to dark. It displays a series of horizontal rows, each containing a different number of color swatches, from 2 to 40, using a predefined array of seven blue hex values. The visualization uses d3.scaleLinear to interpolate between those colors and d3.scaleBand for positioning the rectangles and text labels. Each rectangle is rendered as an SVG rect with its fill computed from the interpolated color scale.

Loading thumbnail…

Enclosing Force Circles

The visualization displays pay ratios at London universities, where each circle’s size and color encode the ratio between highest and lowest salaries. Dots inside each circle represent the ratio value, with hover interactions revealing the exact ratio and adjusting opacity. Built with D3 v4, the code uses `d3.forceSimulation` for positioning dots and `d3.packEnclose` to compute enclosing circles. Data from `paygaps.js` lists institutional salary figures, rendered as SVG with interactive hover states.

Loading thumbnail…

Robot Painter

This example shows a rainbow-colored histogram that continuously smooths and refines its shape over time. The visualization animates a blurred density curve of 300 random points across 500 bins, with each frame redrawing the area path in a translucent stroke that shifts hue from blue through the spectrum. The code uses D3 v4’s `d3.histogram`, `d3.area`, `d3.scaleLinear`, and `d3.timer`, rendering to two stacked Canvas elements for layered accumulation. Each timer tick applies a simple blur by averaging neighboring bin densities, and the stroke’s opacity fades as elapsed time increases.

Loading thumbnail…

v4 curve interpolation comparison

This example compares eight different d3 v4 curve interpolation methods (linear, step, basis, cardinal, monotone, and Catmull-Rom variants) on a shared time-series of stock closing prices. Each curve is drawn as an SVG path, and clicking a legend label toggles its opacity via `d3.select(...).transition().duration(100)`. The visualization uses `d3.line()` with a `.curve()` method to generate the paths, `d3.axisBottom` and `d3.axisLeft` for axes, and `d3.scaleOrdinal` with `d3.schemeCategory10` for colors. Data is loaded from a CSV file with `d3.csv`.

Loading thumbnail…

d3 example graph search - description query

This interactive graph visualization displays d3.js example blocks and their citation relationships, using a static JSON file representing a Neo4j database response. The query results show blocks with "map" in their descriptions alongside linked neighbors that lack the keyword, demonstrating how graph connections infer relevance. Rendered on Canvas, the visualization uses d3.forceSimulation with d3.forceManyBody, d3.forceCollide, and forceX/forceY forces for layout. It also incorporates jsLouvain for community detection, a forceInABox clustering layout, and click interactions to open the corresponding gist blocks.

Loading thumbnail…

Demo

This demo shows a multi-chart stock visualization comparing sector performance over time with Federal Reserve balance sheet data. The main chart uses stacked streamgraph areas rendered with SVG, while a secondary area and bar chart display balance sheet volume and interest rate changes. The visualization supports interactive filtering through a legend, allowing users to toggle sectors, and includes a tooltip. The code uses d3.v4, d3.stack, d3.area, d3.scaleTime, and d3.scaleLinear with jQuery for DOM interactions.

Loading thumbnail…

Force in a Box algorithm d3v4

This example demonstrates the Force in a Box algorithm, which groups network nodes into visible clusters by applying a treemap or force-based template to compute focal points for each group. The visualization uses d3.forceSimulation with additional forces for charge, centering, and links, while the custom forceInABox force distributes nodes within their group’s region. Users can toggle grouping and template display via checkboxes and a dropdown. The rendered SVG displays the Les Misérables character co-occurrence network from miserables.json, with node colors and link thickness representing group and connection strength.

Loading thumbnail…

Stacked Negative Values

This example shows a diverging stacked bar chart for quarterly fruit sales, with positive values (apples and bananas) rising above the x-axis and negative values (cherries and dates) descending below it. The visualization uses d3.stack with the d3.stackOffsetDiverging offset to align the stacked segments around a zero baseline. The code renders SVG rectangles via d3.v4, using d3.scaleBand for the x-axis, d3.scaleLinear for the y-axis, and d3.schemeCategory10 for color encoding. Data is hardcoded in the script, and axes are generated with d3.axisBottom and d3.axisLeft.

Loading thumbnail…

Calculating the relative angle difference between two vectors

Two draggable vectors extend from a central origin, and the smaller angle between them is highlighted as a filled arc. A label reports the angle in degrees and whether it is "port" or "starboard". The interaction uses D3 v4's `d3.drag` to update vector positions, while the arc is drawn with `d3.arc` and `Math.atan2` computes the relative angle using the provided formula. The visualization renders as SVG with an arrowhead marker, and the arc color shifts between cyan and magenta based on the angle's sign.

Loading thumbnail…

Mister Nester

Mister Nester is an interactive console for learning and experimenting with data nesting in d3.js. The interface presents a text area where tabular data—such as county-level population and Hispanic percentage by year—can be pasted, and a preview pane displays the nested structure generated from it. The visualization updates in real time as the input is edited, using the d3.v3 library to parse and reorganize the data into a hierarchical format. Users can select from sample datasets and trigger the nesting process via a button, making the tool a practical playground for understanding how d3 handles nested data relationships.

Loading thumbnail…

Open-high-low-close chart

This visualization shows stock price data for Twitter (NYSE: TWTR) using an open-high-low-close chart, with red vertical lines indicating days when the closing price was lower than the opening price and green lines for the opposite. A semi-transparent black line overlays the chart to display a five-day moving average of the closing price. The code uses D3 v4, pulling data from a CSV file, and constructs the chart with SVG paths generated by the `d3.line` function, while axes are rendered using `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

Mutliple connected beeswarm plots

This example displays multiple connected beeswarm plots, one per outcome category, with each dot representing a family's return on investment. Clicking a dot highlights its connecting line across all plots and mutes the other points, revealing trends that might be missed with parallel coordinates. The chart uses d3.js version 4.1.0, with Voronoi diagrams to handle click events. The SVG rendering includes custom axes, grid lines, and a color scale, and the data is loaded from a CSV file.

Loading thumbnail…

Makeover Monday - YouTube ratings - beeswarm plot

The visualization uses a beeswarm plot to compare YouTube gaming channels by their ratings, showing each channel as a circle positioned along an axis for video views and another for subscriber count. It includes a dropdown to select a specific user, which highlights that user's circles across the different rating categories while dimming others. Built with d3.v4, the layout uses `d3.forceSimulation` with `d3.forceX` and `d3.forceY` to arrange the circles, and the SVG rendering includes custom axes and labels for billions of views and millions of subscribers. The underlying data comes from a CSV file with columns for rank, rating, user, subscribers, and video views.

Loading thumbnail…

Date slider - histogram legend

A date slider controls a histogram color legend, where each bar represents a year and its height shows the count of data points. Dragging the handle filters the scatterplot below, showing only records with dates up to the selected year. The visualization uses d3.csv to load the data, d3.histogram and d3.scaleTime for binning and axes, and d3.drag for the slider interaction. The color scale is d3.scaleOrdinal with a categorical range applied across year bins.

Loading thumbnail…

Pie Chart with Image Pattern

Six pie charts display proportions of an image-filled pattern, each chart representing a fraction of a whole. The example uses SVG `<pattern>` definitions to fill circle elements with a coin image, while D3 v4 generates the pie segment paths via the `d3.arc` API. Animated transitions between fractions are applied using `transition.attrTween` and an interpolated arc function, with data provided as an array of numeric values in the script. The rendering relies on SVG elements and a custom pattern with spacing calculations, though the positioning logic remains partially refined.

Loading thumbnail…

Radial Line Chart

A radial line chart visualizes Twitter's stock price fluctuations from August 2016 to July 2017, with months arranged around a circular time axis and closing prices plotted as radial distances from the center. The chart uses d3.scaleTime for the angular axis, d3.scaleRadial for the radial price scale, and d3.lineRadial to draw the line. Data comes from a CSV file containing daily OHLC prices. The visualization includes circular gridlines with dollar labels and month tick marks, with a title reading "Twitter" centered in the plot.

Loading thumbnail…

Scatterplot with Voronoi

This interactive scatterplot maps life expectancy against GDP per capita for countries, colored by region and sized by total GDP. It uses a Voronoi tessellation to expand the hover target for each point, so tooltips appear when the mouse is near a circle, not just directly over it. Built with D3 v4 and React, the visualization leverages `d3.voronoi.find(x, y, radius)` for efficient neighbor lookup and displays tooltips via Bootstrap popovers. The data comes from the World Bank.

Loading thumbnail…

Encircle Scatterplot with alpha shapes

This visualization shows a scatterplot matrix of the classic Iris flower dataset, with each cell displaying pairwise correlations between four measurements (sepal length, sepal width, petal length, petal width). The three species are distinguished by color, and each species’ points are encircled by an irregular polygon boundary. The boundaries are computed using an alpha-shape algorithm that filters Delaunay triangles from `d3.voronoi` by a distance threshold, then extracts connected triangle edges via a custom `boundary` function. The polygons are rendered as SVG paths using D3 v4’s data-binding, while axes and brushing interactions follow the standard scatterplot-matrix pattern.

Loading thumbnail…

Lollipop Chart

This lollipop chart compares the yearly pay gap between the lowest, median, and highest paid employees at five universities. Hovering over circles displays the specific salary values. The visualization uses D3 v4 with SVG rendering, employing `d3.scaleBand` for categorical y-axis positioning, `d3.scaleLinear` for the salary x-axis, and `d3.line` generators for the connecting stems and grid lines.

Loading thumbnail…

Pie charts labels

This example presents a donut chart where each slice has an animated label connected by a thin polyline. A "randomize" button triggers a smooth transition to a new dataset, and the labels reposition themselves, keeping their text anchored appropriately depending on which side of the chart they fall. The code uses d3.layout.pie, d3.svg.arc, and transition.attrTween to interpolate the slice arcs, label positions, and connector lines. It relies on d3.interpolate to handle the animation and source data is generated randomly from a fixed set of label names.

Loading thumbnail…

Gooey egde effect

A hexagon filled with colorful moving circles demonstrates a gooey edge-detection effect. The visualization applies an SVG filter using feGaussianBlur and feColorMatrix to create the gooey merging, then adds feConvolveMatrix to extract the edges of the merged shapes. A linear gradient fills the hexagon, which is defined as a clip path. The circles are positioned with random coordinates and animated via D3.js v4, with the filter defined in SVG defs and applied to the transformed circle group.

Loading thumbnail…

Lollipop Chart

A lollipop chart compares the lowest, median, and highest yearly salaries across five UK universities, with each university’s salary range drawn as a horizontal line between green and magenta circles. The visualization uses d3.v4 with SVG rendering, employing d3.scaleBand for the categorical y-axis, d3.scaleLinear for the numeric x-axis, and d3.axisLeft and d3.axisTop for tick marks. Tooltips appear on circle hover via mouseover and mouseout events, revealing the exact salary values.

Loading thumbnail…

Reusable Donut Chart in D3 v4

This donut chart displays species probability data from a TSV file, with each slice colored by species and labeled with its percentage. The chart is implemented as a reusable D3.js v4 function, using `d3.pie()` to compute slice angles, `d3.arc()` for rendering with configurable corner radius and padding, and `d3.scaleOrdinal()` with a categorical color scheme. Hovering over a slice or its label shows a tooltip with the species name and percentage in the donut’s center—a feature built from D3’s selection and event handling. The SVG output includes text labels and connecting polylines, styled via CSS.

Loading thumbnail…

OOP approach in d3.v4

This example demonstrates an object-oriented approach to building a bar chart with D3 v4, organizing chart logic into a reusable `initBarGraph` object with a `draw` method. It takes a dataset of names and marks, rendered as SVG rectangles with axes, using `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, along with `d3.axisBottom` and `d3.axisLeft`. The chart is configured via a passed object specifying the data and target DOM element, with hardcoded margins and dimensions.

Loading thumbnail…

Horizontal stacked bar chart implementation in d3.v4

This example shows a horizontal stacked bar chart of monthly mortality data from the Crimean War, breaking down deaths into wounds, other causes, and disease across the 1850s. The chart is rendered with SVG in D3 v4, using `d3.stack()` with an offset and keys, a linear `xScale` for values, and a band `yScale` for dates. The code draws rectangles per layer with `d3.scaleOrdinal` and `d3.schemeCategory20` for colors, and includes `d3.axisBottom` and `d3.axisLeft` with time formatting for the date labels.

Loading thumbnail…

Instance Similarity III

This visualization uses a heatmap-style matrix to display DBpedia instances, with rows and columns representing individual resources and their predicates. A cell is filled when an instance has a given predicate, and clustering colors group similar instances using hierarchical clustering with a single-linkage criterion. The D3 library renders the SVG matrix, while the clusterfck library, with selectable Euclidean, Manhattan, or max-distance metrics, handles the clustering algorithm. Users can adjust the clustering threshold via a slider, and the matrix supports zooming for detailed exploration.

Loading thumbnail…

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

This example demonstrates D3.js (v4) enter(), update(), and exit() transitions for animated data visualization. A button click toggles between two predefined numeric arrays, and the SVG scene displays a horizontal axis line with a text label above it. Using the data join and the merge() method, circles are smoothly animated to new positions and radii, while exiting circles shrink to zero radius before removal. The code leverages D3's selection, transition, and duration APIs on SVG elements, with a stylesheet defining visual properties like fill, stroke, and opacity.

Loading thumbnail…

Grouping nodes in a Force-Directed Graph

This example shows a force-directed graph of character interactions from *Les Misérables*, with colored convex hulls grouping nodes that share the same community. Users can drag individual nodes or entire group hulls independently, and adjust the hull’s scale via a slider or change its curve type (e.g., `d3.curveCatmullRomClosed`) from a dropdown. The visualization uses `d3.forceSimulation` for layout and `d3.polygonHull` to compute each group’s boundary, rendering nodes as SVG circles and links as lines with animated transitions.

Loading thumbnail…

Document

This example displays multiple time-series lines generated from random normal data, with each line appearing as a separate colored path with circular points. Users can interact with the chart through brushing to zoom along the x-axis and dragging to pan, while a hidden overlay enables mouse tracking. The visualization is built using d3.v4, employing d3.brush, d3.drag, d3.voronoi for point proximity, and SVG rendering with axis components. The code includes a focus line and circle that follow the mouse position over the chart area.

Loading thumbnail…

Spiral heatmap #2 (with mouseover)

A spiral heatmap displays monthly maximum temperatures in Cambridge, UK from 1959 to 2017, with each coil representing a year and each segment a month. The color scale uses d3.scaleSequential with d3.interpolatePlasma to encode temperature values. Built with D3 v4 and rendered as SVG, the visualization includes a mouseover interaction that highlights individual data points. Data comes from the Met Office's Cambridge station dataset. Radial month labels and grid lines help orient the viewer around the spiral.

Loading thumbnail…

Sunburst

A sunburst diagram uses nested arcs to display the hierarchical structure of the Flare software package, with each node’s angular and radial extent encoding its data size. The visualization, built with d3.v4 and the d3Kit framework, supports click-to-zoom animations that smoothly interpolate the radial and angular scales via `arcTweenZoom` and `transition.attrTween`. Colors are assigned using `d3.scaleOrdinal` with the `schemeCategory20` palette, and hover interactions dispatch custom mouse events through d3Kit’s dispatcher.

Loading thumbnail…

Mister Nester

Mister Nester is an interactive console for learning and experimenting with data nesting in d3.js. The interface presents a text area where tabular data—such as county-level population and Hispanic percentage by year—can be pasted, and a preview pane displays the nested structure generated from it. The visualization updates in real time as the input is edited, using the d3.v3 library to parse and reorganize the data into a hierarchical format. Users can select from sample datasets and trigger the nesting process via a button, making the tool a practical playground for understanding how d3 handles nested data relationships.

Loading thumbnail…

Sunburst to icicle #2

A sunburst chart smoothly morphs into an icicle chart, preserving overall dimensions by animating the perimeter difference between inner and outer arcs until it approaches zero. The transition uses d3.v4 with SVG paths, a `d3.transition()` and custom tween to interpolate the arc radii and angles, stopping at an 8-pixel perimeter gap due to a Chrome rendering bug. The visualization applies `d3.partition()` to hierarchical flare.json data, with `d3.arc()` generating the paths and `d3.scaleLinear()` driving the animation.

Loading thumbnail…

SF Monthly Property Crimes 2005 to 2015

A heatmap visualizes monthly property crime counts in San Francisco from 2005 to 2015, with months on the x-axis and years on the y-axis, colored by total incident frequency using `d3.scaleSequential` with the Viridis interpolator. The code processes a CSV dataset via `d3.csv`, `d3.timeParse`, and `d3.nest()` to aggregate incidents by year and month, then renders SVG rectangles for each cell. A color legend is drawn using `d3.axisBottom` and a linear gradient, while axes use `d3.axisBottom` and `d3.axisLeft`. The data originates from San Francisco’s open data portal.

Loading thumbnail…

birthday guesser (unshuffled version)

A birthday-guessing game asks viewers to answer nine yes/no questions about whether their birthday appears on a series of calendars. The visualization renders 367 cards, each highlighting a subset of dates via colored rectangles on 2016 calendar grids. Using D3 v4, the code builds an SVG calendar layout with `d3.timeDays`, `d3.timeFormat`, and scale functions, then animates card transitions. Clicking yes or no circles advances through the card sequence, ultimately revealing the guessed date. The interface relies on hover effects and mouse events to drive the interactive puzzle.

Loading thumbnail…

Graph and table with tricks in v4

This example pairs a line chart of stock closing prices with an interactive HTML table, both rendered as SVG and DOM elements using D3.js v4. The graph uses `d3.line`, `d3.scaleTime`, and `d3.scaleLinear` to plot date and close values from a CSV file, while the table displays date, close, open, and computed difference columns. The table is sorted by descending close values using `d3.descending`, and headers are capitalized via text manipulation. Data parsing relies on `d3.timeParse`, and all styling is applied through CSS and inline attributes.

Loading thumbnail…

Compound Radial Waves v3 [WARNING: LOUD!]

This animated canvas visualization synthesizes and displays multiple radial sine waves radiating from a central point, with interactive sliders controlling each wave’s frequency and amplitude. The compound wave—the sum of all individual waves—is drawn in real time, and users can toggle visibility of individual waves, shuffle frequencies, or sweep one oscillator across a range. The code uses the Web Audio API’s built-in oscillators and gain nodes to produce corresponding sound, synchronizing audio and visual updates. Highlighting occurs on hover over controls, and the visualization is built entirely with vanilla JavaScript and Canvas 2D rendering.

Loading thumbnail…

Election History

This visualization displays over two centuries of U.S. presidential election results as a grid of colored cells, one per state and election year, with fill color indicating the winning party and opacity reflecting vote share. Built with D3 v4, it uses SVG rectangles mapped via `d3.scaleBand` for both axes, and adds a hover-based tooltip that highlights the corresponding row and column while showing vote totals and party percentages. A button toggles the vertical sorting between alphabetical and chronological state order using an animated transition.

Loading thumbnail…

Gooey scatterplot

This interactive scatterplot demonstrates the SVG gooey effect, where small nodes merge into larger cluster bubbles when grouped. The visualization presents 60 randomly generated data points across six clusters, with buttons toggling between grouped and ungrouped states. Using D3 v4, the code applies SVG filters including feGaussianBlur and feColorMatrix, with transition.attrTween animating the filter values to create the melting effect. Nodes transition to their cluster centers with staggered delays and exponential easing, while cluster circles fade in and out.

Loading thumbnail…

Clustered Interactive Force Layout v4

This interactive scatterplot visualizes the relative sizes of different college majors as circles, grouped into clusters by major category. Users can drag and drop the circles, which then settle into their respective clusters. The visualization uses the `d3.forceSimulation` API to manage the physics of the layout and repulsion, with custom forces for collision detection and cluster cohesion. The data is loaded from a CSV file containing college major statistics. Hovering over a circle displays a tooltip with the major’s name and its category.

Loading thumbnail…

winter force

A particle simulation renders two clusters of nodes as colored circles on a canvas, demonstrating split and unite interactions. The d3.forceSimulation engine manages repulsion via `d3.forceManyBody`, collision through `d3.forceCollide`, and position constraints with `d3.forceX` and `d3.forceY`. Users adjust cluster sizes, toggle box-bounded constraints, or trigger split/unite actions, while low alpha and high position strength maintain a cohesive, fluid aesthetic.

Loading thumbnail…

weighted pivot scatter plot v3

This example visualizes a weighted pivot scatter plot with an interactive slider that balances "Quality" against "Quantity" in the data. The slider adjusts the weight of the x- and y-axes, which changes the ranking and color mapping of the 50 data points, shown as circles sized by rank. The chart uses D3 v4 scales (d3.scaleLinear, d3.scaleSqrt, d3.scaleQuantile) to map data to position, radius, and color, and it renders the plot in SVG.

Loading thumbnail…

Mandala Generator with D3 and SVG use

A mandala generator builds a symmetric, radial artwork from randomly chosen marks—arcs, points, diagonals, and arrows—arranged in 32 repeated slices around a central axis. Every click of the button produces a new composition with a fresh HSL background color. The code uses D3.js v4 to dynamically construct an SVG, defining a reference slice and then cloning it via the `<use>` element with rotation transforms to create the full circle. An optional `transition.attrTween` animates the whole group with a 360-degree spin on generation.

Loading thumbnail…

Force Update Pattern

This example demonstrates the general update pattern applied to a force-directed graph, showing how nodes enter, update, and exit as the dataset changes every two seconds. Circle positions are governed by a `d3.forceSimulation` with charge, centering, and collision forces, while `d3.interval` triggers a restart with randomized letters and sizes. The code explicitly uses the join, exit, update, and enter phases with `d3.transition`, and renders SVG circles. Data is generated by shuffling the alphabet and randomly sampling names and sizes.

Loading thumbnail…

Barbell Chart

A barbell chart compares two related values at each x-axis position, with paired circles connected by a line. Each circle encodes four attributes: horizontal and vertical position, size, and color. The D3 v4 example uses `d3.interval` to regenerate random data every two seconds, and `d3.transition` to animate the circles and connecting lines as they update. It also uses `d3.select` for DOM selection, `d3.scaleLinear` for axes and sizing, and `d3.axisBottom`/`d3.axisLeft` for chart axes.

Loading thumbnail…

Argyle

An animated grid of diamond shapes endlessly shifts through a palette of ColorBrewer color schemes and d3 4.0 interpolated scales, such as Viridis and Rainbow, with random patterns including checker, wave, and bowtie layouts. Each diamond is rendered as an SVG path and a diagonal stitch line, and its fill and stroke colors are recomputed based on relative luminance contrast ratios. The code uses d3.transition with styleTween and d3.interpolateLab to smoothly recolor the scene every second, cycling through color schemes and pattern functions defined in the custom `argyle.js` module.

Loading thumbnail…

Quick, Draw! d3 & SVG demo

This example visualizes hand-drawn faces from the Quick, Draw! dataset, rendering multiple strokes as smooth, gooey lines on an SVG canvas. It maps the raw drawing coordinates into point objects and uses `d3.line` with `curveBasis` to create the paths. The strokes are grouped and laid out in a grid, with a blur and color matrix filter applied to the entire group. Pan and zoom are handled via the `d3.zoom` API, and the code styles the groups directly for performance.

Loading thumbnail…

Flocking faces

Hundreds of hand-drawn face sketches, loaded from a JSON file of stroke coordinates, swarm across a canvas as a boids-style flocking simulation. Clicking adds more boids. Each face is drawn with a `d3.line` and `curveBasis` call. The color of each face indicates its movement speed, mapped via `d3.interpolateWarm` to a moving average of acceleration magnitude. The simulation uses the `Vec2` library for vector math, and renders to two layered Canvas elements to create motion trails. Adjustable parameters for flocking forces and starting positions are exposed through a `dat.GUI` control panel.

Loading thumbnail…

r6 dashboard

A dashboard for filtering data requests from US Forest Service Region 6 displays a geochloropleth map of ranger districts alongside bar and row charts for forest, status, and request type. Using dc.js, crossfilter, and d3.js, the visualization links charts so clicking one filter updates the others. The map uses d3.geo.mercator with a scaleProjection function to fit GeoJSON boundaries, while CSV data feeds the crossfilter dimensions and groups.

Loading thumbnail…

Particle tentacles

Twelve hundred rainbow-colored particles chase one another in a looping chain across a canvas, leaving fading trails of motion as they bounce off the walls. The animation renders each frame with the Canvas 2D API, using an offscreen canvas and `drawImage` to create the persistent trail effect. Each particle steers toward the next using a custom `Vec2` class implementing steering behaviors, while `d3.timer` drives the animation loop and `d3.interpolateRainbow` assigns colors.

Loading thumbnail…

Calculating the relative angle difference between two vectors

Two draggable vectors extend from a central origin, and the smaller angle between them is highlighted as a filled arc. A label reports the angle in degrees and whether it is "port" or "starboard". The interaction uses D3 v4's `d3.drag` to update vector positions, while the arc is drawn with `d3.arc` and `Math.atan2` computes the relative angle using the provided formula. The visualization renders as SVG with an arrowhead marker, and the arc color shifts between cyan and magenta based on the angle's sign.

Loading thumbnail…

Mister Nester

Mister Nester is an interactive console for learning and experimenting with data nesting in d3.js. The interface presents a text area where tabular data—such as county-level population and Hispanic percentage by year—can be pasted, and a preview pane displays the nested structure generated from it. The visualization updates in real time as the input is edited, using the d3.v3 library to parse and reorganize the data into a hierarchical format. Users can select from sample datasets and trigger the nesting process via a button, making the tool a practical playground for understanding how d3 handles nested data relationships.

Loading thumbnail…

Heatmap YearHour Calendar View

A calendar-style heatmap displays data for 2014 across twelve monthly SVG panels, with each day of the month plotted against the 24 hours of the day. The intensity of each hour is encoded through a linear color scale from white to blue, representing percentage values (PER) loaded from a CSV file. The visualization uses d3.nest to group and roll up the data, and d3.scaleLinear to map value ranges to colors. Rectangles are positioned using d3.timeHours and d3.timeDays iterators, with month labels and hour/date legends derived from the time scale.

Loading thumbnail…

SF Monthly Property Crimes 2005 to 2015

A heatmap visualizes monthly property crime counts in San Francisco from 2005 to 2015, with months on the x-axis and years on the y-axis, colored by total incident frequency using `d3.scaleSequential` with the Viridis interpolator. The code processes a CSV dataset via `d3.csv`, `d3.timeParse`, and `d3.nest()` to aggregate incidents by year and month, then renders SVG rectangles for each cell. A color legend is drawn using `d3.axisBottom` and a linear gradient, while axes use `d3.axisBottom` and `d3.axisLeft`. The data originates from San Francisco’s open data portal.

Loading thumbnail…

Calendar View v4

A calendar view displays daily Dow Jones Industrial Average returns from 2010, with each day colored by the percent change between opening and closing prices. The visualization arranges days into a grid of weeks and months across multiple SVG charts, one per year, using a diverging RdYlGn color scale from Cynthia Brewer. The code loads CSV data via `d3.csv`, processes it with `d3.nest` and `rollup` to compute daily returns, and maps values through `d3.scaleQuantize` to eleven color classes. Layout uses `d3.timeDays`, `d3.timeMonths`, and custom path generation to delineate month boundaries.

Loading thumbnail…

Calendar-Month/Hour view

This example presents a calendar-style grid mapping days of the month on the y-axis against hours on the x-axis for January 2017. Each hour-cell is rendered as a small SVG rectangle, with tooltips revealing the date and hour. The code uses D3 v4’s `d3.timeHours` to generate the hourly intervals and `d3.timeFormat` to label data, storing formatted strings via `.datum()`. The layout is fixed at 900 by 900 pixels, with cells sized at 17 pixels and axes labeled generically (“xxx”), suggesting a template for time-series exploration.

Loading thumbnail…

Calendar-YearHour view

This calendar-year hour view displays a 12-month grid of hourly cells for the year 2017, with each month rendered as a separate SVG panel. Days run vertically and hours horizontally, with date and hour labels along the axes. The code uses D3 v4’s `d3.timeHours` and `d3.timeDays` to generate the time intervals, and `d3.timeFormat` to format the data for tooltips. Each rectangular cell is appended with a `title` element showing the full timestamp, while month outlines and borders are drawn via SVG `rect` elements. The visualization relies on D3 data joins and SVG rendering to compose the compact grid layout.

Loading thumbnail…

Gantt Chart Example 3

This interactive Gantt chart visualizes task schedules over time, with each horizontal bar representing a task and its color indicating status (running, succeeded, or killed). Users can add or remove tasks and dynamically switch the visible time domain between one hour and one week, which triggers an animated redraw of the chart. Built with D3.js v4, the visualization uses `d3.scaleTime`, `d3.scaleBand`, and `d3.axisBottom` for the axes, while task data is stored in JavaScript arrays and rendered as SVG rectangles with smooth transitions.

Loading thumbnail…

Directional arrows #4

A D3 v4 visualization renders 20 arrow markers along a hand-coded SVG path loop, with each arrow offset 15 pixels to one side. The code uses native SVG path methods like `getTotalLength()`, `getPointAtLength()`, and `atan2` to approximate tangent angles for placement. Arrows are drawn as separate SVG path elements with a `marker-end` reference to an arrowhead, and spacing is computed by walking along the path in 3-pixel increments and measuring cumulative lengths to ensure roughly even distribution.

Loading thumbnail…

Rainbow spinner

A colorful rainbow spinner animates in an endless looping arc, rendered as a thick ring of 181 SVG path segments, each filled with a distinct hue from the d3.interpolateRainbow scale. The entire ring rotates continuously via a d3.timer, while a clip-path stretches and contracts the visible arc using transition.attrTween to interpolate the starting and ending angles. This example is built with D3 v4 and SVG, with the rainbow gradient encoded directly into each path’s fill and stroke.

Loading thumbnail…

D3 v4 - force layout

This example uses a D3 v4 force layout to visualize research method data across multiple years from 2004 to 2014. Buttons let the user select a year, triggering a simulation that positions colored dots into groups representing different research categories. Each dot corresponds to a data point, and the dots can be dragged interactively. The visualization relies on `d3.forceSimulation` with `forceLink`, `forceCollide`, `forceManyBody`, `forceCenter`, and uses SVG circles colored with `d3.scaleOrdinal`. It loads data from a JSON file with arrays of counts per year and labels for each group.

Loading thumbnail…

transition of bar chart

This interactive bar chart displays the top 10 U.S. states by population share for a selected age bracket, with data from 2008 Census estimates. A dropdown menu lets users switch between seven age groups, triggering animated transitions where bars reorder, resize, and update their value labels. Built with D3 v4, the visualization uses `d3.scaleBand` for the y-axis, `d3.scaleLinear` for bar widths, and chained transitions with `.duration()` to animate enter, update, and exit selections. The SVG rendering includes hover effects that change bar color to brown.

Loading thumbnail…

circle packing

This example visualizes the hierarchical structure of the flare dataset using a circle packing layout, with nested circles representing parent and child nodes. Each leaf circle is colored orange, while parent circles are semi-transparent blue with a stroke. The size of each circle corresponds to the aggregate value of its descendants. The visualization is rendered in SVG and uses the `d3.pack` layout with `d3.hierarchy` and the `.sum()` method to compute circle sizes. Hovering over a circle reveals its name and value via a tooltip.

Loading thumbnail…

v4 curve interpolation comparison

This example compares ten different curve interpolation methods from D3 v4, displaying them as colored lines over the same time-series data points from a CSV file. Clicking a legend label toggles the visibility of its corresponding line by adjusting opacity with a transition. The visualization uses `d3.line()` with specified curve functions like `d3.curveBundle`, `d3.curveNatural`, and `d3.curveMonotoneX`, rendered as SVG paths. The axes are drawn with `d3.axisBottom` and `d3.axisLeft`, and the legend uses an ordinal color scale from `d3-scale-chromatic`.

Loading thumbnail…

Graph and table with tricks in v4

This example pairs a line chart of stock closing prices with an interactive HTML table, both rendered as SVG and DOM elements using D3.js v4. The graph uses `d3.line`, `d3.scaleTime`, and `d3.scaleLinear` to plot date and close values from a CSV file, while the table displays date, close, open, and computed difference columns. The table is sorted by descending close values using `d3.descending`, and headers are capitalized via text manipulation. Data parsing relies on `d3.timeParse`, and all styling is applied through CSS and inline attributes.

Loading thumbnail…

DS July: Code 6

This example visualizes a dataset of movies as a field of stylized flowers, where each bloom represents a film. The number of petals corresponds to the movie's IMDb vote count, the overall flower size scales with its IMDb rating, and petal colors encode the primary genre. The visualization is rendered as an SVG using D3.js v4 and lodash, with each flower built from custom cubic Bézier paths. Clicking on a flower is handled, though its specific effect is not demonstrated in the provided code.

Loading thumbnail…

D3 4.0 Sequential Scales Explorer

This interactive D3 v4 heatmap displays a two-dimensional histogram of date and value buckets, with tile colors encoding count data. Users select from a menu of sequential color interpolators, including Viridis, Inferno, and colorbrewer schemes, to recolor the visualization. The chart updates dynamically using `d3.scaleSequential`, and an animation cycles through interpolators every second until manual selection. The SVG rendering includes axes, a color legend, and labels for the count, date, and value dimensions.

Loading thumbnail…

Tree Demo

This example demonstrates seven different hierarchical layouts—traditional tree, dendrogram, circular traditional, circular dendrogram, circle packing, treemap, and icicle—using Java class data from a CSV file. Each layout is rendered as a separate SVG, with nodes and links colored by depth using `d3.scaleOrdinal` and the `d3.schemeYlGnBu` color scheme. The code uses `d3.stratify` to convert the flat CSV data into a hierarchy, then applies layout algorithms like `d3.tree`, `d3.cluster`, `d3.pack`, `d3.treemap`, and `d3.partition`. Interactive tooltips appear on mouseover, highlighting the selected node.

Loading thumbnail…

Tree Demo

This example visualizes the class hierarchy of Java 8 source code as a treemap, with rectangles sized by class size and colored by depth using a sequential `d3.schemeRdYlGn` scale. Hovering over a rectangle displays a tooltip via SVG text. The code uses `d3.csv` to load the data, `d3.stratify` to build the hierarchy, and `d3.treemap` to compute the layout. SVG elements are rendered with D3 v4, and custom helper functions convert polar coordinates and handle tooltip positioning.

Loading thumbnail…

Tree Demo

This circle-packing visualization displays the hierarchy of Java classes and packages from a CSV file, with each circle representing a class and its size corresponding to its value. The color of each circle indicates its depth within the tree, ranging from green at the root to yellow at the deepest levels. Built with D3 v4, the code uses `d3.stratify()` to build the hierarchy, `d3.pack()` for the circle layout, and custom tooltip functions to display class names on hover.

Loading thumbnail…

4.0 Color Scales - Sequential

This example showcases 27 sequential color scales, comparing those built into D3 v4 with those from the d3-scale-chromatic library. The visualization renders a full-width set of thin vertical bars, initially colored using the Inferno scale, with each bar’s fill mapped to its x-position via a `d3.scaleSequential` interpolator. Clicking a button above the chart triggers a transition that smoothly recolors the bars using the selected interpolator, such as Viridis, Blues, or YlGnBu. The interface uses SVG rectangles and D3’s transition API for animated updates, with the code leveraging `d3.range` and data-driven styling.

Loading thumbnail…

Animated Arcs

Four colored arc segments rotate continuously around a central point, changing their start and end angles to new random positions every few seconds. The animation uses D3 v4’s `d3.interval` to trigger periodic updates, and each transition relies on `transition.attrTween` with a custom `arcTween` function that interpolates between angle values using `d3.interpolate`. The SVG paths are generated by a `d3.arc()` generator, with each arc assigned a fixed inner and outer radius, forming concentric rings. The data is procedurally generated JavaScript, with random start angles and arc lengths derived from a random score.

Loading thumbnail…

Day / Hour Heatmap in v4

This heatmap visualizes concurrent user sessions across days of the week and hours of the day, with cell color intensity encoding the session count. The SVG-based chart uses `d3.scaleQuantile` with a nine-color YlGnBu palette and includes a legend showing quantile thresholds. It reads TSV data via `d3.tsv`, renders labeled day and hour axes, and animates color transitions with `transition().duration(1000)` when switching between two datasets using the dataset picker buttons.

Loading thumbnail…

D3.selectAll(...).transition() Explained

This example demonstrates that D3’s `selectAll(...).transition()` creates one independent transition per selected element, each with its own scheduled lifecycle. Interactive radio buttons let viewers step through stages that visualize these transitions as animated lines, heads, and tails, highlighting how `.delay()` and `.duration()` vary per circle. The block uses d3.v3 with named transitions (`transition("playStage1")`) to manage overlapping animations, and explicitly illustrates the transition lifecycle from scheduling to stopping. Circles move vertically while timestamp labels show each transition’s start and end times.

Loading thumbnail…

Weighted Voronoi Treemap in D3v4

A weighted Voronoi treemap recursively partitions polygons to visualize hierarchical data from the Flare dataset, encoding node size by area and applying a color scale by depth or name. Computed via an iterative power diagram, the layout supports user-configurable bounding shapes (rectangle, triangle, pentagon, octagon, or circle) and adjustable depth. The example builds on a D3v4 port with added `d3.polygonClip` and custom `d3.voronoitreemap` layout functions, rendering the result as SVG paths.

Loading thumbnail…

Blocks Graph - w/thumbnails

This interactive block graph shows a network of D3 examples, where each node represents a gist and links connect related blocks. The graph is rendered as a Canvas using D3's force simulation (`d3.forceSimulation`) with charge, link, and position forces. Hovering over a node triggers a tooltip that loads and displays the gist’s thumbnail image via `loadTooltipThumb`. The node data comes from `graph.json`, which lists gist IDs, user names, and descriptions. The visualization uses D3 v4 and a WebGL/Cavas approach to handle the dynamic layout and hover interactions.

Loading thumbnail…

Film Flowers #axidraw

Film Flowers #axidraw reimagines top summer blockbuster movies as generative flowers. Each bloom’s shape encodes data from the `movies.json` dataset: petal count reflects IMDb vote volume via a quantized scale, flower size maps to IMDb rating, and petal color corresponds to genre using a custom ordinal palette. The SVG rendering uses D3 v4 to build paths from cubic Bézier curves, with texture patterns from the `textures` library applied to petals, while a legend and year labels provide context.

Loading thumbnail…

Blocks Graph

This force-directed network visualization maps the relationships between 1,238 bl.ocks posts, using a cleaned subset of Micah Stubbs' README mention data. Nodes represent individual posts, colored by author, and links show which READMEs mention others. The visualization runs in a Canvas context, with d3.forceSimulation handling the physics and d3.drag enabling mouse interaction for repositioning nodes and revealing metadata through hyperlinks.

Loading thumbnail…

Bump Chart (Major League Soccer v3)

This visualization uses a bump chart to show the final league position of Major League Soccer clubs for each season from 1996 to 2016. Lines connect each club’s yearly rank, while points at each season encode data. Hovering a point highlights that club’s entire trajectory and reveals a tooltip with season statistics, and clicking a point keeps the focus. The chart is built with D3 v4, using `d3.line`, `d3.scaleBand`, and `d3.scaleLinear` to render SVG paths and circles. The underlying data was scraped from the MLS website and includes club name, year, points, win/loss/tie records, and goals for and against.

Loading thumbnail…

Force Simulation

This example visualizes country GDP data as a force-directed bubble chart. Each circle represents a country, with its radius proportional to GDP (capped at a minimum size) and its color indicating continent, using d3.scaleOrdinal for categorical coloring. The layout is computed by d3.forceSimulation, combining d3.forceX, d3.forceY, d3.forceManyBody, and d3.forceCollide forces to cluster and repel the nodes. Users can drag circles via d3.drag, temporarily fixing their positions during interaction. The data comes from a CSV file, and the SVG circles are positioned on each simulation tick.

Loading thumbnail…

Inventory Cycle

This example visualizes an inventory cycle by simulating items as they move through a process flow, with each item’s location mapped to x-y coordinates on an SVG canvas. The animation, driven by d3.timer, shows items transitioning between marked points (point 1, 2, 3) along elliptical paths, with each item’s shape (square, triangle, circle) representing its silhouette. The code uses D3 v4 for DOM manipulation and transitions, generating paths via custom functions and updating attributes for each animation frame. The simulation randomly spawns items and updates their positions based on event timestamps, creating a continuous flow through the cycle.

Loading thumbnail…

Zoomable Force Directed Graph d3v4

This graph displays a network of characters with ally and enemy connections, visualized as a zoomable, force-directed layout. The nodes represent individuals, while the links indicate relationships labeled by type. The implementation uses the D3 v4 library and its `d3.forceSimulation`, `d3.forceLink`, and `d3.forceManyBody` APIs to handle the physics and layout. The SVG rendering supports interactive zooming and dragging, with node and link styling defined in CSS. Data is provided as static arrays within the code.

Loading thumbnail…

[popup text]

An interactive sunburst chart visualizes the hierarchical structure of the Bible, showing books within major sections. Users can toggle between two sizing modes: linear, where each outer slice represents a single book, and grouped, where slice size reflects the number of chapters per book. The chart uses d3.partition and d3.arc for geometry, with d3.hierarchy for data structuring. Labels smoothly track their arc centroids via custom tween functions (arcTweenPath and arcTweenText), fading out when arcs become too small. The visualization randomly selects from seven color schemes and is rendered using SVG with D3 transitions.

Loading thumbnail…

Stacked Bar Chart

This stacked bar chart visualizes the population of each U.S. state, broken down by seven age groups, with states sorted by total population. The data is loaded from a CSV using d3.csv. The chart uses d3.scaleBand for the x-axis, d3.scaleLinear for the y-axis with SI prefix formatting via d3.format, and d3.scaleOrdinal with a categorical color palette. d3.stack computes the stacked series, which are rendered as SVG rectangles, with axes generated by d3.axisBottom and d3.axisLeft.

Loading thumbnail…

Stacked-to-Grouped | JSON Data, Vertical Bars

This example shows vertical bars that switch between stacked and grouped layouts. Visitors can toggle the view using custom radio buttons, with a sequenced transition animating the bars while preserving object constancy. The visualization loads JSON data via `d3.json` and renders SVG elements using d3.v4. It applies `d3.stack()` for the stacked view, `d3.scaleBand` and `d3.scaleLinear` for positioning, and `transition` methods with staggered delays to animate between states. The color scale uses `d3.schemeCategory20c`.

Loading thumbnail…

Stacked-to-Grouped | JSON Data, Horizontal Bars

This example shows a horizontal bar chart that toggles between stacked and grouped layouts using sequenced transitions, preserving object constancy so viewers can track data across views. It loads JSON data with an inline numeric key per entry, then uses d3.stack and d3.scaleBand to position bars. Radio buttons trigger transitionGrouped and transitionStacked, which animate bar positions and sizes via chained transition calls. The chart uses static data and SVG rendering, with a green color scale from d3.schemeCategory20c.

Loading thumbnail…

Individual to stacked area charts

This example animates tax-rate data for local, state, and federal categories, transitioning from three individual area charts into a single stacked area chart. The data is randomly generated within the script. Built with D3 v4, it uses `d3.area` with `d3.curveMonotoneX` and `d3.stack` for the stacked view, while `d3.scaleOrdinal` with `d3.schemePastel1` handles color. SVG paths have a CSS animation for a dashed stroke effect, and axes are rendered via `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

Stacked-to-Grouped Bars III

This interactive bar chart demonstrates a hybrid approach to visualizing stacked data, allowing users to switch between stacked, grouped, and percentage modes via radio buttons. In grouped mode, hovering over a layer highlights it and vertically re-aligns its bars so the baseline is zero, with the y-axis updating accordingly. The visualization uses D3 v4 with `d3.stack`, `d3.scaleBand`, and `d3.axisLeft`, rendering animated SVG rects with `transition` delays. It relies on synthetic data from a bump function and includes an automated initial transition cycling through the modes.

Loading thumbnail…

Reusable Chart Example

This example demonstrates a reusable chart pattern by rendering small multiples of monthly stock price data for the S&P 500 and MSFT from a TSV file. Each chart displays an area and line graph with a shared x-axis extent, using D3 v4’s `d3.nest`, `d3.scaleTime`, `d3.scaleLinear`, and SVG paths. The `timeSeriesChart` function exposes accessors like `values` and `title` to customize per-instance data and labels, following Mike Bostock’s “Towards Reusable Charts” tutorial.

Loading thumbnail…

Fractal Pie Chart

This visualization extends the familiar pie chart to display hierarchical data through recursive sub-pies, where each slice’s area equals that of its parent slice. Built with D3 v4 and the `d3-component` library, it uses recursive `d3.component` definitions for slices, connectors, and grouped fractals, with `arc.outerRadius()` and angular calculations to compute child radii. The SVG output uses the `pie()` and `arc()` APIs to render proportional slices, with `rotate()` and `translate()` transforms positioning each recursive level. The sample data is generated procedurally using fixed child ratios that divide each value until a small epsilon threshold.

Loading thumbnail…

Radial network diagram

A radial network diagram visualizes character interactions in Les Misérables, with nodes grouped and ordered by the first chapter in which each character appears. The visualization uses d3.cluster for the hierarchical radial layout and d3.curveBundle to draw hierarchical edge bundling between connected characters. Hovering over a node or link highlights its connections and the associated path. The data comes from a JSON file containing character names and chapter lists, and the chart is rendered as SVG.

Loading thumbnail…

Three y-axes in v4

This example shows a multi-line chart with three separate y-axes, each color-coded to match its corresponding line. The blue line uses the left axis for the close values, the red line uses the right axis for open values, and the purple line uses the right axis for the logarithm of open values. Built with d3.v4, it uses `d3.scaleTime` for the x-axis, `d3.scaleLinear` for each y-axis, and `d3.line` to generate paths. The axes are rendered using `d3.axisLeft` and `d3.axisRight`, with the purple axis overlaid on the right side. Data comes from a CSV file with date, close, and open columns.

Loading thumbnail…

Org Bubbles

Org Bubbles visualizes an organizational hierarchy as a force-directed bubble chart, with circles representing employees connected by lines to their managers. Users can group all bubbles together or split them by location, organizational unit, or employee type via toolbar buttons. The code uses D3 v4’s `d3.forceSimulation`, `d3.forceLink`, `d3.forceCollide`, and `d3.forceX`/`forceY` to position nodes, while drag events and a “selected” class toggle circle fill styles. Data comes from a CSV file containing ID, parent ID, level, position, and type fields.

Loading thumbnail…

Stacked Brush Plots

This stacked brush plot example shows four synchronized panels for exploring a dataset of 100,000 points. Each panel displays the data as an SVG area chart, and brushing in one panel automatically zooms the subsequent panel into that selected range, creating a telescoping overview-detail interface. The code extends Mike Bostock's brush zoom example, using D3 v3 APIs such as `d3.svg.brush`, `d3.svg.area`, and `d3.scale.linear` to manage the linked extents and redraw areas dynamically.

Loading thumbnail…

Zoom to Domain

This example shows a time-series area chart of S&P 500 monthly closing prices from 2000 to 2010, rendered as a smooth monotone curve in SVG. Upon loading, the chart automatically animates a programmatic zoom into the year 2003 using d3.zoom and d3.zoomIdentity, scaling the x-axis to highlight that specific domain. After the intro transition, users can pan and zoom manually, with the area path and x-axis updating in real time via the zoom event’s rescaleX method. The data comes from a CSV file, and the visualization uses D3 v4’s d3.area, d3.axisBottom, and d3.timeParse APIs.

Loading thumbnail…

Zoomable Treemap Bar Chart

This zoomable treemap bar chart visualizes U.S. trade imports and exports from 1995 onward, with each year split into two bars for import and export values. Clicking a country zooms into its trade data, while a checkbox toggles between raw and inflation-adjusted figures. The visualization uses D3 v4’s `d3.hierarchy`, `d3.treemap`, `d3.scaleBand`, and `d3.axisBottom` to render SVG rectangles and axes, with transitions animating the zoom. Data comes from the U.S. Census Bureau’s foreign trade balance records.

Loading thumbnail…

Hierarchical Clustering

This visualization demonstrates hierarchical clustering by generating 40 random RGB color points and displaying them as colored rectangles alongside three dendrogram layouts. Each layout applies a different sorting strategy to the cluster tree: original order, canonical sorting, and sorting by perceptual lightness using the HCL color space. The code relies on the `clusterfck` library for agglomerative clustering with Euclidean distance and single linkage, while D3.js handles the SVG rendering, including the cluster layout, links, and node shapes.

Loading thumbnail…

Radial Tree

This radial tree visualization displays hierarchical data from a CSV file as a circular layout of connected nodes. It uses the D3.js library, specifically the `d3.stratify` and `d3.tree` modules, to compute the tree structure and layout. The visualization renders nodes as SVG circles and text labels, with parent-child relationships shown by curved paths. The node names and colors distinguish internal nodes from leaf nodes, and the data is loaded from the `flare.csv` file using `d3.csv`.

Loading thumbnail…

d3v4 - zoom and drag circles - drag adjusted for zoom

This example demonstrates how to zoom and drag circles in d3 v4 while ensuring the drag positions correctly match the mouse location after zooming. A drag handler, built with `d3.drag`, adjusts the circle’s new coordinates by dividing the mouse movement by the current zoom scale, retrieved from the element’s transform attribute. A separate `d3.zoom` handler applies the transform to all SVG circles. The visualization renders 50 randomly positioned yellow circles on a blue rectangle using SVG elements, with data generated via `d3.range` and `Math.random`.

Loading thumbnail…

Force Directed Graph Toggle to Circle

This example visualizes character co-occurrence in *Les Misérables*, letting users toggle between an animated force-directed graph and a circular chord-like layout. The nodes transition smoothly between the two arrangements, with links and circles animating to new positions over one second. Built with D3 v3, it uses `d3.layout.force` for the force simulation and `d3.scale.linear` to map node indices to circle coordinates. Radio buttons control the view, and hovering reveals character names via SVG `<title>` elements.

Loading thumbnail…

Zoom and double Area

This visualization displays the S&P 500 Index as a time series, with a large focus area chart for detailed viewing and a smaller context chart for overview and brushing. The main chart supports zooming and panning via mouse interaction, while the context chart’s brush synchronizes with the focus. Built with D3 v4, it uses `d3.scaleTime`, `d3.area`, `d3.brushX`, and `d3.zoom` to manage the dual-area layout, with smooth curves via `d3.curveCardinal` and `d3.curveMonotoneX`. Data is loaded from a local CSV file with monthly price values.

Loading thumbnail…

My CV

This interactive SVG timeline presents a professional CV, charting education, work history, and notable events along a shared time axis from 2002 to the present. The visualization displays academic periods as rectangles in the lower area, while professional roles appear as colored blocks in the upper band, with specific events marked as vertical dashed lines and circles. Built with D3.js, the code manually constructs the chart using `d3.time.scale` for the date axis, `d3.svg.axis` for rendering tick marks, and custom SVG elements like `rect` and `circle` for the data marks. The visualization is generated from hardcoded JavaScript arrays containing the position, education, and event data, with the SVG output styled entirely through CSS.

Loading thumbnail…

Sunburst Tutorial (d3 v4), Part 1

This sunburst chart visualizes hierarchical data using a ring-based layout, where each node is represented as an arc segment. Built with D3 version 4, the code uses `d3.partition()` to compute the angular and radial extents of each arc, `d3.hierarchy()` to process the JSON tree structure, and `d3.arc()` to generate the SVG path data. Colors are assigned via `d3.scaleOrdinal()` with the `schemeCategory20b` palette. The root node is hidden, and all other nodes are rendered as SVG paths with white strokes, drawing from a hardcoded JSON dataset.

Loading thumbnail…

Directed Graph Editor

This interactive graph editor displays a directed node-link diagram built with D3 v3 and rendered as SVG. Users can add nodes by clicking empty space and create edges by dragging between nodes, with keyboard shortcuts for selecting, moving, and modifying edge direction or reflexivity. The force layout, initialized via `d3.layout.force`, continuously updates node positions and draws arrow markers for directed edges. The code uses D3's data joins (`path.data`, `circle.data`) to handle dynamic updates and applies CSS classes for visual states like selected edges.

Loading thumbnail…

Inventory Management

This example simulates an inventory management system, showing five warehouses with fluctuating stock levels, incoming deliveries, and periodic donations. The animation runs on a `d3.timer` loop, updating rectangles and lines to reflect the dynamic simulation. SVG elements are pre-drawn and selected via `d3.select`, with their heights and stroke widths bound to computed values like capacity, demand, allocation, and clearance. The code leverages D3 v4’s data joins and attribute manipulation to visualize the flow of goods and stock changes in real time.

Loading thumbnail…

Arc diagram

An interactive arc diagram visualizes character interactions in Les Misérables, with nodes ordered by the first chapter in which each character appears. Arcs represent relationships between characters, and hovering over a node or link highlights its connections. The visualization uses D3 v4 to render SVG elements, with node positions computed manually and arc paths built via string concatenation. Data comes from `jean.json`, containing character names, chapter lists, and interaction links. Node radius scales with chapter count, link width scales with interaction frequency, and mouseover events dynamically restyle linked elements.

Loading thumbnail…

Chord Diagram

This chord diagram visualizes relationships between nine named entities, such as YouTube, Twitter, and Google+, using a matrix of interaction values. The width of each ribbon encodes connection strength, while the surrounding arcs represent entity categories. Built with D3 v4, the chart uses `d3.chord()` and `d3.ribbon()` for layout, `d3.arc()` for the outer bands, and `d3.scaleOrdinal()` for color mapping. Super-category groupings are drawn as additional arcs, and hovering fades unrelated chords via opacity transitions.

Loading thumbnail…

Difference Chart v4

Two lines trace daily average temperatures for New York and San Francisco from October 2011 to June 2012, with the area between them filled in green when New York is warmer and red when San Francisco is warmer. Built with D3 v4, the chart uses `d3.scaleTime`, `d3.scaleLinear`, `d3.area`, and SVG `clipPath` elements to alternate the fill color based on which city is hotter. The underlying data is loaded from a TSV file.

Loading thumbnail…

Horizontal bar chart with button scale transition

This interactive visualization displays changes in U.S. federal agency budgets between 2017 and 2018, using a horizontal bar chart with toggle buttons. Users switch between viewing absolute dollar amounts (in billions) and percentage changes, with positive values shown in gray and negative values in red. The chart uses D3.js v3 (d3.scale.linear, d3.svg.axis) to render SVG bars with animated scale transitions triggered by button clicks. Data comes from a CSV file mapping agency names to both dollar and percentage amounts.

Loading thumbnail…

State Transitions

A Markov-chain simulation drives hundreds of circles through four discrete states, with transition probabilities sampled each timestep using `Math.random()`. Circles are positioned by a `d3.forceSimulation` with multi-foci `d3.forceX` and `d3.forceY` forces, and their colors map to states via `d3.scaleOrdinal`. A stacked bar chart records per-state node counts over 40 timesteps, while labels reposition dynamically. The example uses D3 v4, SVG rendering, and `d3.interval` to animate transitions, with the bar chart drawn as appended `rect` elements.

Loading thumbnail…

Icicle & Force Layout

The visualization pairs an interactive icicle chart with a force-directed node-link diagram to explore hierarchical data from JSON files. Clicking a rectangle in the icicle chart zooms into that level, while the adjacent graph displays the corresponding hierarchical relationships as a network. The icicle chart uses `d3.layout.partition` and scales from `d3.scale.linear`, rendered as SVG rectangles with click-based zoom via `d3.transition`. The force layout uses `d3.forceSimulation`, `d3.forceLink`, and `d3.forceManyBody` to position circles and links, with a tooltip showing percentage of the parent value.

Loading thumbnail…

Vertical Zoom

This visualization plots data breaches from a CSV dataset, showing each breach as a circle positioned by year and number of records stolen. A vertical brush on the right side of the chart allows users to zoom into a specific range of stolen records, dynamically filtering the main scatterplot display. The chart uses D3 v4 with SVG rendering, including a force simulation for layout, and encodes the method of leak using a categorical color scale. Tooltips provide additional details about each breach, including the entity name and a link to the source.

Loading thumbnail…

ZoomIV_red/bue_dots

This example shows a spiral arrangement of 2,000 red and blue dots generated using a phyllotaxis pattern. When the user zooms, the dots are repositioned according to the current zoom transform, with alternating colors assigned to each dot based on its index. The visualization uses D3 v4’s `d3.zoom` behavior and applies the transform directly to each circle’s `transform` attribute, rendering in SVG. The data is procedurally generated with a phyllotaxis function based on the golden angle.

Loading thumbnail…

Simple Zoom Example v4 II

This example demonstrates a simple zoom interaction on an SVG canvas populated with 50 randomly placed blue circles. The circles are generated using `d3.range` and assigned random `cx` and `cy` coordinates within the canvas dimensions. The zoom behavior is implemented with the `d3.zoom()` method, which triggers a `zoom` event handler that applies the transform to the circle group. The code uses the D3 v4 library and specifically the `d3.zoom()` API, along with `d3.select` and `attr` for SVG manipulation.

Loading thumbnail…

Sliding puzzle

This sliding puzzle divides a neon background image into a grid of tiles, with one tile removed to create a hole. An animation continuously swaps the hole with a random adjacent tile, creating a perpetually shuffling mosaic. The code uses D3 v4 to bind data to HTML `div` elements and positions them via absolute CSS, while `d3.shuffle` and `d3.transition` orchestrate the tile movement. Each tile’s background offset is calculated from its grid position, revealing the underlying image fragment.

Loading thumbnail…

Particle tentacles

Twelve hundred rainbow-colored particles chase one another in a looping chain across a canvas, leaving fading trails of motion as they bounce off the walls. The animation renders each frame with the Canvas 2D API, using an offscreen canvas and `drawImage` to create the persistent trail effect. Each particle steers toward the next using a custom `Vec2` class implementing steering behaviors, while `d3.timer` drives the animation loop and `d3.interpolateRainbow` assigns colors.

Loading thumbnail…

Animated subpath

A solid gray curving path is drawn with D3 and SVG, while a black animated segment travels along it. The code uses `d3.timer` to continuously update the path’s `stroke-dasharray`, cycling a four-part pattern (gap, visible snake, and remaining gap) to create a smooth looping motion. The path geometry comes from an SVG `d` attribute, and its total length is computed via `path.getTotalLength()` to calculate the segment proportions.

Loading thumbnail…

Voronoi relaxation

A hundred random points relax into a stable Voronoi diagram using Lloyd’s algorithm, with each iteration fading the previous frame on a Canvas. The example runs entirely in the browser via D3 v4’s `d3.voronoi()` for polygon generation and `d3.polygonCentroid` to compute new point positions. The code animates convergence through `setTimeout` recursive calls, drawing point markers and polygon edges with the Canvas 2D API, and uses `getImageData()` to progressively darken old frames. Once points move less than one pixel, the visualization resets with a fresh random distribution.

Loading thumbnail…

Lab 7 - Interactivity

This interactive multi-line chart displays daily average temperatures for New York, San Francisco, and Austin over a year, sourced from a TSV file. The SVG visualization uses d3.tsv for data loading, d3.scaleTime and d3.scaleLinear for positioning, and d3.schemeCategory10 for color encoding. It incorporates a Voronoi overlay for hover detection, d3.zoom with clip paths for panning and scaling, and click interactions on city labels that maintain state, all rendered with d3.line and d3.axis components.

Loading thumbnail…

Fractals in D3 and Canvas: Sierpinski Gasket

This example visualizes the construction of a Sierpinski gasket, a fractal pattern, by iteratively layering scaled-down copies of a canvas. Each iteration creates a new canvas, scales its context by half, and draws three copies of the previous canvas into the corners, replacing the old one every second. The animation runs for 14 total iterations using D3 v4 to select elements and append canvases, while the drawing and scaling operations rely on the Canvas API’s `scale` and `drawImage` methods. The original canvas is filled green using `fillRect`, and each new canvas labels its iteration number with `fillText`.

Loading thumbnail…

Cohort Trails

Cohort Trails visualizes U.S. census population data, tracking five-year birth cohorts from 1850 to 2010. Animated dots represent each cohort’s population, with trailing lines showing decline as cohorts age; increases reflect net immigration exceeding mortality. The animation runs on a slider, toggled by the space bar. Built with d3.v4 and rendered using both SVG and Canvas, the code employs d3.nest for data aggregation and d3.scaleThreshold for year interpolation. Data originates from the Minnesota Population Center.

Loading thumbnail…

Interactive General Update Pattern

This interactive visualization demonstrates the general update pattern in D3 v4 by stepping through the code line-by-line using arrow key navigation. It shows how D3 selects existing elements with selectAll, binds data with a key function, and manages enter and exit selections when appending or removing circles. Two side-by-side panels display the executing code and a live SVG visualization, with a step-description box explaining each line. The example uses D3’s selection API to update circle styles, showing how the update selection is merged before applying animations.

Loading thumbnail…

Collision Detection

D3’s forceSimulation engine drives 1,000 nodes of randomized radius on a Canvas, with forces for x, y, and collision keeping them centered. Every two seconds, the collision radius is increased via d3.forceCollide’s radius function, prompting the simulation to restart and reinitialize, visibly enlarging all nodes while they re-separate under the updated constraints. The scene is drawn per tick by clearing the canvas, translating to the center, and stroking filled arcs for each node.

Loading thumbnail…

A classic comparison

This visualization compares market data across multiple trading venues using four classic chart types arranged in a quadrant layout: bar chart, pie chart, treemap, and bubble chart. A dropdown menu lets users switch between volume, market percentage, and tape categories. The code uses d3.layout.pie, d3.layout.treemap, d3.layout.pack, and d3.svg.arc to render the charts, with data fetched live from the IEX Trading API via d3.jsonp. Each chart shares a consistent color scale mapping venue names to categorical colors.

Loading thumbnail…

Semantic Arts Dataset Ontology II

This visualization displays the SemanticArts dataset ontology as a forest of distinct sunburst diagrams, each representing a top-level class hierarchy. It uses D3.js v3 with an SVG renderer and a zoom behavior that scales and translates the entire layout, while labels scale inversely and fade out based on a level-of-detail threshold. The code applies a D3 partition layout with custom angular and radial size mappings, colors each tree by its root using `d3.scale.category20`, and loads hierarchical data from `tree.json`.

Loading thumbnail…

Stadium Chart

This stadium chart visualizes proportional comparisons across independent groups using concentric annular rings, with each ring representing a different region (e.g., NIR, WAL, ENG) and colored segments showing category proportions. D3 v3 renders the visualization as SVG with animated transitions, using d3.layout.pie to generate arcs and d3.svg.arc for ring geometry. The chart includes tick marks and percentage labels around the outer edge, and employs a color scale with four categorical values.

Loading thumbnail…

DoGi Classification Structure

The DoGi Classification Structure is an interactive sunburst visualization of a bibliographic database of Italian legal journals, organized into hierarchical juridical subjects across 24 law branches. It uses a D3 v3 partition layout with custom arc generators and zoom behavior to let users navigate the hierarchy, with labels that fade in or out based on zoom level. The tooltip on each arc shows descriptions for deeper nodes. Data is loaded from a JSON file and rendered as SVG, with a radio button toggling between count and size-based arc sizing.

Loading thumbnail…

Polar Clock II

A polar clock displays the current time across six concentric rings, each representing a time unit from years to seconds. Every ring contains a colored arc and label that rotate and update as time progresses, using a rainbow color scale to encode the fraction of each interval elapsed. The visualization is rendered with D3 v4’s SVG and animation facilities, using `d3.arc` for the ring segments, `d3.timeFormat` and time intervals for labels, and `d3.timer` to drive continuous updates.

Loading thumbnail…

d3-force-cluster and d3-force-attract

A network of colored circles groups into ten distinct clusters while a dynamic attract force pulls them toward the mouse position. The visualization uses `d3.forceSimulation` with custom `d3.forceAttract` and `d3.forceCluster` plugins to combine attraction and clustering forces, while `d3.forceCollide` applies collision avoidance. Nodes are rendered as SVG circles, and their radius and color encode cluster membership and size. The attract target updates on mouse movement, and collision strength ramps up over a three-second transition to create a smooth settling effect.

Loading thumbnail…

Overlapping Dimensions

Overlapping Dimensions visualizes a dataset of farmers' markets, encoding three categorical attributes—juices, cheese, and baked goods—as cyan, yellow, and magenta ellipses arranged on a grid. Animated via `requestAnimationFrame`, the ellipses shift along horizontal and vertical axes, creating moiré-like overlaps that reveal combinations of product offerings. Rendered on a 2D Canvas using `context.ellipse` and `globalCompositeOperation = "multiply"`, the animation blends colors for intersections, while grey outlines mark markets with none of these categories. The data is fetched asynchronously via `d3.json` from a gist.

Loading thumbnail…

Overlapping Bump Chart

This visualization compares the availability of maple and seafood goods at U.S. farmers' markets using a map of the contiguous states and two bump charts showing latitudinal and longitudinal distributions. Each market appears as a colored dot, while the overlapping area charts use a "bump" logic to display where one good outnumbers the other. Built with D3 v4, it uses `d3.nest()` and `rollup` to aggregate data, `d3.area()` with cardinal curve interpolation, and animated transitions via `d3.transition()`. Data comes from the Farmers Markets Geographic Data on data.gov.

Loading thumbnail…

Weird Illusion

Eight planetary gears encircle a central pivot, each spinning at its own rate, creating a rotating frame of reference that distorts perceived motion. The animation, rendered as SVG paths via `d3.svg` and driven by `d3.timer`, updates each gear's rotation by dividing elapsed time by its radius. A subtle spatial skew and changing border ownership emerge as the eye fixates on the center, while the green background shifts the figure-ground interpretation. The demo builds on Steve Haroz’s original illusion, using only D3 v4 and standard SVG transforms.

Loading thumbnail…

Visual Analytics

An interactive map lets users select a country to explore its Environmental Performance Index (EPI) breakdown. The visualization shows two horizontal bar charts comparing scores across health and ecosystem vitality metrics, with categories color-coded by sub-group. Built with D3 v4 and Leaflet, it uses geographic data from a world.json file and CSV data for 178 countries. Smooth animations transition bars and axes as selections change, with a legend clarifying color groupings for each chart.

Loading thumbnail…

Stacked-to-Grouped | JSON Data, Horizontal Bars, String Series Names

This example demonstrates a transition between stacked and grouped horizontal bar charts using JSON data with string series names. Users switch views via custom radio buttons, with animations that preserve object constancy through sequenced transitions. The visualization uses D3 v4 with d3.stack, d3.scaleBand, and d3.scaleLinear to compute layouts, and applies chained transition.attr calls to animate bar positions and dimensions. Data loads from a local JSON file via d3-queue, and the styled radio buttons come from custom CSS.

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes automobile data from the `auto-mpg.csv` dataset, where users select the X, Y, and color dimensions via menus. The visualization uses the `d3-component` library to wrap D3 v4 components, paired with Redux for state management, enabling smooth animated transitions between different data mappings. The rendering includes linear and ordinal scales, axes with animated opacity and tick updates, and circle elements that animate when data changes.

Loading thumbnail…

Drag & Zoom

This example combines d3-drag and d3-zoom to let users pan and zoom a canvas of 2,000 points while also dragging individual points. Clicking and dragging on the background adjusts the view transform, whereas clicking and dragging on a point moves that point in world coordinates. The code uses `d3.zoomIdentity`, `transform.invertX`, and `transform.invertY` to convert between pointer and world spaces. It renders with the Canvas 2D API, using `context.translate` and `context.scale` to apply the current zoom transform.

Loading thumbnail…

Group Clustering

This example demonstrates interactive group clustering of 12 data points, each representing an item with attributes like Location, Group, Class, and Type from a CSV file. Users can click toolbar buttons to split the circles by any categorical variable, causing them to separate into distinct clusters via force-directed simulation. The visualization uses d3.forceSimulation with collide, many-body, and x/y forces for positioning, while d3.drag enables manual repositioning of individual circles. The SVG rendering colors each node using d3.scaleOrdinal with a categorical color scheme, and selecting a circle highlights it by removing its fill.

Loading thumbnail…

Visualizing Sorting Algorithms

This interactive visualization compares five sorting algorithms—merge sort, insertion sort, selection sort, bubble sort, and bogosort—by animating the rearrangement of vertical bars on an SVG canvas. Buttons let the user trigger each sort, stop it mid-process, or reshuffle the initial data. The code uses D3 v4 to render and transition the bar rectangles and value labels, with the current step count displayed in a counter. Sorted or actively tested elements are highlighted in red via CSS classes, while color changes and positions update through `d3.select` and `.transition()` calls at a duration scaled to the dataset size.

Loading thumbnail…

d3v4 Simple Word Cloud

This example visualizes word frequency as a simple word cloud, where each word is a node in a physics simulation. Words are sized and colored based on their frequency, and oriented either horizontally or vertically. The layout uses `d3.forceSimulation` with `d3.forceCenter`, `d3.forceX`, `d3.forceY`, and a custom `d3.forceRectCollide` for bounding-box collision detection, which prevents overlapping text. The words are rendered as SVG text elements, and the data comes from a CSV file containing word-frequency pairs.

Loading thumbnail…

D3.v4 Sunburst chart with line focus on over

A D3.v4 sunburst chart displays hierarchical data as concentric arcs, with each segment’s size proportional to its value. On mouseover, the chart highlights the hovered node’s boundaries by extending dashed black lines outward from the arc’s start and end angles beyond the outer radius, then hides them on mouseout. The visualization uses `d3.partition`, `d3.arc`, linear and square-root scales, and the ordinal color scheme `d3.schemeCategory20`, rendering to SVG with the flare dataset. Interaction events bind via `.on('mouseover')` and `.on('mouseout')` to toggle line visibility.

Loading thumbnail…

Animate thousands of points with canvas and D3

This example shows 7,000 points smoothly animating through a repeating sequence of five layouts: sine wave, phyllotaxis spiral, spiral, phyllotaxis, and grid. The animation updates point positions by interpolating between source and target coordinates over 1.5 seconds using `d3.timer` and an easing function. Instead of SVG, it draws each point as a filled rectangle on an HTML5 Canvas via `getContext('2d')`, allowing for thousands of elements without performance degradation. Point colors are assigned using `d3.interpolateViridis`.

Loading thumbnail…

self sorting nodes in d3 fdg IV

This example demonstrates a force-directed graph in which nodes sort themselves by size, with larger nodes migrating toward the center while smaller ones are pushed outward. The visualization includes a live metrics panel displaying alpha, tick time, and frame rate, along with adjustable controls for node count, gravity, and friction. Built with D3.js 3.5.5, it uses `d3.layout.force` with custom collision handling based on a quadtree, polar-coordinate swaps during collisions, and accelerated annealing that updates the SVG only every few ticks until alpha drops below a threshold.

Loading thumbnail…

Force directed graph with layered gravity and physically modeled collisions

An animated SVG force-directed graph displays nodes organized into horizontal layers with custom gravity pulling each node toward its designated row. Collisions between nodes are physically modeled using conservation of momentum and energy equations, with boundary constraints reflecting velocities and a recovery mechanism steering escaped nodes back into view. The d3.js force layout runs on a tick callback, with metrics shown live for alpha, tick time, and frame rate, while user-adjustable inputs control node count, recovery speed, and windup factors for resolving overlaps and un-mixing blocked nodes.

Loading thumbnail…

http://stackoverflow.com/questions/32057842/d3-js-highlighting-stacked-bar-and-getting-selected-values/32079517#32079517

This example shows a stacked bar chart of sales data for PC, SmartPhone, and Software product categories across five years, where users can interactively change the stacking offset method (wiggle, zero, expand, silhouette) and the layer ordering (inside-out, default, reverse) via dropdown menus. Built with D3.js (version 3.5.6), the visualization uses the `d3.layout.stack` API to compute stacked values and dynamically updates the y-axis scale and grid lines when selections change. The chart is rendered as SVG with animated transitions for the axis rescaling, and the code leverages custom helper libraries from a gist, including `d3.ui.select` for the controls and `d3.cbPlot` for axis creation.

Loading thumbnail…

Zoomable Icicle with Labels and Breadcrumb (d3v4)

A zoomable icicle chart displays a hierarchical dataset of the Flare software project, partitioning rectangular cells by value and color-coding branches. Clicking any cell zooms into that subtree while updating a breadcrumb trail above, which shows the current path and percentage of the total. The visualization uses d3.partition, d3.hierarchy, and d3.scaleOrdinal with d3.schemeCategory20c, rendering rectangles and foreignObject labels in SVG. Breadcrumb polygons and animated transitions via d3.transition respond to clicks, with data loaded from a JSON file.

Loading thumbnail…

Stack-to-split-Stack Transition

This example shows a transition between a single stacked bar chart and a split view with separate stacked bar charts for each assay group. Users toggle between the “together” and “split” modes via radio buttons, triggering animated changes in bar positions and scales. The visualization uses D3 v4’s `d3.stack`, `d3.scaleBand`, and `d3.scaleLinear` to render SVG rectangles, with transitions updating the y-axes and grids. Data comes from a JSON file with assay types grouped into three categories and multiple developmental stages.

Loading thumbnail…

Stacked-to-Grouped Police Killings with D3 v4

An interactive bar chart displays police killings from January to June 2015, broken down by race. Users can toggle between stacked and grouped views using radio buttons. The visualization uses D3 v4's `d3.stack`, `d3.scaleBand`, `d3.scaleLinear`, and the ordinal color scheme `d3.schemeCategory20c`. Rectangles animate between layouts via a sequenced `transition()`, preserving object constancy as described by Heer and Robertson. Data comes from a CSV file provided by FiveThirtyEight.

Loading thumbnail…

Force Simulation

This example visualizes country GDP data as a force-directed bubble chart. Each circle represents a country, with its radius proportional to GDP (capped at a minimum size) and its color indicating continent, using d3.scaleOrdinal for categorical coloring. The layout is computed by d3.forceSimulation, combining d3.forceX, d3.forceY, d3.forceManyBody, and d3.forceCollide forces to cluster and repel the nodes. Users can drag circles via d3.drag, temporarily fixing their positions during interaction. The data comes from a CSV file, and the SVG circles are positioned on each simulation tick.

Loading thumbnail…

Clustered Interactive Force Layout v4

This interactive scatterplot visualizes the relative sizes of different college majors as circles, grouped into clusters by major category. Users can drag and drop the circles, which then settle into their respective clusters. The visualization uses the `d3.forceSimulation` API to manage the physics of the layout and repulsion, with custom forces for collision detection and cluster cohesion. The data is loaded from a CSV file containing college major statistics. Hovering over a circle displays a tooltip with the major’s name and its category.

Loading thumbnail…

Pan & Zoom Axes

This example demonstrates interactive pan and zoom control over a two-dimensional plot. Using the d3-zoom library, a user can drag to pan and scroll to zoom, with the view constantly updated. The code applies the zoom transform to linear scales via `rescaleX` and `rescaleY`, which then redraws the axes and a colored rectangle backdrop. The rectangle uses an SVG linear gradient, and a reset button animates the view back to its original state with a D3 transition.

Loading thumbnail…

Individual to stacked area charts

This example animates tax-rate data for local, state, and federal categories, transitioning from three individual area charts into a single stacked area chart. The data is randomly generated within the script. Built with D3 v4, it uses `d3.area` with `d3.curveMonotoneX` and `d3.stack` for the stacked view, while `d3.scaleOrdinal` with `d3.schemePastel1` handles color. SVG paths have a CSS animation for a dashed stroke effect, and axes are rendered via `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

IEX Market - Liquid Fill Gauge

This example visualizes market share percentages from the IEX API as a grid of five animated liquid fill gauges. Each gauge represents a different exchange venue, with its percentage displayed as the liquid level. The code uses D3.js v3 with the `liquidFillGauge.js` library to render SVG gauges with animated waves, and `jsonp.js` to fetch data. A dropdown menu lets users switch between five distinct gauge configurations, each with different colors, wave behaviors, and animation timings.

Loading thumbnail…

IEX Tops - Pack Layout

This pack layout visualization displays current IEX Trading stock data, representing each symbol as a circle whose area reflects a selected metric—either volume, market percent, last sale price, or last sale size. Users choose the metric via a dropdown and can reorder the circles by default, ascending, or descending sort buttons. Circles are labeled with stock tickers and reveal exact values on hover through a d3-tip tooltip. The code uses `d3.layout.pack()` for the circle-packing algorithm, renders to SVG, and fetches live data with a JSONP callback from the IEX API.

Loading thumbnail…

Test Tops - Pack Layout

This visualization displays real-time market data for individual stock symbols using a circular packing layout. The size of each circle reflects a selected metric—volume, market percentage, last sale price, or last sale size—which can be changed via a dropdown menu. Data is fetched from the IEX Trading API using a custom `d3.jsonp` helper, and tooltips reveal exact values via `d3-tip`. A “next” button cycles through sorting orders (default, ascending, descending), re-layouting the `d3.layout.pack` hierarchy and updating circle positions and radii accordingly, with all elements rendered as SVG.

Loading thumbnail…

Sortable Table with Bars

This visualization presents a sortable table of U.S. state population data by age group, using horizontal bars to show each age category’s proportion of a state’s total population. Clicking a column header re-sorts the table rows in descending order based on that age group’s share. The chart is built with D3 v2 (d3.csv, data joins) and renders each bar as an SVG rect, with width scaled proportionally to the data value. The underlying dataset, readme-states-age.csv, is loaded via d3.csv.

Loading thumbnail…

Swimlane Chart

This swimlane chart displays project phases across six horizontal lanes, with each item rendered as a colored bar positioned along a timeline from 0 to 2000. The visualization uses a main chart for detailed viewing and a miniature overview below, linked through a brush for navigation. Built with D3.js v3 and SVG, the code employs linear scales, clip paths, and brush interactions to map item start and end times onto lane positions. Data is hardcoded in JavaScript, with lane and item styling defined through external CSS classes.

Loading thumbnail…

Treemap navigator II (dbpedia)

An interactive treemap navigator visualizes the DBpedia ontology, showing hierarchical categories as colored rectangles. Users can drag subtrees to reposition them, click nodes to explode open subtrees, and click again to collapse them, with links connecting parent and child subtrees. The visualization uses D3 v3 layout, drag, zoom, and transition APIs, rendering SVG paths and rectangles with section-specific colors. Data loads from a remote JSON file describing the ontology structure, and the coordinate-based treemap layout is recalculated on each interaction.

Loading thumbnail…

Brushable bar chart - Horizontal - V

This example shows a horizontal bar chart with a linked mini chart on the right that acts as a brushable overview. Dragging the brush box, scrolling the mouse wheel, or clicking in the mini chart changes which bars are visible in the main chart, while the x-axis scale dynamically updates to fit the largest visible bar. The visualization is built with D3 v3, using ordinal scales for the y-axis, linear scales for the x-axis, and the `d3.svg.brush` component. SVG is used for rendering, with the main chart clipped via a clip-path. The data consists of 40 randomly generated country names and numeric values sorted in descending order.

Loading thumbnail…

Stacked Negative Values

This diverging stacked bar chart displays quarterly fruit sales (apples, bananas, cherries, dates) with positive values rising above the x-axis and negative values descending below it, using the `stackOffsetDiverging` offset to separate the two groups. Built with D3 v4, the SVG visualization uses `d3.stack` with a custom offset function, `scaleBand` for the categorical month axis, and `scaleLinear` for the numeric y-axis. Each series is colored via `d3.scaleOrdinal` with the `schemeCategory10` palette, while axes are rendered with `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

Hierarchical Bar Chart

This example shows a hierarchical bar chart of the flare dataset, where each blue bar represents a folder and its length encodes the total size of contained files. Clicking a bar zooms into that folder, while clicking the background navigates back to the parent. The d3.layout.partition computes node values, while d3.svg.axis scales the x-axis. Transitions animate bars and text as users drill down, using SVG rects and opacity changes.

Loading thumbnail…

D3 dndTree + Zoom + Pan + Misc Features

This interactive D3.js v3 visualization presents a hierarchical tree layout of the "flare" JSON dataset, enabling user-driven exploration of the data structure. The visualization supports drag-and-drop node repositioning, panning by dragging the background or near edges, and zooming via mouse-wheel or double-click. Nodes can be clicked to expand or collapse their children. The code uses `d3.layout.tree` for layout, `d3.behavior.zoom` for zoom interactions, and demonstrates custom event handling for pan and drag operations. The tree dynamically calculates horizontal and vertical dimensions to fit the viewport, and all interactions are rendered as SVG with animated transitions.

Loading thumbnail…

Oklahoma State Budget 2013

This sunburst partition chart displays Oklahoma’s 2013 state budget, with arc size proportional to each agency’s appropriation value. The code uses `d3.layout.partition` and `d3.svg.arc` to render the hierarchy, and a radio button toggles label visibility to reduce text clutter. Hovering over an arc reveals its name, appropriation amount, and percent change in a side panel, while clicking zooms into that segment. Data comes from a local `budget.json` file.

Loading thumbnail…

Sequences sunburst

This interactive sunburst chart visualizes sequences of user navigation paths through a website, using the D3 v4 partition layout to turn a flat CSV of event sequences into a hierarchical display. The code loads the data with `d3.csvParseRows` and builds the hierarchy programmatically, then colors each arc segment by step name. A breadcrumb trail and percentage label appear on mouseover, while a transition on `mouseleave` restores full opacity to all segments, highlighting the current sequence and its ancestors.

Loading thumbnail…

transition of bar chart

This interactive bar chart displays the top 10 U.S. states by population share for a selected age bracket, with data from 2008 Census estimates. A dropdown menu lets users switch between seven age groups, triggering animated transitions where bars reorder, resize, and update their value labels. Built with D3 v4, the visualization uses `d3.scaleBand` for the y-axis, `d3.scaleLinear` for bar widths, and chained transitions with `.duration()` to animate enter, update, and exit selections. The SVG rendering includes hover effects that change bar color to brown.

Loading thumbnail…

Brush & Zoom

This example demonstrates a Focus + Context interaction for exploring monthly S&P 500 index prices. The main chart displays the full time series as a smooth area, while a smaller context chart below shows the entire dataset with a draggable brush. Using d3-brush and d3-zoom together, the brush selection drives the zoom transform on the focus chart, and zooming on the focus chart updates the brush position. The SVG is rendered with d3.v4, and the data comes from a local CSV file.

Loading thumbnail…

Icicle & Force Layout

This example pairs an icicle chart with a force-directed network to show hierarchical site navigation data and its relationships. The icicle layout, built with `d3.layout.partition`, visualizes page counts with click-to-zoom transitions, while a separate SVG uses `d3.forceSimulation` to display linked nodes. Colors map to categories, and tooltips show each node’s percentage of its parent. Data comes from two JSON files (`icicles.json` and `nodes.json`), rendered as animated SVG elements.

Loading thumbnail…

Time to Hire

This visualization shows the average time, in days, that candidates spend at each stage of the hiring process across seven teams, with each colored bar representing a distinct step. A toggle button switches between viewing elapsed days per stage and the number of candidates at that stage. Built with D3.js version 3.5.5, the SVG chart uses a categorical color scale and animates the bar transitions when toggling. The data is embedded directly in the JavaScript, and the code is forked from a block by jonsadka.

Loading thumbnail…

Interactive donut chart with transitions

This interactive donut chart updates live as the number of data points changes, with each arc smoothly transitioning to a new size and position. Users can type a new count into an input field, triggering random data regeneration and a one-second animated redraw. The visualization uses D3 v3’s `d3.layout.pie`, `d3.svg.arc`, and `transition.attrTween` to interpolate arc geometry, while `setInterval` automatically re-renders every two seconds. SVG paths are colored via `d3.scale.category20`, and the code also handles entering and exiting arcs for dataset size changes.

Loading thumbnail…

Zoomable Icicle (d3 v4)

This zoomable icicle chart displays the hierarchical structure of the Flare dataset, with rectangles sized and colored by category. Clicking a rectangle zooms in to reveal its children, while clicking the top bar returns to the previous level. Built with D3 v4, it uses `d3.partition()` to compute the layout, `d3.hierarchy()` for data nesting, and `d3.scaleOrdinal` with `d3.schemeCategory20c` for coloring. Transitions are animated over 750 milliseconds, adjusting the x and y scales to focus on the selected node.

Loading thumbnail…

Filtering the Grid

This example demonstrates a grid layout where 64 colored and shaped items can be filtered by color or shape using interactive buttons. Items smoothly animate between grid positions as filters are applied, shrinking to nothing when removed and growing back when reintroduced. The implementation uses d3.layout.grid for positioning, d3.comparator for multi-key sorting, and d3.svg.symbol for rendering shapes. Data is randomly generated, and transitions are handled with D3's `.transition()` method with staggered delays.

Loading thumbnail…

X-Value Mouseover with Pan & Zoom

This interactive line chart displays the price of a commodity over time, allowing users to pan and zoom through the data. The visualization updates the x-axis and y-axis scales dynamically, while a mouseover reveals the exact price value at any point. Built with D3 v4, the example uses `d3.zoom()` and `d3.zoomTransform()` to handle the zoom and pan transformations, and `d3.bisector` for data lookup. The data is loaded from a CSV file with date-time and price columns.

Loading thumbnail…

Clustered Interactive Force Layout v4

An interactive force-directed network maps U.S. college majors as bubbles, sized by total enrollment and colored by category, from FiveThirtyEight data. Users can drag circles, which triggers a tooltip displaying the major name and its category. The simulation uses `d3.forceSimulation` with custom `clustering` and `collide` forces, rendering objects as SVG circles with smooth animated ticks.

Loading thumbnail…

Multi-Series Line Chart (Planet Coverage)

This multi-series line chart tracks the growth of Planet's satellite imagery coverage over time, displaying three data series: RGB, NIR, and Total land surface area imaged daily. The chart animates through the data chronologically, using a hover-based tooltip to reveal exact values for each date. Built with D3.js v4, the visualization employs SVG rendering, a color scale based on viridis, and interactive elements like a bisecting date function and tooltip display. The data originates from a CSV file containing weekly coverage measurements from September 2014 to September 2016.

Loading thumbnail…

CSS Mask test

This example demonstrates CSS masking by using a sprite sheet of glyph icons as a mask image, with separate icon classes that shift the mask position to reveal different shapes. The code defines `.maskicon` and `.maskicon-alpha` classes that apply the `-webkit-mask-image` property with a Bootstrap halflings sprite, coloring the masked areas green or semi-transparent black, while a parallel `.icon` class shows the traditional background-position sprite technique. The example directly compares the two approaches, highlighting how CSS masks can recolor icons without altering the source image. It relies solely on CSS styling and the Bootstrap sprite asset, with no JavaScript libraries involved.

Loading thumbnail…

birthday guesser (unshuffled version)

A birthday-guessing game asks viewers to answer nine yes/no questions about whether their birthday appears on a series of calendars. The visualization renders 367 cards, each highlighting a subset of dates via colored rectangles on 2016 calendar grids. Using D3 v4, the code builds an SVG calendar layout with `d3.timeDays`, `d3.timeFormat`, and scale functions, then animates card transitions. Clicking yes or no circles advances through the card sequence, ultimately revealing the guessed date. The interface relies on hover effects and mouse events to drive the interactive puzzle.

Loading thumbnail…

CSS Mask test

This example demonstrates how CSS masking can display icons from a sprite sheet in different colors and levels of transparency. It uses the `-webkit-mask-image` property with the Bootstrap glyphicons halflings sprite as the mask source, applying solid green and semi-transparent black background colors to the masked elements. The code also includes a traditional CSS sprite technique using `background-image` and `background-position` to show the same icons unmasked, allowing for a side-by-side comparison of the two rendering approaches.

Loading thumbnail…

Simple GitHub Calendar

A GitHub-style commit calendar displays a year of daily activity as color-coded cells arranged in weekly columns. The visualization uses D3 v3 to generate an SVG grid, with each cell representing a day and its intensity mapped through a linear color scale from white to sky blue. Hovering reveals a tooltip with the exact date and value, while a highlighted outline marks the selected cell. The code relies on `d3.time.weeks`, `d3.time.days`, and `d3.time.format` to structure the time series, with randomized data standing in for real commit counts.

Loading thumbnail…

Rotated hexbin

Two thousand randomly generated points orbit in a circular drift while a rotating hexbin grid displays their changing local density. The hexagons are rotated 90 degrees and the x and y coordinates are swapped relative to the original implementation. The visualization uses d3.v3 with the d3.hexbin plugin, SVG paths, and a d3.timer to update the hexagon colors and positions as points are replaced each frame.

Loading thumbnail…

The Justice League

Each player in the "Justice League" fantasy football league gets a trio of column charts showing their own weekly scores, their opponents' scores, and the point margin for each game. The charts use the D3.js v3 API to render SVG rectangles whose lengths and colors are scaled linearly, with the average score marked by a vertical line. Data for weeks 1 through 8 comes from a JSON file scraped from the ESPN league page, and hovering over any bar highlights the same week across all charts.

Loading thumbnail…

Bubbly Jobs Chart

Each bubble represents an occupation in the US, with size encoding employment numbers for 2014 and horizontal position approximating median annual wage. Occupations are grouped vertically by major job category, and hovering reveals details. The chart uses the `d3.forceChart()` plugin to position bubbles via a force layout with custom gravity, while an x-axis shows wages in dollars. Data comes from the Bureau of Labor Statistics, and the design is inspired by a New York Times graphic.

Loading thumbnail…

Swimlane using d3.js

This example shows a swimlane chart that visualizes overlapping work items across horizontal lanes over time, with a main chart and a mini overview for brushing and navigation. Randomly generated data is arranged into sublanes to avoid collisions, and items are colored green for past tasks or gray for future ones. The code uses d3.v2 scales, axes, time formatting, and a brush to synchronize the mini and main views. Lane labels, grid lines, and a blue today line highlight temporal context.

Loading thumbnail…

clicky label demo

This interactive visualization maps global socio-economic development in 2016, plotting GDP per capita against life expectancy for each country. Users can click any bubble to create a draggable text label, connected by a curved swoopy arc. Built with D3.js, the visualization uses `d3.scaleLog` for the x-axis, `d3.scaleSqrt` for bubble sizing, and `d3.scaleOrdinal` for region colors. Labels are added via `d3.selectAll` and rendered as SVG text, while the swoopy connection paths are generated dynamically. The code leverages the `d3-swoopy-drag` library for interactive label dragging.

Loading thumbnail…

clustered force layout, static data

A clustered force layout visualizes static graph data, grouping nodes into ten distinct clusters by color. The visualization shows how similar nodes are drawn together, with circle size representing each node's radius value. Using D3.js v4, the implementation applies `d3.forceSimulation` with custom clustering and collision forces, and renders via SVG. The underlying graph data comes from a static JSON file that specifies each node's cluster assignment and radius.

Loading thumbnail…

GO! Logo

This example renders the IFRC GO logo as a field of colored circles using Mitchell’s best-candidate algorithm. It shows a dense packing of red-hued circles that together form the logo’s shape, with colors varying via `d3.interpolateReds`. The scene is drawn on a Canvas element, and the algorithm places each circle by rejecting random candidates outside the logo’s path, checked with `context.isPointInPath`, while a d3 quadtree enforces spacing. The animation runs for 20 seconds, adding circles gradually via a `d3.timer`.

Loading thumbnail…

d3.unconf 2016, v10

A hexagonal tile map visualizes survey responses from d3.unconf 2016 attendees, encoding each person’s first d3 project type, favorite d3 API, and the d3 version they started with. Hovering a tile reveals attendee details. The SVG animation uses d3.v4 with scales from `d3.scaleLinear` and `d3.scaleOrdinal`, color generation via chroma.js cubehelix, and interactive transitions. Data comes from a CSV file containing names, ticket types, and qualitative answers.

Loading thumbnail…

d3-module-faces | more modules

This visualization maps d3 modules along logarithmic scales of GitHub stars and NPM downloads, with each module represented as a Chernoff face whose facial features encode other attributes like repository size, contributor count, and issue count. A force simulation positions the faces, while color distinguishes module authors. The code uses `d3.forceSimulation`, `d3.forceX`, `d3.forceY`, `d3.forceCollide`, and a custom force container, with annotations rendered via `d3.swoopyDrag`. Data comes from npms.io.

Loading thumbnail…

Line chart with d3.brush

This example shows monthly S&P 500 index prices from 2000 to 2010 as a line chart with a brushable timeline below it. The main chart displays the full time series in steelblue, while the lower context chart uses d3.brushX to select a range for zooming. The code enforces a minimum one-year selection window, and d3.zoom synchronizes panning and zooming with the brush. Data is loaded from a CSV file using the queue library, and all rendering uses SVG with d3.v4.

Loading thumbnail…

Yahoo Finance Chart Step 10 - Crosshair

This example shows an interactive stock chart with a crosshair overlay that tracks mouse movement, displaying date and price labels in callouts while updating a legend with open, high, low, close, and volume values. The chart combines an area and line series for opening prices with an exponential moving average line, all rendered as SVG using D3 and the d3fc library. The crosshair snaps to data points, and the visualization loads its data from a local `yahoo.csv` file containing intraday financial data.

Loading thumbnail…

A Profile on Failure in O'level: Highlighting 20 districts that have consistently performed poorly over the last 5 years (2011 - 2015)

This visualization profiles academic failure rates in Uganda's O-level examinations, highlighting 20 districts that have consistently underperformed over a five-year period from 2011 to 2015. It combines a line chart showing each district's annual failure rate alongside a national average, with a bar chart displaying average failure rates. Hovering over either chart highlights the corresponding district in both views using D3's linked highlighting. The data, from data.ug, is loaded via `d3.csv` and rendered as SVG using D3 v3 APIs including `d3.time.scale`, `d3.scale.linear`, and `d3.scale.ordinal`.

Loading thumbnail…

vertical boxplot

A vertical boxplot visualizes the distribution of data across 20 days, with each day represented by a box-and-whisker plot showing the min, max, median, and quartiles from the provided CSV data. The SVG rendering uses D3.js (version 3.5.5) with `d3.csv` to load the data, `d3.scale.linear` for both x and y axes, and `d3.svg.axis` to generate the axes. Each box is drawn as a rounded rectangle, whiskers as lines, and the median as a white circle, all styled with a mint-green color scheme on a teal background.

Loading thumbnail…

Chart Controls II

This interactive multi-line chart lets users switch between three regional data series—Europe, Asia, and America—using radio buttons. The line path updates with a smooth transition, changing its stroke color and redrawing to match the selected dataset. The visualization includes dashed grid lines and axes, built with D3 v3’s `d3.svg.axis`, `d3.svg.line`, and `d3.time.scale`. Data is loaded from a TSV file, and the chart’s grid and axes are rendered as SVG elements with CSS-styled stroke patterns.

Loading thumbnail…

Chart Controls III

This interactive bubble chart animates global life expectancy and fertility rates over time, using circle size to represent population and a drop-down menu to filter by region. It uses D3 v3 with SVG rendering, a linear scale for axes, a power scale for circle radii, and a timer to advance through yearly data. The visualization reads from a CSV file containing country-level statistics.

Loading thumbnail…

Brush for data visualisation

A scatter plot of genetic positions against mutation counts uses a D3 v3 brush control to dynamically filter the main chart. The visualization is modular, built with the `TurncatingChart` closure, and reads JSON data that defines both the plotting data and chart options. Users can hover over individual points to see tooltips and save the SVG or a canvas-rendered PNG copy of the graph client-side.

Loading thumbnail…

Voronoï playground : interactive weighted Voronoï study

This interactive example demonstrates how weighted Voronoï diagrams differ from standard ones by letting users adjust the weight of two draggable sites, with sliders controlling each site’s influence. The visualization renders SVG cells, unit-circles, and a background pixel matrix showing additive weighted power distances, updated in real time via d3.v4 selections and transitions. The code uses d3.drag for site movement and explicit distance calculations to determine cell boundaries, revealing effects like sites falling outside their own influence zones.

Loading thumbnail…

extended mirror barchart

This chart visualizes sentiment survey results for a car dealership, comparing positive and negative percentages for each concept against a reference set (France). Each row shows colored bars for positive and negative sentiment, with small grey reference bars above them. The chart also displays the percentage difference against the reference on the left and right sides of the bars, with the total difference at the far left. Built with D3.js v4, it reads CSV data from `apv.csv` and uses an SVG canvas to render the bars, text labels, and stage groupings with `d3.scaleBand` and `d3.scaleLinear`.

Loading thumbnail…

Spiraling Birds

A swarm of 130 triangular birds spirals toward the mouse cursor against a dark background, with each bird’s color shifting from yellow to red based on its distance from the pointer. The simulation uses d3.forceSimulation with custom forces: forceSpiral steers the flock toward a logarithmic spiral pattern, while forceB applies local cohesion and alignment based on nearby birds within 30 pixels. A forceCollide prevents overlap, and mouse movement resets the simulation’s alpha to 1, restarting the motion. The birds are rendered as SVG paths, with their rotation and fill color updated on each tick.

Loading thumbnail…

Generating hex grid positions

This example visualizes the positions of a hex grid using an animated scatter plot. As the mouse moves across the screen, the number of points generated increases, creating a growing cluster of colored circles. The code computes cube coordinates and maps them to screen positions using a custom `toScreen` function, while an animation loop and the `requestAnimationFrame` API continuously add or remove circles based on mouse distance. The SVG circles are colored by their cube coordinate values, and the D3.js v4 library manages selection, insertion, and removal of the points.

Loading thumbnail…

Treemap

This interactive treemap visualizes the hierarchical structure of a JSON dataset with nested values. It uses D3.js to render nested rectangles, with each cell colored by category via `d3.scale.category20c`. Clicking a cell triggers a smooth animated transition that expands the selected branch, revealing its children with adjusted positions and sizes. The visualization employs `d3.layout.treemap` for layout calculations and uses JSON data loaded via `d3.json`.

Loading thumbnail…

OMG Particles!

Mouse movement over the SVG causes concentric, stroked circles to briefly expand and fade away, creating a particle-like trail. The color cycles through the HSL spectrum. The code appends circles using D3’s data join and transition methods with `ease(Math.sqrt)`, then removes them after 2 seconds. It uses D3 v3’s `d3.mouse` to track pointer coordinates and `d3.hsl` for color generation.

Loading thumbnail…

Programmatically Control a d3 brush

This example demonstrates focus+context zooming on a time-series chart of S&P 500 monthly closing prices, where a d3.svg.brush in the lower context panel is programmatically repositioned by clicking year buttons. The code uses d3.svg.area and d3.time.scale to render the data, then calls brush.extent() and brush.event() on a transition to animate the brush selection and update the focus panel. The implementation shows how to trigger brush events programmatically, unlike the default mouse interaction, and is built with d3.v3 and SVG.

Loading thumbnail…

Bullet Charts

Five bullet charts compare quantitative measures against qualitative background ranges and marker lines, with titles and subtitles for revenue, profit, order size, new customers, and satisfaction. An update button triggers a transition that randomizes the values over one second, animating the bars, markers, and tick labels. Built with d3.v3, the example uses a custom `d3.bullet` function, SVG rects and lines, and `d3.scale.linear` scales with `.transition().duration()` to smoothly update positions and widths. Data comes from a static `bullets.json` file.

Loading thumbnail…

scatter plot on wine

This interactive scatter plot matrix visualizes the relationships among several chemical properties of red wine, with each cell showing a pairwise comparison of attributes like fixed acidity, volatile acidity, and pH. Color-coded points represent wine quality ratings, and users can brush over a cell to highlight corresponding data points across all other plots, with tooltips revealing exact values on hover. Built with D3 v4, the visualization uses `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.brush` for interactive selection. The data comes from the included `winequality-red.csv` file, rendered as SVG elements within a grid layout.

Loading thumbnail…

Scatterplot Matrix with brush and tooltip v4

This scatterplot matrix visualizes relationships among numeric Facebook post metrics and includes categorical Type coloring. Users can brush across any cell to select points, which highlights corresponding dots in all other panels and hides non-selected points. Hovering reveals a tooltip with all attribute values for that data point. Built with d3.v4, it uses the `d3.brush` API for linked selections, `d3.csv` to load the dataset, and SVG rendering for axes, circles, and the brush extent.

Loading thumbnail…

Issues Ratings

This interactive line chart visualizes Facebook page performance metrics across different post hours, with each colored line representing a specific engagement metric such as total likes, impressions, or reach. The visualization features a dual-axis layout with a main chart and a brushing context panel, allowing users to zoom into specific time ranges. Built with D3.js v3, the code uses d3.scale.linear for axes, d3.svg.line for series rendering, and d3.svg.axis for tick marks. The dataset is loaded from a CSV file containing hourly post statistics, with animated transitions and a tooltip on mouse hover.

Loading thumbnail…

D3 Brush and Tooltip Complete

This example shows a scatterplot of 49 random data points where users can brush-zoom over the chart and see tooltips with each point’s X and Y values. The chart uses D3 v3 with SVG circles, linear scales, and axes. Brushing is implemented via `d3.svg.brush()` applied to the background, while a custom `d3.helper.tooltip()` creates and moves an HTML tooltip on mouseover and mousemove. Brush events highlight selected points by toggling a CSS class, and a clear button resets the selection.

Loading thumbnail…

Visualization

This interactive scatter plot visualizes patient mortality probability against age, with the size of each dot representing the patient’s length of stay in the ICU. The visualization, built with D3.js, uses the `d3.tip` library to display tooltips on hover and `d3.behavior.zoom` for panning and zooming. A clickable legend allows filtering by ICU type, while filled dots indicate deceased patients. The data comes from the MIMIC ICU dataset and was used with XGBoost to predict mortality rates. The rendering uses SVG with animation for interactive transitions.

Loading thumbnail…

Brushable Scatterplot/Choropleth

A brushable scatterplot shows adult obesity rates versus median household income for U.S. states, with each state represented as a colored dot. The plot uses d3.brush to let users select a region, which filters the adjacent choropleth map to highlight only the selected states. The map, rendered with d3.geoPath and d3.geoAlbersUsa, colors states by their obesity rate using a d3.scaleThreshold. Data comes from the State of Obesity project and the 2014 ACS, with interactions updating both charts via shared callbacks.

Loading thumbnail…

Grouped Bar Chart with Crossfilter

This grouped bar chart displays state populations across seven age ranges, with each state’s bars clustered along the x-axis and a color-coded legend for age groups. Built with D3.js and Crossfilter, the code loads data via `d3.csv`, uses `d3.scale.ordinal` for positioning and color, `d3.scale.linear` for the y-axis, and `d3.nest` to structure grouped data. Crossfilter dimensions and groups aggregate the CSV records, while `d3.svg.axis` renders axes and `d3.format` applies SI prefixes. The SVG output includes hover-free static bars and a legend.

Loading thumbnail…

bar + scatter

A linked bar chart and scatter plot visualize the age and race/ethnicity of individuals killed by law enforcement. The bar chart shows the count of deaths per racial category, and hovering over a bar filters the scatter plot to show the age distribution of deaths for that group. The visualization uses D3.v4, Vue, and crossfilter to link the two SVG charts with animated transitions. Data is from a CSV of police killings in 2015.

Loading thumbnail…

trees

A procedural tree grows downward from a seed branch, splitting into two child branches at each depth until reaching ten levels. The SVG rendering uses tan-to-green strokes that darken with depth, and the entire tree periodically sways in a simulated breeze. Built with D3 v3, the animation runs on a second-long interval, randomly perturbing branch angles and propagating positional changes to children through `d3.select` transitions over three seconds.

Loading thumbnail…

D3-Force: Split Categorical

A force-directed network of circles, sized by GDP and colored by continent, settles into a clustered layout. A "Toggle Split" button triggers a categorical separation: the `d3.scalePoint` scale maps each continent to a distinct x-coordinate, and an additional `d3.forceX` pushes nodes toward their group’s position, with labels emphasizing the grouping. The simulation uses `d3.forceSimulation`, `d3.forceManyBody`, and `d3.forceY` to manage repulsion and centering.

Loading thumbnail…

moving bars

Animated SVG bar chart demonstrates a sequence of shape morphing transitions with D3 v4 and p5.js. Fifteen rectangular bars representing numeric values reorder horizontally, stack vertically, transform into horizontal length bars, then return to their original vertical positions with color interpolating from blue to red using d3.interpolateHcl and d3.scaleLinear. The transitions use chained `transition.attr` calls with varying delays and durations from a time scale, while the dataset is hardcoded as an array.

Loading thumbnail…

The Best Bar Chart Ever Updating

Four labeled bars, A through D, update every second with new random values. The chart uses D3.js version 3.5.17 with ordinal and linear scales, SVG rectangles, and transitions to animate height changes. Each bar maintains a fixed color from the data object, while axes redraw on every update. The example demonstrates a common enter-update-exit pattern with `setInterval` driving the data refresh.

Loading thumbnail…

Brush Handles d3v4 II

This example demonstrates a brushable scatterplot where 800 random data points are plotted along a linear x-scale and a normally distributed y-axis. Users can drag horizontally to select a range, which highlights the corresponding circles in red while custom brush handles appear as resizable path shapes. Built with D3 v4, it uses `d3.brushX` for the brush interaction, `d3.axisBottom` for the x-axis, and `d3.randomNormal` to generate the y-values. The custom handles are drawn with SVG paths, and the brushing updates both circle classes and handle positions via the brush event handler.

Loading thumbnail…

D3 Example

This visualization shows small multiples of polar area charts comparing the religious breakdown of the five most populous countries, with each slice sized by population and colored by religion. Using D3.js and d3-legend, the code applies nested selections and a pie layout, with a square-root radius scale to encode values. The chart renders in SVG and pulls data from the Pew Research Center Global Religious Landscape dataset, including a color legend for religion categories.

Loading thumbnail…

Scatter Plot

This interactive visualization displays the classic Iris dataset as two linked scatter plots, enabling users to explore relationships between sepal and petal measurements. Both plots map sepal length and petal length to their axes, with points colored by species. A brush selection in the left plot dynamically zooms the right plot to the corresponding data interval, allowing for detailed comparison of specific subsets. The implementation uses d3.v3 for rendering SVG graphics and a custom functional reactive model (model.js) to manage dependencies between the data, axes, and brush interactions.

Loading thumbnail…

D3 Example

This small multiples visualization displays donut charts for the five most populous countries, each showing the proportional breakdown of religious affiliations within that country. The charts are arranged horizontally, with a shared categorical color legend identifying each religion. Built with D3.js, the code uses `d3.layout.pie`, `d3.svg.arc`, and `d3.nest` to group data by country and compute slice geometries, while `d3.legend.color` generates the legend. Data comes from the Pew Research Center’s Global Religious Landscape dataset, provided as a CSV file. All donuts share the same radius, so area does not reflect population size.

Loading thumbnail…

D3 Example

This multi-line chart displays the population growth of China, India, the USA, and Brazil from 1950 to 2015, using data from the United Nations Population Estimates. The visualization encodes time on the x-axis and population on the y-axis, with each country’s trend represented by a colored line and a legend. The code uses D3.js version 3.5.5 to build the SVG rendering, employing `d3.time.scale`, `d3.scale.linear`, `d3.svg.axis`, and `d3.svg.line` for plotting, alongside the `d3-legend` library for the color legend.

Loading thumbnail…

D3 Example

This stacked area chart shows the population growth of China, India, the USA, and Brazil from 1950 to 2015, using data from United Nations Population Estimates. The visualization uses D3.js to load CSV data, nest it by country, and apply a stack layout to create the layered areas. An SVG rendering with time and linear scales, along with a color legend, displays each country’s contribution over time. The code uses `d3.layout.stack`, `d3.svg.area`, `d3.nest`, and `d3.legend.color`.

Loading thumbnail…

Scatter Plot with ReactiveModel

This scatter plot visualizes baseball player statistics from a CSV dataset, showing relationships between attributes like hits, home runs, and salary. The visualization uses D3 v4 and the ReactiveModel library to manage state reactively, with animated transitions when scales or axes update. The SVG rendering includes labeled axes and gridlines, and the chart container resizes dynamically to fill the page.

Loading thumbnail…

Sales Trend by Month

This example shows monthly sales trends across five years (2011–2015) as a single continuous area chart, with each year labeled at the top of the categorical x-axis and mean lines positioned dynamically on the y-axis. The code uses d3.js v4 to define linear scales, a line generator, and an area generator, and appends SVG groups to place category labels. Data is embedded inline as JSON, and a tooltip div appears on hover. The chart resizes to the window using jQuery for dimensions.

Loading thumbnail…

D3 Example

This example displays a small multiples visualization of polar area charts, showing the breakdown of religious populations for every country on Earth. The code renders each country as a separate pie chart, with the arc radii scaled to population size and colored by religion using D3's SVG rendering and the d3-legend library. The visualization is explicitly noted as difficult to read due to occlusion but offers a starting point for exploring the Pew Research data. Users can click the color legend to re-sort countries by the selected religion's population.

Loading thumbnail…

Reusable Chart Example

This example demonstrates a reusable time-series chart that visualizes the monthly S&P 500 index price from 2000 to 2010. The chart renders an area and line graph using SVG, with a line representing price trends and a shaded area beneath it. The code uses the D3.js library, specifically `d3.svg.area()`, `d3.svg.line()`, `d3.svg.axis()`, and `d3.time.scale()`, to create a customizable chart function. The data is loaded from a CSV file, and the chart is invoked via `.call(chart)`.

Loading thumbnail…

Stacked-to-Grouped d3 v4

This example presents a bar chart that can switch between stacked and grouped layouts using radio buttons. It visualizes foreign transaction data over time, with each bar segment representing a different value category. The chart is built with d3.v4, using `d3.stack` for the stacked series, `d3.scaleBand` and `d3.scaleLinear` for axes, and SVG elements for rendering. Animated transitions move bars between the two states. Data is loaded asynchronously via jQuery’s `$.ajax` from a BC government open-data API, with a custom tooltip showing segment values on hover.

Loading thumbnail…

D3 Block-a-Day: Day 22, January 22nd, 2017

This interactive scatter plot shows the relationship between a Major League Baseball team’s win total in one year and its win total in the previous year, with a correlation value displayed for each season. A draggable slider lets viewers animate through years from 2016 back to 1902, updating the dots and their tooltips. The visualization uses D3 v4’s `d3.json`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`, along with SVG elements and a custom year-tween timer for smooth transitions. Data comes from a JSON file listing team wins per season.

Loading thumbnail…

Makeover Monday - YouTube ratings

A Makeover Monday visualization of YouTube gaming channels, grouped by letter grade (A-plus through C-and-D), plots each channel's video views against its rank using a force-directed scatterplot. A dropdown menu highlights a selected user’s circle and dims others. Built with D3 v4, it uses `d3.forceSimulation` with `forceX` and `forceCollide` to position overlapping circles along a shared axis, with separate axes for channel ratings. Data comes from a CSV file containing rank, subscriber count, and video views.

Loading thumbnail…

Mutliple connected beeswarm plots

This example displays multiple connected beeswarm plots, one per outcome category, with each dot representing a family's return on investment. Clicking a dot highlights its connecting line across all plots and mutes the other points, revealing trends that might be missed with parallel coordinates. The chart uses d3.js version 4.1.0, with Voronoi diagrams to handle click events. The SVG rendering includes custom axes, grid lines, and a color scale, and the data is loaded from a CSV file.

Loading thumbnail…

Trees

This example visualizes a dataset of 100 trees in a 3x1 matrix of linked scatterplots. The plots show annual growth by distance from a spring, a spatial map of tree locations, and height by age. Using D3.js v3, it employs SVG rendering and the `d3.svg.brush` API for linked brushing. Selecting a region in one plot highlights corresponding points across all charts, with hidden circles grayed out. The code adapts a prior block, filtering dimensions and using `d3.csv` to load the data.

Loading thumbnail…

Makeover Monday - YouTube ratings

This visualization displays YouTube gaming channel data from a Makeover Monday dataset, comparing video views and subscriber counts across different channel ratings (A+ through D). Each horizontal barcode line represents one channel, with PaleVioletRed marks for video views and OliveDrab marks for subscribers, both scaled linearly from zero to their respective maximums. The chart separates channels by rating category, showing n-counts per group. Using d3.v4, it builds SVG barcode charts with d3.axisTop tick formatting and d3.nest for hierarchical grouping. A dropdown menu and mouseover interactions trigger a highlight function that raises and increases the opacity of the selected channel’s lines.

Loading thumbnail…

3D Force-Directed Graph (ThreeJS)

This example shows an interactive 3D force-directed graph rendered with Three.js WebGL, using ngraph.forcelayout3d for physics simulation and trackball controls for rotation, zoom, and panning. It cycles through three topological data sets—Les Misérables character co-occurrences, a blocks.json citation network, and D3 source-code dependencies—with node size, color, and name mapped per dataset using Three.js spheres, line geometry, and raycaster-based tooltips.

Loading thumbnail…

D3 in Action Adjacency Matrix

This example shows an adjacency matrix visualizing co-occurrence weights between 43 topics, with each cell’s opacity encoding the edge weight from a CSV edge list. The code builds a square matrix of all possible source–target pairs, fills in weights from the edge hash, and renders them as SVG rectangles using D3 v3’s `d3.scale.linear` for opacity scaling. It adds row and column axes with `d3.svg.axis`, and a mouseover handler highlights entire rows and columns. The data comes from `edgelist.csv` and `nodelist.csv`, loaded via `queue().defer(d3.csv)`.

Loading thumbnail…

Stacked-to-Grouped | JSON Data, Horizontal Bars, String Series Names

This example demonstrates a horizontal bar chart that toggles between stacked and grouped layouts using animated transitions. The visualization loads JSON data with string series names and renders bars with D3 v4, using SVG and custom radio buttons for user interaction. The animation preserves object constancy through sequenced transitions, first adjusting bar heights then widths, based on the design principles of Heer and Robertson. The code implements the D3 stack function, scaleBand, scaleLinear, and transition methods to smoothly morph between the two representations.

Loading thumbnail…

D3-Force: Split Categorical

A force-directed network of circles, sized by GDP and colored by continent, settles into a clustered layout. A "Toggle Split" button triggers a categorical separation: the `d3.scalePoint` scale maps each continent to a distinct x-coordinate, and an additional `d3.forceX` pushes nodes toward their group’s position, with labels emphasizing the grouping. The simulation uses `d3.forceSimulation`, `d3.forceManyBody`, and `d3.forceY` to manage repulsion and centering.

Loading thumbnail…

Kohonen SOM

This visualization demonstrates a Kohonen self-organizing map (SOM) training on 500 random 3D data points, projecting them onto a grid of 144 hexagon neurons. The animation shows the neurons and data points transitioning over 4 seconds as the map converges, with colors assigned using the d3.cubehelix color space. Built with d3.js and the seracio/kohonen library, it uses the `kohonen.hexagonHelper.generateGrid()` function to create the hexagonal lattice and animates the training process via `transition().duration(4000)` on both the neuron colors and data point positions.

Loading thumbnail…

D3 v4 shape drag

Seven SVG shapes—circle, cross, diamond, square, star, triangle, and wye—are rendered using the `d3.symbol` API, colored with `d3.schemeCategory10`. Upon appearing, each shape drops into place via a staggered `transition`. A `d3.drag` interaction lets the user drag any shape by its offset coordinates, bringing it to the front with `raise()`. Built with D3 v4, the example demonstrates modular shape-drawing and pointer-event handling for direct manipulation.

Loading thumbnail…

Bubbly Jobs Chart

Each bubble represents an occupation in the US, with size encoding employment numbers for 2014 and horizontal position approximating median annual wage. Occupations are grouped vertically by major job category, and hovering reveals details. The chart uses the `d3.forceChart()` plugin to position bubbles via a force layout with custom gravity, while an x-axis shows wages in dollars. Data comes from the Bureau of Labor Statistics, and the design is inspired by a New York Times graphic.

Loading thumbnail…

The Justice League

Each player in the "Justice League" fantasy football league gets a trio of column charts showing their own weekly scores, their opponents' scores, and the point margin for each game. The charts use the D3.js v3 API to render SVG rectangles whose lengths and colors are scaled linearly, with the average score marked by a vertical line. Data for weeks 1 through 8 comes from a JSON file scraped from the ESPN league page, and hovering over any bar highlights the same week across all charts.

Loading thumbnail…

All Kickstarter projects grouped by cities

This visualization displays 100,000 Kickstarter projects as a bubble chart, grouped by city, with circle size representing the number of backers per project and color encoding the project category. It uses d3.pack for the hierarchical bubble layout, d3.hierarchy to structure data by city and category, and d3.scaleOrdinal to map categories to colors. The code loads project data from CSV files, aggregates counts by city and subcategory, and offers checkboxes to toggle between standard and Polygraph-inspired color schemes or to regroup by categories. User interaction updates the visualization dynamically via the d3.v4 library.

Loading thumbnail…

Kickstarter projects by City

This visualization uses a bubble chart to display Kickstarter projects by city. A dropdown menu allows the viewer to select a city, which updates the chart to show projects from that location. Each bubble's size is determined by the number of backers, and its color represents the project's subcategory. The code uses the `d3.pack` algorithm to position the bubbles and `d3.scaleOrdinal` with the `d3.schemeCategory20c` color palette for the category coloring, with data sourced from a provided CSV file.

Loading thumbnail…

Multivariate binning II

Four synthetic datasets are aggregated with d3.hexbin and compared across six small multiples, each showing the same spatial bins in a different visual encoding: colored scatter dots, grouped bar charts, pie charts, radial arcs, and two polar variants. Each bin’s composition by class is rendered as proportional wedges or bars using d3.svg.arc and d3.layout.pie. The SVG output uses d3.scale.category10 for class colors and lodash for data manipulation.

Loading thumbnail…

Arc Bubble Connector Chart

This circular visualization displays relationships between six San Francisco city agencies (arcs) and six lobbying organizations (bubbles) using data from SFGov.org. SVG rendering combines a chord layout for outer arcs and a circle pack for inner bubbles, with animated connectors revealing connections on hover. The code employs D3.js 3.x APIs including `d3.layout.chord`, `d3.layout.pack`, and `d3.svg.diagonal.radial`, with interactivity handled through mouseover and mouseout events that toggle opacity states for arcs, bubbles, and connector paths.

Loading thumbnail…

Horizon Chart

This example uses a horizon chart to visualize daily stock-related Wikipedia page views for thirteen companies over a two-month period. The chart displays relative change compared to a baseline, with multiple horizons stacked vertically and rendered to canvas. Built with D3 v3 and the cubism.js library, it uses `d3.time.scale` for its time axis and a fixed time context to handle the data.

Loading thumbnail…

VisDock in Zoomable Icicle

This example integrates the VisDock toolkit into a zoomable icicle chart built with D3.js v3, visualizing a hierarchical JSON dataset of the Flare library’s file structure. Colored rectangles represent nodes, with the hierarchy flowing from top to bottom, and clicking a node triggers an animated transition that re-scales the axes to focus on that subtree. The code uses `d3.layout.partition` for the layout, `d3.scale.linear` for coordinates, and `d3.json` to load the data. VisDock’s selection tools (polygon, ellipse, line) query these rectangles, and its `setColor`, `changeColor`, and `changeVisibility` APIs apply visual highlights and manage overlays.

Loading thumbnail…

Zoomable Icicle

This interactive visualization displays a hierarchical dataset using an icicle chart, where nested rectangles represent the flare data’s categories and subcategories. Clicking a rectangle zooms into that level, while clicking the top bar returns to the previous view. The chart is built with D3 v3, using `d3.layout.partition` to compute the layout and `d3.scale.linear` for the x and y coordinates. Animated transitions, driven by `rect.transition()` with a 750-millisecond duration, smoothly rescale the rectangle positions and sizes, with colors assigned via `d3.scale.category20c()` based on parent keys.

Loading thumbnail…

Sunburst

This interactive sunburst chart visualizes the hierarchical structure of the Flare software project, using arc size to represent the relative quantity of nodes within each category. Built with D3 v3 and the d3Kit framework, the visualization employs `d3.layout.partition` and `d3.svg.arc` to generate the rings, with colors assigned by category name. Clicking any arc triggers a zoom animation via `transition.attrTween`, which smoothly interpolates the scale domains to focus on the selected subtree. The chart auto-resizes to maintain its aspect ratio and supports mouse events for additional interactivity.

Loading thumbnail…

Zoomable radial chart with color scales

A zoomable radial chart displays hierarchical tornado data using nested color scales derived from a root palette, with each parent node’s hue darkened and brightened for its children. Users click arcs to zoom into deeper levels, leveraging a D3 partition layout with linear angular and square-root radial scales. The visualization is rendered as animated SVG, built with d3.v3 and the `d3.layout.partition` API, and loads data from an external JavaScript dataset.

Loading thumbnail…

Sequences sunburst

This interactive visualization displays a sunburst-style partition layout of hierarchical web navigation sequences, where each rectangle represents a step in a user session. The chart uses a d3.layout.partition to map hierarchical data from a CSV file, with color-coded nodes for steps like home, product, and search. Hovering over a node highlights the path of ancestors in a breadcrumb trail, showing the percentage of total visits represented by that sequence. The visualization uses d3.v3, d3.text, and d3.csv.parseRows to load and process the data, with mouse events and transitions providing interactive feedback.

Loading thumbnail…

Radar Chart D3 V4

This example presents a radar chart built with D3 v4, displaying six categories—such as Central, Kirkdale, and Everton—with values on a scale up to 100. The visualization uses SVG polygons to represent the data series, overlaid on a circular grid with five levels and axis lines, all rendered with animated mouseover effects. The code relies on D3’s `d3.scaleOrdinal` for color encoding and `d3.json` to load the embedded data file, while custom configuration controls the chart’s dimensions and styling.

Loading thumbnail…

Horizon Chart

This example uses a horizon chart to visualize daily stock-related Wikipedia page views for thirteen companies over a two-month period. The chart displays relative change compared to a baseline, with multiple horizons stacked vertically and rendered to canvas. Built with D3 v3 and the cubism.js library, it uses `d3.time.scale` for its time axis and a fixed time context to handle the data.

Loading thumbnail…

Chart Controls III

This interactive bubble chart animates global life expectancy and fertility rates over time, using circle size to represent population and a drop-down menu to filter by region. It uses D3 v3 with SVG rendering, a linear scale for axes, a power scale for circle radii, and a timer to advance through yearly data. The visualization reads from a CSV file containing country-level statistics.

Loading thumbnail…

Brush for data visualisation

A scatter plot of genetic positions against mutation counts uses a D3 v3 brush control to dynamically filter the main chart. The visualization is modular, built with the `TurncatingChart` closure, and reads JSON data that defines both the plotting data and chart options. Users can hover over individual points to see tooltips and save the SVG or a canvas-rendered PNG copy of the graph client-side.

Loading thumbnail…

Sortable, Filterable Table

This example presents a sortable, filterable table of YouTube channel data, showing each channel’s title, view count, creation date, and URL. A search input filters rows by title prefix, while clicking column headers sorts the table, with click counts tracked per column. Built with D3.js v3, it binds JSON data to table rows and dynamically updates the DOM on input and sort events. The code constructs cells, conditionally wraps URLs in anchor tags, and uses a custom regex-based filter to match titles.

Loading thumbnail…

Pie Multiples with Nesting

Multiple donut charts visualize flight counts by carrier for four U.S. airports, with each chart sized identically. The nested tabular data groups flights by origin airport, and each pie chart uses a donut layout with arcs encoding count magnitudes. The visualization is rendered as SVG using D3.v3 APIs: `d3.layout.pie` computes arc angles, `d3.svg.arc` draws the donut shapes, and `d3.nest` groups the CSV data. Color assignment uses `d3.scale.category20c()` on carrier names, with labels positioned at arc centroids.

Loading thumbnail…

Donut-Pie Chart

This donut-pie chart visualizes hierarchical data from a CSV file, showing current statuses in the outer donut ring and prior statuses in the inner pie, with color coding for New, Open, Reopened, and Closed categories. Built with d3.v3, it uses `d3.layout.pie`, `d3.svg.arc`, and `d3.nest` to aggregate and structure the data, rendering as SVG. The outer arc and inner wedge paths are styled with distinct radii, and labels are positioned via arc centroids.

Loading thumbnail…

Mutliple connected beeswarm plots

This example displays multiple connected beeswarm plots, one per outcome category, with each dot representing a family's return on investment. Clicking a dot highlights its connecting line across all plots and mutes the other points, revealing trends that might be missed with parallel coordinates. The chart uses d3.js version 4.1.0, with Voronoi diagrams to handle click events. The SVG rendering includes custom axes, grid lines, and a color scale, and the data is loaded from a CSV file.

Loading thumbnail…

Gooey Exploding Scatterplot

This interactive Gapminder recreation plots life expectancy against fertility rates for countries over time, with a large year label and playable transitions. The “gooey” effect uses SVG filters—`feGaussianBlur`, `feColorMatrix`, and `feBlend`—to make continent groups coalesce or explode into their constituent countries with a paintball-splatter-like blur. The code creates a separate filter definition per continent, allowing individual toggling via the Explode All and Collapse All buttons. Data comes from Gapminder, and the visualization is built with D3 v4 using scales, axes, nesting, and transitions.

Loading thumbnail…

sequence explorer - first example

This example uses a sequence explorer to visualize changes in categorical flows over time as an animated Sankey diagram. It shows how values move between categories (moods) across sequential years (2000–2003), with node heights scaled by flow magnitude. The chart is built with D3 v4, using the `d3.sankeySeq` extension to manually position nodes along the x-axis via `xScale` and `yScale`. Multiple Sankey diagrams are generated for data subsets (e.g., product type, age group) from a CSV file, with interactive node highlighting and tooltips.

Loading thumbnail…

Multiples Barchart

This visualization compares the monthly prices of three technology stocks (Microsoft, Amazon, and IBM) from 2000 to 2010. It presents the data as a series of small multiples, with each stock’s price trend shown in its own horizontally stacked panel, using a blue color scale from ColorBrewer. The chart renders with SVG and includes a radio-button interface that animates the display, smoothly transitioning the multiples into a single stacked bar chart. Built with D3 v3, the code leverages `d3.layout.stack`, `d3.time.scale`, and the `d3.transition` API for the interactive morphing effect.

Loading thumbnail…

D3.js Hanabi

This example animates a celebratory fireworks display for the Brooklyn JS community, featuring text and a dark backdrop. It uses D3.js v3 to generate 100 particles per burst from a normal distribution, mapping them to SVG circles. The `transition` method with custom easing functions like 'circle' and 'exp' orchestrates the launch, explosion, and fading of particles, while an ordinal color scale assigns yellow and green hues. Set intervals periodically trigger the sequence, creating a repeating show.

Loading thumbnail…

D3 Example

This visualization presents small multiples of donut charts, each sized proportionally to a country’s population, showing religious breakdowns for the five largest countries. Nested selections bind data per country, with pie layout and arc generators drawing slices, while a sqrt scale maps population sums to chart radius. D3-legend renders the color key. Data comes from the Pew Research Center’s Global Religious Landscape dataset, rendered as SVG.

Loading thumbnail…

D3 Example

This visualization presents a small multiples grid of donut charts that display the proportion and total number of lynchings by US state and race from 1882 to 1968, with each chart’s area proportional to the lynching count. The data comes from the Tuskegee Institute. The code uses D3.js (version 3.5.5) with SVG rendering, employing `d3.layout.pie`, `d3.svg.arc`, `d3.nest`, and ordinal scales to arrange six columns of state donuts, while a color legend from the d3-legend library distinguishes white and black victims.

Loading thumbnail…

Graph Editor

This graph editor visualizes small directed graphs as nodes and links in an SVG, using a force-directed layout to position them. It shows how nodes can be dragged to fix their positions and clicked to unfix them, with arrowheads indicating link direction. The code uses `d3.forceSimulation` for physics, `d3.drag` for interaction, and a marker definition for the arrowheads. It is built with D3 v4 and styled with a Roboto font.

Loading thumbnail…

Clustered Force Layout III

This clustered force layout example shows a stable arrangement of colored nodes grouped into clusters, with one larger node per cluster and an animated transition from an initial state. The code uses D3 v3’s `d3.layout.force` with custom `cluster` and `collide` functions, initializing node positions in a circle to reduce jitter. It also applies a `transition.attrTween` to grow node radii smoothly, and renders labels alongside circles in SVG. The data is generated randomly, with cluster assignments and radii scaled via `d3.scale.sqrt`.

Loading thumbnail…

Programmatically Control a d3 brush

This example demonstrates programmatic control of a D3 brush in a focus+context zoom chart, showing how buttons can drive the brush to zoom into specific years of S&P 500 stock data. The code uses d3.svg.brush, brush.extent(), and brush.event() to set the brush range and trigger the brush’s event handlers, applying transitions for a slowed-down visual effect. The chart renders as SVG with two areas, axes, and a brush overlay, updating the focus panel dynamically as the brushed domain changes.

Loading thumbnail…

Vibrational effect

This matrix of 100 circles demonstrates a vibrational effect, a visual phenomenon where certain patterns appear to shimmer or pulse, based on Jaques Bertin’s *Semiology of Graphics*. The display shows a grid of symbols with varying value (black area ratio) and texture (number of rings), revealing that the strongest vibration occurs when the black area is roughly 50–60% of the whole. Each cell is constructed using three concentric SVG circles (`circle`) whose radii are derived from the value and texture properties via `propertiesToRadii`, which maps these inputs to areas and then to radii. The data is generated by `makeData`, which combines two arrays from `d3.range` for values and textures, and is positioned using `d3.scale.linear`. The SVG is appended to the body directly, with styling for outer, inner, and background circles defined in CSS.

Loading thumbnail…

Reusable Bar Chart

This interactive visualization displays OECD Social Indicators for 2012, allowing users to compare values across 24 countries by selecting from a dropdown menu of ten indicators. Built with D3.js v3, the chart uses a reusable bar chart module that animates transitions between datasets. The bars are rendered as SVG rects with an ordinal x-scale and linear y-scale, and the axes update dynamically based on the selected indicator. Data is loaded from a CSV file and structured using the d3.nest() function, while the chart’s margin, tick format, and domain are configurable through a fluent interface.

Loading thumbnail…

horizontal boxplot

A horizontal boxplot visualizes the distribution of values across seven days, with each row showing median, quartiles, and min/max range as thick lines, boxes, and circles. The D3.js (v3) code loads comma-separated data from `data.csv` and builds an SVG chart with linear scales for both axes. Grid lines from the axes and styled box elements with white-filled IQR rectangles and dashed tick subdivisions render the quantitative spread, while the y-axis lists day numbers in reversed order. This example demonstrates a classic statistical chart using D3's SVG and axis APIs.

Loading thumbnail…

X-Value Mouseover with Droplines

This example shows a line chart of stock closing prices over time, with an interactive mouseover that identifies the data point nearest the cursor’s x-position. Two dashed droplines extend from the selected point to the x- and y-axes, and the y-value is displayed as a currency label. The chart uses D3.js (version 3.5.5) with `d3.time.scale`, `d3.svg.axis`, and `d3.svg.line` for rendering. Mouse position is converted via `scale.invert`, and the closest data point is found using `d3.bisector`. The data is loaded from a tab-separated TSV file containing dates and closing prices.

Loading thumbnail…

Marvel Characters | Force layout with images

This example visualizes Marvel characters as a force-directed graph, where nodes are character portraits and links show relationships between heroes, villains, and teams. Users can click any node to reveal the character’s identity and a link to their Marvel webpage. It uses d3.layout.force() for physics simulation, d3.layout.tree().links() for hierarchical edge construction, and SVG rendering with animated transitions on mouse events. The data is loaded from a local JSON file containing character metadata and image URLs.

Loading thumbnail…

Hamiltonian Graph Builder

This interactive tool visualizes the construction of cubic Hamiltonian graphs from LCF notation, a compact representation for such graphs. Users can input or edit an LCF code, and the visualization animates the step-by-step building of the graph through a force-directed layout. The interface uses the Ember.js framework for routing and state management, while the rendering relies on D3.js, specifically `d3.layout.Force` for the physics simulation and SVG shapes for vertices and edges. The code also incorporates jQuery for input handling and URL parameter parsing to share specific graph configurations.

Loading thumbnail…

d3 Fishbone diagram

A d3 Fishbone diagram visualizes hierarchical contributions to a central concept, using a force-directed layout with SVG nodes and links. The diagram is generated from Markdown via a CodeMirror editor, where list items become tree nodes that can be dragged. It uses d3.layout.force for positioning, d3.fishbone for the custom layout, and marked for parsing. The example includes animated transitions when editing and supports SVG export via SVG Crowbar.

Loading thumbnail…

Small Multiples with separate y-scales

This small-multiple chart displays the monthly volume of Twitter posts for several distinct topics, such as education and climate change. Each panel shows the trend for its topic on its own independent y-scale, allowing for direct comparison of temporal patterns regardless of differences in overall magnitude. The visualization is built with D3 v3, rendering to SVG. It uses `d3.nest` to group the data and creates a separate `d3.scale.linear` for each panel’s y-axis, while a shared `d3.time.scale` maps the dates across the x-axis.

Loading thumbnail…

Internet vs. GDP

This example shows a scattergram of internet and cellular penetration against GDP per capita for 174 countries in 2012, using World Bank data. A radio button toggles between internet and cellular metrics, while a d3.brush selection highlights points in the chart and synchronizes with a sortable HTML table. The visualization uses D3 v3 with SVG rendering, a logarithmic x-axis, and hover interactions between the table and chart.

Loading thumbnail…

Gist 7980cfcf9d877376466041d669ec7237

This interactive visualization displays NBA team performance metrics as sortable rows, with each unit representing a team and its starting five players. Clicking toggle buttons reorders the teams by statistics such as offensive rating, defensive rating, and rebounding percentages, while the panel updates with player names and detailed stats. The code uses D3 v3 with SVG, binding data from a local JSON file and applying `transition.attr` for animated reordering. Sorting logic relies on custom accessor functions and `d3.descending` to compare values.

Loading thumbnail…

A classic comparison (sorted)

Seven random values are displayed in four small multiples, each using a different D3 layout: a bar chart, a pie chart, a treemap, and a bubble chart. The data are sorted in descending order before rendering, so every chart presents the same ranked sequence of categories. The code uses D3 v3 layouts including `d3.layout.pie`, `d3.layout.treemap`, and `d3.layout.pack`, with SVG shapes for all marks. A categorical color scale maps each of the seven classes to a distinct color across all panels.

Loading thumbnail…

D3 Sunburst Sequence

This interactive sunburst sequence visualization shows how a population progresses through sequential stages, with each sequence’s final value determining the arc size. Users can hover over arcs to see path summaries, and the visualization includes breadcrumb trails and a dynamic legend. Built with D3 v3 and AngularJS, the code uses the `d3.layout.partition` and `d3.svg.arc` APIs to render the hierarchical data, which is parsed from CSV files into a JSON tree structure. The example supports custom file uploads and includes sample datasets for Android OS conversion, Netflix churn, and page clicks.

Loading thumbnail…

Student Overview Dashboard

This dashboard displays student performance metrics over time using bandlines, which highlight the range of scores across a cohort while plotting each individual student’s trajectory. It recreates Stephen Few’s design, with rows representing students and columns for each assessment period. Built with D3.js, the visualization uses SVG rendering, and interactive features allow brushing rows to update aggregate distributions and clicking column headers to temporarily re-sort the data. The implementation leverages the custom `bandline` module, along with the `du` and `model` utilities, to handle the data and rendering logic.

Loading thumbnail…

Isometric treemap

This is an isometric treemap visualization of the flare package hierarchy. It represents the tree’s depth as a 2.5D elevation, with each node drawn as a parallelepipedon using an isometric projection. The layout is computed with `d3.layout.treemap`, and each box’s faces are colored using `d3.scale.category20c` and `d3.hcl` to differentiate the nodes. The visualization supports geometric zoom via `d3.behavior.zoom`, and the SVG structure is built using D3’s `select` and `append` methods.

Loading thumbnail…

Freehand drawing

This freehand drawing application lets users sketch lines with a mouse, stylus, or finger on an SVG canvas, with a palette of ten colors from ColorBrewer’s Dark2 scheme and a trash icon to clear all strokes. It renders each stroke as a smooth, basis-interpolated path via `d3.svg.line`, while using `d3.behavior.drag` to capture pointer movement. Unlike a simpler variant, the app stores all drawing data in a DOM-independent object (logged to the console on stroke completion), and separates the UI and canvas into two stacked SVG elements to prevent accidental drawing when interacting with controls.

Loading thumbnail…

Text on simple Arc

This example demonstrates that text placed along a path can smoothly transition between different arc geometries using D3.js's standard transition mechanism. It shows a repeating animation where the arc's endpoints and radius change, causing the text "Yay, my text is moving back & forth" to follow the newly defined path each time. The visualization relies on SVG's `<textPath>` element, linked to a `<path>` via the `xlink:href` attribute, and uses D3's `.attr("d", ...)` with `.transition().duration()` to animate the path data. The code also references D3 transitions with the `.each("end", repeat)` callback to loop the animation indefinitely.

Loading thumbnail…

Magic Heat Map

This interactive heat map allows exploration of multidimensional datasets by aggregating data into two-dimensional bins and color-coding the resulting counts. Built with Chiasm and Angular, it offers controls for selecting datasets, choosing X and Y columns, adjusting bin counts, and picking the color range. The visualization supports both numeric and categorical axes, employing histogram binning for numeric columns via Chiasm's dataReduction plugin. The D3.js-based heat map component renders an SVG with axes and labeled rectangles, scaling colors from a user-specified minimum and maximum.

Loading thumbnail…

Scatter Plot

This scatter plot visualization explores the Iris flower dataset by displaying four coordinated plots in a 2x2 grid. Each plot shows sepal length against petal length, with progressive additions: the first shows only positions, the second encodes petal width as point size, the third color-codes points by species, and the fourth combines both size and color. The visualization is built with D3.js v3, using the reusable ScatterPlot module that handles axis creation, scaling, and SVG rendering. It loads data from a CSV file and employs the d3.csv and d3.json APIs to parse the dataset and metadata.

Loading thumbnail…

Orbit Layout Modes

This interactive visualization uses the d3.layout.orbit library to map the D3.js API in an animated orbital layout. The visualization displays the API’s functions and modules as nodes on concentric rings, with a custom mode array defining the ring structure, and uses size and color scales to encode node depth and child count. Hovering over a node stops the animation, recenters the layout on that node, and draws blue spokes to its children and parent. The code is forked from tarekrached's orbital layout block and relies on D3 v3 with SVG rendering.

Loading thumbnail…

Arc Diagram Demo

This example demonstrates a simple arc diagram layout for network visualization, showing the "Les Misérables" character co-occurrence network. Nodes are positioned linearly along the bottom edge, while curved edges arc above or below to represent connections, with edge weight indicated by line thickness and node group membership encoded through color. The implementation uses the `d3.layout.arcDiagram` API to calculate node positions and arc paths, with D3.js (version 3.5.5) handling SVG rendering and interaction. The visualization reads from a `miserables.json` data file and includes randomized reverse links to showcase the layout's handling of directed edges.

Loading thumbnail…

How D3 Transitions Work, Pt. 2: d3.interpolate with multiple elements

This example demonstrates how D3 transitions animate multiple circles from a shared starting x-position to different ending positions, driven by user-entered comma-delimited numbers. The code uses d3.interpolate to create individual interpolators for each element’s target x-coordinate, then advances them with window.requestAnimationFrame and a timestamp-based progress calculation. It shows circles rendered as SVG elements, with their cx attributes updated each frame until the one-second duration elapses, while a text input and button control the animation trigger.

Loading thumbnail…

Reusable Line Chart v2

This example demonstrates a responsive, multi-line chart that visualizes multiple variables over time, with toggling of individual series via legend interaction. It is built using D3.js v3 and renders to SVG, employing responsive design to adapt to screen size. The chart’s code also includes options for customization, such as chart size, margins, and axis labels, and supports animation through D3’s update and binding mechanisms. The data is loaded from a CSV file, and the implementation follows a modular, reusable chart pattern.

Loading thumbnail…

note test django-nvd3

This example demonstrates a Django web application that renders an interactive chart using the django-nvd3 wrapper, which combines the nvd3 library with D3.js. The visualization pulls data from a tracking demo project and displays it through a custom chart implementation. The code highlights a dependency conflict where newer versions of nvd3 and D3.js cause a TypeError in the tooltip functionality, prompting the developer to downgrade to nvd3 version 1.7.1 with D3.js 3.3.13. The chart is generated via Django template tags and nvd3’s chart-building API.

Loading thumbnail…

Circle Packing layouts

This example displays a grid of circle-packing layouts generated by the D3 v3 `d3.layout.pack` API, each containing a set of equal-sized leaf nodes labeled with letters from A to Z. The layouts use a custom value function that assigns a smaller size to node B, showing how nesting and circle radii adapt to varied initial values. Rendered as SVG with red bounding boxes around each container, the visualization supports click-to-zoom transitions via `d3.interpolateZoom`, animating the view into any selected circle while adjusting label visibility and circle radii.

Loading thumbnail…

Particle Edges Dendrogram

A dendrogram tree visualization uses animated particle edges to display the connections between nodes, with each edge generating and moving colored circles along its path. The layout is computed with `d3.layout.tree`, and the tree structure is derived from a JSON dataset representing word relationships. Particles are created and updated per tick using `d3.timer` and the `d3_glyphEdge.mutate.particle` API, which mutates each edge's `.particles` array based on properties like `.frequency` and `.speed`. The particles are rendered as SVG circles, while the static tree links appear as thin black paths.

Loading thumbnail…

D3.js Drag and Drop, Zoomable, Panning, Collapsible Tree with auto-sizing.

This example demonstrates an interactive, collapsible tree visualization built with D3.js v3, rendered as SVG with smooth animated transitions. It allows users to drag and drop any node (except the root) onto another node to reorganize the hierarchy, while double-clicking, scrolling, or edge-dragging enables zooming and panning across the entire view. The tree layout automatically recalculates its dimensions to fit the available space, and node expansion or collapse is triggered by clicking. The data is loaded from a JSON file (flare.json) using `d3.json`, with layout handled by `d3.layout.tree` and `d3.svg.diagonal` for link paths.

Loading thumbnail…

D3byEX 6.4: Bubble Plot

This bubble plot displays global fertility rates against life expectancy, with each circle sized by population and colored by region. The visualization uses D3.js v3 with SVG rendering, loading data from a CSV file containing country-level statistics. The code builds linear scales for both axes and population-based bubble sizing, while an ordinal color scale maps unique regions to a categorical palette. Axis styling is handled through d3.svg.axis with custom tick and domain presentation.

Loading thumbnail…

D3byEX 5.10: Walking Dead Viewership

A bar chart displays US viewership numbers for each episode of The Walking Dead's fifth season, sourced from a JSON dataset. The visualization uses D3 version 3 to render an SVG graphic, with bars scaled proportionally to viewer counts and episode titles rotated on the x-axis. The code employs `d3.scale.ordinal` with `rangeBands` to position bars, `d3.scale.linear` for the y-axis, and `d3.svg.axis` to construct both left and bottom axes, with custom styling applied to axis nodes.

Loading thumbnail…

Freehand drawing

This freehand drawing application lets users create smooth, colored lines with a mouse, stylus, or finger, using a palette of Colorbrewer Dark2 colors and a trash button to clear the canvas. It maintains all drawing data in a DOM-independent JavaScript object, logging completed lines to the console. Built with D3 v3, it renders strokes as SVG paths via `d3.svg.line()` with basis interpolation, and uses `d3.behavior.drag` to capture pointer movement. Two stacked SVG layers separate the drawing surface from UI controls, preventing accidental marks when interacting with the interface.

Loading thumbnail…

Yahoo Finance Chart Step 5 - Volume Chart

This example presents a financial time series chart for Yahoo stock data, combining an area and line chart of opening prices with an overlaid bar chart of trading volume. The price series includes an exponential moving average line, rendered alongside gridlines. The visualization uses D3.js version 3.5.5 with the d3fc library, specifically `fc.chart.linearTimeSeries`, `fc.series.area`, `fc.series.line`, `fc.series.bar`, and `fc.indicator.algorithm.exponentialMovingAverage`. Data is loaded from a CSV file via `d3.csv`, and the SVG output is generated entirely in the browser.

Loading thumbnail…

Dances with Factors

Dances with Factors animates the prime factorization of integers by arranging circles in nested geometric patterns. Each factor contributes a subgroup of circles, and transitions between consecutive integers show how the arrangement evolves. The visualization is generated from JavaScript that computes prime factors and coordinates for every point, using D3 v3 selections and transitions to draw SVG circles on a linear scale. Controls let the user step through numbers sequentially, pause, or search for a specific value.

Loading thumbnail…

Skills sunburst

This interactive skills sunburst visualization combines a radial hierarchy of technical proficiencies with an overlaid line chart, showing how proficiency in each skill category evolves over time from 1999 to 2013. The sunburst segments, rendered with D3 v3 and SVG, use color intensity to indicate proficiency levels, while hovering over a segment triggers an animated breadcrumb trail and updates the corresponding line graph showing proficiency trends. The visualization uses `d3.selectAll` for mouseover interactions, `d3.transition` for smooth opacity animations, and `d3.svg.axis` for chart axes. The hierarchical skill data comes from a pre-generated JavaScript file (`skillsdata.js`), which is derived from a user-populated Excel spreadsheet, with the sunburst layout and line chart both rendered as SVG elements.