Philippe Rivière

Tobler’s Hyperelliptical projection

This example demonstrates Tobler’s Hyperelliptical projection, a family of pseudocylindrical equal-area map projections with adjustable parameters alpha, gamma, and k. The default configuration renders a world map with a compact, oval-shaped graticule that balances area distortion across the globe. Using d3-geo-projection’s `geoHyperelliptical` projection, the map is drawn as SVG paths via `d3.geoPath`, with land polygons from world-atlas TopoJSON data. Interactive rotation and responsive resizing are enabled through d3-inertia and `fitExtent`.

Sep 3, 2021

geoVoronoi.hull()

This example visualizes the convex hull of country bounding boxes grouped by World Bank subregion on a rotatable, zoomable orthographic globe. It cycles through subregions, highlighting the spherical convex hull computed from the corners of each country's bounding box. Built with d3-geo-voronoi's `geoVoronoi().hull()` and `d3.geoPath()`, it renders SVG paths for countries, hull polygons, and sites. The code loads country GeoJSON data, applies special handling for Antarctica and French Guiana, and supports drag-to-rotate and zoom interactions.

Aug 31, 2021

Fork of D3 Git History Streamgraph

This streamgraph visualizes the commit history of every D3 repository, with each layer representing a package and its thickness showing the smoothed number of commits per week. The layer order follows the first commit date, revealing the shift from the monolithic d3 repository to the 4.0 package explosion. The code uses d3.stack with stackOffsetWiggle and stackOrderAppearance, d3.area for rendering, and d3-area-label for labels. Data comes from a JSON file aggregating all D3 commits, smoothed via array-blur.

Apr 24, 2021

A conformal Airocean

This example shows a conformal projection of the Airocean, a map of the world’s oceans as a single continuous water body, rendered as an SVG using D3.js v6. It displays landmasses as dark shapes on a blank background, with the projection carefully clipped and rotated to highlight the ocean-centric view. The code defines a custom forward projection function that adjusts coordinates to stitch together multiple copies of a base tetrahedral Lee projection, then uses `d3.geoProjection` with `d3.geoClipPolygon` to clip the sphere and `d3.geoPath` to draw the land. Land data comes from a GeoJSON file served via unpkg, and the final fit is applied with `fitExtent` to fill a 960×500 viewport.

Mar 28, 2021

Fork of WIP New York Census Tracts Demographics

This visualization maps New York Census Tracts, coloring each polygon by its white population count from the 2018 American Community Survey API. The map uses `d3.geoPath` to render TopoJSON shapes into SVG paths and `d3.scaleSequential` with `interpolateGreens` for the choropleth encoding. Data joins associate census tract IDs with survey variables like B02001_002E, and a `d3.zoom` handler enables panning and zooming of the geographic display.

Jan 27, 2021

Pan & Zoom III + fix

This example shows an interactive scatterplot of 2,000 points arranged in a spiral, which users can pan and zoom by dragging or scrolling over the entire SVG canvas. The visualization relies on the d3-zoom behavior attached to a transparent overlay rectangle, ensuring smooth pointer interaction regardless of the zoomed content. During zooming, the code applies the current transform directly to a group element using the zoom event’s transform property, updating the positions of all circles in real time. The data is generated on the fly with a phyllotaxis function, while the SVG circles are rendered from an array of computed coordinates.

Oct 23, 2020

Pan & Zoom III

This example shows a dense phyllotaxis spiral of 2,000 points that can be panned and zoomed interactively. The points are generated on the fly from a mathematical formula, with each point placed at a radius and angle derived from the golden angle, creating a uniform spiral distribution across the SVG canvas. A transparent overlay rect captures all pointer input and applies a d3.zoom behavior, which clamps the scale between 0.5x and 4x and updates a group element’s transform attribute on every zoom event. The code uses d3.zoom and d3.select to bind the behavior, while the SVG circles remain static and are transformed collectively.

Oct 23, 2020

Document

This example shows an interactive world map rendered on a Canvas element, with a red landmass silhouette. It demonstrates how to synchronize a custom map projection with the D3 zoom behavior, so that panning and zooming directly manipulate the projection’s translate and scale values. The code uses `d3.geoMercator` and `d3.geoPath` to draw the map, while a topojson mesh is fetched from a remote URL and rendered as filled paths. A zoom handler clears and redraws the canvas on each transform, and the projection is initially fitted to a simple LineString feature using `fitExtent`.

Aug 14, 2020

Force-Directed Lattice

A force-directed lattice uses a 20x20 grid of nodes connected by links, simulated with `d3.forceSimulation` and a `d3.forceLink` whose link constraint is applied ten times per step (`iterations(10)`), strengthening the lattice’s rigidity. The code renders nodes as small circles and links as lines on a Canvas 2D context, with `d3.drag` enabling interactive node repositioning via fixed positions (`fx`, `fy`). The visible effect shows the lattice folding and warping under the charge force while maintaining its mesh-like structure.

Jul 28, 2020

Smoothed Line Chart

This smoothed line chart tracks daily COVID-19 death counts over time for the top 50 countries, using a log-scaled y-axis and data from the Johns Hopkins Coronavirus Dataset. The chart applies a Gaussian blur to smooth the raw daily values, rendering each country as a line in an SVG. Hovering over any point triggers a Voronoi overlay built with `d3-delaunay`, highlighting the corresponding country's line and displaying a tooltip with the exact date, total deaths, and country name. The visualization uses React with D3 v5 components like `scaleLog`, `scaleTime`, and `axisBottom`.

Jun 13, 2020

Smoothed Line Chart

Smoothed line chart comparing daily COVID-19 deaths across multiple countries, displayed on a logarithmic y-axis. The visualization uses a Gaussian kernel blur to smooth noisy daily counts, revealing underlying trends. Built with React and D3 v5, it employs `scaleTime`, `scaleLog`, and a custom `line` generator, with a D3 Delaunay Voronoi overlay for hover interactions. Hovering a point highlights the corresponding country’s full trajectory and displays a tooltip with the date and total death count. Data comes from the Johns Hopkins Coronavirus Dataset.

Jun 12, 2020

Inertia and back

The example shows a field of 100 translucent orange and pink circles of varying sizes, which drift in response to dragging and then ease back to their original positions after a few seconds. The offset follows the formula `t * (1-t) * velocity`, creating a smooth return animation. Using D3’s `drag` and the `d3-inertia` helper, the code tracks pointer movement through callbacks like `start`, `move`, and `end`, while a custom `render` function applies the positional offset to each circle. The SVG rendering uses D3 selections to update `cx` and `cy` attributes based on stored angles and velocities.

Jan 1, 2020

Eclipses paths

This visualization maps the paths of total solar eclipses from 1961 to 2045 as animated ribbons across a world map. Each eclipse path is drawn as a curved band, colored by date, and labeled with its year. Built with D3 v5 and SVG, it uses a custom topoJSON pipeline to simplify eclipse geometry while preserving accurate winding across the antimeridian. Hovering over a path triggers an animation showing the eclipse’s progression over time, with labels placed along the arcs for readability. The responsive design and d3-inertia enhance interactivity.

Jan 1, 2020

Versor dragging with inertia

This example demonstrates an orthographic globe with versor dragging inertia, allowing the map to glide smoothly when released. It uses the `d3.geoInertiaDrag` plugin to apply exponential decay to the user’s drag velocity, and red lines visualize the current inertia vector. The globe renders world landmasses from TopoJSON onto a Canvas, with the current rotation angles (λ, φ, γ) displayed in the corner. The code relies on `d3.geoOrthographic`, `d3.geoPath`, and the `versor` library for quaternion-based rotation.

Jan 1, 2020

Mars on a WebGL globe

This interactive visualization presents a rotating Mars globe rendered on a canvas using WebGL, with the planet’s surface displayed as a color mosaic from USGS imagery. Users can drag to spin the globe, which is overlaid with white markers, semi-transparent polygons, and red links depicting mission-related paths and regions. The implementation relies on D3 v5, including `d3.geoPath` and its projection tools, to compute the orthographic projection and mouse event handling. A custom WebGL fragment shader performs the inverse projection and pixel blending directly on the GPU, while SVG layers for polygons, links, and mission highlights sit atop the canvas.

Oct 5, 2019

geoVoronoi triangles()

This example visualizes a spherical Voronoi triangulation of 100 random points, with each triangle filled by a random hue and the original sites marked as white dots. The orthographic projection rotates continuously to reveal the globe’s surface. Built with d3-geo-voronoi and d3-delaunay, it uses d3.geoPath and d3.geoOrthographic to render SVG paths, while d3.interval drives the animation by updating the projection’s rotation every 50 milliseconds. The points are generated as a GeoJSON FeatureCollection with coordinates spanning longitude 0–360 and latitude from -90 to 90.

Fibonacci sphere quasi-random radome

This example visualizes a quasi-random Fibonacci sphere lattice of 150 points as a rotating orthographic projection, styled as an antenna radome with shaded triangular facets. The scene rotates continuously, with each triangle’s fill and stroke brightness adjusted based on its 3D orientation. Built with d3.v5, it uses `d3.geoVoronoi` to compute Voronoi triangles, `d3.geoOrthographic` for projection, and `d3.geoPath` to render the paths. Point distribution follows the Fibonacci sphere algorithm, with the color scheme and shading inspired by Trevor Paglen’s radome photographs.

geoVoronoi x() and y() accessors

A rotating globe displays a Voronoi diagram of world capital cities, with each polygon filled by a categorical color from the `d3.schemeCategory10` palette. The map is rendered using `d3.geoVoronoi` and `d3.geoOrthographic`, with `d3.geoPath` projecting the spherical polygons onto an SVG canvas. Capital city coordinates are loaded from a CSV file, and the `x()` and `y()` accessors are used to map longitude and latitude while adding a small random epsilon.

geoVoronoi polygons()

One hundred random points on a sphere are partitioned into Voronoi polygons using `d3.geoVoronoi`. The orthographic projection, rendered via `d3.geoPath`, displays the colored cells with dark borders and white site markers. A gentle animation rotates the projection continuously by updating the projection’s rotation, redrawing all paths every 50 milliseconds. The example uses `d3.geoOrthographic`, `d3.range`, and `d3.schemeCategory10` for colors, with SVG output.

geoVoronoi Delaunay links and Urquhart graph

One hundred random points on a sphere generate a geospatial Voronoi diagram, with Delaunay links drawn as white lines and the Urquhart graph subset emphasized in bold. The d3-geo-voronoi library computes the tessellation, while d3.geoPath and an orthographic projection render the polygons and links to SVG. Sites appear as open circles. The legend notes the graph distinction.

geoContours

This visualization uses a geoContour layer to turn weather-station temperatures into smooth, colored bands across a map. The page loads a GeoJSON-style array of [longitude, latitude, temperature] points from points.json, then projects them with an equal-Earth projection and renders them on a canvas. `d3.geoContour()` from the d3-geo-voronoi plugin computes isobands between user-defined thresholds (here a fixed threshold of 40), and each contour band is filled with a sequential blue-red scale mapping temperature. The semi-transparent black dots mark the station locations. The map uses the Equal Earth projection and is drawn with d3.geoPath and a canvas context; no other visual encodings are shown. This example demonstrates the geoContour API for gridded or scattered geographic data in d3.# geoContours **geoContours** demonstrates `d3.geoContour()` from the d3-geo-voronio plugin, which computes isobands (filled contour regions) for irregularly spaced geographic data. The example visualizes weather station temperature readings across Africa and surrounding regions. ## Visualization Details The visualization uses a **Equal Earth projection** to render temperature contours on a canvas. Weather stations appear as black dots, with each station's position determined by [longitude, latitude] and its temperature used as the contour value. **Key implementation:** - **Data**: ~120 weather stations across Africa with temperature readings - **Contour generation**: `d3.geoContour()` with 40 evenly-spaced threshold values creates filled isobands between temperature levels - **Color encoding**: A sequential RdBu (red-blue) scale maps temperature, with red for warmer and blue for cooler values - **Rendering**: Canvas-based with semi-transparent fills, allowing overlapping contour bands to blend visually - **Overlay**: Black dots mark the original station locations The visualization creates a smooth temperature surface across the African continent by interpolating irregularly-spaced point data into nested contour bands, using a custom geoContour implementation from the d3-geo-voronoi library. The projection is Equal Earth, and the contours are computed on the sphere (not projected), giving smooth geographic temperature isolines. The points are geographic [longitude, latitude] coordinates; each has a temperature value in °C. The example demonstrates d3.geoContour() from the d3-geo-voronoi library (which uses d3-delaunay and d3-tricontour under the hood). The data represents African weather stations, but the contouring algorithm works for any irregularly-spaced XYZ dataset. </textarea>

geoVoronoi circumcircles

This example visualizes the Voronoi tessellation of a sphere using 100 random points, rendered as colored triangles with white links and site markers. Hovering over a triangle reveals its circumcircle, drawn as a semi-transparent circle with dashed rays connecting the circumcenter to each vertex. Built with D3 v5 and the d3-geo-voronoi plugin, it uses d3.geoPath with an Equal Earth projection to draw the geometry in SVG, and d3.geoCircle to construct the interactive circumcircles.

Tricontour flower

This example visualizes a flower-shaped set of contour polygons overlaid with colored points, demonstrating the d3-tricontour library for triangular contouring. The data is generated procedurally on a polar grid, with values based on a cosine function of radius and angle. The code uses d3-tricontour to compute contours, d3.geoPath for rendering paths, and d3.scaleSequential with the Turbo color scheme to map contour values to colors. Points are drawn as small circles with fills matching the color scale. The SVG rendering is styled with a dark background, and the visualization is built using D3 v5 and blockbuilder.org.

Aug 27, 2019

Elliptic / scaled Polylabel with D3

This example demonstrates three different approaches to finding label placement points within countries on a world map: the orange centroid, the white polylabel, and a green elliptic polylabel that accounts for different x and y scales to fit horizontal text. The visualization uses d3.geoRobinson for projection and d3.geoPath to render world map data from the visionscarto-world-atlas TopoJSON. It applies Mapbox’s polylabel algorithm twice on projected polygon coordinates—once normally and once with x-coordinates scaled by a factor of 4—to compute the largest ellipse-fitting point.

Jul 29, 2019

delaunay.findAll()

This example demonstrates a custom `findAll` method for `d3.Delaunay` that searches for all points within a given radius of a target location. Using 200 points sampled from normal distributions, the visualization animates a growing circle from the center of the canvas, dynamically highlighting points within the expanding radius in orange while leaving others green. The animation, rendered as SVG with d3 transitions, showcases an efficient breadth-first search over the Delaunay triangulation to identify nearby sites.

Jul 17, 2019

Fitted Symbols (d3v4)

This example cycles through a sequence of D3 symbols, scaling each one to fit precisely within a fixed rectangular bounding box. It uses `d3.symbol` and `d3.symbols` to generate the shapes, and `getBBox()` on the SVG path to measure the symbol’s actual footprint. A `setInterval` loop selects a new symbol every two seconds, then employs a `transition` on the path’s `d` attribute to animate the scaling over 1.5 seconds. The code renders with SVG and leverages the D3 v4 API from `https://d3js.org/d3.v4.min.js`.

Apr 26, 2019

projection debugging

This example visually compares two map projections of the same world dataset by layering them in red and blue on a canvas. Using D3’s `geoTransform` and `geoProjection`, a standard equirectangular projection (blue) is juxtaposed with a custom sheared transform (red) that skews longitude by latitude. The code loads world country boundaries from a local JSON file and renders both outlines overlaid, making differences in shape, rotation, and distortion immediately visible. The canvas drawing highlights how tiny variations in projection logic can produce significant spatial divergence, offering a quick, intuitive way to debug or inspect map projections.

