SpaceActuary

Grouped Stacked Bar Chart

This grouped stacked bar chart visualizes population distributions across five U.S. states, broken down by age group and census year (1990, 2000, 2010). The chart uses d3.stack with stackOffsetExpand to show each age group’s proportional share within each state-year combination, with bars grouped by state and colored by age cohort. The SVG rendering relies on d3.csv for data parsing, d3.scaleBand for x-positioning, d3.scaleLinear for the y-axis, and d3.nest for restructuring the data. A custom legend labels each stacked segment directly beside its corresponding bar.

Dec 21, 2017

SANKEY Experiment

A Sankey diagram visualizes the flow of claims between categories and time steps, with node widths and link thicknesses proportional to values. It reads external CSV data containing source, target, and count columns, then constructs the graph using d3.sankey with d3.csv and d3.nest to aggregate duplicate nodes. The SVG rendering includes draggable nodes via d3.drag, hover tooltips showing formatted values, and uses d3.scaleOrdinal with schemeCategory20 for node coloring.

Dec 19, 2017

Drag & Zoom II

This example demonstrates a zoomable and pannable scatterplot with draggable circles. It combines d3-drag and d3-zoom to let users pan the view by dragging on the background or move individual circles by dragging them. The SVG rendering automatically handles hit-testing and coordinate transformations. The code generates 2,000 synthetic data points from a cubic function and displays them with a linear x-scale and inverted y-scale.

Dec 15, 2017

Dual axes line-bar chart

This D3.js v4 example shows a dual-axis line-bar chart comparing two line series with a bar series across five yearly data points. The visualization combines steelblue and crimson lines, overlaid with labeled circles on each point, alongside gray bars on a shared x-axis. The code uses `d3.scaleBand` and `d3.scalePoint` for the x-positions, `d3.scaleLinear` for the separate left and right y-axes, and `d3.axisLeft` and `d3.axisRight` to render them. Data is loaded from a local CSV file and rendered as SVG elements.

Sep 29, 2017

Mini Tables

This visualization displays three groups of time-series data as compact HTML tables. Each table shows yearly values for different variables, with columns for the amount and year-over-year percentage change. The code constructs multiple mini tables using a custom `miniTable()` function and renders them via D3’s `d3.select`, `d3.csv`, and formatting APIs like `d3.format`. Data comes from a local CSV file, and the tables are styled with flexbox CSS to arrange them side-by-side.

Sep 29, 2017

Mini Charts

This example presents a grid of mini charts that compare three metrics over time for three groups (ABC, XYZ, and Total). Each chart renders a sparkline with a highlighted final point, the latest value, and the percent change, using SVG and D3 v4. The code loads CSV data and applies a reusable `miniChart` function with `d3.scalePoint`, `d3.scaleLinear`, and a Catmull-Rom curve via `d3.line`, while formatting numbers with `d3.format`. A second dataset with temperature readings is included but not visualized.

Sep 28, 2017

Inline Sparkline v4

This example embeds three miniature line charts directly into the flowing text of a paragraph, each sparkline visualizing a different measure (amount1, amount2, amount3) from the same CSV data across the years 2010–2015. The first sparkline shows raw counts, the second decimal values, and the third percentages, each with its own number format. The code uses D3 v4 APIs such as `d3.line`, `d3.scalePoint`, `d3.scaleLinear`, and `d3.pairs` to compute changes between consecutive points, rendering the SVG sparklines inline within HTML spans using the `d3.select` and `.call` pattern.

Sep 27, 2017

SVG Postcard

This example generates a postcard-like composition in SVG. It uses placeholder city images from lorempixel.com, embedded as patterns to fill a large rectangle and any circles in the scene. The text "SELECTED" and "TEXT HERE" is placed along a curved path defined by a generated `d` attribute, with a heavy crimson font and a layered text-shadow. The code builds the SVG with d3.v4, using selections, `d3.scaleOrdinal`, `d3.schemeCategory10`, and SVG `<pattern>`, `<image>`, `<textPath>`, and `<path>` elements.

Jun 26, 2017

Drag Slider

This interactive example demonstrates a slider for selecting a hue value from 0 to 180 degrees, dynamically updating the background color of the SVG canvas. The slider track is overlaid with an invisible, stroke-based capture area that uses the `d3.drag()` API to handle pointer events, converting mouse position to a data value via the inverted linear scale. Tick labels are generated using `x.ticks(10)`, and a white handle with a dark stroke marks the current selection. The visualization opens with a brief, animated transition that uses `d3.interpolate` to smoothly move from 0 to 70 degrees, showcasing the slider’s response.

