Tell us what works and what could be better. We read every submission.
@alexmacy·67 public vizzes
This example animates a transition between U.S. state shapes and a Voronoi diagram generated from state capitals, while ranking states by area. A hidden SVG renders state polygons, which are then captured via html2canvas and analyzed with Canvas `getImageData` to compute each state’s pixel area before and after the transition. The visible map uses d3.voronoi and d3.geoAlbersUsa, with d3 transitions morphing polygon points and updating a sorted list of area differences. Color scale reflects proportional area changes.
This example demonstrates multiple interactive SVG charts that can be added, repositioned, and resized by dragging their edges, corners, or bodies. Each chart renders a Voronoi diagram of 200 randomly generated points, and mouse movement highlights the cell containing the cursor using `voronoi.find()`. A "Snap" button tiles all charts to fit the screen. The code uses d3.v4’s `d3.voronoi`, `d3.drag`, and `d3.transition` to handle the geometry, user interactions, and smooth resizing animations.
Two animated bars compare the average execution duration of identical array multiplication tasks in vanilla JavaScript and turbo.js, with a slider controlling the test array length from 1e1 to 1e7 and buttons to start, stop, or reset the benchmark. The SVG chart, built with d3.v4, updates each animation frame as the tests run, displaying the cumulative mean duration per iteration and the iteration count. The vanilla test uses a standard `for...in` loop over a plain array, while the turbo.js test processes its allocated data buffer through a GPU kernel via `turbojs.run`, with results rendered as horizontal rectangles whose widths scale to the measured milliseconds.
A harmonograph draws a continuously evolving parametric curve on a Canvas element, with four adjustable oscillators controlling the x and y coordinates. Each oscillator has sliders for frequency, damping, amplitude, and phase rate, plus a phase-reset button. The animation loop uses `requestAnimationFrame` to redraw the curve each frame, applying damped sine functions that fade over time. The code uses the Canvas 2D API's `getContext`, `moveTo`, `lineTo`, and `stroke` methods to render the intricate, slowly shifting patterns.
Rhodonea curves, also known as rose curves, are drawn as animated red line tracings on a white canvas. Two sliders control integer parameters *a* and *b*, and the curve morphs smoothly between parameter combinations via a tweening function. The code uses the Canvas 2D API with `beginPath`, `lineTo`, and `stroke` to render 7200 computed points, where each point combines sine and cosine terms scaled by the window size. The animation runs via `requestAnimationFrame`, and sliders update the displayed parameter values.
Microphone input drives a real-time canvas animation that renders the audio waveform as a cluster of overlapping red ellipses centered on screen. Each sample in the time-domain buffer becomes one ellipse, with its radii and rotation derived from the sample’s amplitude and position. The visualization continuously redraws using `requestAnimationFrame`, clearing the canvas with a black fill each frame. It uses the Web Audio API’s `AnalyserNode` and `getByteTimeDomainData` to capture live audio, then draws ellipses via Canvas 2D’s `ellipse` method.
The visualization listens to the computer’s microphone and renders the live audio buffer as a field of rotating ellipses centered on the canvas. Each ellipse’s size reflects the sample’s amplitude, while its rotation angle corresponds to the sample’s position in the buffer. It uses the Web Audio API’s `AnalyserNode` to capture time-domain data, and the Canvas 2D API’s `ellipse()` method to draw the shapes. Unlike an earlier version, it removes any amplitude threshold, so all samples are drawn, with a thinner stroke to compensate.
This visualization uses the computer’s microphone as its data source, drawing the live audio waveform as a series of concentric, rotating ellipses on a Canvas. Each ellipse corresponds to a sample in the audio buffer, with its size scaled logarithmically via `d3.scaleLog` and its rotation based on the sample’s position in the buffer. The code uses the Web Audio API’s `AnalyserNode` to capture time-domain data, then redraws the entire scene every animation frame with `requestAnimationFrame`. The result is a dynamic, red-on-black display that reacts in real time to sound volume and pitch.
The visualization displays the live audio input from the user’s microphone as a bright, red radial line that continuously rotates and pulses around a central point. It shows the real-time waveform of the audio buffer, with the line’s radius reflecting the amplitude of each sample. The code uses d3.radialLine with a curveBasis interpolation to draw the path on a Canvas element, while the Web Audio API’s AnalyserNode captures the time-domain data via getByteTimeDomainData. Animation is driven by requestAnimationFrame, and the canvas is cleared each frame with a white fill.
This example visualizes live microphone audio as a dark, glowing red radial line that pulses and distorts in response to the sound’s waveform. It listens to the user’s audio input and draws the time-domain buffer as a circular, smooth curve using d3.radialLine with a curveBasis interpolation. The visualization runs on a Canvas 2D context, updating each animation frame via requestAnimationFrame, and relies on the Web Audio API’s AnalyserNode to capture the audio data.
A real-time audio spectrum analyzer renders live microphone input as a field of dots on a canvas. Each dot represents a frequency bin, with its vertical position mapped to amplitude via d3.scaleLinear and its color transitioning from white to red based on intensity. The visualization uses the Web Audio API’s AnalyserNode to capture frequency data, while d3.js scales the x and y coordinates. Animation runs continuously through requestAnimationFrame, drawing translucent overlays to create a fading trail effect.
This visualization presents a real-time audio spectrum analyzer that animates a canvas of colored dots. It uses the Web Audio API to capture microphone input, and then d3.js scales map frequency data to screen coordinates and color values. Each frame, the code reads frequency data using `analyser.getByteFrequencyData`, then draws fading circles to create a dynamic, trailing effect. The visualization displays the raw frequency amplitude, with low values shown in black and higher amplitudes in red, rendered as a continuously updating canvas animation.
This interactive demo visualizes additive synthesis, where up to ten sine waves are combined to produce a single complex tone. Each wave has individual controls for frequency, amplitude, phase, and offset, with checkboxes to mute specific oscillators. The visualization displays the compound wave in red alongside the individual component waves, rendered as SVG paths animated in real time. The audio engine uses Web Audio's createPeriodicWave() method to generate the composite tone from a Fourier series populated by the oscillator values, with phase offsets handled via 2D rotation. The "Random Wave" buttons generate arbitrary combinations of frequencies, amplitudes, and phase offsets.
Interactive canvas animation visualizes compound radial waves as overlapping sine waves emanating from a central point. Users control frequency and amplitude for each of three oscillators via sliders, with toggles for showing the compound wave and individual waves. The animation uses Web Audio API to synthesize sound corresponding to the wave frequencies, with sweep and shuffle features for exploring wave interactions.
A canvas-based visualization shows 100 particles moving with random velocities, their positions defining a Voronoi diagram whose cells are computed in real time. Each cell contains its largest possible inscribed circle, drawn with a light gray fill, while the cell boundaries and particle centers are also rendered. Users can click and drag any particle, causing its Voronoi cell to follow the pointer and the inscribed circle to update; the active cell is highlighted in red. The animation runs via d3.timer, with particles bouncing off the canvas edges and exhibiting slight random jitter.
A Voronoi diagram partitions the screen into 100 cells, each containing a black point. Inside each cell, a grey circle is drawn using a brute-force algorithm that finds the largest circle fitting within the convex polygon. The points and circles drift and bounce around the SVG canvas, causing the Voronoi cells to continuously update. Dragging any polygon with the mouse moves its corresponding point and highlights the active cell in red.
This example uses tracking.js’s Viola-Jones face detection to turn a webcam feed into a playful volume control. As the user moves their head closer to the camera, the detected face size increases, and a d3.v4 canvas animation maps that size to a rising volume level, with the current amplitude visualized in real time. The larger the face appears in the frame, the louder the volume—if it's too quiet, you just move your head closer. Built with d3.v4 and animated on canvas, this MIT-licensed gist demonstrates a simple, interactive computer-vision-driven interface.
A Lissajous curve is drawn on a canvas as a continuous, animated line whose shape changes based on two frequency parameters, a and b, adjustable via sliders. A checkbox enables a slow phase rotation, causing the curve to evolve over time. The visualization uses the Canvas 2D API with `requestAnimationFrame` to redraw the curve each frame, calculating points from sine functions of the scaled parameters and an offset. The rendering clears the canvas with `fillRect` and strokes the path with a thin line, showing the parametric relationship between the two frequencies.
Two adjustable sliders set the frequencies of two individual waves, which are drawn as thin white lines. A red line plots their compound sum along a horizontal axis, while a green radial line wraps the same compound wave around a circle. The visualization uses d3.line and d3.radialLine, with an animated transition between radial configurations as the compound wavelength changes, computed via the least common multiple of the two frequencies.
Three slider-controlled frequencies generate individual sine-like waves and their compound average, rendered as layered polylines on a black canvas. The visualization computes the least common multiple of the three frequencies to determine the compound wave’s full period, which can reach over a million samples for certain combinations. Individual waves appear in gray, while the red compound wave shows their combined effect. The code uses D3 v4’s line generator with a monotone curve, canvas rendering via `getContext("2d")`, and `d3.easeSinInOut` for wave shape calculation.
Two waveforms, each generated by applying a different D3 easing function to a sawtooth wave, are drawn as dashed gray lines and summed into a solid red wave. Drop-down menus select the easing functions and the phase offset speed, while a button starts and stops animation and audio playback. The code uses D3 v4’s `d3.line`, `d3.timer`, and `d3.scaleLinear`, and the Web Audio API to generate and loop the sound, with a circle marker tracking the summed wave’s value.
This interactive Web Audio Sampler visualizes audio waveforms as SVG paths, with a main focus wave and a smaller context wave for navigation. Users can load audio files, then brush and zoom on the main wave to select portions, apply fade-in/out effects using D3 v4’s native easing functions, or add delay effects with adjustable intervals. The interface also supports playback, looping, and clearing cue points, with red position markers indicating playback location.
This visualization tracks the cost basis of stocks by brushing a range chart to recalculate hypothetical $1 purchases over a selected time period, with multiple stock price lines overlaid on a main chart. Hovering or playing animates the lines while attached audio oscillators fluctuate with the stock data, and users can add custom tickers and adjust sound waveforms and colors. The code uses D3 v4 scales, axes, and `d3.brushX`, fetching historical price data from Yahoo Finance via a CORS proxy, and renders SVG paths with an animated playback and mouse-sensor interaction.
This interactive visualization renders the combination of three sine waves as a single radial waveform, where the amplitude at each angle is the sum of three frequency contributions. The resulting compound wave can span hundreds of thousands of points, so the rendering uses Canvas 2D API directly with dynamic line width adjustments based on complexity. Three HTML range inputs control the frequencies, and the compound wavelength is computed via least common multiple calculations. A "Save This Wave" button generates a shareable URL containing the current frequency values, and refreshing the page randomly initializes the sliders.
This chart compares daily average temperatures in New York and San Francisco over four months. It uses a bivariate area chart with clipping to alternate colors: the area where New York is warmer than San Francisco is filled in green, while the area where San Francisco is warmer is filled in red. The SVG visualization is built with D3 v4, using a clipped area path to switch fill colors based on the sign of the temperature difference, a technique with roots in William Playfair’s 1786 work. The data is loaded from a TSV file with date, New York, and San Francisco temperature columns.
This interactive visualization demonstrates smooth transitions between dozens of map projections using two dropdown menus and a slider. Built with D3 v4 and d3-geo-projection, it displays world countries as SVG paths and allows users to morph between any two projections by adjusting a slider, with the transition interpolating projection parameters in real time. The map can also be rotated by clicking and dragging. The visualization includes a graticule overlay and uses a dark land fill with white boundaries, set against a light background. Users select a starting and ending projection from dropdown menus, then use the slider to manually control the morphing animation, with drag-to-rotate adding an interactive 3D feel to the orthographic and other projections.
This example demonstrates smooth animated transitions between 40 map projections of world landmasses. A dropdown menu allows you to select any of the projections, including Aitoff, Albers, Mollweide, and Winkel Tripel. The visualization continuously cycles through random projections, with each transition interpolating the geographic paths. The map is rendered in SVG with a graticule, sphere outline, and land areas from TopoJSON. D3’s geo-projection plugin provides the projections, and the transition is adapted from Mike Bostock's original block to run perpetually.
A collection of Voronoi polygons fills the screen and repeatedly sorts itself by area along a logarithmic horizontal scale, while each polygon’s fill color shifts according to its size using a randomly selected D3 sequential color scheme. The animation uses d3.voronoi to compute polygon shapes, d3.scaleLog for both positioning and color mapping, and d3.transition with timed delays to slide polygons into sorted order, recalculate their geometry, and fade to new colors every six seconds. The rendering is SVG paths with partial fill opacity and black strokes.
A tooltip follows the cursor across a grid of thin steelblue lines, dynamically repositioning itself so it never clips at the edges of the 960-by-500 SVG viewport. The black, white-bordered tooltip displays the mouse’s x and y coordinates, fading in and out via d3 transitions. Built with D3 v4, the code attaches mousemove and mouseout listeners to the SVG, calculates adjusted left and top positions based on cursor proximity to the viewport’s center, and uses `d3.event.x` and `d3.event.y`. Clicking the tooltip triggers a brief orange flash overlay.
This animated SVG visualization shows the history of U.S. presidential elections from 1789 onward, with each state’s electoral votes represented by a colored block arranged in a grid. The blocks are colored by the winning party (Democratic-Republican, Federalist, Other) for each election year, and the chart updates with a smooth transition as the user steps through time. Built with D3 v4, it reads from the `elec.csv` dataset and incorporates an avoidant tooltip that follows the cursor, displaying detailed information about each state’s vote counts and percentages when hovered. The animation cycles through election years, highlighting the winning party in each state.
This visualization uses the Crossfilter library with D3.js v4 to explore a dataset of over 3 million flights through four linked bar charts showing time of day, arrival delay, distance, and date. Users can brush any chart to filter the flight list below, which updates all other charts and the selection count via crossfilter’s dimensions and groups. The charts use `d3.scaleLinear` and `d3.scaleTime`, with bar charts rendered as SVG and brushed ranges applying crossfilter filters. Data is loaded as CSV from a GitHub Pages-hosted JSON file.
A hallway constructed from four gradient-filled polygons shifts its vanishing point to follow the mouse. The D3 v4 code uses `d3.scaleLinear` and polygon `attr` transitions to animate the perspective. A second mode uses the WebGazer.js library with `clmtrackr` facial tracking, mapping averaged eye coordinates through `scaleX` and `scaleY` to control the viewpoint via a webcam canvas overlay.
This example demonstrates a brush-style slider for selecting a numeric range from 0 to 100, displaying the current selection as two numbers above the axis. Built with D3 v4, it uses a `d3.brushX` brush on an SVG element with a `d3.axisBottom` scale. The brush’s extent is initialized to [20, 50] via `brush.move`, and the `brushed` event handler retrieves the selection using `d3.brushSelection`, then maps it back to the scale with `x.invert` to update the displayed values. The rendered output is an SVG axis with a movable brush handle, serving as a filter for downstream charts.
This visualization combines a Voronoi diagram with a force-directed graph layout, but omits both the nodes and links for a purely polygonal aesthetic. Using the Les Misérables character co-occurrence dataset, the simulation positions the characters while a D3 v4 Voronoi tessellation partitions the space into colored cells based on their locations. The polygons are semi-transparent, with colors mapping to character groups, and the graph updates on every tick of the force simulation as the underlying node positions shift. The nodes and links are not rendered, leaving only the dynamic Voronoi cells—which shift and deform as the simulation runs—to reveal the underlying structure and group clusters. Users can drag the (invisible) nodes, causing the cells to rearrange accordingly.
This force-directed graph visualizes character co-occurrence in Victor Hugo’s *Les Misérables*, with a Voronoi overlay added to the classic D3 example. A physical simulation of charged particles and springs positions related characters closer together, while the Voronoi tessellation partitions the space around each node, so that any point in the plane can be associated with the nearest character. This makes it easier to select and drag nodes without having to click directly on them. Each character is drawn as a small circle colored by group, with translucent Voronoi cells and gray links representing co-occurrence strength. The visualization uses d3.v4, renders to SVG, and was forked from Mike Bostock’s Force-Directed Graph. Drag any node to reposition it; the simulation and Voronoi cells update live. Data based on character co-appearance in Victor Hugo's *Les Misérables*, compiled by Donald Knuth.
This force-directed graph visualizes character co-occurrence in *Les Misérables*, using a D3 v4 simulation to position related characters closer together. An invisible Voronoi overlay is applied over the nodes, so clicking anywhere in the diagram selects and drags the nearest character, rather than requiring a precise click on the node. The graph is rendered as SVG with colored circles for characters and gray links for co-occurrences, and the Voronoi polygons are hidden to improve the dragging experience.
Three radial axes extend from a central point, with colored bezier curves linking positions along the axes. Each curve represents a link between two nodes, with its thickness encoding a value range and its color encoding a group membership. The visualization uses D3 v4’s SVG rendering and the custom `d3.hive.link` function to draw the curved links. Axes are positioned with `d3.scalePoint`, radii with `d3.scaleLinear`, and colors are assigned via `d3.scaleOrdinal` with `d3.schemeCategory20c`.
This visualization demonstrates the progressive audio distortion of Alvin Lucier’s *I Am Sitting in a Room* by repeatedly applying delay offsets to a waveform. It displays the original audio as a static context wave and a zoomable focus wave, with a red position indicator tracking playback. Users trigger each effect step via buttons, while a brush and d3.zoom enable panning and scaling. Built with d3.v4 and the Web Audio API, it renders SVG paths from decoded audio data and animates the waveform as the effect layers copies of the track.
This example generates an audio waveform from scratch by combining four different waves—elastic, sine, square, and triangle—whose ratios change based on mouse position, affecting the timbre. The waveform is rendered as an SVG path using `d3.line` with `d3.curveMonotoneX`, while audio is produced via the Web Audio API. Each wave is derived from D3 easing functions: `d3.easeElasticIn`, `d3.easeSinInOut`, `d3.easeLinear`, and `Math.round` for the square wave. Labels show the current percentage mix of each wave.
A Web Audio Theremin lets a user control pitch and volume by moving the mouse vertically and horizontally, with a circular cursor tracking the pointer. An oscilloscope displays the live waveform, while a frequency ticker records recent pitch history as a filled area. The code uses D3 v4 for SVG rendering, transitions, and scales, alongside the Web Audio API's `OscillatorNode`, `GainNode`, and `AnalyserNode` to generate and visualize sound.
Two audio waveforms, rendered as black lines on an SVG, visualize the phase-shifting technique from Steve Reich’s *Come Out* and *It’s Gonna Rain*. The top waveform shows the original track, while the bottom one offsets the second channel by a user-selected millisecond delay, creating repeating phase patterns. Controls let the viewer load either piece, step the offset manually, reset it, or play the sound while a red rectangle tracks playback position. The code uses D3 v4’s `d3.line` and `d3.scaleLinear` to draw the waveforms, and the Web Audio API’s `AudioContext` and `BufferSource` to manipulate and play the audio data.
This interactive Web Audio sampler loads audio files from a GitHub repository or the user’s local machine, displaying the waveform as an SVG path rendered with d3.line. Users can click the timeline to start playback, shift-click to place up to nine custom cue markers, and use number keys to jump to cues. The code uses d3.v4 for scales, event handling, and transitions, while the Web Audio API handles audio decoding, buffer sources, and looping. A red position line and hover line animate to show playback progress, with looping controlled by a checkbox.
This interactive audio sampler displays a waveform of an imported WAV file and divides it into eight equal sections. Users trigger playback from any section by pressing the corresponding number key or touching the waveform on mobile devices. A red line animates across the waveform to show playback position while the active section highlights in blue. The visualization uses d3.v4 for SVG rendering, transitions, and scales, alongside the Web Audio API for audio decoding and playback. A stop button resets the playback position and highlights.
A thousand points generated with d3.randomNormal are grouped into five clusters of nearly equal size, shown as colored lines radiating from each point to its centroid, with numeric labels displaying each cluster’s population. The animation cycles through Lloyd’s algorithm, recentering centroids and trading points between adjacent Voronoi cells—computed via d3.voronoi—until deviation stabilizes or reaches zero. Controls start and stop the iterative process, which runs asynchronously with d3.timeout and transitions.
This dashboard visualizes U.S. presidential history using a sortable data table, stacked single-line row charts, and interactive filters. It displays party affiliations, years in office, and presidential timelines, with the top row chart resizing based on the selected time period. Bars on both charts fade when outside the selected time period or if their party is not selected. The visualization uses D3.js and Crossfilter to enable brushing on the timeline and filtering by political party via checkboxes, with data rendered as SVG. This version is written in ES5 for broader browser compatibility.
A visualization compares sorting algorithms by animating 50 shuffled bars in D3 v4 with SVG transitions. Users select Merge, Insertion, Selection, Bubble, or Bogosort, and each step highlights elements being tested or moved in red while counting steps. The code uses D3 scales, timeouts for pacing, and transition-based re-positioning, with shuffle and reset controls.
This interactive visualization uses k-means clustering and Lloyd’s algorithm to relax a Voronoi diagram, normalizing the dispersion of 20,000 random points across 100 polygons. As the animation runs, each polygon’s center moves toward the centroid of its assigned points, equalizing polygon populations over successive steps. The SVG rendering uses D3 v4’s `d3.voronoi` for polygon generation, with color scaling from white to black indicating point density per cell, and text labels showing live counts. Buttons control start, stop, and redraw actions, while deviation statistics update in real time.
This visualization shows the rate of false alarms (calls classified as 'No Merit', 'Gone on Arrival', 'Unable to Locate', 'Cancelled', or 'Duplicate') for San Francisco neighborhoods from 2005 to 2016. Animated over time, it displays a choropleth map of the city divided into neighborhoods, colored by the annual false alarm rate, with blue dots marking SFFD fire station locations. The animation reveals a noticeable increase in false alarms toward the end of the period, particularly in 2014-2016. The data was derived from SF OpenData and processed using Spark SQL.
Randomly generated points form a Voronoi diagram of black polygons with white strokes, shaded using a color scale based on polygon area. The animation cycles through two phases: first, the polygons slide vertically into sorted order by area using a log scale, then they transition back to their original positions while recomputing the Voronoi cells and updating their fill colors from a randomly selected sequential color scheme. The code uses d3.voronoi, d3.polygonArea, and d3.scaleLog to drive the transitions with d3.transition.
This interactive visualization lets users draw freehand lines or dots on a rotating canvas, producing spiral-like patterns whose appearance changes with speed. A vertical slider controls revolutions per minute, a color palette selects stroke colors, and radio buttons toggle between line and circle draw styles. The code uses D3 v4 transitions with a linear easing function to animate the SVG group’s rotation, while drag events append polyline or circle elements to the rotating group.
A polygon rotates continuously on a turntable-style backdrop, cycling through a sequence of geometric shapes while colored dots and connecting lines trace the path of each vertex between shapes. A vertical slider controls the rotation speed, displayed as revolutions per minute, with the shape pausing when the slider is set to zero. The animation relies on the custom d3-shape-tween library to interpolate between polygons of different vertex counts, adding points along edges as needed, and draws blue "wire" lines from old vertices to new ones to clarify the transition.
This animated visualization transitions U.S. state boundaries between their geographic shapes and Voronoi cells computed from state capitals. Using d3.v4 and SVG, each state polygon tweens between its projected geographic outline and its Voronoi cell, with a second border layer appearing in red during transitions to highlight the differences. Colors, strokes, and capital points shift as the shapes morph, with a custom shape-tweening function that distributes points along each side of the destination shape to avoid rounded or skipped corners. A known rendering-order bug causes some borders, like where "New Wyoming" overlaps old Nebraska, to be hidden during the transition.
Hover over a US state to flip it horizontally, and press the Reset button to spin all states at once. Built with D3 v4, this SVG animation applies a custom flip effect by mirroring polygon coordinates and animating rotations and scaling transitions, using GeoJSON state data from a gist. Inspired by a Guardian map of swing states.
This visualization animates a tween between the geographic outlines of US states and their Voronoi cell boundaries, generated from state capitals via d3.voronoi. The map uses a Mercator projection and toggles between each state's projected border and its Voronoi polygon every two seconds, with a custom shape interpolation function that redistributes points equally along each side of the destination shape to avoid rounded or skipped corners. A clip path confines the animation to the state boundaries, and capital cities are marked with small circles. The transition is built with d3.v4 SVG elements and includes a reusable shapeTween.js module with two tweening approaches, one based on side-length distribution and another on proportional path length.
This block graph visualizes the connections between blocks (code examples) on bl.ocks.org, using a force-directed layout rendered with canvas and WebGL via D3 v4 in a React framework. Nodes represent individual blocks, with thumbnails fetched from bl.ocks.org displayed in a tooltip on mouseover. The tooltip appears near the cursor and loads the block's thumbnail image, leveraging code from Daniel Overstreet's tooltip implementation. The graph is forked from Mike Bostock's Blocks Graph, with an added feature to show previews of linked blocks.
This example demonstrates smooth transitions between custom polygons in D3 v4, addressing limitations in Mike Bostock’s original shape tweening approach. The visualization morphs between a California-shaped polygon and other custom polygons by aligning starting points, matching point counts, and ensuring consistent orientation. Using `d3.polygonArea()` to verify winding direction and a hidden SVG path to proportionally resample points, it produces clean, predictable shape transformations. The animation is rendered in SVG, with each shape transitioning seamlessly to the next in an animated loop.
A random array of 100 values is sorted by the mergesort algorithm, with each value drawn as a colored vertical line whose color transitions from light green to dark green based on its numeric value. The animation shows the sorting process as lines move between two horizontal bands representing the two arrays being merged, with copies and swaps visualized through D3 transitions. The code uses d3.shuffle, d3.scale.ordinal for positioning, and d3.scale.linear for the color ramp, rendering in SVG with animated transitions.
A Voronoi diagram of 500 randomly placed points continuously sorts its cells by area. Each polygon’s fill color encodes its area on a logarithmic scale, and cells slide horizontally into size order before the diagram recalculates from their new positions. The process repeats indefinitely, redrawing shapes and colors as areas change. Built with D3 v4, it uses `d3.voronoi` for tessellation, `d3.scaleLog` and `d3.scaleSequential` for mapping, and SVG `path` transitions with `d3.timeout` to loop the animation.
A collection of Voronoi cells continuously shuffles across the screen as their generating points jump to new random positions. The cell outlines remain visible while their filled areas stay transparent, and the points themselves appear as small black dots. The animation uses D3 v4’s `d3.voronoi` layout to compute polygons from 100 random coordinates, with SVG `path` and `circle` elements updated via chained `transition` calls that first offset each polygon by its point’s movement and then reset it to the new cell shape.
A Voronoi diagram with 100 points continuously reshuffles, as each cell’s polygon and its generating dot transition to new random screen positions every few seconds. The animation uses D3 v4’s `d3.voronoi` layout to compute polygons from updated coordinates, then applies 3-second `transition().duration()` tweens to both the SVG `path` elements’ `d` attributes and the `circle` elements’ `transform` attributes. A `d3.timeout` recursively triggers redraws every 8 seconds, cycling the diagram indefinitely.
Voronoi Shuffling v3 animates a set of 100 randomly placed points and their corresponding Voronoi cells, which continuously redraw every few seconds as the points jump to new random positions. The SVG paths representing each polygon transition smoothly between states using D3 v4’s `transition` methods, with a transform offset applied before updating the `d` attribute to avoid abrupt reshaping. The code uses `d3.voronoi` to compute cell polygons and includes extra overlapping points in the path data to ensure each polygon has enough vertices for seamless interpolation. Circles mark the points themselves, and both points and cells shift together over a 3-second duration.
A shuffled array of 100 bars repeatedly animates through a sort-and-reset cycle, showing each value sliding horizontally to its sorted position before the array reshuffles and restarts. Two rows of SVG rectangles represent the original and sorted states, with fill opacity encoding each bar's numeric value. The animation uses d3.v3 transitions with staggered timeouts, ordinal scales for positioning, and duration-based easing sequences to coordinate the sorting, return, and shuffle phases.
This animation visualizes the mergesort algorithm on 64 shuffled values, displaying every pass through the sort as a separate row of rectangles so the progressive reordering remains visible. Each rectangle’s fill opacity encodes its value, and the sort steps animate via chained d3 transitions. The code uses d3.v3 with ordinal scales for positioning, d3.shuffle to generate the initial array, and SVG rect elements with custom transition timing to copy items between rows, ultimately returning all sorted values to a single row.
This choropleth displays U.S. county unemployment rates colored on a quantize scale from light to dark blue, overlaid with white state boundary lines. When hovering over a county, its outline turns red and all counties outside that county’s state fade to 50% opacity, using CSS classes generated from the state FIPS code to highlight the state containing the hovered county. The map uses an Albers USA projection and is built with D3 v3 and TopoJSON, with county fill colors mapped from unemployment data.
This animated Leaflet map visualizes Oakland Police Department license plate reader data. Each scan event is drawn as an SVG path marker on a Stamen Toner Lite basemap, with a side panel listing all 205 license plates that appeared in at least 15 distinct locations. Hovering or clicking a plate in the list filters the map to show only that plate’s scan events in red, while a second panel ranks and displays the 30 most similar plates based on geographic co-occurrence of their scan locations. Clicking a marker scrolls the list to that plate, and a counter shows how many of the total events are visible. The visualization uses D3 for data handling and SVG rendering, and Leaflet for interactive map navigation, with zoom/pan triggering marker updates.
This dashboard displays data about U.S. Presidents, including their party affiliations and time in office. It uses a sortable data table, two stacked single-row bar charts, and interactive filters to explore the data. The main row chart shows party representation across all presidents, resizing based on a selected time period via a brush slider, while a second chart displays the presidential timeline. Bars fade when outside the selected time period or when their party is deselected using checkbox filters. The visualization was designed as an alternative to pie charts, aiming to show comparable percentages of a whole with a stacked row chart approach.
Black and white circle pairs populate an interactive canvas, each pair linked by a shared offset and move together when dragged. Sliders adjust circle radius and total count in real time, while a shuffle button randomly relocates all pairs and double-clicking animates a single pair to a new position. The visualization uses D3.js v3 with SVG elements, d3.behavior.drag for dragging, and transition-based shuffling, drawing data from randomly generated coordinates within a React-rendered HTML page.