Lorenz System

100%

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Apr 15, 2013

This example visualizes the Lorenz system, a set of chaotic differential equations, by continuously tracing its trajectory as a glowing, colored line. The display shows the system's characteristic butterfly-shaped attractor, with colors shifting from yellow to purple based on the current z-value. The animation runs on a Canvas element, using a `d3.timer` callback to integrate the equations at each step and draw short line segments. A semi-transparent black `fillRect` is applied every 100 milliseconds to create a fading trail effect, all styled within an HTML page using D3 v3.

AI-generated description

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Lorenz Toy

This example visualizes the chaotic Lorenz attractor as a colorful, animated trajectory on a black canvas. Moving the mouse resets the starting point of new trajectories, which are drawn incrementally with thin, colored strokes. The code uses D3.js v3’s `d3.timer` for animation and `d3.scale.linear` with `d3.interpolateHcl` to map the z-coordinate to a sequence of hues, rendered through Canvas `getContext("2d")` with global composite operations to create a fading trail effect.

Mmbostock

88% match

Loading thumbnail…

Fork of D3 Starter

This example shows a continuously animated field of colored circles that oscillate vertically in a sine-wave pattern while subtly shifting their fill colors. It demonstrates a simple dynamic scatterplot with real-time updates driven by a timer interval. The visualization is built with D3 version 7, using the `d3.select` API to append an SVG canvas, `d3.range` to generate up to 2,000 data points, and data joins to bind circle elements to changing values. Circle positions and RGB fill colors are recalculated from the sine of the current time step, producing a smooth, wave-like motion across the display.

AAlexanderShaw

64% match

Loading thumbnail…

lombris

A grid of circles animates across an SVG canvas, moving horizontally in a staggered wave. Each circle cycles through a sequence of horizontal positions, creating a looping motion synchronized by a per-circle delay. The fill color transitions from pale yellow to dark navy based on the circle’s index, using a linear scale with HCL interpolation. The animation is built with D3 v4’s `transition` and `d3.active`, while a separate module loads car data via a Promise and formats it with template literals.

Jjesramyep1263

63% match

Loading thumbnail…

Chaos Game

This visualization demonstrates the chaos game, a mathematical process that generates fractal patterns by repeatedly selecting points between a set of fixed anchor vertices. The SVG canvas displays a dense scatter of points that emerge as the algorithm iterates, with each new point placed halfway between the previous point and a randomly chosen vertex. The example uses D3.js v7 to manage the SVG element and render the resulting point cloud, while the underlying computation is handled in JavaScript. The visualization shows how simple probabilistic rules can produce intricate, self-similar geometric structures.

Nnandugali

63% match

Loading thumbnail…

Chained Transitions II

The visualization shows a vertical column of 50 black circles that move in a choreographed wave, sliding horizontally across the screen and then returning, one after another. The animation uses chained transitions to create a continuous looping sequence. Built with D3 v4, it employs `d3.active` to manage each circle’s transition chain, with `d3.scalePoint` positioning the circles vertically and `d3.scaleLinear` mapping the color gradient from yellow to blue based on the circle’s index. The code uses SVG circle elements and CSS styling, with each circle’s fill determined by its position in the modulo sequence.

HHelenaV

62% match

Loading thumbnail…

Random lines

The visualization displays a dense field of 800 randomly colored, semi-transparent lines radiating from a central point, creating a chaotic, abstract burst of color. Each line is positioned using trigonometric functions with randomized radius values, and its stroke color is generated via the `rgb()` function with random values. The SVG elements are appended using D3.js v6, with the main group rotated 90 degrees and translated to center the composition. The lines are rendered statically with a stroke-width of 5 and opacity of 0.5, creating overlapping visual depth.

NNita

62% match

Loading thumbnail…

d3 selection exploration

This example demonstrates a generative, interactive line chart within a black canvas. As a timer progresses, the visualization automatically appends points to a path, creating a random walk from the bottom of the screen upward. A semi-transparent radial gradient follows the user's mouse cursor, acting as a spotlight that reveals the chart's details. The implementation relies on D3 v7's selection and `.join()` operations to efficiently manage SVG elements, with mouse events updating a circle and text label in real time.

Bblockmarket

62% match

Loading thumbnail…

Chained Transitions

Fifty black circles, each representing one step in a 50-point scale, are arranged along the left edge of an SVG. Chained transitions, created using `transition.transition` and `d3.active`, repeatedly sweep each circle horizontally across the frame and back, with staggered delays creating a cascading wave effect. The circles’ fill colors interpolate between light yellow and dark blue via a linear scale with `d3.interpolateHcl`. The animation runs concurrently on all elements, inheriting the original transition’s reference time to ensure synchronized looping.

Mmbostock

62% match