Tricontour flower

100%

Tricontour flower

✓ Published0🌍 Public

Last edited Aug 27, 2019

Created on Aug 25, 2019

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.

AI-generated description

Simple demonstration of d3-tricontour, reproducing this matplotlib demo.

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

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.

PPhilippe Rivière

72% match

Loading thumbnail…

Contour Test using Jason Davis implementation with D3

This visualization demonstrates contour generation on a 20×10 grid of numeric values using the Conrec algorithm, ported to D3. The scalar field is encoded as a series of filled contour polygons, each mapped to a distinct level between -5 and 3. A linear color scale interpolates from white to red, with semi-transparent fills and black strokes delineating the contours. The data is rendered into an SVG using D3's line generator, with spatial scaling applied to map the grid coordinates onto a 500×500 pixel canvas. The example showcases how D3 can work alongside external contouring libraries to produce smooth isolines directly in the browser.

DDinoJay

71% match

Loading thumbnail…

GeoTIFF Contours

This example visualizes surface temperature data from a GeoTIFF file as twenty colored contour bands over a map-like SVG view. It reads the raster values with the GeoTIFF library, computes contours using `d3.contours` with smoothing disabled, and renders them as filled paths via `d3.geoPath`. A sequential color scale with `d3.interpolateMagma` maps each contour’s value to its fill color, producing a vivid elevation-style temperature gradient across the geographic extent.

Mmbostock

71% match

Loading thumbnail…

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.

PPhilippe Rivière

71% match

Loading thumbnail…

Contour Plot III

A contour plot displays animated isolines of a mathematical function, with colors shifting through a red-blue diverging scale as the threshold values change over time. The visualization computes a grid of sine-based values, then uses d3-contour to generate contour geometries at varying thresholds. d3.geoPath draws these shapes onto a Canvas element, while d3.scaleSequential and d3.interpolateRdBu map contour values to colors. A d3.timer drives the animation, continuously updating the thresholds to create the moving contour bands.

Mmbostock

70% match

Loading thumbnail…

GeoJSON Contours Test

This example tests the rendering of contour lines stored as GeoJSON MultiPolygon features, with each feature carrying a numeric value property. The visualization displays these contours as filled regions across a geographic area, creating a layered map that resembles a topographic or density surface. The code uses D3’s `geoPath` to project and draw the GeoJSON geometry onto an SVG canvas, with the contour values determining the visual appearance of each region. The data comes from a gist by curran, showcasing how pre-generated contour polygons can be directly translated into a map visualization.

CCurran Kelleher

70% match

Loading thumbnail…

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

69% match

Loading thumbnail…

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.

Mmbostock

69% match