Brush v4

This example demonstrates a brush that snaps to day boundaries after the user releases it. The brush initially captures a selection over a time-scaled axis (`d3.scaleTime`), then on the `end` event, the `d3.brushX` handler rounds the selected dates to the nearest day using `d3.timeDay.round`. If the rounded selection is empty, it falls back to `floor` and `offset`. The brush then smoothly transitions to the snapped selection via `d3.transition` and `brush.move`, rendering the grid as SVG with day and hour ticks.

parallel sliders

This example features a set of draggable sliders that control a parallel-coordinate-style visualization, with each slider’s value mapped to a color using a cubehelix scale. The sliders are implemented with D3’s brush API, and the filled portion of each slider dynamically updates its color and size as the user drags. Built with D3 v3 and SVG, the animation and interactivity respond directly to user input, while the cubehelix color interpolation provides a smooth rainbow gradient across the range.

parallel sliders

Parallel sliders presents six horizontal sliders arranged in two rows, each controlling a value from 0 to 100 and displaying a dynamic color fill. The sliders are implemented with D3.js’s `d3.svg.brush` and a custom slider component, using a cubehelix color scale to map slider positions to a rainbow gradient. As a user drags a slider, an `onchange` callback updates the fill color and width, with the SVG animation responding in real time. The code also includes commented-out transitions using `brush.extent` for potential animated value changes.

Bar Chart

The visualization is a bar chart displaying simulated lognormal claim severity data, with each bar representing an individual sample value. Animated transitions update the bars and a summary table shows computed statistics for total, limited, and excess layers, including current value, mean, standard deviation, and coefficient of variation, across 50 resampling iterations. The chart uses D3 v4's `scaleBand`, `scaleLinear`, `axisBottom`, `transition`, and `tween` APIs for SVG rendering, while the jStat library generates the lognormal samples. Data summaries are formatted using `d3.format`.

Jun 13, 2017

parallel sliders

A row of five independently draggable sliders uses a cubehelix color scale to fill each bar with a continuous rainbow gradient. As a slider handle moves, its bar dynamically changes length and color, while the fill proportion updates in real time. Built with D3.js and SVG, the custom reusable slider component leverages `d3.svg.brush`, `d3.scale.linear`, and the `cubehelix` interpolation plugin to create smooth, animated interactions.

Jun 13, 2017

sliders

This visualization demonstrates interactive sliders built with D3.js, where each slider’s filled portion changes color dynamically as the user drags the handle. The sliders use a brush interaction to capture input, and the fill color is mapped through a custom cubehelix color scale (d3.scale.cubehelix) based on the slider’s current value. The SVG rendering includes horizontal and vertical orientations, with text labels and a clean, minimal design. The code also includes an animated transition example, though it is commented out.

Jun 13, 2017

Donut Transitions v4

This example demonstrates a chained transition that updates a donut chart’s wedge values across three sequential datasets, using an animated tween to interpolate each arc’s start and end angles and outer radius. The visualization starts with seven wedges, morphs them into a single full circle, then multiplies them into three distinct slices, looping the cycle. Built with D3 v4, the code uses `d3.pie`, `d3.arc`, and `transition.attrTween` with a custom `tweenArc` function, while `d3.scaleSqrt` maps data sums to radial extents. The SVG rendering animates paths via `attrTween`, with a `setTimeout` driving the repeating transition.

Jun 12, 2017

Donut Transitions

This example animates a donut chart through a sequence of three datasets, demonstrating how wedges split, translate, and reunite as values change across transitions. It uses D3 v3’s `d3.svg.arc`, `d3.layout.pie`, and a custom `transition.attrTween` to interpolate arc geometry, including inner and outer radii and start/end angles. The code chains transitions with `setTimeout` to cycle through data states, relying on a square-root `d3.scale` to map summed values to radii and `d3.scale.category20` for color. The rendering targets SVG paths, with animation driven by D3’s transition system.

Jun 11, 2017

Arc Tween

The visualization demonstrates smooth animated transitions of arc segments using D3 v4’s `transition.attrTween`. It shows a circular foreground arc that repeatedly updates its angle, while a secondary set of colored arcs animates inward and outward between paired data values. The `d3.arc` generator builds SVG path strings with bound start/end angles, and the tween interpolates the endAngle over 750 milliseconds for the main arc and 1750 milliseconds for the colored segments. Random angle targets drive the main arc, while paired arrays (e.g., `[0, 0.25, 0.4, 0.65, 0.9, 1]`) control the secondary arcs’ expansion and contraction.