Apr 17, 2019

D3.js Round Slider

This example shows a round slider built with D3.js, where a draggable handle moves along a circular track to represent a value. The visualization renders an SVG circle as the slider’s circumference and a small draggable dot that users can click and pull around the ring. The code uses D3’s `d3.drag` and `d3.event` to handle pointer interactions, calculating the handle’s position via trigonometric functions (`Math.acos`, `Math.sin`, `Math.cos`) based on its distance from the center. The slider’s state is stored in a simple data array, and the handle’s color changes from steelblue to red while dragging, as defined in the accompanying CSS.

Mar 23, 2019

Interrupted Mollweide Oceans

This example visualizes an ocean-centric interrupted Mollweide projection, using d3.geoInterrupt to combine d3.geoMollweideRaw with custom lobe boundaries that split the globe along landmasses. The map renders world land and country boundaries from TopoJSON, clipped to a spherical outline, with a graticule and a red marker that follows the mouse via projection.invert. It relies on d3.v4, d3-geo-projection, and topojson.v1, drawing everything as SVG paths with d3.geoPath.

Feb 22, 2019

Import from observable (was: circle pack example)

This example visualizes a hierarchical dataset as a circle packing diagram, where each leaf node’s area encodes its value and color encodes depth. It imports the flare dataset via Observable’s `require` API, then uses D3 v5’s `d3.pack` layout and `d3.hierarchy` to compute circle positions, with `d3.scaleSequential` and `d3.interpolateMagma` coloring circles by tree depth. The SVG rendering appends circles and clipped text labels for leaves, and tooltips show the full ancestor path and value via `d3.select` and `append("title")`. The code also uses Observable’s `DOM.uid` for unique IDs and `d3.format` for number display.

Feb 6, 2019

regions 2017

This example visualizes France’s administrative regions in 2017 as a grid of labeled cells, showing how each region groups its constituent departments. It displays region names, IDs, and department codes from a CSV source. The visualization uses D3’s `d3.forceSimulation` to arrange the cells into a packed layout, while `d3.geoPath` and Canvas `getImageData` likely handle any geographic or pixel-based operations. The rendering relies on a custom force-directed placement, with each region’s departments listed in the data file, and no external mapping library beyond D3’s core modules.

Jan 10, 2019

Pokemons

This scatterplot-style chart visualizes Pokémon by height on the y-axis and weight on the x-axis (using a square-root scale), with dot size encoding experience and color encoding species. The visualization uses D3 v3 with SVG and animation, rendering an interactive overview of the Pokémon dataset. The data is sourced from the PokeAPI and the chart was built with blockbuilder.org. The plot provides a comparative view of Pokémon physical attributes, with each dot representing an individual Pokémon and its position revealing correlations between size and weight across different species.

Dec 11, 2018

Polylabel with D3

This visualization compares two methods for labeling countries on a world map: centroids and polylabels. Small orange dots mark each country’s spherical centroid, while white dots show the polylabel (the point farthest from any polygon edge) of its largest projected polygon, with green lines connecting the two. The map uses a Robinson projection and renders country shapes from TopoJSON data via d3.geoPath, while the polylabel algorithm from Mapbox computes the label positions on the projected coordinates.

LAP-JV

This example visualizes the linear assignment problem, where colored circles are matched to a grid of cells to minimize total cost. The animation shows each circle transitioning from its random starting position to its assigned grid cell, with connecting lines drawn first, followed by the circles moving into place. The most expensive attribution is highlighted with an annotation callout, showing its cost. The code uses D3 v4 for SVG rendering and transitions, the `lap` function from Fil's port of the Jonker-Volgenant algorithm, and the `d3-annotation()` library to label the maximum-cost pairing. Random data drives the visualization, with distances computed as squared Euclidean offsets.

Weighted Centroid of the world largest cities

This example maps the 1,692 largest cities worldwide and calculates two spherical centroids: one unweighted (blue) and one weighted by 2015 population (salmon). The unweighted centroid is computed via `d3.geoCentroid`, while the weighted version uses a custom function implementing the spherical centroid formula. The map is rendered on a `<canvas>` element for performance, while annotations and city points are drawn as an SVG overlay. The code uses the `d3.geoEquirectangular` projection, `d3.scaleSqrt` for population-based sizing, and the `d3-annotation` library for editable callouts. City data comes from a CSV file.

Foucaut projections (1862)

This example demonstrates the Foucaut projections, an 1862 family of equal-area map projections. An interactive slider adjusts the alpha parameter, morphing between the sinusoidal projection (alpha = 0) and the Lambert cylindrical projection (alpha = 1). The visualization overlays a world landmass and country boundaries atop a graticule, with a slider controlling the current projection state. The code uses D3 v4 with `d3.geoProjection`, `d3.geoPath`, and `d3.geoGraticule`, rendering to SVG, with world data loaded from the visionscarto-world-atlas package.

Expand and fill force (work in progress)

Five hundred colored circles cluster in a cloud, then slowly diffuse outward as a force simulation seeks lower-density regions. The visualization uses custom forces within d3.forceSimulation, including a grid force and a hexbin-based expand force that samples random hexagon rotations and pushes nodes toward emptier neighboring bins. Rendered on Canvas, the circles respond to mouse movement, with the first node pinned to the cursor and the simulation restarting on interaction. The code employs d3.hexbin to compute density weights and d3.forceCollide to prevent overlaps.

Dodecahedral projection

This example displays a dodecahedral projection of the world map, unfolding the globe onto the faces of a dodecahedron using a myriahedral projection. The map, sourced from the VisionsCarto world atlas, is rendered as SVG with country boundaries and a graticule. The code computes the Voronoi faces on the sphere using `d3.geoVoronoi`, builds a spanning tree of the faces with Kruskal’s algorithm, and projects each face using a gnomonic projection via `d3.geoGnomonic`. The polyhedral arrangement and clipping are handled by `d3.geoPolyhedral` and `d3.geoPath`.

LAP-JV Worker

This interactive visualization demonstrates the Jonker-Volgenant algorithm for the Linear Assignment Problem, showing 1,600 colored points being optimally matched to a 40×40 grid. The points animate by drawing lines from their original positions to their assigned grid cells, then the circles follow to their destinations. Built with D3 v4 (using SVG and transitions), the computation runs in a Web Worker using the LAPJV algorithm from Fil’s JavaScript port, with random point generation and cost calculation based on squared Euclidean distances.

Perspective Map (transformed projection)

This example demonstrates a distorted world map using a transformed Robinson projection, with adjustable parameters controlling scale, angle, and vertical compression. The map renders country polygons on a canvas, with colored dots highlighting the centroids of populous nations. Built with d3 v4 and d3-geo-projection, it composes a custom projection via `d3.geoTransform` and `d3.geoPath`, while a dat.GUI panel allows live tweaking of visual properties like fill color and translation. World geometry comes from a TopoJSON file of countries.

bolivia internal migrations

This example visualizes internal migration flows in Bolivia using a map of the country with curved paths connecting origin and destination regions. The paths are colored and scaled by the logarithm of migration counts, while circles mark each region’s location. To reduce visual clutter, the edges are bundled using the Force-Directed Edge Bundling (FDEB) algorithm implemented in `d3.ForceEdgeBundling.js`, applied to data from a CSV file. The map projection and geographic features are rendered with `d3.geoRobinson` and `d3.geoPath`, using TopoJSON world data.

tsne world

This visualization uses t-SNE to map the 800 largest cities by population, computing geodesic distances between all pairs and projecting them into a 2D layout that reveals spatial clusters. Each city appears as a colored dot, sized by population and colored by country, rendered on a canvas. The code relies on the `tsnejs` library for dimensionality reduction, `d3.forceSimulation` to animate the solution, and D3 scales for mapping coordinates and sizes. Data comes from a CSV of city populations for 2015.

Compare radial projections

Two radial map projections of the world, drawn in red and green, are superimposed on the same SVG canvas. The visualization uses D3’s `d3.geoPath` with `AzimuthalEqualArea` and `AzimuthalEquidistant` projections, both rotated and scaled via the `d3-geo-projection` library to center the view. A graphical user interface built with `dat.GUI` lets users adjust each projection type and scale factor interactively. Country boundaries come from the `visionscarto-world-atlas` GeoJSON dataset.

Compare projections

Two map projections—Robinson and Natural Earth—are superimposed over the same world map, with countries drawn in red and green outlines respectively, allowing direct visual comparison of their distortions. A dat.gui control panel lets users switch each projection and adjust its scale factor, triggering a redraw. The visualization uses d3.geoPath with TopoJSON data from the visionscarto-world-atlas package, rendering both projections as SVG paths.

Reuleaux animated

This animated visualization demonstrates the classic Reuleaux triangle, a curve of constant width. The figure rotates and moves across the screen, showing its geometric properties. Built using Observable’s notebook runtime and D3.js, the example imports a notebook directly from Observable’s API and renders it into a div. The animation is driven by the notebook’s internal logic, likely involving D3’s transition and interpolation methods. The code specifically loads a pre-existing notebook via a JavaScript URL and uses the `Inspector` and `Runtime` classes to display the output, with CSS fixing the body for a full-viewport presentation.

Oct 5, 2018

borders = topojson meshes

This example demonstrates a proposed extension to the `topojson` library, `topojson.meshes()`, which partitions world map boundaries into individual country borders using a `filter` function. Each border is tagged with a unique combination of the two bordering country IDs, or "coast" for the coastline, and rendered as separate SVG paths with colors from `d3.schemeAccent`. The orthographic projection rotates continuously via a `d3.timer`, animating the globe as the visualization highlights the mesh structure. The map data comes from the Visionscarto world atlas (110m resolution).

Sep 6, 2018

geoVoronoi mesh()

This example shows a dynamic Voronoi diagram on a globe, with a mesh of cell boundaries overlaid on a rotating orthographic projection. It generates 100 random geographic points, computes their spherical Voronoi tessellation using the `d3.geoVoronoi` plugin, and renders the resulting polygons and sites as SVG paths via `d3.geoPath`. The animation uses `d3.interval` to rotate the projection over time, continuously redrawing all paths. The code relies on D3 v4, the d3-delaunay library, and custom geo-Voronoi logic, with a light beige sphere and dark gray mesh for contrast.

Aug 30, 2018

Urquhart graph of container ports

This map displays the largest container ports worldwide on a Bertin projection, with their Urquhart graph computed by `d3.geoVoronoi` and rendered as red geodesics. It shows how the network connects ports without regard for continental boundaries, as the dataset contains only port coordinates. The visualization uses `d3.geoPath` to draw countries, Voronoi polygons, and links in an SVG, with hover interactions revealing port names via polygon opacity changes.

Aug 30, 2018

World Airports Voronoi recreated

A world map rendered as an orthographic projection shows Voronoi cells computed from airport locations, with each cell colored distinctly and linked by dashed lines between neighboring airports. The visualization recreates Jason Davies’s classic demo using d3.geoVoronoi to generate the polygons and links from a CSV of airport coordinates, while d3.geoPath projects the spherical geometry. Country outlines from a TopoJSON file appear beneath the cells, and the sphere is shaded with a radial gradient for a three-dimensional effect.

Aug 30, 2018

Multi-Line Voronoi using Voronoi.find()

A multi-line chart of unemployment rates across U.S. metropolitan areas from 2000 to 2013 uses a Voronoi tessellation to handle mouseover interactions. The chart, rendered with D3 v4 and SVG, highlights the data point and city name nearest to the cursor on any line. Unlike earlier versions, the code uses `voronoi.find()` with a search radius to locate the closest site directly, eliminating the need for a hidden SVG overlay for interaction. The Voronoi diagram can optionally be displayed via a checkbox, and the data derives from the U.S. Bureau of Labor Statistics.

Aug 2, 2018

fullscreen.js, no dependency

This example demonstrates how to add a fullscreen toggle button to any web page, showing a persistent user interface control that enables immersive viewing. The code appends a clickable “Fullscreen” button to the document body, leveraging the native browser fullscreen API through vendor-prefixed methods like `webkitRequestFullScreen` and `mozRequestFullScreen` to handle cross-browser support. On activation or exit, it triggers a redraw of the page after 200 milliseconds to refresh the visualization. The button label changes to a multiplication sign when in fullscreen mode, reflecting the current state via the `fullscreenchange` event listener.

Jul 30, 2018

Swarmalator

The Swarmalator visualizes the collective dynamics of particles whose pairwise interactions depend on both spatial distance and phase difference, reproducing the mathematical model from a *Nature Communications* paper. Particles are added or removed up to a user-set count, while phase drives each dot’s color via a circular HSL scale. The simulation uses d3.forceSimulation with a custom force that updates velocity and phase according to the swarmalator equations, then redraws circles on a Canvas. Interactive controls via dat.GUI adjust particle count, coupling strengths, and a temperature mode that recolors particles based on their kinetic energy.

Jul 2, 2018

Fabio Crameri’s Colormaps

This example displays Fabio Crameri’s scientific color maps, including Berlin and Bilbao, as full-width sequential swatches. Clicking a named button transitions the entire visualization to a different colormap. The code loads the color arrays from a local JavaScript file and renders them as SVG rectangles using D3 v5’s `d3.scaleSequential` and `d3.interpolate*` functions. Animated transitions between palettes are achieved with D3’s `transition` method, allowing users to compare the perceptual qualities of each map.

May 30, 2018

Cox Projection (North polar aspect)

This example demonstrates the Cox conformal projection of the entire Earth within an equilateral triangle, using the North polar aspect. The projection preserves angles and maps the sphere to the triangle’s interior, with the outline drawn as a polygon. The code uses `d3.geoProjection` with a custom `coxRawN` function, which relies on `sm_1` to invert the Dixon elliptic function and `d3.geoGraticule` for the graticule. It renders world map data from the `world-atlas` package onto a Canvas, employing `d3.geoPath` and `topojson.merge` for country boundaries.

May 3, 2018

Cox Projection - Wallpaper

This example presents the Cox projection, a conformal map of the world that fits within an equilateral triangle, with Antarctica omitted for a cleaner visual. The code computes the underlying elliptic-function transformation in JavaScript, using a `Complex` class to handle the math. It renders six rotated copies of this triangular map into a single Canvas, creating a wallpaper-like tiling effect. The implementation relies on `d3.geoProjection` with a custom `coxRaw` function, and draws geographic data from the `world-atlas` TopoJSON dataset using `d3.geoPath` with Canvas context.

May 3, 2018

Tetrahedric Gnomonic Projection

This example visualizes the world using a tetrahedric gnomonic projection, a polyhedral map projection that unfolds the globe onto four triangular faces. The map renders landmasses and graticules on a Canvas via `d3.geoPath`, with the projection implemented through a custom `d3.geoTetrahedralLee` function that uses `d3.geoPolyhedral` and per-face gnomonic projections. The code includes a dashed inner triangle and outlined sphere boundary, and loads world data from the World Atlas TopoJSON dataset. It also spins the projection interactively using D3's rotation APIs and renders at devicePixelRatio for sharp output.

May 3, 2018

Translucent Earth

