Gist 1434108

Gist f7dc00e0350f215e21d1d7b3f9ee6aca

This example presents an interactive geographic visualization of a world map, with animated flight paths connecting major cities. It shows a network of arcing routes overlaid on a dark, stylized globe. The visualization uses the D3.js library, specifically calling `d3.geoPath` to render the map’s landmasses and `d3.forceSimulation` to manage the physics of the flight arcs, making them appear as if they are in motion. The routes are likely generated from a small set of hardcoded city coordinate pairs. The rendering approach combines a simple geographic projection with dynamic path interpolation for the animated trajectory effects.

LLuisSevillano

66% match

Animated Voronoï map 2

The example shows an animated Voronoï map that smoothly transitions from one set of site weights to another, with each cell maintaining its region across updates. It uses the `d3-voronoi-map` plugin’s `initialPosition()` and `initialWeight()` APIs to reuse previous coordinates and weights, enabling fluid live or static arrangements. Rendering is done on canvas, with a choice between drawing cells, weight circles, or both, and customizable color schemes that include a conical rainbow approximated manually since canvas lacks native conical gradients.

66% match

Gist fdfc88707da3d0b9b203

This example shows the clustering and connection of points on a map based on their geographic proximity and shared attributes. It uses a force-directed layout via `d3.forceSimulation` to position nodes while links are drawn as curved paths, with a base projection provided by `d3.geoPath` and `d3.geoMercator`. The data is loaded from an external CSV file, and the visualization updates dynamically as the simulation runs, highlighting node neighborhoods and their interconnections.

MMSCAU

66% match

Voronoï playground: animating the addition/removing of data on a Voronoï map

This example animates transitions between two Voronoï maps, handling both data that persists and data that appears or disappears. Blue cells morph smoothly, while red cells shrink away and green cells grow in. The d3-voronoi-map-tween plugin interpolates site positions and weights, then recomputes each intermediate tessellation with d3-weighted-voronoi. Controls adjust the interpolation slider, toggle overall size or shape changes (using flubber), and display internal site radii.

Relations between map points

This visualization maps relationships between points, with edges colored to encode the distance between connected nodes. It uses a force-directed layout to arrange points, with line thickness and opacity revealing path lengths. The rendering combines D3’s `forceSimulation` for node positioning, Canvas `getImageData` for pixel-level styling, and `transition.attrTween` for smooth link animations. Data from a gist (rels.csv) supplies node coordinates and pairwise distances.

CCliffordAnderson

Animated Voronoï map

This example demonstrates an animated Voronoï map that self-organizes over time, showing both live iterative updates and a static final arrangement. The visualization uses the d3-voronoi-map plugin (v2) to compute weighted Voronoï diagrams on a circular clipping polygon, with each iteration rendered on canvas. Users can toggle between drawing the Voronoï cells, their weights as circles, or both, and choose among greyscale, radial rainbow, or conical rainbow backgrounds. The code relies on d3.v5 and the d3-weighted-voronoi plugin, with user interactions handled through HTML radio buttons and checkboxes.

Voronoï playground: animating the addition/removing of data on a Voronoï map

This visualization animates the transition between two Voronoï maps, showing how cell areas shift when data points are added, removed, or updated. Red cells mark exiting data, green cells mark entering data, and blue cells represent updated values whose areas change accordingly. A slider interpolates between the starting and ending tessellations, while a toggle reveals the underlying sites whose radii encode the data values. The implementation combines D3 v6 with the d3-voronoi-map and d3-weighted-voronoi plugins, computing interpolated site positions and weights via linear interpolation before rebuilding each intermediate map.

Dynamic Simplification

This example shows a map of the United States that continuously simplifies its boundaries, alternating between depicting all counties and reducing them to a coarse outline. The animation cycles through progressive shapes while preserving topology. The code uses `topojson.presimplify` to precompute point importance, a custom `d3.geo.transform` geometry stream to filter points based on a dynamic area threshold, and `d3.geo.path` to render the result onto a Canvas via its 2D context, driven by `transition.tween` and `d3.interpolate`.

Mmbostock