Jun 9, 2017

Zoomable Pie Chart

This zoomable pie chart allows users to explore a hierarchical dataset by clicking on arcs to zoom into nested levels, and clicking the center circle to zoom out. The visualization uses D3 v4's partition layout, with arcs representing nested data values from a JSON file. The chart is rendered using scalable vector graphics (SVG) with animated transitions, employing `d3.scaleLinear` for angular scaling and `d3.scaleSqrt` for radial sizing. Interactions trigger custom tween functions to smoothly interpolate arc geometries.

Jun 9, 2017

Pie Chart Update, V

This example shows an interactive pie chart that updates its arc segments when the user selects a fruit type from radio buttons in a form. The chart displays regional fruit counts from a TSV data file, with each region represented by a colored path. The visualization uses `d3.layout.pie` to compute arc angles and `d3.svg.arc` for the donut shape. When a fruit changes, a data-join keyed by region enables smooth transitions via `transition.attrTween` and `d3.interpolate`, animating the arcs as they expand, contract, or disappear.

Jun 5, 2017

Pie Chart Update, II

A donut chart displays two metrics—apples and oranges—for a set of categories. The chart animates between the two datasets when a radio button is selected or after a two-second automatic switch. The code uses `d3.layout.pie` to compute angles, `d3.svg.arc` for the donut shape, and `transition.attrTween` with an interpolated arc function to smoothly update the paths’ rendered angles. Data is loaded from a TSV file with `d3.tsv`.

Jun 5, 2017

pinto-gogol

Three animated curves plot loss development factors from a CSV dataset, showing the change in gross, net, and deductible layers as claims age. The crimson, seagreen, and steelblue lines transition between scaled and unscaled states using `d3.transition` and `d3.line`. A semi-transparent area, built with `d3.area`, highlights the difference between the gross and deductible layers, and a net line fades in to show the layer’s standalone curve. The SVG animation cycles through phases to illustrate the impact of an increased limit factor.

Mar 30, 2017

SVG Image Background

This example shows eight geometric shapes—four rectangles and four circles—arranged in a grid, each filled with a different placeholder image from LoremPixel and outlined with a categorical color from D3’s `schemeCategory10`. The visualization demonstrates how SVG patterns can embed raster images via the `pattern` element and `image` reference. Using D3 v4’s selection and append methods, the code defines a pattern for each shape ID and then applies the pattern as the fill for each `rect` and `circle`, with `objectBoundingBox` units to tile the image evenly.

Mar 28, 2017

Org Bubbles

Org Bubbles visualizes an organizational hierarchy as a force-directed bubble chart. It shows 13 employee nodes connected by parent-child links, with buttons to group or split the bubbles by organizational unit, location, or employee type. The visualization uses d3.forceSimulation with forces for collision, charge, and positioning, while drag events let users select individual nodes. Node colors come from a categorical color scale, and the code loads data from a CSV file and relies on SVG rendering and transitions for animations.

Mar 24, 2017

Chained Transitions

A small multiples chart compares daily temperatures in New York and San Francisco as a smooth line. Clicking a radio button switches the displayed city, triggering a three-stage chained transition: first the shared y-axis rescales to encompass both datasets, then the line and label morph to the new city with a color change, and finally the y-axis narrows to the new city’s range. Built with D3 v4, the visualization uses `transition()`, `axisBottom`, `axisLeft`, and `line()` to sequence these state changes smoothly.

Mar 23, 2017

Music Viz

A single highlighted note travels across a musical staff while the tune "Twinkle, Twinkle, Little Star" plays as a square-wave audio tone. The pitch of each played note determines the note’s vertical position via a D3 ordinal scale mapping clef pitches to y-coordinates. The visualization uses D3 v4 to render SVG elements and animate the note’s position with `requestAnimationFrame`, while the `tones.js` library generates the audio through the Web Audio API.

Mar 10, 2017

stepper example

This example demonstrates a stepped navigation interface with nine clickable links, where each step triggers an animated text message in the SVG below. The code uses d3.js v4 to manage the active and target step states, and `d3.select` and `transition().duration()` to fade the text in and out. The interaction model uses a "target" class to compute the next step via `Math.sign`, supporting bi-directional stepping. Rendering relies on SVG elements and CSS classes for styling and highlighting.

Feb 28, 2017

Group Clustering