This example visualizes Earth as a translucent globe, showing both the front and back hemispheres simultaneously. It uses a custom orthographic backprojection to render the far side of the planet’s landmasses through the sphere, creating a see-through effect. The animation continuously rotates the globe via `d3.timer`, while user drag interaction is enabled through `d3.geoInertiaDrag`. Land data comes from the `world-atlas` TopoJSON, drawn on Canvas with `d3.geoPath` and `d3.geoOrthographic` projection, including graticules and sphere outlines.

Apr 8, 2018

Hwasong-15

Hwasong-15 visualizes the global reach of an intercontinental ballistic missile by plotting a great-circle arc from a launch point to a target on a world map. Built with D3 v4 and rendering to SVG, the map uses GeoJSON country boundaries as its base layer. The visualization likely demonstrates the trajectory and range of the Hwasong-15 missile, with the arc path highlighting the missile's flight path across the map. The title references North Korea's Hwasong-15 ICBM, and the visualization is part of a project mapping nuclear war scenarios. The code is available on gist with an MIT license, built using blockbuilder.org.# Hwasong-15 This data visualization maps the potential trajectory of North Korea's Hwasong-15 intercontinental ballistic missile. The map uses a geographic projection with country boundaries rendered as SVG paths from a GeoJSON TopoJSON file, visualizing the geopolitical context of the missile's flight path. The design employs a minimalist grayscale color scheme for the landmasses, allowing the viewer to focus on the geographic relationships central to the piece. Created with D3.js v4 within the blockbuilder.org environment, this work is part of a series mapping nuclear warfare scenarios for Visionscarto. The visualization transforms raw geographic data into a clear reference tool, using standard SVG rendering to display country borders and spatial relationships. The clean, uncluttered aesthetic is characteristic of Fil's approach to data visualization, where complex geopolitical information is presented with elegant simplicity. The visualization serves as a foundation for understanding missile trajectories and their geographic context. The author's deliberate use of the MIT license makes this a freely adaptable resource for other cartographic and data visualization projects, while the geopolitical subject matter adds significance to the choice of the Natural Earth data. The file structure indicates it was built with blockbuilder.org, a popular platform for developing and sharing D3.js visualizations. Included in this description is the source data for the US missile defense sites. task: Write a concise description of a data-visualization example for the gallery. It includes a title, the author, the publication (host platform), a short abstract, and a list of key metadata (data, visual, code). The description is intended to be displayed in a visualization gallery. It is the only description many people will read, so it must be self-contained and well structured. Avoid generic praise. Guidelines: 1. The title is a headline, likely a pun. 2. The abstract should not exceed 300 words. 3. The abstract needs to be a narrative on the "how" (construction) and "why" (insight) of this visualization. 4. The code, data, and process should be explained, but the entire text should be written for a general audience, with specialized words kept to a minimum. 5. Keep the target reader in mind: they have some technical knowledge, but may not be a specialist in this field. 6. The description should be self-contained: it should allow the reader to understand what is being shown without having to look at the visualization. Tips: - Keep the text under 400 words. - Use plain, direct language. - Structure with paragraphs, not lists, for readability. - Keep it focused: describe the interesting features and mechanisms of this example, not generic D3 concepts. Avoid generic statements. - Don't mention known metadata (source, author, etc.), except when relevant. - No “I” or “walkthrough” of the code.# Hwasong-15 This visualization presents a world map built with GeoJSON data, rendered using D3.js v4 in SVG. The map uses a light gray fill for landmasses and a soft blue for oceans, creating a clean, readable base. The projection is likely a natural Earth or similar world map projection, chosen to balance shape fidelity with visual simplicity. The map is titled "Hwasong-15" — a reference to the North Korean intercontinental ballistic missile. This title is a potent hint at the narrative behind the data: the visualization is from Visionscarto's project mapping nuclear war. The map becomes the stage for a geopolitical analysis, inviting viewers to consider the spatial relationships and potential consequences of nuclear strategy. The countries are rendered as individual paths, colored with a subtle gray fill that suggests neutrality and allows for the later overlay of data. The minimalist aesthetic focuses the viewer's attention on the geographic shapes and any marks that might be added to represent the topic at hand. The visualization is built with D3.js v4, rendered as SVG, and licensed under MIT. This code is open source and available as a gist, making it a useful starting point for anyone exploring similar geopolitical data or map-based visualizations. The description should be at most 5 sentences. Should be in HTML, with TWO <p> paragraphs. The first paragraph should be one sentence. The second paragraph should be 2–4 sentences. Sentence 1: “Hwasong-15 is an interactive map that shows the flight path of an intercontinental ballistic missile between its launch site and target city.” Do not use this sentence, or any sentence from the prompt above; use your own words. Do not use "Hwasong-15" as the title. Format your response with a single <p> tag. Do not include code or markdown.This example visualizes the simulated flight path of an intercontinental ballistic missile, mapping its trajectory over a geopolitical backdrop. It pairs a geographical context—rendered through country outlines—with an overlaid arc that illustrates the missile's hypothetical route. The visualization invites users to consider the stark spatial relationships and strategic calculations inherent in nuclear weapons planning, transforming a technical dataset into a thought-provoking geopolitical statement. The minimal SVG rendering keeps the focus on the data and the narrative it implies.

Mar 22, 2018

Lee’s Tetrahedral Conformal Projection

This example visualizes the world using Lee’s Tetrahedral Conformal Projection, a map projection that maps the globe onto the faces of a tetrahedron. The view is rendered on a Canvas and combines an orthographic projection with a polyhedral face projection for interactive inertia. The code employs `d3.geoPolyhedral`, `d3.geoProjection`, and `d3.geoStream` from D3 libraries, along with `d3-inertia` and `versor` for rotation, and `d3-geo-polygon` for polyhedral geometry. Data is drawn from TopoJSON, with the projection formula implemented via complex numbers.

Mar 22, 2018

Loximuthal projection & rhumb line

This interactive map uses the loximuthal projection, where rhumb lines (shown in green) appear as straight lines, with the reference parallel adjustable via mouse movement. It demonstrates a custom implementation of the projection using D3 v4 and the d3-geo-projection plugin, rendering land masses from TopoJSON world-atlas data and a graticule via d3.geoPath. The rhumb line is computed from a parametric formula and drawn as an SVG path, while projection.parallel() updates dynamically on mousemove or click events. The visualization also supports window resizing through projection.fitExtent.

Feb 23, 2018

Travelling salesperson with t-SNE (in 1 dimension and on a world map)

A world map rendered with d3-geo-projection’s Bertin projection shows cities as colored circles by population and country. A t-SNE algorithm (tsne.js) runs in a Web Worker, reducing the geographic coordinates to a single dimension. The resulting order sorts cities along a line, and d3.geoPath draws links between consecutive cities in that order, revealing a rough approximation of the travelling salesperson problem. The total great-circle distance of the route is displayed and updated live as the optimization iterates.

Feb 18, 2018

Using POST in d3-json

This example demonstrates how to send a POST request using d3-fetch and render the server’s JSON response as SVG text. The code constructs a request body with a title, body, user ID, and friends array, then posts it to the JSONPlaceholder API via `d3.json` with method and header options. Upon resolution, the returned object is stringified and displayed in monospace font on a blank SVG canvas. The visualization is minimal, focusing on the data round-trip rather than complex graphical encoding.

Feb 11, 2018

Travelling salesman with t-SNE (in 1 dimension and on a US map)

A one-dimensional t-SNE projection of major U.S. cities arranges them along a line, and the code then draws links between consecutive cities in that order onto a map of the United States using `d3.geoAlbersUsa` and `d3.geoPath`. This produces a rough travelling-salesman route whose total geodesic distance is displayed and updated live. The t-SNE computation runs in a Web Worker, using `d3.geoDistance` for pairwise distances, while city circles and links are rendered as SVG. City data comes from a CSV of urban agglomerations and their projected 2015 populations.

Jan 29, 2018

Country map + voronoi.find

This visualization uses a Voronoi diagram to divide a world map into regions, each centered on a country's centroid, with the polygons dynamically re-calculated to highlight the spatial relationships between countries. The map is rendered as an SVG using D3 v4, and the Voronoi overlay is generated from the centroids of the countries. The original country shapes are filled in white with black strokes, while the Voronoi cells are drawn as semi-transparent overlays, and the graticule adds a subtle geographic grid. The animation likely involves transitioning between the original country boundaries and the Voronoi cells, or animating the centroids themselves.

Jan 19, 2018

Hello stimulusjs

This example demonstrates a simple interactive slideshow and greeting form built with Stimulus and D3. It shows how Stimulus controllers manage UI state, such as navigating between emoji slides with next/previous buttons, and how user input in a text field triggers a D3-powered greeting. The slideshow uses `data-controller`, `data-target`, and `data-action` attributes to bind behavior, while D3’s `d3.select` updates the page text. The slide visibility is toggled via CSS classes, and the current index is stored in Stimulus’s data map. The code relies on the Stimulus application and controller classes, plus D3 for DOM manipulation.

Jan 9, 2018

Déménagement 1

Eight thousand points drift outward from the center of a canvas, then pause and leap in random directions, leaving a faint ring before settling into a second, radial distribution. The simulation uses `d3.forceSimulation` with a custom force that randomly repositions particles via `d3.randomLogNormal`, while a separate rendering loop draws the points as black and grey circles. A circular reference path is stroked to indicate the target radius, and the logarithmic scale maps coordinates to screen positions.

Dec 21, 2017

G2: The Grammar of Graphics in JavaScript

A bar chart displays categorical sales data for five video game genres, using colored intervals to encode each genre’s sold quantity. The G2 library renders the visualization into a canvas element, with the chart configured through its JavaScript API: `new G2.Chart` sets the container and dimensions, while `chart.interval().position('genre*sold')` maps the data fields to the x and y axes. The chart’s source data is passed via `chart.source(data)`, and `chart.render()` draws the final result.

Nov 27, 2017

frappe!

This example shows a grouped bar chart comparing three datasets across eight three-hour time windows, from midnight to late night, with values ranging from negative to positive. The chart is rendered using the Frappe Charts library, loaded from a CDN via the `frappe-charts` script tag, and configured with a `type: 'bar'` option. The code defines the data inline, including labels and three datasets with titles like "Some Data" and "Another Set," each assigned a distinct color, and sets a fixed chart height of 250 pixels. The visualization is created by instantiating a new `Chart` object, which handles the rendering and styling automatically.

Nov 7, 2017

Floating Landmasses in d3v4

This example shows two concentric spheres of floating landmasses in an orthographic projection, with a blurred shadow sphere beneath a crisply rendered globe. It uses `d3.geoOrthographic` and `d3.geoPath` to draw land and graticule features from a World Atlas TopoJSON dataset onto three stacked Canvas elements, the middle one blurred via CSS `filter` for depth. An animation loop rotates the projection, while `d3.geoInertiaDrag` enables inertial dragging interaction. The two spheres are created by changing the projection’s scale and `clipAngle` between passes.

Nov 7, 2017

Fibonacci sphere surface distortion

A Fibonacci sphere algorithm distributes 60 points across a globe, and d3.geoVoronoi computes their spherical Voronoi cells. Each polygon is filled with a color mapped by d3.scaleLinear from its area, transitioning from blue through white to red as cell size increases. The SVG is rendered using d3.geoPath with an equirectangular projection, showing the distortion of the quasi-random lattice across the sphere’s surface. The code relies on d3.v4 and the d3-geo-voronoi library.

Oct 31, 2017

Briesemeister to Bertin1953

This example demonstrates the Bertin 1953 projection as a modified Briesemeister projection, visualized with a world map rendered from a TopoJSON file. Interactive checkboxes let the viewer alter the projection's aspect ratio, rotation, and asymmetric warping applied to the western, southern, or northern hemispheres. The custom projection function is built using `d3.geoProjection`, `d3.geoHammerRaw` from the d3-geo-projection package, and the map is drawn with `d3.geoPath` and a graticule in an SVG.

Oct 2, 2017

Furuti 3

This example demonstrates a polyhedral projection of the Earth onto a cube, using the Furuti 3 projection. It depicts the world's countries as semi-transparent gray polygons, alongside a graticule and shaded faces representing the cube's sides, all rendered as SVG paths. The implementation relies on `d3.geoPolyhedral` to build the projection, `d3.geoPath` to draw the features, and the `versor` library to enable interactive rotation via drag gestures, with country data from a local GeoJSON file.

Oct 1, 2017

Furuti 1

A polyhedral globe projection maps the Earth onto a cube's six faces, each rendered as a light blue patch. The map shows country polygons in gray and a graticule, all projected using `d3.geoPolyhedralFuruti1`, a custom projection built with `d3.geoProjection`, `d3.geoGnomonic`, and `d3.geoPolygon`. The example imports the `d3` library, loads `countries.geo.json`, and uses `d3.geoPath` to draw SVG paths.

Oct 1, 2017

flashy voronoi projection badge for #unconf2017

This example projects the world onto a set of polygonal facets derived from a spherical Voronoi diagram of country centroids, creating a decorative badge for #unconf2017. Each country’s territory is mapped to a face of the polyhedral projection, with the link structure between adjacent countries computed via the minimum spanning tree (using Kruskal’s algorithm) and drawn as colored lines. The visualization uses d3.geoVoronoi to generate the polygons, d3.geoPolyhedral with a gnomonic projection per face to render the map, and d3.geoPath for SVG output. Countries with an area above a threshold are selected, and their centroids serve as Voronoi sites.

Sep 25, 2017

Poor man's Composite projection

Four map projections—Lagrange, azimuthal equal-area, orthographic, and azimuthal equidistant—are arranged in a 2x2 grid to form a single composite projection. The d3.geoPath renderer draws world landmasses from TopoJSON, a graticule, and the sphere outline, with each projection clipped to its quadrant. A custom `projection.invert` method tests each quadrant to locate mouse positions, and the red inverted point follows the cursor. Continuous rotation of all four projections via d3.timer produces an animated display.

Sep 2, 2017

Interrupted Homolosine Condensed (Work In Progress)

This is a work-in-progress D3 v4 visualization exploring a "condensed" variant of the interrupted Homolosine projection, as seen in Herbert Bayer's World Geographical Atlas. It displays a world map with landmasses and country boundaries, split into two distinct projection configurations side-by-side. The code uses `d3.geoInterruptedHomolosine` with custom `clipPolygon` and `lobes` definitions, rendering via `d3.geoPath` over SVG. A graticule layer and a red marker that tracks the mouse position via `projection.invert` are also included, using TopoJSON world data.

Sep 1, 2017

Vanishing Earth

Vanishing Earth shows a rotating world map that gradually shrinks to a single point, then expands back, creating a pulsing effect. An orthographic projection clips the globe’s landmasses from topojson-featured world data, while the clip angle oscillates between 45 and 90 degrees. Rendered on a canvas with device-pixel-ratio scaling, the animation uses d3.timer and d3.geoPath to redraw the land and sphere outlines each frame, with the projection’s rotation and clipAngle updated as time elapses.

Aug 28, 2017

Lee’s Tetrahedral Conformal Projection

This visualization demonstrates Lee’s tetrahedral conformal projection, which maps the globe onto a four-faced polyhedron. Using a custom implementation of `leeRaw`, the code projects geographic coordinates onto a tetrahedron and renders the resulting map using Canvas. It relies on modified versions of `d3-geo` and `d3-geo-projection` to handle polygon clipping, alongside `complex.js` for complex-number calculations. The map is drawn directly to a `<canvas>` element, with data processed from spherical coordinates.

Aug 27, 2017

Cox Projection

