naive triangulation

Polygons

This interactive visualization explores polygon triangulations through codewords, combinatorial representations of how diagonals partition an N-gon. Users can select different N values and codewords from dropdown menus to see the corresponding interior edges drawn as animated paths with staggered stroke-dashoffset transitions. The application uses D3 v7 selections and transitions to animate points, edges, and labels, while codeword generation and geometry calculations are handled by custom JavaScript modules. Colors for interior edges are mapped using `d3.interpolateViridis` based on vertex positions, with buttons to restart or start the animation sequence.

TTrio-

65% match

delaunay-triangulation

This interactive visualization demonstrates the Delaunay triangulation of a set of points, rendered as an animated SVG using d3-voronoi. As users drag points, the triangulation updates in real time, with the SVG paths redrawn to show the current triangular mesh connecting each point to its nearest neighbors. The animation highlights the dynamic nature of the Delaunay triangulation as point positions change.

11wheel

65% match

d3 | 1 triangle repeated

This visualization arranges 45 identical triangles in a circular pattern, each rotated by 10 degrees around the center of an SVG canvas, creating a complex, gear-like mandala from a simple repeated shape. The code defines triangle vertices as coordinate pairs and uses D3 v4’s data join with `d3.range` to generate groups, appending a path per triangle via `append('path')` and the `datum` method. A slider input lets users adjust the number of triangles from 1 to 50, triggering a re-render with updated rotations, while all strokes use a semi-transparent yellow against a dark background.

EEndNight95

63% match

Polygon Clipping II

This example shows how to clip a geographic polygon to a rectangular extent, displaying the original US nation outline in red and its clipped counterpart in black over a blue background. It uses `d3.geoIdentity` with `clipExtent` and `d3.geoProject` to precompute the clipped polygon from TopoJSON data, while `d3.geoPath` renders both the original and clipped features as SVG paths.</svg>

63% match

Delaunay Triangulation

This interactive demonstration shows a Delaunay triangulation of 100 randomly generated points, with triangles and links redrawn in real time as the user moves the mouse. The first point follows the cursor, highlighting all triangles and links connected to it in red and white. Built with d3.v4 and the d3-voronoi API, it uses SVG paths, lines, and circles to render the triangulation, updating the visualization dynamically on mousemove and touchmove events.

Gist c7122eee6247b95dba09

This example generates a continuously evolving abstract animation by drawing Voronoi polygons in alternating black and white. It shows a recursive process where each polygon’s edges are traced with short, sequential line segments that slowly shrink the polygon’s boundary, creating a spiral-like contraction. The animation uses D3’s `d3.geom.voronoi()` with a clip extent to create the polygons from random points, and then employs Canvas 2D API calls like `beginPath`, `lineTo`, and `stroke` to draw each step. A queue (`queue.js`) schedules the drawing of each polygon, and the code alternates stroke colors (`#000` and `#fff`) after each full pass, repeating indefinitely.

11wheel

Icosahedron

An animated icosahedron rotates beneath a fixed circular clipping boundary, revealing its wireframe edges in a spherical orthographic projection. The shape is generated from a custom D3 geodesic module that subdivides the twenty triangular faces of an icosahedron and projects their vertices onto a sphere. D3’s `d3.geo.orthographic` projection and `d3.geo.path` render the multipolygon geometry as SVG paths, with a `d3.timer` updating the projection’s rotation over time.

Spiral Triangle

A mesmerizing, topologically impossible animation shows a spiral of black-stroked white squares rotating and translating within two triangular clipping regions. The piece recreates a GIF by PATAKK, using an SVG scene with upper and lower clip paths. The code uses d3.v3’s `d3.selectAll`, `d3.range`, and `d3.timer` to drive square transforms, while each square’s position and rotation are computed from a normalized index and elapsed time.