This example visualizes clustering patterns in a small dataset where each circle represents an ID with categorical attributes like Location, Group, Class, and Type. Users can click toolbar buttons to group the bubbles by any of these categories, causing the force simulation to reposition clusters around labeled axis points, or return to a single central cluster with “All.” The interactive visualization uses d3.forceSimulation with collide, charge, and positional forces, plus d3.drag for moving individual circles. Data loads from a local CSV file, and circles render as SVG elements with ordinal color scaling.

Dec 21, 2016

Force-Directed Graph

This force-directed graph shows character co-occurrence in Victor Hugo’s *Les Misérables*, using a physical simulation to place related characters close together and unrelated ones farther apart in an SVG visualization. The code uses `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to compute positions, while links are drawn as lines with stroke widths proportional to co-occurrence frequency. Nodes are colored by group using `d3.scaleOrdinal` with `d3.schemeCategory20`, and the data comes from Donald Knuth’s compiled character network, with drag interactions enabled via `d3.drag`.

Nov 2, 2016

fresh block

This example displays the text “Edit the code below to change me!” as a large, blue monospaced message centered within an SVG canvas. The visualization is a minimal starter template for building custom graphics. It uses the D3.js v4 library, directly appending an SVG element to the body and then adding a text node with specified positioning, font size, and fill color. The code provides a basic structural foundation for further interactive or data-driven modifications.

Nov 2, 2016

Clustered Force Layout II

A clustered force layout renders 20 circles in four color-coded groups, with each group clustering around its largest member. The simulation uses a custom `cluster` force to pull nodes toward their group's anchor and a `collide` force with a quadtree to prevent overlapping circles. Built with D3 v3's `d3.layout.force`, circles are drawn as SVG elements with positions updated on each tick event. Custom gravity applies only to the largest node of each cluster, while other nodes repel based on inter-cluster padding.

Nov 1, 2016

SANKEY Experiment

This Sankey diagram visualizes the flow of claims between time periods and categories, using colored, draggable nodes and weighted links to show proportional relationships. The visualization loads external CSV data, which is processed to create distinct nodes and links, and rendered as an SVG using D3.js v3 with custom sankey layout logic. Interactive features include node dragging and hover tooltips that reveal link details with formatted value labels.

Oct 12, 2016

Statistical Summaries

The visualization presents statistical summaries of three data samples, showing each sample’s count, min, quartiles, median, mean, and max as a row with a box plot. It uses D3.js (version 3.5.5) and the jStat library to build a custom `ParamLevelSummary` and `MinimalBoxPlot` function, rendering vector graphics via SVG. Data is loaded from a local CSV file, with each row displaying the count label and a horizontal box plot scaled to the overall parameter domain.

Jul 9, 2016

CSV to JSON

This example demonstrates how to convert flat CSV data into a nested JSON structure using D3’s nesting and mapping functions. It shows the raw CSV text alongside the resulting JSON, grouping records by name and transforming year–amount pairs into arrays for two time-series variables. The code loads `data.csv` via `d3.csv`, coerces numeric columns, then applies `d3.nest()` and `.map()` to reshape the data. Output is displayed in HTML paragraphs using D3 selections.

Jun 17, 2016

exchange rates

A slider shows the daily USD-to-EUR exchange rate over time, with a draggable horizontal line that can be moved to inspect specific values. The visualization plots the data as a line chart, using a cubehelix color scale for a continuous gradient background. It is built with D3.js, including the custom brush, scale, and time-series slider APIs, and renders as SVG. The data comes from the eurofxref-hist.csv file, filtered to show dates from February 2015 onward.

Jun 17, 2016

sliders

Four interactive sliders demonstrate d3.svg.brush with a custom cubehelix color scale. Each slider maps a numerical value to a changing fill color via `d3.scale.cubehelix`, creating a rainbow gradient that transitions along the slider track as the brush extent is dragged. The SVG rendering uses rect elements for the slider bar and background, with a Montserrat font for labels. The code is built with D3 3.5.5 and includes a cubehelix interpolation plugin, showing how brush events can drive continuous color updates.

Jun 10, 2016

sliders

A set of draggable horizontal and vertical range sliders lets a user adjust a value, and each slider’s fill color shifts through a cubehelix color ramp. Built with D3.js version 3.5.5, the sliders use the `d3.svg.brush` API to manage drag interactions, with the brush extent mapped through a linear scale. A separate `cubehelix.min.js` script provides the `d3.scale.cubehelix` color interpolation, which is applied to the slider’s value to produce a smooth, perceptually uniform gradient. The SVG output is rendered directly in the browser, with the slider bars updating live during the drag.

Jun 10, 2016

Statistical Summaries

This example visualizes statistical summaries of three datasets, displaying each group’s count, minimum, quartiles, median, maximum, and mean. Each row shows a box plot of the parameter distribution alongside the sample count, with values formatted to three decimal places. Built with D3.js and jStat, the SVG chart uses a custom `ParamLevelSummary` function and `MinimalBoxPlot` to render the summaries, reading data from a local CSV file.

Jun 3, 2016

Gooey Effect

The visualization demonstrates a "gooey effect," where multiple circles emerge from a central stationary circle and then fall back into it, creating a fluid, blob-like appearance during their transition. The effect is achieved using an SVG filter with `feGaussianBlur`, `feColorMatrix`, and `feComposite` applied to a container group. D3.js v3 handles the rendering and animation, using a force layout (`d3.layout.force`) to manage the movement of the circles, while their positions are updated on each tick. The data consists of a single object with random velocity values, and all circles are initially placed at the center.

May 24, 2016

Zoom to Bounding Box II

This example shows an interactive map of United States states that users can click to zoom into a specific state’s bounding box, with the view smoothly transitioning via zoom transitions. The map renders using SVG paths generated by `d3.geo.path` with an Albers USA projection, and the state boundaries come from TopoJSON data loaded from a gist. Users can also freely pan and zoom with the mouse or touch using `d3.behavior.zoom`, while clicking a state or the background resets the view.

May 24, 2016

State Choropleth

This visualization shows a choropleth map of the United States colored by the margin of victory in the 2012 presidential election, with blue representing Democratic wins and red for Republican wins. It also uses a striped pattern to indicate states without data. The map is rendered with SVG using D3 v3 and the `d3.geo.path` API, with geographic data loaded via TopoJSON and the queue library. A linear color scale maps electoral vote differences, and a d3-legend color legend displays the scale.

May 13, 2016

Force-Directed Graph

A force-directed graph depicts character co-occurrence in Victor Hugo’s *Les Misérables*, with nodes representing characters and links showing shared appearances, based on data compiled by Donald Knuth. The visualization uses d3.v3’s `d3.layout.force` to simulate charged particles and springs, positioning related characters closer together while colors from `d3.scale.category20()` group characters by community. SVG circles and lines render the layout, with link thickness scaled by co-occurrence frequency and hover tooltips revealing names.

May 13, 2016

SVG Stripes

A striped pattern fills a large rectangle, with gray diagonal lines created by a tilted SVG pattern. The example uses D3.js version 3.5.5 to construct an SVG `defs` element containing a `pattern` that rotates 45 degrees, then applies it as the fill for a single `rect` via CSS. The pattern itself is drawn with a simple `line` element, and the rectangle is positioned and sized through D3’s attribute chaining. This demonstrates how to define reusable SVG patterns programmatically with D3.

May 13, 2016

Choropleth Scales

A choropleth map of US county unemployment rates from 2008 uses a quantize scale with a nine-color ColorBrewer scheme. The page includes radio buttons to switch between blue and rainbow palettes, or between quantize and linear scales, both producing a vertical color legend. Built with D3 v3, it uses `d3.geo.albersUsa`, `topojson`, SVG paths, and `d3.legend.color` to render the map and legends. The quantize scale maps rates from 0 to 15% into discrete bins, while the linear scale uses a gradient fill for continuous color.

May 12, 2016

XKCD plots in d3

This example recreates the hand-drawn aesthetic of XKCD comics in D3.js by rendering jagged, slightly distorted line plots and axes. It uses a custom path interpolation function to add jitter to every line, including the axes and arrowheads, while a custom "xkcd" font styles the title and labels. The code generates two mathematical functions (an exponential sine wave and a cosine wave) with `d3.range`, then plots them using `d3.svg.line` with the quirky interpolation. Built with D3 v2 and SVG rendering, the example demonstrates how to bend standard chart elements into a playful, informal visual style.

May 6, 2016

Loss Triangles

The visualization displays an animated "loss triangle" of paid insurance claims, with values shown as text labels plotted by accident year and development age. A checkbox toggles the x-axis between development age and calendar year, causing the labels to slide horizontally across the chart. The SVG is rendered with D3.js, using linear scales, a transition with linear easing and per-element durations, and color brewer sequential palettes for the ordinal scale. Data comes from a CSV file of paid amounts.

May 6, 2016

Inline Sparkline

Inline sparklines embed a compact line chart directly within a paragraph of text, showing a time series of three different measures (amount1, amount2, and amount3) from a CSV dataset. Each sparkline displays six yearly data points, with its own y-axis scale and end-label showing the latest value and percent change from the prior year. The visualization uses D3.js version 3.5, including `d3.csv`, `d3.nest`, `d3.svg.line`, and `d3.scale.ordinal`, and is rendered as inline SVG elements. Data is reshaped from wide to long format before being fed into a reusable `sparkline()` function.

May 4, 2016

Mini Chart

This mini chart shows annual amounts for a single group (ABC) from 2010 to 2015, displayed as a sparkline with points, annotated with year labels and year-over-year percentage change below the axis. It uses D3.js (v3.5.5) with `d3.svg.line` for the line, `d3.scale.ordinal` for the x-axis and `d3.scale.linear` for the y-axis, plus `d3.pairs` to compute the percentage changes between consecutive years. The SVG renders within a fixed full-viewport layout, with Montserrat font and a minimal steelblue/white/gray palette, and data is loaded from `data.csv` via `d3.csv`.

Apr 29, 2016

Scatterplot Matrix Brushing

This example displays a scatterplot matrix of the classic Iris flower dataset, visualizing pairwise correlations among four morphological traits across three species. Brushing any cell highlights the corresponding points in all other scatterplots, while hovering also reveals individual data points. The visualization uses d3.svg.brush, d3.scale.linear, and a category color scale, with a legend generated via d3-legend. Data is loaded from an external CSV file, and rendering is done with SVG circles and axes.

Apr 28, 2016

Walmarts

This visualization shows the geographic expansion of Walmart stores across the United States from 1962 to 2006. An animated slider scrubs through years, revealing store locations as points on a map of US states, alongside a running cumulative count displayed as a filled area chart. The map uses the `d3.geo` Albers projection and renders SVG paths from TopoJSON data, while the slider and area chart are built with `d3.svg.brush` and `d3.svg.area`. The play button triggers the animation, which is driven by a queue of data loading operations.

Apr 28, 2016

Demers Cartogram

This pseudo-demers cartogram visualizes the 2012 U.S. presidential election results by representing each state as a square whose size corresponds to its electoral votes. The squares are positioned near their geographic origins, and their colors indicate whether the state voted Democratic (steel blue) or Republican (crimson). The visualization offers three layout modes—McCann, Demers, and Dorling—and an optional map overlay. Implemented with d3.v3, it uses d3.geo.albersUsa for projection, d3.layout.force for the layout simulation, and d3.geo.path for rendering state boundaries, with data from data.csv.

Apr 26, 2016

Walmarts

A slider lets viewers scrub through the opening dates of Walmart stores across the United States, revealing the retailer's geographic expansion over time on a map of the country. The map uses `d3.geo.albers` for projection and `d3.geo.path` to render state boundaries from TopoJSON. Points marking each store location are driven by a `d3.svg.brush` slider, with a play button to animate the sequence. The data comes from a TSV file listing each store's coordinates and opening date.

Apr 25, 2016

Bugle Charts

Bugle charts display hierarchical distributions across multiple groups and years, with each cell containing a vertical axis where colored shapes show prior, actual, and expected values as trapezoids with animated transitions. The visualization includes a "Randomize" button that regenerates the underlying data, triggering smooth SVG transitions via d3.js v3. Rendered with SVG elements and ordinal/linear scales, the chart uses d3.svg.axis for axes, d3.svg.line for path outlines, and a dashed line to represent totals. Each group's cell is positioned using d3.scale.ordinal for x and y coordinates, with y2 scales dynamically adjusting to variance ranges.

Mar 28, 2016

Bugle Charts

Bugle charts display eight categories across ten years, where each cell contains a set of overlapping line segments that compare prior, actual, and expected values. The chart animates and randomizes its data when the user clicks the "Randomize" button, recalculating the variance domain and redrawing the visualization using D3 v3’s scales, axes, SVG paths, and transitions. The implementation builds grid-based cells with ordinal scales for years and groups, plus a linear scale for ratio values, rendering the shapes with the `d3.svg.line` function.

Mar 28, 2016

Demers Cartogram

This visualization shows a pseudo-Demers cartogram of U.S. adult obesity rates, with each state represented by a square whose area encodes the prevalence of BMI ≥ 30. The squares are initially placed at their geographic centroids and then shifted via a d3.layout.force simulation with custom gravity and collision functions to avoid overlap while preserving approximate locality. The code uses d3.geo.albersUsa() for projection and d3.geom.quadtree for collision detection, rendering as SVG rectangles. Data comes from CDC 2008 values embedded as an array, with state centroids loaded from an external JSON file.

Mar 24, 2016

Grid Snapping

An interactive grid of color-changing rectangles represents a dataset of yearly groups, with brushing to select and highlight cells. The visualization uses a custom brush component in D3.js to snap selections to the grid of ordinal scales, then triggers a transition that animates the selected rectangles through a red-to-blue color change with a bounce easing effect. The code builds the SVG from scratch, defining ordinal scales for years and groups, and handles brush events to invert the selection coordinates back to data values.

Mar 21, 2016

Symbol Map

A symbol map of the United States encodes each state’s population as the area of a translucent steelblue circle centered on the state’s centroid, with larger circles for more populous states like California and Texas. The map uses `d3.geo.path` to render state boundaries from TopoJSON and a square-root scale to map population values to circle radii. Population centroids and demographic data come from a separate GeoJSON file, and the code sorts features by population before drawing symbols with `topojson` and D3 v3.

Mar 18, 2016

Demers Cartogram

A pseudo-Demers cartogram maps U.S. state centroids to squares, sized by adult obesity rates from CDC 2008 data. The D3.js (v3) visualization uses a force-directed layout with a collision handler and gravity to reposition each square as close as possible to its original location. The `d3.layout.force` API and a quadtree-based `collide` function manage the non-overlapping arrangement, preserving geographic locality while breaking spatial adjacency.

Mar 18, 2016

Trapezoid Charts 2

This example displays a trapezoid chart that visualizes year-over-year comparisons of prior, actual, and expected values. Users can randomize the underlying data or toggle between showing raw values and variance-only differences from the expected baseline. The visualization uses D3.js v3 with SVG paths to draw trapezoids with linear interpolation, transitioning smoothly over 1000 milliseconds via D3’s transition method. Axis scales are ordinal for years and linear for values, adapting their domains based on the toggle state.

Trapezoid Charts 2 with Total

This interactive D3.js (v3) visualization displays yearly data as animated trapezoid charts, where each shape compares prior, actual, and expected values. Users can randomize the underlying data or toggle between showing raw values or variance-only (actual minus expected) through on-screen buttons. The SVG-rendered chart includes dashed total variance lines and axis outlines, with transitions smoothly animating shape changes via `d3.svg.line` interpolation and ordinal/linear scales. The block builds on SpaceActuary's earlier trapezoid chart variations, using random data generated in the browser.

Trapezoid Charts

This example shows a group of trapezoid-shaped bar charts representing yearly data across three values: prior, actual, and expected. A button triggers a randomize function that regenerates the data and animates the transitions over one second. Each trapezoid’s fill color changes to crimson or seagreen depending on whether the actual value exceeds the expected value. The visualization uses d3.v3 with SVG paths, a linear scale for the y-axis, an ordinal scale for the x-axis, and d3.svg.line to construct trapezoid geometries.

Latin America Economic Growth Trend

This slopegraph displays the change in GNI per capita (PPP) for Latin American countries between 1980 and 2010, comparing expected versus actual values from a CSV file sourced from the World Bank. Each country is represented by a line connecting its expected value on the left axis to its actual value on the right axis, with labels showing both figures. The visualization uses D3 v3 with SVG rendering, employing linear scales for both axes and D3’s data join to append lines and text elements. The chart title and footer are also rendered as SVG text.

Donut-Pie Chart

This donut-pie chart combines two D3 v3 pie layouts to show hierarchical proportions of issue statuses: the outer donut ring displays the current status totals, while the inner pie wedges break down each prior status within those totals. Both layers share an ordinal color scale mapping statuses—New, Open, Reopened, Closed—and use `d3.svg.arc` for rendering SVG paths. Data is loaded from a CSV file and processed with `d3.nest` and rollup to aggregate counts by current status before sorting.

Jan 12, 2016

Mini State Grid

A compact tile grid maps the 50 U.S. states into an ASCII-art layout, with eight states highlighted in maroon to indicate a preselected subset. Hovering over any tile reveals its postal abbreviation via a tooltip. The code embeds state coordinates directly as text, then parses them to position square SVG rectangles using D3’s data join. It uses `d3-tip` for mouseover interactions, with hardcoded `selectedStates` and no external data file.

Dec 15, 2015

Non-negative Distributions

This example visualizes non-negative probability distributions, including gamma, lognormal, Pareto, and Weibull. It displays both probability density functions (PDFs) and cumulative distribution functions (CDFs) side-by-side, with each distribution represented by a unique color and animated via SVG. The code uses d3.js for scales, axes, line generation, and brushing, alongside jStat to compute distribution PDFs and CDFs. An interactive brush allows selecting a range on the x-axis, enabling dynamic exploration of the distributions. The visualization is built with Blockbuilder and rendered using SVG animations.

Dec 14, 2015

un-nest

This example demonstrates a data transformation workflow using D3.js. It loads tabular data containing FIPS codes, population totals, and Hispanic population percentages for multiple census years, then nests the records by year. A custom function unnests the data, flattening the hierarchical structure back into individual records while preserving the parent year key. The code uses D3's `d3.select`, `d3.tsv`, and `d3.nest` APIs to handle SVG rendering, file parsing, and data grouping, with the unnested result logged to the console.

Dec 4, 2015

Distributions 3

This example recreates Wikipedia’s gamma distribution plots, showing both the probability density function (PDF) and cumulative distribution function (CDF) for a negative binomial distribution, parameterized as a Tweedie distribution. The left panel plots the PDF and the right panel plots the CDF for the same distribution, using two separate linear scales. The code uses D3.js to build the SVG chart and axes, jStat to compute the PDF and CDF values, and d3-legend to add a color-coded legend with the distribution’s parameters.

Dec 1, 2015

Distributions

Two side-by-side plots compare the probability density functions and cumulative distribution functions for six Gamma distributions with varying shape and scale parameters. The left panel displays PDF curves, while the right panel shows the corresponding CDFs, with a shared x-axis and distinct y-axes. The visualization is rendered as SVG using d3.js for chart construction, jStat for computing Gamma distribution values, and d3-legend to generate a color-coded legend identifying each parameter set. Data is sampled at 0.001 intervals across the distribution range to produce smooth lines.

Nov 28, 2015

Loss Limiting

This visualization displays the results of a Monte Carlo simulation that models losses subject to a cap or limit. Each vertical bar represents one simulated scenario, which combines a Poisson-distributed number of individual gamma-distributed losses. The chart separates each bar into two stacked segments: a light blue portion shows the capped loss amount, while a darker blue segment shows the excess over the cap, making the effect of the loss-limiting mechanism immediately visible. The bars are sorted by total loss, and a line traces the uncapped total. The code uses the `jStat` library for sampling from gamma and Poisson distributions and D3.js for rendering the SVG output.

Nov 28, 2015

Drag + Zoom

This example demonstrates how to combine drag and zoom interactions on an SVG canvas. A grid of lines serves as a background, and individual dots can be dragged by clicking on them, while panning occurs when dragging the background; the mousewheel controls zooming. The code uses d3.behavior.drag and d3.behavior.zoom, with stopPropagation to prioritize dragging over panning. Data is loaded from a TSV file containing x and y coordinates for each dot, rendered as SVG circles that turn red while being dragged.

Nov 2, 2015

Challenger

The Challenger visualization plots shuttle launch temperature against O-ring damage, drawing on the widely shared o-ring.txt dataset. It uses d3.csv to load the data, then maps temperature and damage values onto linear scales. The scatter plot is rendered as SVG circles, with their x and y positions computed by the d3 scale functions and the chart axes drawn via d3.svg.axis.

Sep 10, 2015

Gist ed9f5cb822cdadb5216c

A normal probability density curve animates from a flat baseline into a bell-shaped distribution on click. Each click repositions the curve’s mean to the mouse’s x-coordinate, with the area under the curve filling pink while the outline stays black. The code uses jStat to generate PDF values across a fixed domain, then d3.svg.area and d3.svg.line with basis interpolation to draw smooth shapes. Transitions with `.delay()` and `.duration()` animate the path’s `d` attribute, and the svg’s click event drives the updates.

Dec 23, 2014

Pension Waterfalls

This interactive visualization displays the unfunded pension liability of the Texas Teacher's Retirement System from 1994 to 2014 using a waterfall chart. Each year’s liability is broken down into components like investments, benefits, and contributions, with cumulative effects shown through animated transitions. The visualization uses `d3.scale.ordinal` for axes, `d3.svg.axis` for rendering, and `d3.csv` to load the data. Radio buttons allow users to toggle between three views: changes by type, changes by sign, or the year-end total. The code relies on D3 v3 and ColorBrewer for color schemes.

Dec 21, 2014

Bar Chart Transitions - Positive to Negative

Two bar charts animate the sign flip of an array of numerical data, with the bars passing through the horizontal zero axis. The example contrasts two easing strategies: a single cubic-in-out transition that makes bars appear to "float" across the axis, and a double transition using cubic-out then cubic-in to explicitly collapse bars to zero height before growing them to their new magnitude. Built with D3 v3, it uses SVG rectangles, a baseline line, and the `transition().duration().ease()` API for animated attribute updates.

Dec 2, 2014