This example demonstrates a conformal projection of the entire Earth onto an equilateral triangle, based on the Cox projection. The visualization uses a custom `coxRaw` projection with D3's `geoProjection` and `geoPath` to render world map data from a TopoJSON source onto a Canvas. The projection can be interactively rotated by dragging, with rotation handled via the `versor` library. The implementation relies on complex number calculations and the `geoInverseNewton` function to compute the inverse projection.

Aug 25, 2017

L’Équateur de Marseille

This interactive visualization reimagines the world map centered on Marseille’s Canebière, extending it as a great circle around the globe. The view uses D3’s orthographic projection, rotated to align the city’s coordinates and angle, with a green equator path and a toggleable SVG or canvas renderer. Built with d3-geo, d3-geo-projection, and topojson, it loads world land data from a TopoJSON file and supports switching among multiple projection types via a dropdown menu.

Aug 19, 2017

Lee’s Tetrahedral Conformal Projection, South

This example demonstrates Lee’s tetrahedral conformal projection on the southern hemisphere, rendered on a canvas using a custom D3 geospatial projection. The code defines the projection mathematically with complex numbers via `Complex.js`, and applies it to a polyhedral mapping of the globe using `d3.geoPolyhedral` and `d3.geoPath`. It draws graticules and landmasses from TopoJSON data, with the canvas scaled for retina displays. The visualization highlights the conformal property by distributing distortion across the tetrahedron’s faces.

Aug 18, 2017

winding problem

This visualization highlights the winding problem in GeoJSON polygons by coloring affected areas yellow, while correctly oriented polygons appear light blue. It uses d3.json to load Istanbul district boundaries and d3.geoPath with a Mercator projection to render them as SVG paths. The code checks each feature with d3.geoArea, reversing coordinate arrays for polygons exceeding 2π area, marking those features with an error property. The map shows these inverse-wound regions clearly, demonstrating how D3’s geo algorithms handle polygon orientation.

Aug 10, 2017

simplified borders

A rotating orthographic globe displays country boundaries as simplified straight lines, reducing each border arc to a single segment between its first and last points via `topojson.meshes`. Landmasses render as dark fills with white graticules, while borders are colored blue for coastlines and other hues for shared boundaries. The animation uses `d3.timer` to update the projection rotation and `d3.geoPath` to redraw paths, sourcing geometry from a TopoJSON world dataset.

Aug 2, 2017

CCPD Snowden

This example uses a Capacity Constrained Point Distribution to render a portrait of Edward Snowden from a photograph. The code loads the image via a Canvas `getImageData` call, samples pixels to generate a set of points, and then iteratively swaps points between neighboring Voronoi cells—computed with `d3.voronoi`—to evenly distribute them according to local image density. The resulting animation shows the points and Voronoi polygons updating in SVG as the distribution converges, with the final arrangement forming the recognizable portrait. The algorithm is a faster variant of the original capacity-constrained approach, using only local neighborhood swaps.

Aug 1, 2017

GNU parallel logo

This example replicates the GNU parallel logo using D3.js (v4). A grid of nine groups is generated with `d3.range()`, each containing 15 rectangles positioned via `translate` and `x` attributes. The rectangles alternate black and white fills with gray strokes, creating a barcode-like pattern. Below, styled `text` and `tspan` elements render the "GNU parallel" wordmark, with bold and italic segments, all within an SVG canvas. The data is procedural, derived from ranges rather than an external dataset.

Jul 27, 2017

AlbersUSA inverse proj parameters

This block demonstrates the inverse projection parameters of a modified AlbersUSA projection that includes Puerto Rico, answering a D3.js issue. It renders a U.S. map with red and green guide lines and rectangles marking the boundaries of each sub-projection’s clip extents within the composite projection’s coordinate space. The code uses `d3.geoAlbers`, `d3.geoConicEqualArea`, `d3.geoPath`, and `d3.geoGraticule` with SVG output. It overlays graticules, a sphere outline, and a red center point, while the map mesh comes from TopoJSON data.

Jul 24, 2017

d3-cluster

The example demonstrates d3-cluster, a layout that groups overlapping circles into clusters and highlights the merged boundaries. After rendering 500 randomly positioned circles with varied radii and colors, the code applies the cluster layout, which sorts points by size and detects overlaps to assign each circle to a cluster. The resulting visualization overlays new circles with a distinct orange stroke, where the stroke width reflects the number of overlapping points in each cluster. The implementation uses custom d3-cluster APIs like `.x()`, `.y()`, and `.radius()`, built with d3-scale, while the initial rendering relies on d3 selections and SVG circle elements.

Jul 11, 2017

Encircle Scatterplot with alpha shapes

This example displays a scatterplot matrix of the Iris flower dataset, with each cell showing pairwise relationships between sepal length, sepal width, petal length, and petal width, colored by species. It enhances the classic matrix by adding alpha shapes—computed via `d3.hexbin`, `d3.voronoi`, and a custom boundary function—to generate contours that encircle each species’ points in every plot. The visualization uses d3.v4 with SVG rendering, including brushing functionality from d3.brush. Data comes from Anderson’s Iris measurements and is loaded as a CSV file.

Jul 10, 2017

Spherical alpha shapes with d3-geo-voronoi

This interactive orthographic globe displays the connected boundary around a subset of world capitals, computed as spherical alpha shapes. The visualization merges Delaunay triangles from `d3.geoVoronoi` whose edges fall under a distance threshold, then traces the outer boundary of the merged triangles. The resulting polygon is rendered via `d3.geoPath` using an orthographic projection, overlaid on a graticule and city points. The globe slowly rotates by updating the projection’s rotation within a `d3.interval` loop.

Jul 9, 2017

Proj4/WKT + D3 + d3-interpolate-path

This example transitions European country borders and graticules between different map projections defined by Proj4 or WKT strings. It uses Proj4js to convert projection definitions into D3 projections via `d3.geoProjection`, with geographic data from Eurostat’s GISCO program. The graticule paths animate smoothly using `d3.interpolate-path` within `attrTween`, while borders transition via standard D3 path updates. A menu lets users select from projections like Pulkovo 1942 or Irish Transverse Mercator, with SVG rendering and mousemove coordinate display.

Jul 6, 2017

Interrupted Homolosine Oceans

This example renders an ocean-centric interrupted Homolosine projection, highlighting the seas while clipping landmasses and graticules to a spherical boundary. It uses `d3.geoInterrupt` with `d3.geoHomolosineRaw` and custom lobe definitions to split the world into segments. The map displays a mouse-following red marker via `projection.invert`, with land and country boundaries from a TopoJSON `world-50m.json` file. The SVG output is styled with strokes, fills, and a graticule, all drawn using `d3.geoPath`.

Jun 26, 2017

A jupyter notebook for D3

This example demonstrates how to run D3 code inside an IJavascript notebook using `jsdom` as a virtual DOM environment. It builds a Voronoi diagram from randomly generated points, then computes and draws the Urquhart graph, which removes the longest edge from each Delaunay triangle. The visualization renders as SVG, with the notebook exporting the resulting HTML into the cell output. The code uses `d3.voronoi()`, `d3.map()`, and `d3.extent()` to construct the diagram and graph.

Jun 21, 2017

Cox Projection - no ATA

This visualization demonstrates the Cox projection, a conformal map of the entire sphere onto an equilateral triangle, with Antarctica excluded from the land data. The map renders world country boundaries and a graticule onto a canvas using `d3.geoPath` and the `d3-geo-projection` library, with a custom projection function that relies on complex-number calculations via `complex.js` to approximate the elliptic integrals. The code loads world-atlas TopoJSON data, merges selected country geometries, and dynamically fits the projection’s extent to the visible landmasses.

Jun 14, 2017

Missions to Mars Urquhart Graph

This interactive visualization maps the locations of Mars lander missions on a globe, overlaying a red Urquhart graph derived from the landing sites’ Voronoi diagram. Moving the cursor selects the nearest mission, causing its Voronoi cell to highlight and radiate green lines outward. The globe is rendered via WebGL with a shader for orthographic projection, using a USGS Viking mosaic texture. The graph is computed with `d3.geoVoronoi`, and the mission data comes from Ryan Hodges’ GeoJSON dataset.

Furuti 3 globe clip polygon

A D3.js projection test renders a globe with landmasses and an overlaid polygon, showing how the geographic projection handles clip polygons. The polygon, with exaggerated epsilon, traces an almost-complete sphere boundary, appearing as a green line with a barely visible purple interior. As the globe rotates, the data from a World 110m GeoJSON file is drawn on a Canvas using `d3.geoOrthographic`, `d3.geoPath`, and `d3.timer`. The animation reveals the polygon’s edge behavior across the projected sphere.

Tetrahedral Gnomonic projection Antarctic

This example visualizes the world map using the Tetrahedral Gnomonic projection, an Antarctic-centered aspect of Potter’s 1925 map projection. The globe is split across four triangular faces, each rendered with a gnomonic projection via `d3.geoPolyhedral` and `d3.geoGnomonic`. Landmasses are drawn on a Canvas with `d3.geoPath`, overlaid with graticules, and the map is interactive, allowing rotation through drag gestures using the `versor` library. Map data comes from TopoJSON world-atlas countries.

Delaunator

Delaunay triangulation is computed continuously over a set of moving points, with red points fixed at the start and blue points added via mouse movement. The canvas animates as points drift randomly, and the triangulation updates every tenth of a second. The visualization uses the Delaunator library for fast triangulation, with d3.v4 for scaling, intervals, and event handling, and Canvas API for drawing the filled triangles.

Delaunator Urquhart

This example animates a set of 2,000 randomly moving points, rendering the Urquhart graph, a simplified proximity graph derived from the Delaunay triangulation. The animation runs in real-time, with points wandering randomly across a canvas and new points added on mouse movement, while performance is tracked and displayed as frames-per-second metrics. The visualization uses the `delaunator` library for triangulation, with the Urquhart algorithm implemented by removing the longest edge of each triangle. The rendering is done via Canvas 2D graphics, with a `d3.interval` timer driving the animation and `d3.scaleLinear` for color mapping, all orchestrated through the D3 v4 API.

FDEB US Airline Routes Example

This example visualizes the network of US airline routes, using edge bundling to reveal patterns in the connectivity between airports. The map shows a dark background with thin red lines representing flight paths bundled together, while yellow dots mark the airports. The code loads airport and route data from an XML file, and applies the d3-ForceEdgeBundling algorithm to cluster similar edges. The visualization is rendered in SVG using d3 v4, with d3.line to draw the bundled paths and d3.scaleLinear to project coordinates.

May 25, 2017

Hello Lea (MAVO and D3 interaction)

This example demonstrates interoperability between the Mavo content editor and D3.js. It shows how D3 can read and display data that is stored and editable through Mavo’s HTML storage. The code uses a Mavo `mv-app` element with a `#data` storage block containing JSON, and D3’s `d3.interval` function repeatedly reads that JSON via `d3.select` to update a paragraph’s text. The result is a live greeting that changes when the user edits the name in the Mavo interface.

May 17, 2017

Why Reykjavík?

A rotating orthographic globe highlights a green flight path from San Francisco to Reykjavík, then onward to Paris, answering the title’s question. The visualization uses d3.geoOrthographic and d3.geoPath to project world landmasses from a TopoJSON dataset onto a canvas, with a d3.timer driving continuous rotation. Zoom and pan are enabled via d3.zoom, which adjusts the projection’s scale and translate. The globe’s sphere outline and landmasses are drawn in black and filled, while the route is stroked in green.

May 16, 2017

World roads (topojson mesh + simplify)

This example visualizes global road networks rendered as a fine white mesh over a satellite-projected world map. Using TopoJSON data derived from Natural Earth and processed with `toposimplify` and `topomerge`, the roads are drawn as SVG paths with `d3.geoPath`. The map rotates continuously via `d3.interval`, updating the projection and re-rendering paths. Landmasses use a dark fill, while the sphere and graticule provide geographic context.

May 15, 2017

Zoom to Bounding Box II d3v4

This interactive map of the United States supports both click-to-zoom and free pan/zoom via mouse or touch. Clicking a state smoothly zooms to its bounding box, while a mesh overlay shows state borders. It uses `d3.geoAlbersUsa` for the projection, `d3.geoPath` for rendering, and the `d3.zoom` transition to interpolate between views. The map data comes from a remote TopoJSON file, and the SVG rendering animates transformations and stroke widths.

May 10, 2017

HTML Color Names (Relative Lightness)

This visualization displays all HTML named colors as labeled swatches, using the WCAG relative luminance formula `L = 0.2126 * rgb.r + 0.7152 * rgb.g + 0.0722 * rgb.b` to set text color. The code compares this value against the simpler `hsl.l` luminance, highlighting colors where the two formulas disagree on the optimal black-or-white label contrast. Built with D3.js version 3.5.5, it loads color names from a CSV, renders each as a floating styled div, and dynamically assigns text color. The data originates from the Wikipedia list of web colors.

May 4, 2017

visualizing map distortion d3v4

A side-by-side visualization demonstrates map projection distortion by pairing an interactive Aitoff projection with a fixed orthographic globe. The user can pan and zoom the left map via `d3.zoom`, while the right globe rotates to match the map’s center using `projection.invert` and `projection.rotate`. A grid of red dots, generated as screen coordinates, is overlaid on both views; on the map they appear directly, while on the globe their positions are computed through the inverse projection, revealing how distances and shapes stretch across different projections. The implementation uses `d3.geoPath`, `d3.geoGraticule`, `d3.geoProjection`, and TopoJSON world data, with SVG rendering.

Bottomley projection

This example demonstrates the Bottomley projection, a pseudocylindrical map projection that preserves shapes along the central meridian, with a configurable variant parameter. The code loads world land and country boundary data from a TopoJSON file and renders it via SVG paths created with `d3.geoPath` and the custom `d3.geoBottomley` projection. A graticule and sphere outline are also drawn, and the projection’s variant can be adjusted through the `projection.variant` method, highlighting the projection’s flexibility.

ChamberlinAfrica inverse projection

This example demonstrates the ChamberlinAfrica projection and its inverse, which converts projected coordinates back to geographic latitude and longitude. It overlays a graticule, land masses, and boundary lines on a sphere rendered via SVG. The inverse is computed using the Newton-Raphson method on cartesian coordinates when no native `invert` function exists. The code uses d3.geoChamberlinAfrica, d3.geoPath, d3.geoGraticule, and TopoJSON data, with a color-coded grid validating the inversion accuracy and an interactive marker showing mouse position inversion.

InterruptedSinuMollweide inverse projection

This example demonstrates the inverse of the InterruptedSinuMollweide projection, visually validating that the projection and its inverse accurately map points on a sphere. A grid of points is rendered in green when the forward and inverse projections agree, red when they disagree, and blue when inversion fails. The code uses d3-geo-projection's `d3.geoInterruptedSinuMollweide` and `d3.geoPath` to draw the graticule and world map from TopoJSON data. The inverse computation relies on `d3.geoSolve`, and the visualization is rendered as an SVG with interactive mouse tracking.

geoGringortenQuincuncial inverse, fixed

This example tests the inverse projection of D3’s `geoGringortenQuincuncial`, marking points on a world map green when round-trip coordinates match and red when they fail. The map renders land and graticule via `d3.geoPath` with TopoJSON data, while a small grid of latitude-longitude pairs validates the inverse function. An orange marker follows the mouse, showing the projected location of the cursor’s inverted coordinates. The visualization uses d3-geo-projection and d3-geo with an SVG output, focusing on a specific bug fix for the projection’s inverse behavior.

Sinusoidal interpolation

