Canvas Rossler attractor

100%

Canvas Rossler attractor

✓ Published0🌍 Public

Last edited Oct 11, 2017

Created on Oct 11, 2017

This example visualizes the Rössler attractor, a chaotic dynamical system, by plotting its trajectory across three 2D projections (XY, XZ, and YZ planes) alongside a rotated 3D main view. It uses a Canvas 2D context to render the attractor paths with a linear gradient, while SVG is used for the coordinate axes and arrow markers. The code relies on d3.line and d3.curveCardinal for path generation, and applies custom rotation and orthographic projection functions to map 3D points to 2D space.

AI-generated description

Generation of the Rossler attractor and visualization of the solution of the system on the 3 planes.

This is the canvas version (except for the axes, so d3-axis could be used). Compare to the SVG version

Visualization of other attractors:

forked from <a href='http://bl.ocks.org/gcalmettes/'>gcalmettes</a>'s block: <a href='http://bl.ocks.org/gcalmettes/fd80abba670527a9736d69486e557735'>Canvas Rossler attractor</a>

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

73% match

Loading thumbnail…

Lorenz System

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.

Mmbostock

69% match

Loading thumbnail…

Dynamical Systems: circule trajectories

This example visualizes circular trajectories for the dynamical system \(\dot{x}=xy,\dot{y}=(1-x^2-y^2)/2\). A click on the phase plane draws the unique circular path determined by the chosen initial condition, with a red center marker and a blue dot tracking the motion. The D3.js code renders an SVG canvas with axes, tick labels, and a set of precomputed trajectory circles in light gray, while user interaction dynamically adds a highlighted trajectory. The implementation uses `d3.select`, `d3.scaleLinear`, and SVG element `append` calls to build the plot, updating the circle’s position and radius via `attr` on mouse events.

YYanghong Huang

67% match

Loading thumbnail…

d3-force-attract: mouse attract II

Fifty circles with randomized positions and radii are rendered as an SVG. The visualization demonstrates a multi-force physics simulation where a force-based layout continuously attracts the circles toward the current mouse location while a separate collision force keeps them from overlapping. The example uses `d3.forceSimulation()` and `d3.forceAttract()` from the d3-force-attract library, with per-node attract strength defined via the `inertia` property. A mouse-move event updates the attract target and restarts the simulation, updating circle positions on each tick.

FFrissAnalytics

65% 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

65% match

Loading thumbnail…

D3 Blanck Canvas

This example demonstrates a line chart visualization with an orange scatter plot overlay, rendered as SVG within a React framework. Using d3.csv to load data and d3.scaleTime and d3.scaleLinear to map dates and values, it plots a maroon line path and orange circles. The axes are drawn with d3.axisLeft and d3.axisBottom, while CSS styles the chart with large labels and a hidden overflow layout.

DDaniel Rivera

65% match

Loading thumbnail…

Canvas Scatterplot

Two thousand normally distributed points render as a steelblue canvas scatterplot. The code generates data with d3.randomNormal, binds it to custom elements with a d3 data join, and draws the points using Canvas 2D context arcs. A d3.timer repeatedly calls the draw function for 300 milliseconds, clearing and repainting the canvas to animate the visualization. The example uses d3.v4, with linear scales mapping the domain from 2 to 8 onto a 1400 by 750 pixel canvas.

JJverma

64% match

Loading thumbnail…

Canvas Swarm

A swarm of 500 points drifts and bounces across a canvas, each point’s velocity and position evolving through a simple physics model with random impulses and damping. The animation runs at a target frame rate, with a live FPS counter displayed. The visualization uses D3’s `d3.range`, `d3.scale.linear`, and `d3.timer` APIs, and renders via Canvas `getContext("2d")`, drawing each point as an arc with `beginPath` and `fill`/`stroke`. The data is procedurally generated—no external dataset—and the canvas is cleared each frame with `clearRect`.

Mmbostock

64% match