Hilbert paths

100%

✓ Published0🌍 Public

Last edited Jan 30, 2017

Created on Jan 30, 2017

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.

AI-generated description

Hilbert curve formula from https://github.com/ryan-williams/hilbert/blob/master/hilbert2d.js (see also https://github.com/ryan-williams/hilbert-js).

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Hilbert Tiles

This example uses a Hilbert curve to lay out a grid of colored tiles, demonstrating how a space-filling curve preserves spatial locality compared to a sequential layout. The map, built with Polymaps, renders rainbow-colored tiles whose hue is derived from the Hilbert index of each tile’s position, so adjacent tiles always display adjacent colors in the spectrum, even as the user zooms and pans. The code defines a custom Hilbert function, applies it in a Polymaps layer to generate SVG rectangles, and computes their fill colors with a custom HSL-to-RGB conversion.

Mmbostock

73% match

Loading thumbnail…

rounded-corner-curve

An interactive line chart demonstrates a technique for drawing smooth paths with rounded corners through data points, contrasting it with a standard linear interpolation. The example generates random data and displays two paths: a default black line and a magenta path with rounded corners. Moving the mouse horizontally adjusts the rounding intensity in real time, revealing how the SVG path `C` (cubic Bézier) commands create the effect. The code uses d3.js for data generation and SVG path construction, with custom logic for path string manipulation.

11wheel

72% match

Loading thumbnail…

Data Folowing a Path

A collection of pink circles animates along a fixed black path, each circle traveling from the path’s start to its end in sequence. The visualization shows how data points can follow a predefined geometric route, with each circle representing a discrete step. The code uses D3 v5’s `scaleLinear` to map indices to path lengths, and `transition.attrTween` with `getPointAtLength` to move each circle along the SVG path. The animation uses `d3.easeCircleInOut` for smooth acceleration and deceleration, with the path defined by a complex Bézier string.

HHalian Vilela

71% match

Loading thumbnail…

hello path

This example demonstrates two fundamental D3.js path generators: `d3.line` and `d3.arc`. A black polyline connects four data points, with commented-out curve options like `d3.curveCardinal` and `d3.curveBasis` showing alternative interpolation methods. Beside it, three arc segments rendered via `d3.arc` form a partial donut chart with varying inner radii, fill colors, and a pad angle, all drawn as SVG paths on a 1600x800 canvas.

Vvivianaaai@qq.com

70% match

Loading thumbnail…

connected dots (curves)

Four orange dots on a steelblue line trace a stepwise path. The line connects the four points in sequence, using a step-after curve that creates right-angle turns between each point. The chart is built with D3 v4, using the `d3.line()` and `d3.curveStepAfter` functions to generate the path, while circles are added with SVG `circle` elements. The data is a small hardcoded array of x/y coordinates, and the visualization relies on D3’s path and shape modules.

PPatrick Wojda

70% match

Loading thumbnail…

path with d3 - 1

A simple SVG line chart demonstrates D3's `d3.line()` path generator. Five coordinate pairs define a polyline rendered as a thick black path across a 960 by 500 canvas. A green circle with a CSS hover animation (class `pulseCircle`) sits at the first data point, scaling from zero to four times its size over two seconds using keyframes. The example shows D3 v7 appending SVG elements and generating path data from an array of points, with the circle's interactive pulse effect driven by vanilla CSS rather than D3 transitions.

NNita

70% match

Loading thumbnail…

D3Path

D3Path demonstrates two fundamental D3.js geometry primitives rendered as SVG paths. The left side plots a polyline through four explicit data points using `d3.line()`, with commented-out curve options (`d3.curveCardinal`, `d3.curveBasis`, etc.) illustrating alternative interpolation strategies. The right side draws three concentric arc segments using `d3.arc()` with varying radii (`innerRadius`, `outerRadius`), angles, and padding (`padAngle`) to produce multi-colored pie-like wedges. The example uses hardcoded JavaScript arrays for data and D3 v6 directly from the unpkg CDN, with an SVG canvas sized 1600x800, showcasing basic path construction without external styling.

Vvivianaaai@qq.com

69% match

Loading thumbnail…

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.

PPhilippe Rivière

69% match