This example demonstrates sinusoidal interpolation between tide event data points, contrasting smooth transitions during slack water with curved transitions during flood and ebb phases. A blue line traces the interpolated speed values over time, while circles mark the original observed measurements. The visualization uses a custom interpolation function that applies a sine-based easing to each segment, depending on whether the preceding event is classified as slack or non-slack. Built with D3 v4, it relies on `d3.timeParse`, `d3.scaleLinear`, `d3.line`, and `d3.csvParse` to process inline CSV data and render an SVG path.

Apr 25, 2017

Interrupted Homolosine

This example demonstrates D3’s `geoInterruptedHomolosine` projection by rendering a world map with landmasses, country boundaries, and a graticule. It also visualizes the inverse projection by moving a red marker to the geographic coordinates corresponding to the mouse position, using `projection.invert`. The map uses `d3.geoPath` with SVG, TopoJSON for world data, and `d3.geoGraticule`, clipped to a spherical outline. The projection is fitted to the viewport with `fitExtent`.

Mar 7, 2017

Gist 177f6c8fe1ef0050c1d0d9e490f6f6d5

This example visualizes the centroids of French communes as a particle system, with each point positioned by latitude and longitude from a CSV dataset. Using WebGL rendering within a Vue framework, the visualization employs a force simulation to spatialize the points, while geographic context is provided through a canvas-based path drawing approach. The underlying data includes commune names, INSEE codes, population, and coordinates, allowing the particles to reflect real administrative geography. The rendering leverages d3.forceSimulation for dynamic positioning and canvas getImageData for analyzing pixel density, creating a dense, interactive map-like scatter of population centers.

Mar 6, 2017

Satellite Projection Hebrides

A satellite projection of the Hebrides islands displays land, rivers, and lakes in muted greens and blues, rotating slowly to simulate an orbital view. The map redraws its geographic features as the mouse moves, adjusting latitude and longitude to follow the cursor. Built with D3.js and the d3-geo-projection library, it uses `d3.geoSatellite`, `d3.geoPath`, and TopoJSON data for vectors. The visualization updates paths dynamically, rendering SVG shapes with animation when idle.

Mar 5, 2017

Spherical extent

This example demonstrates a spherical Voronoi diagram, computed from 200 random points, projected through a Mercator projection for clipping and an orthographic projection for display. The clipping process ensures features remain in spherical coordinates while the visual extent reflects a paper-like boundary, using `d3.geoProject` with custom `d3.geoTransform` and `d3.geoIdentity` configured with `clipExtent`. Sites are rendered unclipped, while those outside the clipping region are marked in olive, using `d3.geoPath` for rendering.

Mar 3, 2017

Les couleurs du Décodex

The visualization maps the websites reviewed in Le Monde's "Décodex" fact-checking tool, positioning them with a t-SNE algorithm to group sources sharing similar keywords in their descriptions. Each site appears as a colored circle—green for reliable, blue for satirical, orange for imprecise, red for false information, and gray for non-sources—with a tooltip revealing its name and the Décodeurs' comment. The layout is computed in a background worker using the tsne.js library, while d3.forceSimulation and d3.forceCollide arrange the labeled nodes in the final SVG. Data is fetched live from Le Monde's webservice, and clicking a node opens the corresponding source page.

Feb 28, 2017

Antarctica’s centroid

This example computes the geographic centroid of Antarctica using the `d3.geoCentroid` method on a GeoJSON MultiPolygon loaded from a local file. It then renders the continent with an azimuthal equal-area projection via `d3.geoAzimuthalEqualArea`, drawing the polygon and a graticule using `d3.geoPath`. The SVG output displays the resulting center of mass and the map, demonstrating how D3 handles projected spherical geometry. The notebook uses a Node.js environment with the `d3` module.

Feb 25, 2017

Gist a4cce0757b78ab1918ce592718da6a33

This example visualizes the centroid of Antarctica, showing how it is calculated and where it falls on a map. It uses D3’s `d3.geoCircle` and `d3.geoCentroid` to compute the centroid of a circular polygon centered on the South Pole, then loads an Antarctic GeoJSON file to find the continent’s actual centroid. The map is rendered as SVG using `d3.geoPath` with an azimuthal equal-area projection, including a graticule, to display the result.

Feb 25, 2017

Antarctica’s Centroid explained

The visualization uses the D3.js library (v4) with an orthographic projection to display a map of Antarctica. It contrasts the correct spherical centroid, computed via `d3.geoCentroid`, shown as an orange dot, with the naïve planar centroid from the `d3.geoPath` centroid method, shown as a black dot. Both are projected onto the SVG using the `d3.geoOrthographic` projection, highlighting the inaccuracy of planar calculations for polar regions. The underlying GeoJSON data defines Antarctica’s multipolygon, and the graticule is added using `d3.geoGraticule`.

Feb 20, 2017

New York Centroid Fixed

This example demonstrates a workaround for a known issue in d3-geo where computing the centroid of a geographic feature collection can produce inaccurate results. It visualizes New York City neighborhoods on a Mercator projection, with orange and red dots marking computed centroids. The code uses `d3.geoCentroid` and `d3.geoPath` to project and render the data. A fix is applied by including the centroids as a MultiPoint feature in the projection's `fitExtent` calculation, ensuring the map is properly scaled and centered on the data.

Feb 20, 2017

simplestatistics.median VS d3.median

This visualization compares the performance of two median algorithms: D3's `d3.median` and the `median` function from the simple-statistics library (aliased as `ss.median`). It generates a dataset of one million random numbers using `d3.range(1000000).map(Math.random)`, times each function with `performance.now()`, and displays a text result in an SVG. The output shows whether the medians match and expresses the simple-statistics time as a percentage (formatted via `d3.format`) of D3's time, revealing the speed difference. The page loads both D3.v4 and simple-statistics 2.2.0 from CDN.

Feb 14, 2017

quickselect VS d3.median

This example benchmarks the performance of `d3.median` against the `quickselect` algorithm on a dataset of one million random numbers. A single text element displays the comparison: both methods yield the same result, and quickselect’s runtime is shown as a percentage of d3.median’s. The code uses `d3.range`, `Math.random`, and `performance.now` for timing, with `partialSort` from the `quickselect` library to compute the median and `d3.format` for the percentage output.

Feb 14, 2017

p5 L-Systems

This generative sketch implements a Lindenmayer system to draw an intricate, plant-like fractal pattern. An animated "turtle" traverses a precomputed string of symbols, interpreting each character as a drawing command—moving forward, turning, or placing decorative dots. The p5.js `setup()` and `draw()` functions handle the animation loop, while custom functions `lindenmayer()` and `drawIt()` manage rule substitution and rendering. Random color values and Gaussian-distributed dot sizes create a lively, organic texture over the thin black lines.

Feb 8, 2017

p5 wolfram CA

A p5.js sketch renders a one-dimensional cellular automaton, displaying each generation as a horizontal row of small squares that stack downward over time. The simulation starts with a single active cell in the center of the top row and applies a fixed Wolfram rule set to compute each subsequent generation from the three neighboring cells above. The code uses the p5.js `createCanvas`, `rect`, and `fill` functions to draw the grid, and the result produces a deterministic, rule-based visual pattern that evolves over the canvas height.

Feb 8, 2017

Gist efb1c9f3f0a9092c420dfe4cef8def96

This visualization displays a map of US airports, using a data-driven approach to plot the locations of each airport across the country. It shows the geographic distribution of airports using an Albers USA projection, with the map boundaries rendered as a shaded path. The code relies on the D3.js library, specifically `d3.geoAlbersUsa`, `d3.geoPath`, and `d3.json` for loading the TopoJSON map data and JSON airport coordinates. The final output is an SVG image, generated from these fetched datasets and projected onto a 960 by 500 pixel canvas.

Feb 4, 2017

d3.queue image loader

This example demonstrates how to load multiple asynchronous resources before rendering content to a canvas, using `d3.queue` to coordinate a text file and an image. The code defines a custom `d3.imageload` function that wraps the HTML `Image` object, then defers both it and `d3.text` for `hola.txt` and `thumbnail.png`. After both complete, it displays a status message and draws the loaded image onto the canvas using the Canvas API’s `drawImage` method. The page’s body is fixed to fill the viewport, and rendering targets a `canvas` element.

Feb 3, 2017

geoShape

Six parametric curves define custom shapes on a sphere, each generated by a `d3.geoShape().generator(t)` function. These shapes animate, changing their position, size, and form every 800 milliseconds. The visualization uses D3 v4's `d3.geoPath` with a `d3.geoConicEqualArea` projection to render the sphere and the shapes as SVG paths. The shapes, filled with semi-transparent colors from `d3.schemeCategory10`, demonstrate how the `geoShape` generalization of `d3.geoCircle` creates diverse closed forms.

Jan 31, 2017

Hilbert paths

A colorful, animated SVG visualization of Hilbert curves traces a path through a 512×512 grid, with the curve segmented into randomly sized, color-coded strokes. A white outline shows the full curve while seven white circles jump along it, updating their positions and a coordinate readout via `d3.interval`. The code uses `d3.scaleOrdinal` for color, `d3.range` for path generation, and custom `d2xy` and `xy2d` functions to map between Hilbert curve indices and 2D coordinates. Built with d3.v4 and SVG.

Jan 30, 2017

Example of Small Multiples with Mouseover Tooltip (fixed)

Small multiples of line charts display monthly request counts for six categories. Each chart has its own x- and y-axes and a shared mouseover tooltip that highlights the nearest data point, showing its value. The visualization uses d3.v4 with SVG rendering, parsing the CSV data with d3.csv, scaling axes with d3.scaleTime and d3.scaleLinear, and building the tooltip with an overlay rect and mousemove handler.

Jan 23, 2017

Versor Dragging - d3 & three.js running in sync

This example demonstrates a synchronized 3D globe using d3 and Three.js, controlled by a single drag gesture on a 2D orthographic projection. It shows how versor (quaternion) math maps mouse movement to a sphere’s rotation, updating both the d3 geographic paths and the Three.js mesh sphere in real time. The code uses `d3.geoOrthographic`, `d3.geoPath`, and the custom `versor.js` library for quaternion calculations. It renders land polygons from world-atlas data on a Canvas while Three.js draws a shaded sphere on a separate layer.

Jan 19, 2017

Scatterplot Matrix Brushing d3v4

This example shows a scatterplot matrix of Anderson’s iris flower measurements, with four quantitative traits (sepal and petal length and width) plotted pairwise for 150 specimens, colored by species. Users can drag a rectangular brush on any cell to highlight matching points across all other plots, while unselected circles are dimmed. Built with D3 v4, it uses `d3.brush` for interactive selection, `d3.scaleLinear` and `d3.axisBottom`/`d3.axisLeft` for axes, and `d3.schemeCategory10` for colors. Data is loaded from a CSV file describing Edgar Anderson’s dataset, rendered as SVG circles.

Jan 16, 2017

Genetic.js Hello World

This example demonstrates a genetic algorithm evolving a string toward a target phrase, with each generation’s best individual displayed in a table. It uses Genetic.js for the evolutionary operations (selection, crossover, mutation) and d3.v4 to append rows to the table body. The fitness function scores characters by proximity to the target, and the table highlights per-character differences with background colors. The visualization shows the progression of generations, fitness values, and the evolving best solution in real time.

Jan 3, 2017

K-Means as a force

A thousand colored circles of varying sizes drift on a canvas, continuously regrouping into distinct clusters as they move. The example runs a K-Means clustering algorithm inside a d3.forceSimulation loop, with each tick reassigning every node to its nearest of 20 cluster centers and then moving those centers toward their group’s barycenter. Rendered using Canvas 2D, the visualization combines force-based collision detection and positioning forces with the clustering logic, displaying the emergent dynamic partitioning of the dataset in real time.

Dec 26, 2016

t-SNE with Levenshtein distances, colored by K-means (work in progress)

This example visualizes 800 city names on a plane, positioned by t-SNE using a weighted Levenshtein distance that compares the first four letters of each name. The positions are colored by a K-means clustering algorithm into 18 groups, highlighting phonetic or orthographic similarities among city names. It uses d3.v4 with `d3.forceSimulation`, `d3.forceCollide`, and `d3.queue` to run t-SNE computations in a worker thread, with the result rendered as an SVG of circles and text. The code is based on the tsnejs library and demonstrates an ongoing work-in-progress, as indicated by the title.

Dec 26, 2016

t-SNE with Levenshtein distances

The visualization maps 800 city names as colored circles, positioned by t-SNE based on Levenshtein distances between their first two letters. A force simulation using `d3.forceSimulation` interpolates between geographic starting coordinates and the t-SNE output, while a `d3.forceCollide` prevents overlaps. City markers render as SVG circles with labels, using data from `cities.csv` and processing through a Web Worker running the tsnejs library.

Dec 22, 2016

d3 Voronoi Worker

A thousand randomly moving points drive a live Voronoi tessellation, visualized as colored cells on a Canvas. A separate SVG circle tracks the mouse, while the page displays the frame rates of the data updates, the tessellation computation, and the overall rendering. The heavy Voronoi calculation runs in a Web Worker using `d3.voronoi()`, keeping the mouse tracking responsive even when the tessellation lags behind.

Dec 22, 2016

t-SNE and Urquhart w/distances study

Two side-by-side canvases display a t-SNE projection of 300 random five-dimensional points, rendered as colored circles with an Urquhart graph overlay. The left view uses projected distances for graph pruning, while the right uses original distances, highlighting how projection distorts spatial relationships. A d3.forceSimulation with 'tsne' and 'collide' forces continuously adjusts positions, while d3.voronoi computes the underlying diagram. T-SNE runs in a Web Worker via science.ai’s implementation, and canvas 2D contexts draw the results.

Dec 20, 2016

Hexagonal Binning (Area) d3v4

A hexagonal binning visualization renders 2,000 randomly generated points from a normal distribution into hexagons of varying size. The area of each hexagon encodes the number of points falling within it, using a square-root scale to map bin counts to hexagon radii. The example uses the d3.hexbin plugin to group points, with SVG paths drawn for each hexagon and clipped to the plot area. Axes are generated using d3.axisBottom and d3.axisLeft, while the random point distribution relies on d3.randomNormal.

Dec 19, 2016

Redux + D3 in the browser

A Redux store manages a counter and iteration count, displayed as a text label in an SVG. The D3 v4 code renders the SVG and two buttons, while Redux dispatches `INCREMENT`, `DECREMENT`, `ZERO`, and `RESET` actions. A `d3.interval` timer randomly dispatches increment or decrement actions every 100 milliseconds. The store’s `subscribe` method updates the text element in response to state changes, demonstrating a pure Redux pattern for UI synchronization without a view-binding library.

Dec 15, 2016

t-SNE, a force, and Urquhart graph

This example visualizes 300 randomly generated circles, each with five independent dimensions (red, green, blue, opacity, and radius), projected into 2D space using t-SNE. The t-SNE computation runs in a JavaScript worker via the science.ai implementation, while the visual result is refined by a force simulation that both follows the t-SNE positions and applies collision avoidance between circle centers. The layout is rendered on a Canvas and enhanced with an Urquhart graph, which draws edges derived from the Voronoi diagram of the projected points, highlighting the local neighborhood structure of the high-dimensional data.

Dec 14, 2016

t-SNE, a force, and voronoi

A t-SNE projection of 300 random five-dimensional points is rendered as a Voronoi diagram, with each cell colored by the point's RGB values and opacity. A d3.forceSimulation combines a custom force that follows the t-SNE coordinates with forceCollide to separate overlapping centers, updating the Voronoi polygons on each tick. The computation runs asynchronously in a Web Worker using the tsne-js library.

Dec 14, 2016

t-SNE and a force

Randomly generated circles with five independent dimensions (red, green, blue, opacity, radius) are projected onto a plane using a t-SNE algorithm running in a web worker via the science.ai implementation. A d3.forceSimulation then applies three concurrent forces: attracting each circle toward its t-SNE position, rotating the whole layout so circles with high red values appear at the bottom, and colliding circles to prevent overlap. The SVG rendering updates continuously as the worker streams new t-SNE coordinates and cost values.

Dec 13, 2016

Merge Sites

This example simulates the merging of 300 randomly generated circles based on their size and proximity. It shows how smaller circles are absorbed into larger, overlapping ones, with the resulting combined circle repositioning to reflect the merged mass. The animation progresses in discrete steps, with circles fading out as they are subsumed, until only the largest remain. The code uses d3.v4's selection and transition APIs to animate SVG circle attributes, with the merge logic implemented as a custom iterative function.

Dec 13, 2016

Merge Sites, One Move

Three hundred translucent blue circles, each with a random position and weight, collapse into larger circles through an iterative merge process. The animation shows weighted circles absorbing smaller overlapping neighbors, moving the center of mass as weights combine, until only non-overlapping circles remain. Built with d3.v4, the SVG circles transition their radius, position, and opacity over two seconds using `transition()`. The merge logic is custom JavaScript, repeatedly scanning for overlapping circles and combining their weights in a single pass, with absorbed circles fading out and being removed.

Dec 13, 2016

t-SNE Voronoi

A t-SNE Voronoi diagram visualizes 200 random four-dimensional colors projected into two dimensions in real time. Each point is rendered as a polygon according to its Voronoi cell, colored by its RGB values and with opacity derived from its fourth dimension, while a grey line chart displays the algorithm's cost per iteration. The t-SNE computation runs in a JavaScript worker using science.ai's TSNE implementation, and the visualization is rendered with d3.v4's d3.voronoi, d3.area, d3.scaleLinear, and d3.timer APIs. The SVG output animates as points converge, with polygons updating their shape each frame.

Dec 12, 2016

topojson.topology + topojson.mesh

This example demonstrates the Aitoff map projection of the United States, drawn on a Canvas element using D3.js. It renders the geographic boundaries as stroked and filled paths, created via `d3.geoPath` with the `d3.geoAitoff` projection. The code first reads a GeoJSON file containing the US shape, converts it to a topology using the `topojson.topology` function from the `unpkg.com/topojson` package, and then draws it with `topojson.mesh` from `d3js.org/topojson.v2`.

Nov 23, 2016

Not an Ideal Gas

A simulation of 800 particles in a box with a central gap shows how the mean squared velocity evolves over time, plotted as a line chart below. The gap’s aperture shrinks as the simulation cools, and clicking the canvas restarts the process. The code uses `d3.forceSimulation` with a custom `forceCollide` and `velocityDecay`, plus custom bounce and barrier forces. Rendering combines Canvas for the particles and a d3 `area` path on SVG for the speed trace.

Nov 20, 2016

Vortex Emergence

A simulation of 4,000 particles in a divided container shows energy dynamics: the left side maintains a swirling vortex, while the right side disperses into chaotic motion. A barrier with a gap controls particle flow between halves. The visualization tracks and plots mean squared velocities for each side as red and green line charts below. Built with D3 v4, it uses `d3.forceSimulation` with custom forces for collision, bouncing, and speed limits, rendering particles on Canvas and the energy charts as SVG paths.

Nov 20, 2016

Circular Vortex Emergence

A dense cluster of a thousand particles circulates within a circular boundary, with their motion shaped by a D3 force simulation that balances collision, velocity decay, and a speed-limiting force. Clicking introduces a central vertical barrier that temporarily divides the system, altering particle trajectories and energy distribution. The simulation runs on a Canvas, with real-time red and green line charts at the bottom tracking the average squared velocities of particles on each side of the divider. The code uses `d3.forceSimulation`, custom force functions, `d3.scaleLinear`, and Canvas 2D rendering.

Nov 20, 2016

Brownian Motion Urquhart

This example shows 200 points moving under the influence of three forces: Brownian motion, collision avoidance, and elastic bouncing off a circular container. The resulting point distribution is visualized through an Urquhart graph, a simplification of the Delaunay triangulation that removes the longest edge of each triangle. The simulation uses D3’s `forceSimulation` module with custom force functions for `brownian`, `collide`, and `bounce-on-container` interactions. Rendering is done on a Canvas element, where the graph’s edges are drawn with thick light-gray strokes beneath thin black lines, and each node is a small yellow-filled circle. The mouse can also drag the first node, injecting new force into the system.

Nov 18, 2016

Brownian Motion Constrained in Rectangle

A canvas displays 200 particles performing Brownian motion inside a rectangle, bouncing elastically off its boundaries. The simulation uses d3.forceSimulation with custom forces for random motion and container collision, plus d3.forceCollide to prevent overlaps. A Voronoi diagram, computed with d3.voronoi, generates an Urquhart graph—its edges are drawn as thick gray lines beneath thin black ones, with white-stroked yellow dots marking each particle. Clicking drags the first node, restarting the simulation.

Nov 18, 2016

Urquhart Force Mesh

A force-directed simulation of 200 points, with the Urquhart graph—a subset of the Delaunay triangulation—drawn as gray links on a canvas. The code uses `d3.forceSimulation` for layout, `d3.voronoi` to compute the Delaunay diagram, and a custom `urquhart()` function to extract the graph by removing the longest edge of each triangle. Canvas 2D rendering shows the moving nodes as black dots. The first node follows the mouse, injecting a small `alpha` restart to keep the network shifting. The data is procedurally generated with `d3.range`.

Nov 17, 2016

getBoundingClientRect

This example demonstrates how to use the browser's `getBoundingClientRect` method to retrieve the exact screen-space bounding box of an SVG text element, and then draws a semi-transparent rectangle over that area. The text is positioned using a grouped `<g>` element with translation and scaling transforms, along with `dx` and `dy` offsets. The code uses D3 v3 to select and append SVG elements, computing the rectangle’s coordinates by subtracting the SVG’s own client rect from the text’s client rect. The final rectangle is styled with a gray fill and stroke, visually highlighting the text’s bounds.

Nov 4, 2016

Voronoi.find(x,y)

The example demonstrates how `voronoi.find(x,y)` locates the nearest cell in a Voronoi diagram as the mouse moves. A red fill marks the found cell, while orange and yellow highlight cells visited and tested during the search, revealing the algorithm’s traversal path. The code uses d3.v4 with 1000 random sites, rendering polygons as SVG paths. It wraps the native `diagram.find` method (available since v4.3.0) to add the color-coding, and applies a 50-pixel radius search limit.

Oct 28, 2016

Capacity Constrained Point Distributions

Animated Voronoi diagrams partition a canvas into colored cells, each containing a cluster of small points. The algorithm iteratively balances point distributions by swapping points between neighboring cells until a capacity constraint is met. This implementation uses `d3.voronoi` for cell computation, `d3.scan` for efficient candidate selection, and `d3.transition` to fade cell fills once stabilized. The process shows how points redistribute across regions over time.

Oct 26, 2016

Capacity Constrained Point Distribution on Data (line chart)

A line chart of Apple stock prices (closing values from May 2012 to March 2011) is overlaid with colored circular sites that reposition via an iterative capacity-constrained point distribution algorithm. The algorithm, based on Michael Balzer’s work, swaps data points between site clusters to balance spatial occupancy. The visualization uses d3.v4 with d3.line, d3.axisBottom, d3.axisLeft, and d3.voronoi, rendering SVG circles and polygons with animated transitions via d3.interval.

Oct 24, 2016

Urquhart Force Mesh Dance Procrastination

Interacting with the mouse drags a single node, and a custom "dance" force chain pulls nearby points through the simulation. The Urquhart graph, derived from the Delaunay triangulation, is drawn on a Canvas as a network of lines over 200 force-directed points. Using d3.forceSimulation, d3.voronoi, and Canvas 2D context, the edges update each tick, showing the graph’s structure while the points jitter and rearrange. The code filters Delaunay links by removing the longest edge of each triangle to compute the Urquhart mesh.

Oct 21, 2016

Painting power diagram (weighted Voronoi)

This example paints a weighted Voronoi diagram by coloring each pixel according to the closest of 400 randomly placed sites, using a custom distance function that adds a weight to squared Euclidean distance. The rendering is done directly on a Canvas 2D context, scanning pixel by pixel with `d3.scan` to find the nearest site and filling vertical strips for speed. Sites with a weight of 200 appear with red crosses, while unweighted ones are marked white. The code uses D3 v4’s `d3.interval` for incremental drawing and `d3.scaleOrdinal` with `schemeCategory20b` to assign colors.

Oct 15, 2016

Painting Euclidian Voronoi

This example paints a Euclidean Voronoi diagram pixel by pixel onto a canvas, with each pixel colored according to its nearest site among 400 randomly placed points. A white overlay of the true Voronoi cell boundaries, computed with `d3.voronoi().polygons()`, is drawn after the painting finishes. The rendering uses an `O(n*x*y)` brute-force scan, computing squared Euclidean distances with `d3.scan()` and filling one vertical strip per pixel column. Site markers are drawn with colored strokes using Canvas 2D methods.

Oct 15, 2016

Painting Manhattan-distance Voronoi

This example paints a canvas pixel-by-pixel to show the Manhattan-distance Voronoi diagram of 400 random points. Each pixel receives the color of its nearest site, revealing diamond-shaped cell boundaries. The rendering iterates over every pixel sequentially using a `d3.interval`, computing the Manhattan distance via a custom function and selecting the closest site with `d3.scan`. The sites are drawn as white crosses on top of the colored cells, and the animation pauses after 30 seconds or when all pixels are processed.

Oct 15, 2016

Scatterplot with Voronoi

This scatterplot visualizes life expectancy versus GDP per capita for countries, using color to indicate region and circle size for GDP. The chart uses a D3.v4 Voronoi diagram, implemented with the `d3-voronoi` library’s `find(x,y,radius)` method, to detect when the mouse hovers near a data point without relying on an SVG overlay. This allows for efficient, lazy computation of the Voronoi grid and precise tooltip triggering. The interaction is enhanced with a distance limit, so tooltips appear only when the cursor is within a defined proximity of a circle.

Oct 11, 2016

.call(generalpattern)

This example demonstrates the general update pattern in d3.v4 through a concise code template displayed in a textarea. It shows how to structure enter, update, exit, and optional before callbacks using `selection.enter()`, `selection.exit()`, and `selection.merge()`. The code uses `d3` selections and transitions, with animation applied via `.transition()` and `.remove()`. The displayed function `generalpattern` acts as a reusable helper for managing SVG elements, highlighting the pattern’s syntax rather than a specific dataset.

Oct 7, 2016

Brush Handles d3v4 II

This example demonstrates d3-brush with custom resize handles in D3 v4, highlighting the brush selection over a scatterplot of 800 random points. It shows how brushed points become highlighted with a red stroke, while custom path-based handles render on the left and right edges of the selection. The implementation uses d3.brushX, d3.scaleLinear, and d3.axisBottom, with the handle path defined via a custom function resembling the crossfilter approach. The brush’s start and brush events trigger the brushmoved function, which updates point activity and handle positioning based on the current selection.

Oct 4, 2016

Force move 400 dots in 10 buildings

Four hundred colored dots, each assigned to one of ten randomly placed building centers, are drawn on a Canvas as they converge into ten distinct clusters. A custom force named `shape` pulls each node toward its building’s center, while `d3.forceCollide` keeps the circles from overlapping. The simulation runs via `d3.forceSimulation`, with each tick redrawing the canvas using `fillStyle` and `arc` calls. The color scale `d3.scaleOrdinal` with `schemeCategory10` distinguishes the groups by building.

Oct 2, 2016

How d3.voronoi().extent() affects triangles() and links()

This example illustrates how adding an `extent()` to the voronoi layout changes the triangulation and link generation. It renders two overlaid sets of Delaunay triangles and links from 100 random points: one set computed without an extent (shown in blue) and another with a clipped extent (shown in yellow and red). The code uses `d3.voronoi()` from d3.v4 with `.triangles()` and `.links()` methods, drawing the polygons, triangles, and links as SVG paths and lines. The visualization highlights the difference in edge behavior near the boundary caused by the extent constraint.

Sep 21, 2016

Voronoi binning (animated)

Four thousand random points are colored by size, with the largest ten percent becoming Voronoi sites. The animation cycles through stages: it sorts points by size, uses the top ten percent as sites for d3.voronoi, then assigns every point the color of its site’s cell via the customized `diagram.find()` method. Points and cells fade, recolor, and reset every nine seconds using d3.interval and transitions.

Sep 18, 2016

Voronoi binning

4000 random points are colored by the nearest of 400 weighted sites, selected as the top 10% by a random weight and arranged as a Voronoi diagram using d3.voronoi. A custom `find` method on the diagram, which walks neighboring cells via halfedges and optimizes from the last result, assigns each point the site color of its containing cell. Circles are rendered in SVG, with radius proportional to the square of each point’s weight.

Sep 18, 2016

Peirce Equatorial

This example uses the Peirce quincuncial projection to render a world map in an equatorial aspect, displaying the globe as a square with continents shown as dark shapes and borders highlighted in white. The graticule and sphere outline are drawn in gray, and the map is centered with a 45-degree rotation. It employs d3.geoPath with the d3.geoPierceQuincuncial projection from the d3-geo-projection library, and fetches world-50m.json data from a gist to generate landmasses and country boundaries.

Sep 17, 2016

geoVoronoi x() and y() accessors

This example demonstrates a Voronoi tessellation of geographic points, where each cell is colored by a field sampled from a background image. The visualization uses `d3.geoVoronoi` to compute the voronoi diagram from a set of latitude/longitude coordinates, and the `x()` and `y()` accessors map those coordinates to pixel positions in a projected map. The code then renders the resulting polygons via `d3.geoPath` and samples a color from the underlying raster—accessed through Canvas `getImageData`—to fill each cell, effectively creating a choropleth of the image’s pixel values over the region.

Sep 12, 2016

geoVoronoi.find(x,y)

A spherical Voronoi diagram of 500 random points is shown on an orthographic projection of the globe, where moving the mouse highlights the cell containing the cursor’s location. Using d3-geo-voronoi and d3.geoPath, the example implements a custom `xfind` method that walks through neighboring cells—coloring each visited cell in amber—to locate the nearest site, then marks the final cell red. Random site coordinates are generated directly in the code.

Sep 11, 2016

General Update Pattern, tutoriel interactif

This interactive tutorial demonstrates D3 v4's general update pattern, showing how data changes are reconciled with existing SVG elements step by step. As users navigate through code lines with keyboard arrows, the visualization highlights which circles are selected for updating, entering, or exiting the scene. The example uses `selectAll`, `.data()`, `.enter()`, `.append()`, and `.exit()` to manage lifecycle transitions, with colors indicating fill states. It presents randomly drawn letters between A and H as data points, providing a concrete walkthrough of selection merging and DOM state.

Sep 7, 2016

Kohonen SOM

A self-organizing map arranges random points in 3D color space onto a hexagonal grid, with each grid cell colored via d3.lab. The animation shows 500 data points and 144 neuron positions transitioning as the kohonen library trains the network. Built with d3.js and the seracio/kohonen library, the example uses SVG circles with fill-opacity transitions to reveal the mapping process.

Kohonen SOM

A self-organizing map (SOM) trains a 12×12 hexagonal grid of neurons to organize 500 random three-dimensional data points, visualized as colored circles that cluster according to the HSL color space. The animation shows data points initially scattered randomly, then transitioning toward their matched neurons as the Kohonen algorithm runs over 500 steps. Built with d3.js and the seracio/kohonen library, the SVG rendering uses d3.transition to smoothly move circles as neuron positions update.

Kohonen SOM

Fil demonstrates a self-organizing map (SOM) as an animated SVG using d3.js and the kohonen library. The visualization initializes a grid of neurons and 500 random RGB data points, then runs a training phase where neurons migrate to fit the data, with each neuron filled according to its learned color value. The code transitions the neurons' fills and positions over four seconds, while the data points are scattered around their nearest matching neurons. Alternative color spaces—rgb, hsl, lab, and cubehelix—are linked for comparison.

Kohonen SOM

A Kohonen self-organizing map trains a 12×12 hexagonal grid of neurons on 500 random RGB data points, then animates both the neurons and the mapped data points into a clustered arrangement. The visualization uses d3.js for SVG rendering and transitions, with the kohonen library handling the neural network training. Each neuron’s color is derived from its weight vector via a cubehelix color space, while the data points, initially scattered randomly, smoothly transition to their nearest matching neurons over a four-second animation, revealing how the SOM organizes high-dimensional input into a low-dimensional topological layout.

bouncy-ball

A lime-green circle bounces vertically inside a fixed 200-by-400 SVG canvas against a black background. The animation loops indefinitely, alternating between a quick downward fall and an upward rebound. Built with D3 v4, the bounce uses chained `transition()` calls with `ease(d3.easeQuadIn)` for the fall and `ease(d3.easeQuadOut)` for the rise, repositioning the circle's `cy` attribute between 0 and 260 pixels. A recursive `on('end', bounce)` callback restarts the cycle.

Urquhart graph

This visualization demonstrates the Urquhart graph, a subset of the Delaunay triangulation, applied to 2,000 randomly generated points. The graph edges are drawn in red over the Voronoi diagram’s gray polygon boundaries. The code uses `d3.voronoi` to compute the Voronoi cells, links, and triangles, then removes the longest edge from each triangle to derive the Urquhart graph. Sites are rendered as black-stroked circles, with SVG paths and lines for the polygons and edges.

Sep 5, 2016

Cylindrical Voronoi

The example displays a Voronoi diagram of 300 random sites mapped onto a cylindrical surface, with the left and right edges seamlessly connected. Two vertical lines mark the cylinder’s seam. The code constructs the effect by duplicating each site, shifting copies by the cylinder’s width, and filtering links that connect only shadow copies. It uses the d3-voronoi library with d3.v4 and renders cells, links, and sites on a Canvas 2D context. The first site follows the mouse, which wraps around the cylinder’s edges.

Sep 4, 2016

Toric Voronoi

This example demonstrates a Voronoi diagram on a torus, where 300 random points create cells that wrap seamlessly across the canvas edges. It shows how the cell structure repeats across a virtual cylinder in both horizontal and vertical dimensions, with the interactive site highlighted in red. The code uses d3.voronoi to compute the diagram, duplicating each site into eight shadow copies to handle the toroidal topology, then filtering links between shadow copies. Rendering is done via Canvas 2D context, with polygons, links, and sites drawn as separate paths.

Sep 4, 2016

Voronoi Spanning tree - long paths

This example visualizes a Voronoi spanning tree using a dataset of 1,500 randomly generated sites. A red line connects each site to its nearest neighbor in the direction of a user-controlled root point, which follows the mouse cursor. The resulting tree reveals long, winding paths as the connection logic prioritizes proximity to the root over local clustering. Built with d3.v4 and the d3.voronoi API, it renders SVG polygons for the diagram and lines for the spanning tree, updating dynamically on mouse movement.

Aug 31, 2016

Voronoi Spanning tree - short paths

The visualization draws a Voronoi spanning tree that connects 1,500 randomly placed sites by hopping from each site to a neighboring site closer to a moving root point. As the mouse moves, the tree’s edges recompute in real time, highlighting short paths toward the cursor. Built with D3 v4, it uses `d3.voronoi` to compute cells and edges, with a custom `diagram.find()` and `diagram.next()` method to traverse the diagram. The SVG rendering shows semi-transparent polygon boundaries and black spanning lines, with red highlighting on found cells.

Aug 31, 2016

Voronoi colorized spanning tree

A Voronoi diagram of 1000 random sites is colored by a spanning tree that connects each site to its nearest neighbor closer to a moving root point. As the mouse moves, the root updates, the tree edges redraw, and every cell's fill derives from the tree's branch angles and depth. The example uses d3.v4 with `d3.voronoi` to compute cells and custom `diagram.find` and `diagram.next` methods for tree construction, then renders SVG polygons and lines with HSL colors.

Aug 31, 2016

render-world-variant

This example displays 88 world map projections, each rendered as a separate PNG image. It uses `d3.geoPath` with various `d3_geo_projection` functions, including obscure ones like `littrow` and `armadillo`, to draw land polygons from `world-50m.json`. The code clips outlines for interrupted or hemisphere projections, draws a graticule, and saves each frame via the Canvas library's `pngStream()`.

Aug 18, 2016

Circular Bounded Voronoi Tessellation

This example displays a Voronoi tessellation of one hundred randomly placed circular sites, with a colored convex hull that fully encloses the diagram and a single site that follows the mouse. The hull shape is derived from `d3.polygonHull` and then expanded outward along each vertex’s centroid radial angle using a distance calculated from the median of the Delaunay links, computed with `d3.median`. The code uses `d3.voronoi` with an extent, and renders the result as SVG paths, lines, and circles. The convex hull itself is drawn as a closed Catmull‑Rom curve via `d3.line().curve(d3.curveCatmullRomClosed)`, with additional artificial points added along the expanded hull boundary to ensure the tessellation stays within it.

Aug 17, 2016

Alpha-Shape Bounded Voronoi Tessellation

An interactive Voronoi tessellation divides a plane into cells around 100 randomly placed sites, with the site distribution forming two distinct clusters near the left and right edges. The visualization highlights the two clusters’ boundaries using a computed alpha shape, whose convex hull is expanded and then filled with additional artificial sites to constrain the tessellation. Built with d3.v4, it uses `d3.voronoi`, `d3.polygonHull`, and `d3.curveCatmullRomClosed` to calculate and render the polygons and hull path in SVG.

Aug 17, 2016

Bounded Voronoi Tessellation

This interactive visualization demonstrates a bounded Voronoi tessellation, where 100 randomly placed sites partition the SVG canvas into colored polygonal cells. The mouse controls the first site, dynamically updating the diagram as it moves. The code uses d3.voronoi to compute the tessellation and d3.polygonHull to create a convex hull around the sites, which is then expanded outward to bound the diagram. Artificial points are added along this expanded hull to ensure the Voronoi cells are fully enclosed, with the generator sites rendered as circles and the convex hull traced as a pink line.

Aug 17, 2016

Stressed Cells 1

Stressed Cells 1 shows 500 colored cells that deform and change opacity in response to pressure from neighboring cells, with each cell extending multiple "feelers" that shrink when overlapped by another cell's polygon. Users can drag any cell to disrupt the equilibrium and observe the cascading stress responses. The visualization uses d3.forceSimulation with custom collision and tension forces, d3.quadtree for neighbor detection, and d3.cubehelix for cell coloring, all rendered as animated SVG paths.

Aug 12, 2016

Collision Detection in a tight square

A thousand colored circles of varying radii bounce and slide within a square boundary, colliding and repelling to avoid overlap. The simulation uses d3.forceSimulation with a custom force function that pushes nodes away from the square’s edges, while d3.forceCollide handles circle-to-circle collisions. The Canvas API renders each circle with a distinct fill from the d3.schemeCategory10 palette, and the white strokes emphasize boundaries during the continuous tick updates.

Aug 7, 2016

europe-atlantic population

This visualization shows world population by country, with countries colored according to population thresholds on a custom europe-Atlantic projection. It uses d3.js v3 with SVG rendering, and the projection combines two equirectangular projections to focus on Europe and the North Atlantic. The map loads country geometries from a TopoJSON file and joins population data from a TSV file. Hovering over a country triggers a tooltip built with d3-tip, displaying the country name and population.

Jul 3, 2016

Developing on `d3-geo-projection` for d3 v4

This visualization gallery example documents the process of upgrading the `d3-geo-projection` library to work with d3 v4. It shows a workflow of checking out the `4` branch, restoring broken projection source files from a `4-broken` tag, and iteratively testing and tweaking projections like Robinson using `npm test` and `test/compute-scale`. The example also demonstrates publishing test outputs to a gist via `gistup` and preparing pull requests by comparing branches on GitHub.

Jul 3, 2016

Hexagonal Binning in d3v4

Hexagonal binning visualizes 2,000 normally distributed random points by grouping them into uniform hexagons. The color of each hexagon encodes the count of points falling within it, transitioning from white to steel blue through a linear color scale. The visualization uses the d3.hexbin plugin to compute bin positions and the hexagon path, while d3.scaleLinear with interpolateLab drives the color mapping. Axes are generated with d3.axisBottom and d3.axisLeft on an SVG canvas.

Jul 2, 2016

D3 frames to video

This example shows a rotating orthographic globe with countries filled in rainbow colors, rendered as a 600-frame animation that spins smoothly. The visualization displays world geography from TopoJSON data, with each country’s fill color cycling through a rainbow palette based on its index and frame number. The code uses D3’s `geoOrthographic` projection and `geoPath` to draw the globe, countries, and borders onto an HTML5 Canvas via the `canvas` npm package. Frames are piped directly to FFmpeg, which encodes them into an MP4 video at 20 frames per second, demonstrating a headless workflow for creating D3 animations.

Jul 2, 2016

Rotating Voronoi in d3v4

A rotating Voronoi diagram animates dozens of moving points whose cells constantly morph, producing intricate curved patterns against a black background. The animation derives from points arranged on circular paths that rotate at varying speeds and radii, while the Voronoi tessellation updates each frame. The code uses d3.voronoi to compute the polygons and d3.line with the curveBasisClosed interpolator to render them. A custom resample function subdivides each polygon edge into three segments before drawing, creating the smooth, curved cell boundaries. The animation runs continuously via d3.timer, with points’ positions updated directly in response to elapsed time.

Jul 2, 2016

Voronoi Labels in d3v4

This example uses a Voronoi tessellation to place labels in a scatterplot, showing how cell area and centroid direction determine which points get labeled and where. The code generates 200 random points, computes their Voronoi polygons with d3.voronoi, and filters for cells larger than 2000 square pixels. For each qualifying point, it compares the centroid to the point itself, choosing a label orientation among top, right, bottom, or left based on the angle. The visualization renders SVG paths for cell borders and centroid lines, with labels positioned via text anchors and offsets.

Jun 29, 2016

This Is a Globe in d3.v4

A continuously rotating orthographic projection of the world map, rendered as a spinning globe on a Canvas. The animation uses `d3.geoOrthographic` with a clip angle to show only the visible hemisphere, while `d3.geoPath` draws the land features from a TopoJSON world dataset. The rotation is driven by `d3.timer`, updating the projection’s rotation angle based on elapsed time. A static circle outlines the globe’s edge, with the map redrawn and cleared each frame.

Jun 28, 2016

Raster Reprojection of panorama images (360°) with WebGL

This interactive WebGL visualization reprojects a 360-degree equirectangular panorama image into the stereographic projection, enabling smooth zoom and pan interactions. It displays the source panorama as a textured plane, with the fragment shader performing inverse stereographic projection and rotation calculations in real time. The implementation uses d3.v3 for DOM and event handling, while raw WebGL shaders manage the rendering pipeline, including a custom vertex-fragment shader pair and texture mipmapping. The code compiles shaders, sets up a position buffer for a fullscreen quad, and updates uniform variables for translation, scale, and rotation based on user input.

Jun 28, 2016

geoCircle in d3.v4 (geoOrthographic)

This example visualizes concentric circles radiating from two geographic points—the North Pole and Washington, DC—using a d3.geoOrthographic projection. The circles, generated with d3.geoCircle, are drawn as SVG paths via d3.geoPath, with radii incrementing from 5 to 85 degrees. The map includes land masses rendered from TopoJSON world data, styled with fills and strokes. The code loads d3.v4 and topojson.v1 from CDNs, and the interaction between the circle generator and projection demonstrates how to create geodesic rings on a globe-like view.

Jun 27, 2016

geoCircle in d3.v4

This example visualizes concentric geo-circles radiating from two fixed points on a world map: the North Pole and Washington, D.C. It uses `d3.geoCircle()` to generate spherical circles at increasing radii, with `d3.geoPath()` and an equirectangular projection to render them as SVG paths. The code draws the circles in red and blue before overlaying landmasses from TopoJSON. It demonstrates how d3.v4’s geographic circle generator computes geodesic rings, with radii ranging from 5 to 85 degrees. The map is rendered at 960×500 pixels using D3’s `d3.geoEquirectangular` projection.

Jun 27, 2016

Bounded Force Layout - very tightly packed

This example demonstrates a bounded force-directed graph layout using D3.js. Nodes from the Les Misérables co-occurrence dataset are tightly packed within a rectangular boundary, constrained by updating their cx and cy attributes to stay within the [radius, width - radius] and [radius, height - radius] ranges. The force simulation continuously repositions nodes while enforcing these bounds, resulting in a dense, space-filling arrangement. Node colors encode community groups, and links represent character co-occurrences, creating a compact, legible network visualization in SVG.

Jun 26, 2016

Raster Reprojection of panorama images (360°)

This example shows a 360° panorama image reprojected onto a world map using a raster reprojection technique. The panorama is mapped to equirectangular coordinates, then projected to the screen using d3.geo.equirectangular. The visualization is interactive: users can click and drag to rotate the view, with d3.geo.zoom handling quaternion-based rotations for smooth, continuous navigation. The image is drawn to an offscreen canvas, and each pixel is remapped based on the inverse projection. Panning and zooming are handled by the d3.geo.zoom plugin, which modifies the projection’s scale and rotation in response to user input. The final result is rendered on a canvas element, allowing fluid exploration of the full 360° panoramic scene.

Raster Reprojection of panorama images — inverse colors version

This interactive canvas visualization uses Jason Davies’ d3.geo.zoom and D3 v3 to reproject a 360° panorama image onto an equirectangular projection. The code loads the panorama, draws it to an offscreen canvas, and then inversely maps each pixel of the target canvas back through the projection, inverting the RGB channels to create a negative-color version. Users can pan and zoom the reprojected image using the d3.geo.zoom behavior and projection scale extent.

Find Peaks

This example demonstrates how to find peaks in a noisy one-dimensional signal using the d3-peaks library. The signal is rendered as a black line, and detected peaks are highlighted with crimson circles and connected by a cardinal-interpolated path. The code applies the findPeaks API with a Ricker wavelet kernel, configured widths, and signal-to-noise ratio thresholds to identify both positive and inverted peaks. It also shades areas around each detected peak using d3.svg.area, with axes drawn via d3.svg.axis.

U.S. States TopoJSON small multiples

This example shows a small multiple of the United States, displaying 81 separate SVG maps, each with the nation’s landmass, county boundaries, and state borders drawn in a dark theme. The visualization uses TopoJSON to parse a US Census Bureau shapefile, with `d3.geo.albersUsa` projecting the geographic data onto a 96-by-50-pixel canvas. Each map is rendered by iterating over the topojson features and meshes, applying the same projection and path-generation logic to create a grid of repeated state outlines.

Earthquake Map

This map visualizes global earthquakes using D3.js, plotting each event as a colored circle on a dark equirectangular projection. Circle size and color encode earthquake magnitude, with the data sourced from a CSV file of USGS earthquake records. The map employs an SVG rendering and includes a polar fisheye distortion effect, initially centered on Japan, that magnifies the map around the cursor's position. The fisheye implementation uses D3’s projection and custom fisheye.js, with event handling throttled for performance.

Tissot’s Indicatrix for Bottomley

This visualization uses Tissot’s Indicatrix to reveal distortion in the Bottomley projection, displaying orange circles over a graticule and world map. The code builds the indicatrix from small circles of fixed angular radius, placed at grid intersections, then projects them via `d3.geo.bottomley` and renders with `d3.geo.path`. It relies on D3 v3, TopoJSON for land and boundary shapes, and a `d3.geo.circle` generator, while the graticule and sphere outline come from D3’s geo utilities.

list d3 color schemes

This example displays a list of color scheme names from the d3-scale-chromatic library, each with an accompanying note about the range of color counts it supports. The page uses `d3.select` to append an `h4` heading and a `div` for each scheme, dynamically reading the `range()` function from each generated scheme to display valid values. The schemes are defined directly in a bundled JavaScript file as hex strings, and the code relies on d3.v4’s selection and append methods for DOM manipulation.

Jun 5, 2016

Rotating Voronoi in colors

Dozens of colored points orbit along concentric circular paths, while the Voronoi cells surrounding them are resampled and smoothed into curved, lens-like shapes that continuously rotate and morph. The animation is rendered as an SVG, with each cell’s fill and stroke sampled from a two-color linear scale. The code uses d3.geom.voronoi to compute cells, a basis-closed line interpolator for curvature, and d3.timer to drive the point motion and redraw the paths.

Jun 1, 2016

Commutes 2012 - Oldskool style

This interactive map visualizes commuter flows between Dutch municipalities in 2012. Clicking a municipality highlights the selected area with a line texture and reveals the residential origins of its workers using circle-textured fills on other regions. The visualization is rendered with SVG and animation, built with D3.js v3, and uses custom texture patterns from Textures.js to distinguish data categories. It also supports zoom and pan, with a legend indicating clickable municipalities.

Jun 1, 2016

Earthquake Map

This map visualizes global earthquake activity over a two-week period in September 2015. Each circle marks an earthquake, sized by magnitude and colored by depth, with larger and darker circles indicating stronger, shallower events. The visualization uses the D3.js library to project earthquake epicenters onto a world map, with a legend clarifying the depth-color mapping and magnitude scaling. The map is rendered with SVG, with circles positioned by latitude and longitude coordinates from the dataset. The included data shows a cluster of significant seismic activity off the coast of Chile, as well as events across the Pacific Ring of Fire. The visualization effectively communicates the global distribution of earthquakes and relative intensities through its circle sizing and color scheme.

May 23, 2016

recompress jpg files on the fly

This example shows an Apache PHP script that transparently recompresses JPEG images on the fly whenever a browser requests a `.jpg` file. It first displays the original image in response to the request, then uses the external `jpeg-recompress` executable to create a smaller cached version, which subsequent requests serve instead. The script relies on server-side file handling via `filemtime`, `filesize`, and `md5`, and writes a cache log with compression ratios using `error_log`. It conditionally serves cached files only when they are newer than the source.

Apr 12, 2016

UN Votes - Session 70

This animated scatterplot maps UN voting patterns across Session 70, using principal component analysis to project countries in a two-dimensional space. Each country is represented as a dot, colored by regional group (e.g., WEOG, EEG, GRULAC), with movement and transitions over time revealing how voting blocs shift across roll-call votes. Built with d3.v3 and Numeric Javascript, the visualization uses SVG animation to animate the PCA projections, letting viewers explore geopolitical alignments and their evolution through the session.

Jan 5, 2016

list of country names

The visualization is a grid of country names, each linked to its ISO code, highlighting the variety of aliases and alternate names used for the same nation. It demonstrates how a single country can appear under multiple labels, such as “Bahamas” and “The Bahamas,” or “Russia” and “Russian Federation,” revealing the inconsistencies common in real-world datasets. The layout is generated with D3.js, using a force simulation (`d3.forceSimulation`) to position the text elements, while the country boundaries are drawn with `d3.geoPath` and geographic projections. The data comes from a gist by Fil, providing a clean, interactive reference for exploring name variations across different sources.

Nov 2, 2015

logo d'article

This example shows how to automatically generate a standardized square logo for an article when no explicit logo is provided. It first scans the article’s documents for an image file (JPG, GIF, or PNG) and uses that as the logo, otherwise it falls back to a user-supplied logo. The chosen image is then cropped and resized to 100×100 pixels using SPIP’s `image_passe_partout` and `image_recadre` filters. The rendering is handled through a SPIP template pipeline that calls a custom PHP function, `traiter_logo_article`, which uses `recuperer_fond` to render the logo snippet.

Apr 18, 2015

save lunr.js state

This example demonstrates how to save the complete internal state of a lunr.js search index to a downloadable JSON file. The code defines a console utility that serializes the index using `JSON.stringify` with pretty-printing, then creates a Blob with `text/json` MIME type. It uses the browser’s `URL.createObjectURL` to generate a temporary download link, which is programmatically clicked via a `MouseEvents`-dispatched event. The final line calls `lunr_index.toJSON()` to capture the index’s serialized data into `_indexed.json`. This approach relies on native browser APIs for file generation rather than external libraries.

Apr 18, 2015

Gist eeac85f83bbc682a4f2d

This example demonstrates how to run a simple inline Web Worker that greets a user by name, with a fallback to executing the worker script on the main thread when the browser lacks necessary APIs. It uses a `<script type="javascript/worker">` block for the worker code and the `runWorkerJs` helper, which checks for `Blob`, `BlobBuilder`, `URL.createObjectURL`, and `Worker` support. If those are available, it creates a worker from the script’s text and posts a parameter object; otherwise, it evals the script in a proxy scope. The result updates the page body text.

Apr 11, 2015

make a large png from map tiles

This example stitches map tiles into a single large PNG image. It constructs a grid of tiles by fetching them from a specified tile server URL using `wget`, then assembles them with ImageMagick’s `montage` command, first creating vertical bands per column and then concatenating those bands horizontally. The code handles tile caching in a temporary directory, detects image formats with `identify`, and substitutes missing tiles with a placeholder. The process is driven by command-line arguments specifying zoom level and tile coordinates.

Dec 27, 2014

mysql backup cron

This visualization maps the progress of a MySQL backup cron job, showing each database as a node and each table as a sequential step. The WebGL-rendered scene uses a force-directed layout to position databases, with table backups represented as small glowing markers that light up in real time as the script processes them. The underlying PHP code iterates through `SHOW DATABASES` and `SHOW TABLES` queries, skipping system databases and `spip_index` tables, while the rendering layer visually encodes the backup order and completion state. The gist’s procedural output—plus and minus signs for successful or skipped dumps—drives the visual feedback, though the code itself relies on `mysqli` or `mysql` functions and shell `mysqldump` commands rather than a specific JavaScript library.

Dec 7, 2014

d3 zoom and pan from the keyboard

This example demonstrates keyboard-driven zooming and panning of a map rendered with D3.js, replacing typical mouse or touch interactions. A user presses arrow keys to shift the viewport, plus or minus keys to zoom in and out by a factor of two, and Escape to reset the transformation. The behavior is implemented through D3’s zoom behavior, which tracks translation and scale, and applies these values to the SVG’s transform via a transition. The code also handles legacy key codes for Safari and logs unrecognized keys to a debug console.

Sep 21, 2014

livraison mondialisation apple

This visualization traces the journey of a single Apple product shipment by plotting each tracking stage as a geographic point, with lines connecting the sequence of locations. It shows the route from origin to delivery, revealing the spatial progression of global logistics. The shell script scrapes TNT’s tracking page using `lynx`, extracts stage, timestamp, and place fields via `sed` and `grep`, then enriches each row with latitude/longitude coordinates using the `geotools` command-line geocoder. The resulting comma-separated data (stage, time, place, lat, lon) is the foundation for the map, though the rendering itself—likely with a library like D3—is not shown in the code.

Aug 26, 2014

Gist 49058de6a5999fad4adf

This example demonstrates how to verify a Keybase identity claim by displaying the signed JSON statement and its PGP signature. It shows the exact data structure and cryptographic proof needed to authenticate a GitHub account, including the public key fingerprint and the signed payload. The visualization uses the `crypto` module to verify the PGP signature and the `d3.forceSimulation` layout to arrange the related key pairs and hash chains. The code renders the signature blocks and key metadata with `d3.select` and `d3.geoPath`, though no map is involved; instead, it presents the raw text and hash values for audit.

Jul 6, 2014

charsethero : convert mixed utf-8 and iso-latin content to utf-8

This example demonstrates a command-line Perl script that converts mixed UTF-8 and ISO 8859-1 encoded text into a single UTF-8 stream. It reads from standard input, processes each line, and outputs the converted result. The core logic uses regular expressions to identify multi-byte UTF-8 sequences and single-byte Latin-1 characters, then applies the `encode_char_utf8` function to re-encode any non-UTF-8 bytes. The script also includes a `force_latin` function for reverse conversion, though the main pipeline calls `force_utf8`. The data source is standard input, making it a filter for text streams.

Jun 8, 2014

newton function to solve f(V)=0

This example demonstrates Newton’s method for solving systems of equations, showing how the algorithm iteratively converges to a root from an initial guess. The visualization likely plots the function’s behavior or the iterative path in a 2D or 3D space, with the code using the `Newton.Solve` and `Newton.Zero` functions to compute roots. The implementation relies on QR decomposition and backsubstitution for matrix operations, as seen in `Newton.QRDec` and `Newton.QRBack`, and includes a backtracking line search to improve convergence. The code adapts a numerical method from a public-domain textbook, with no external charting library, instead computing and displaying results via raw JavaScript math and likely custom SVG or canvas rendering.

Mar 4, 2014

Bermuda bug

The example shows a single, mis-drawn polygon meant to represent the island of Bermuda, but whose coordinates form a tiny, squashed shape that does not match the real island's geography. The visualization highlights a known error in the GeoJSON data, where the polygon’s vertices are placed too close together. Using d3.forceSimulation, the code animates the polygon’s points, pulling them apart with simulated forces to reveal the incorrect layout. The rendering relies on d3.geoPath to draw the polygon on a Canvas, while the underlying GeoJSON source (from a GitHub gist) contains the faulty coordinates. The result is a clear, visual demonstration of a data bug.

Feb 19, 2014

Gist 8407898

This example demonstrates a PHP-based synchronization tool for exporting and importing Seenthis messages to and from disk, using SQL queries against a database. The code shows how message data is exported into `.eml` files, including headers like Message-Id, Date, and From, with an option to skip unchanged files via file modification times. It also parses imported `.eml` files, extracting fields such as UUIDs, reply parents, and authorship while creating missing user accounts. The implementation relies on SPIP’s database abstraction layer (`sql_query`, `sql_fetch`, `sql_insertq`) and PHP’s `DateTime` for date handling.

Jan 19, 2014

Outil pour créer une copie locale statique de "mes" seens

Ce script PHP génère une copie locale statique des signets « seens » de Seenthis, en les téléchargeant et les organisant sur le disque dur. Il récupère d'abord tous les fichiers distants listés dans un fichier, en les nommant d'après un hash MD5 de leur URL et en gérant les extensions selon le type MIME détecté (images, documents, HTML, etc.). Ensuite, il découpe le backup XML de l'utilisateur en petits fichiers HTML, créant ainsi une arborescence locale navigable. Le tout fonctionne avec une authentification configurable et produit une copie statique locale, idéale pour être indexée par le système de fichiers ou versionnée avec git.

Jan 5, 2014

via:geojson.io

This example uses a geospatial dataset of rectangular polygons to visualize named regions across South America and West Africa. It renders a map from a GeoJSON FeatureCollection, with each polygon’s properties labeling its area and name. The visualization relies on a mapping library to project and draw the geometry, while the interaction between overlapping regions (like the nested “South America Pacific” and “Atlantic” areas) is shown through distinct filled shapes. The code likely employs `d3.geoPath` for path generation and Canvas or SVG rendering, with the raw coordinate data directly defining the boundaries. The source is a gist, and the author is Fil.

Aug 28, 2013

point in polygon

This example demonstrates point-in-polygon testing on a map, showing whether given coordinates fall inside a defined polygonal region. It visualizes the result by rendering the polygon and highlighting test points. The algorithm uses ray casting, projecting a horizontal line from each point and counting intersections with polygon edges, with an epsilon adjustment for vertex coincidences. The PHP function `inside_polygon` iterates through edge pairs, checking latitude intersections and comparing longitudes, adapting code from a Stack Overflow solution. The rendering likely uses a mapping library or Canvas API, though the visible code focuses solely on the geometric computation.

Aug 28, 2013

via:geojson.io

This visualization maps ship locations from a GeoJSON FeatureCollection, plotting each vessel as a point on a geographic backdrop. It shows the spatial distribution of maritime traffic across various years, with each point encoded by coordinates and labeled with ship name and voyage date. The map is rendered using D3.js, leveraging `d3.geoPath` for map projection and `d3.forceSimulation` to adjust label or point placement, while the raw GeoJSON data is parsed directly. The visualization uses a Canvas-based rendering approach, with `getImageData` potentially used for pixel-level interactions or distance queries.

Aug 18, 2013

Gist 6245338

This visualization maps three Spanish cities as individual points on a geographic projection, with each point represented by a small dot. It uses a custom map projection and renders the GeoJSON features as a filled landmass, while the city markers are drawn as circles. The code relies on `d3.geoPath` to project and draw the map geometry, and `d3.forceSimulation` is not used here; instead, the points are placed directly at their projected coordinates. The canvas API (`getContext('2d')`) handles all rendering, and the map’s geographic boundaries come from the embedded `map.geojson` FeatureCollection.

Aug 15, 2013

Gist 4636174

This example demonstrates a web service that converts an SVG file, passed by URL, into a PNG image. The code first validates the incoming `url` parameter against an HTTP/HTTPS pattern ending in `.svg`, then downloads the file locally. It relies on the `rsvg-convert` command-line tool to perform the rasterization, with ImageMagick’s `convert` as an alternate. The resulting PNG is streamed back to the client with the appropriate `Content-Type` header, and temporary files are cleaned up. The script integrates with the SPIP framework, using its `inc/distant` and `abstract_sql` includes for remote file handling.

Jan 25, 2013

Gist 4434273

This example visualizes the hierarchical structure of database tables and their backup progress as a node-link diagram. It shows how a PHP script recursively traverses MySQL databases and tables, with each node representing a table and links reflecting parent-child relationships. The visualization uses D3.js’s `d3.forceSimulation` for layout and rendering, while the underlying data comes from the script’s output, which logs backup status via `+`, `-`, or error messages. The code explicitly relies on PHP’s `mysql_connect`, `mysql_query`, and `system` calls, alongside `mysqldump` and `gzip`, to generate the backup process that the graph depicts.

Jan 2, 2013