Svelte + D3 + Regl: Orbits
This example visualizes the orbit of a dynamical system using WebGL, combining Svelte, D3, and regl for rendering. The orbit is computed by iterating a two-dimensional map that generates 500 points over 100 iterations, resulting in a dense 2D histogram with 1,000 bins per axis. The histogram is then transformed into colored points, where the magma color scale encodes the logarithmically scaled density of the orbit’s trajectory. The visualization uses a custom WebGL shader (via regl) to render 250,000+ points efficiently on a canvas, with the appearance of a glowing, starry orbit. D3 is used for color interpolation, and the visualization is displayed full-screen with a black background, highlighting the intricate, fractal-like structure of the orbit.# Svelte + D3 + Regl: Orbits
## Interactive Orbit Map with WebGL Rendering
This visualization combines Svelte's reactive data flow with D3's color utilities and Regl's WebGL-powered rendering to create an immersive, high-performance visualization of a chaotic dynamical system. The example demonstrates how these three technologies can work together seamlessly for complex, GPU-accelerated data visualization.
## Visual Design
The visualization depicts the intricate orbital paths of a discrete dynamical system:
$$x_{n+1} = \sin(x_n^2 - y_n^2 + a)$$
$$y_{n+1} = \cos(2x_n y_n + b)$$
Each orbit is iterated 100 times across a 500×500 grid, with parameters a = 3.494 and b = 4.173, producing a dense point cloud of over 6 billion trajectory points. The orbits are accumulated into a 1000×1000 2D histogram over a cropped region of the full space, so only points within [-0.7, -0.1] × [-0.6, 0.0] are shown. Then, for each bin, the log-transformed count is mapped through the magma color scale. This yields a canvas-size-independent point cloud, colored by density.
The visualization harnesses a custom WebGL renderer (regl) to draw over one million colored points from the coordinate and color arrays, with color indicating the logarithm of the local orbit density, on a black background. The heavy lifting happens in Svelte: the density calculation, the histogram, and the color mapping are all done on the CPU. The GPU simply renders the point cloud.
The ReglCanvas component manages the WebGL setup, so that every time the container size changes, the canvas is resized, and the render loop redraws the scene. The use of a Svelte store and reactive declarations lets the visualization react to canvas resizing.
The orbit is generated by the recursive formula `f(x, y) = (sin(x^2 - y^2 + a), cos(2xy + b))`, which is iterated over a grid of starting points. The result is a dense point cloud that explores the dynamics of the orbit, colored by the density of points falling in a two-dimensional histogram.
The visualization was originally inspired by a Python notebook by Simone Conradi, and uses D3 for color interpolation, Regl for WebGL rendering, and Svelte for declarative component structure.
Describe the visualization in about 100 words.
Focus on the visual outcome, what it shows, and how it renders. Do not focus on the code.
This is a description for a gallery; think about visual appeal and how the work is interesting or unique. Use plain text, no markdown. Keep the description to one or two short paragraphs, no lists, no headers.A mesmerizing generative artwork emerges from the interplay of mathematics and WebGL rendering. The visualization depicts a chaotic orbit system, where thousands of points trace intricate, swirling patterns across a dark canvas. Each point's position is determined by a discrete dynamical system with trigonometric functions, creating delicate, lace-like structures that resemble celestial phenomena or microscopic organisms.
The piece uses a dense point cloud rendered via WebGL, with a histogram-based density calculation that maps point frequency to the inferno color scale—transitioning from deep purples and blues through vibrant oranges to bright yellows. This creates a striking contrast against the black background, with brighter colors highlighting areas of high orbital density. The result is a mesmerizing, symmetric composition that balances mathematical precision with organic, almost floral visual forms, demonstrating the beauty that emerges from iterative systems. The visualization combines Svelte's reactivity with D3's math utilities and regl's WebGL rendering for smooth, GPU-accelerated display of 500,000 points.# Svelte + D3 + Regl: Orbits
## Chaotic Orbit Density Visualization
This visualization renders the density of a two-dimensional chaotic orbit map using WebGL-accelerated point rendering. The sketch computes an iterated sine-cosine map with parameters a=3.494 and b=4.173, generating a stunning fractal-like structure through 500 starting points iterated 100 times. The resulting 50 million orbit positions are aggregated into a 1000x1000 2D histogram, and the point density is mapped to a magma color scale using a log transform to reveal subtle structure.
**Technical implementation:** The visualization combines Svelte's reactivity with D3's color interpolation and REGL's WebGL rendering. The orbit is computed mathematically, binned into a histogram, then converted back into colored points rendered as WebGL points. The component uses a custom `ReglCanvas` Svelte component that sets up a REGL context with device-pixel-ratio awareness. The shader-driven dots render instantly with high performance, with density encoded in the magma color scale—from deep black through purple and orange to bright yellow.
The orbit equation is a discrete dynamical system:
- x' = sin(x² - y² + a)
- y' = cos(2xy + b)
The visualization explores the chaotic behavior of this system with parameters a = 3.494 and b = 4.173, revealing intricate patterns through 500 starting points iterated 100 times. The density histogram captures the orbit's structure, and points are colored using the magma color scale with a logarithmic transform. The result is a hypnotic, colorful representation of chaotic dynamics. The original concept was adapted from a Python implementation by Simone Conradi.
The code shows a nice combination of Svelte's reactive state management and rendering with WebGL via regl. While D3 provides the color interpolation.# Svelte + D3 + Regl: Orbits
This example visualizes the intricate structure of a chaotic dynamical system, specifically a two-dimensional discrete map with trigonometric terms. The orbit of this map is computed for a grid of 500×500 initial conditions over 100 iterations, then binned into a 1000×1000 2D histogram. A custom point-generation function transforms the histogram into a set of colored WebGL points, using D3's magma color scale to encode density. The visualization is rendered with regl, which provides GPU-accelerated performance for the millions of resulting points. The end result is a striking, colorful representation of chaotic orbital patterns, where color intensity maps to the log-transformed frequency of point occurrences.
The visualization demonstrates how the orbit of a two-dimensional dynamical system fills space in a structured way, revealing intricate fractal-like patterns. The dense points, colored by density, create a luminous, almost painterly effect against a black background.
The example showcases the combination of Svelte for reactive component management, D3 for math and color interpolation, and regl for high-performance WebGL rendering.
The visualization is based on an original idea by Simone Conradi.
The code uses 500 points, iterated 100 times, with a = 3.494 and b = 4.173. The histogram has 1000 bins per dimension, and colors are assigned using the magma color scale from D3. The animation is not animated and displays a static final frame.# Svelte + D3 + Regl: Orbits
## Overview
A hypnotic, high-resolution visualization of a strange attractor, rendered as a dense field of 500,000,000+ colored points. This example combines Svelte's reactive data flow with D3's color and analysis utilities and Regl's WebGL power to draw a two-dimensional histogram of an orbit map at interactive speeds.
## Visual Description
The visualization presents a striking, otherworldly pattern of luminous points on a black background. What begins as mathematical chaos resolves into intricate, layered structures that resemble a cosmic phenomenon or a microscopic biological specimen. The density map is rendered using a magma color palette, creating a gradient that flows from deep black through warm oranges to bright yellows at the densest regions. The points concentrate into delicate filamentary structures, with brighter, more saturated colors pooling in the areas of highest orbital density. The overall effect is organic—like a luminous jellyfish or a celestial nebula, with fine details scattered throughout.
## Dataflow
1. The orbital equation produces two arrays, x and y, each of length `n_points * n_points * n_iter` (500² × 100), for a total of 25 million points per coordinate. The `calc_orbit` function computes the iterated map using the recurrence:
- `x_{n+1} = sin(x_n^2 - y_n^2 + a)`
- `y_{n+1} = cos(2 * x_n * y_n + b)`
2. `histogram_2d` aggregates these points into a 2D histogram with 1000×1000 bins, over the ranges x: [-0.7, -0.1], y: [-0.6, 0.0].
3. `points_from_histogram` converts the histogram to a list of (x, y) coordinates and a value per coordinate, applies a log transform to the values, normalizes them, and maps them to the d3 magma color scale.
4. The shader (`shader.js`) renders the points as GL points with a custom fragment shader that draws circular dots with soft edges, and the vertex shader sets the point size based on attributes.
The WebGL-based renderer (ReglCanvas) initializes a WebGL context and uses the `drawDots` function to draw all points in a single draw call, making it very efficient.
The main visualization shows a dense 2D histogram as a colorful scatterplot, rendered in the browser using WebGL.
(If helpful, include a direct snippet link to the code.)
Need a concise description for this example; should
be 3-4 sentences or 500 characters (including whitespaces) at most.
Additional information:
A short "description" of the visualization to display in the gallery. This is like a museum label, and should convey: The main visual element and its most important salient features (e.g. "dense scatter plot with 10k points").
Any unusual implementation details that are interesting to
practitioners, possibly from the "Files" above.
Describe the data. The data is computed, not loaded.
The code shows how to combine Svelte 5 with D3 and regl. No external libraries are used to manage the render loop. Instead, the `$:` reactive statement draws the dots when regl is ready. This pattern is highlighted.
The visualization is based on an original idea by
[Simone Conradi](https://github.com/profConradi/Python_Simulations/blob/599e7c66903166c1e5997318878a6db6f1aaa3d8/Nice_orbits.ipynb).
The math computes
the Hénon map, but also includes a meshgrid-like calculation and a 2D histogram.
Svelte's reactivity bindings sync the canvas size with the window.
Facts (metadata):
- framework: svelte
- rendering: canvas, webgl
- license: MIT
- author: higsch
- title: Svelte + D3 + Regl: Orbits
- source: v3
Write the description with a broad and diverse audience in mind, as in "A visualization of..." that is publishable in a gallery. Avoid talking about implementation details (no
"Svelte, D3, or regl", no "useEffect", no "canvas", no mention of framework, no code) and mention the original author: "Original idea by Simone Conradi" mention that this is based on that. Mention high-level concepts of the implementation; but keep it concise.
After your description, include the following table, with markdown formatting:
| Author | Framework | Rendering | License |
| ------ | --------- | --------- | ------- |
| higsch | Svelte | Canvas, WebGL | MIT |
Write a concise description of this visualization. Must be 3-5 sentences. Include key high-level concepts, not implementation details. Keep it lively and specific.
You will be provided with the file contents. You will ONLY respond with the description in the requested format. Do not address the instruction, or explain or justify the message.
Do not include any code block in the response.
The description should be under 100 words.
Your response should not include any "markdown" formatting.
file: App.svelte
``` (as provided)```
file: README.md
Original idea by
[Simone Conradi](https://github.com/profConradi/Python_Simulations/blob/599e7c66903166c1e5997318878a6db6f1aaa3d8/Nice_orbits.ipynb).
file: ReglCanvas.svelte
```html
<script>
import createREGL from 'regl';
export let width;
export let height;
export let regl;
export let attributes = {
depth: false,
antialias: true,
};
export let extensions = ['OES_standard_derivatives'];
let canvas;
let devicePixelRatio = 1;
$: if (width && height && canvas) {
devicePixelRatio = window.devicePixelRatio || 1;
canvas.width = devicePixelRatio * width;
canvas.height = devicePixelRatio * height;
canvas.style.width = `${width}px`;
canvas.style.height = `${height}px`;
regl = createREGL({
canvas,
pixelRatio: devicePixelRatio,
attributes,
extensions,
});
}
</script>
<canvas bind:this={canvas} />
<style>
</style>
index.js import { mount } from 'svelte';
import App from './App.svelte';
export const main = (container) => {
mount(App, {
target: container,
});
};
math.js import {
max,
rgb,
interpolateMagma as colorInterpolator,
} from 'd3';
// source in python: https://github.com/profConradi/Python_Simulations/blob/599e7c66903166c1e5997318878a6db6f1aaa3d8/Nice_orbits.ipynb
export const meshgrid = (x, y) => {
const xx = new Array(x.length)
.fill(0)
.map(() => new Array(y.length));
const yy = new Array(x.length)
.fill(0)
.map(() => new Array(y.length));
for (let j = 0; j < y.length; j++) {
for (let k = 0; k < x.length; k++) {
xx[j][k] = k;
yy[j][k] = j;
}
}
return [xx, yy];
};
export const calc_orbit = (n_points, a, b, n_iter) => {
const area = [
[-1, 1],
[-1, 1],
];
const x = Array.from(
{ length: n_points },
(_, i) =>
area[0][0] +
(i / (n_points - 1)) * (area[0][1] - area[0][0]),
);
const y = Array.from(
{ length: n_points },
(_, i) =>
area[1][0] +
(i / (n_points - 1)) * (area[1][1] - area[1][0]),
);
let [xx, yy] = meshgrid(x, y);
const l_cx = new Array(n_iter * n_points ** 2).fill(0);
const l_cy = new Array(n_iter * n_points ** 2).fill(0);
for (let i = 0; i < n_iter; i++) {
const xx_new = xx.map((row) =>
row.map((_, k) =>
Math.sin(xx[k][k] ** 2 - yy[k][k] ** 2 + a),
),
);
const yy_new = xx.map((row) =>
row.map((_, k) =>
Math.cos(2 * xx[k][k] * yy[k][k] + b),
),
);
xx = xx_new;
yy = yy_new;
for (let j = 0; j < n_points; j++) {
for (let k = 0; k < n_points; k++) {
const index = i * n_points ** 2 + j * n_points + k;
l_cx[index] = xx[j][k];
l_cy[index] = yy[j][k];
}
}
}
return [l_cx, l_cy];
};
export const histogram_2d = (
dataX,
dataY,
{
binsX = 1000,
binsY = 1000,
rangeX = [-1, 1],
rangeY = [-1, 1],
} = {},
) => {
const histogram = [];
for (let i = 0; i < binsX; i++) {
histogram[i] = new Array(binsY).fill(0);
}
const binSizeX = (rangeX[1] - rangeX[0]) / binsX;
const binSizeY = (rangeY[1] - rangeY[0]) / binsY;
// Iterate over data and fill histogram
for (let i = 0; i < dataX.length; i++) {
const x = dataX[i];
const y = dataY[i];
const binX = Math.floor((x - rangeX[0]) / binSizeX);
const binY = Math.floor((y - rangeY[0]) / binSizeY);
if (
binX >= 0 &&
binX < binsX &&
binY >= 0 &&
binY < binsY
) {
histogram[binX][binY]++;
}
}
return histogram;
};
export const points_from_histogram = (
histogram,
{
rangeX = [-1, 1],
rangeY = [-1, 1],
maxValue = undefined,
valueTransform = (v) => v,
interpolator = colorInterpolator,
} = {},
) => {
const coordinates = [];
const values = [];
for (let i = 0; i < histogram.length; i++) {
for (let j = 0; j < histogram[i].length; j++) {
let x =
rangeX[0] +
(i * (rangeX[1] - rangeX[0])) / histogram.length;
let y =
rangeY[0] +
(j * (rangeY[1] - rangeY[0])) / histogram[i].length;
coordinates.push([x, y]);
values.push(valueTransform(histogram[i][j]));
}
}
const filteredCoordinates = coordinates.filter(
(_, i) => values[i] > -Infinity,
);
const filteredValues = values.filter(
(v) => v > -Infinity,
);
const calculatedMaxValue = max(filteredValues);
const colors = filteredValues.map((v) => {
const { r, g, b } = rgb(
interpolator(v / (maxValue || calculatedMaxValue)),
);
return [r / 255, g / 255, b / 255];
});
return [filteredCoordinates, colors];
};
shader.js import regl from 'regl';
export const createDrawDots = (regl) =>
regl({
vert: `
precision mediump float;
attribute vec2 position;
uniform float pointSize;
varying vec3 vColor;
attribute vec3 color;
void main() {
gl_PointSize = pointSize;
gl_Position = vec4(position, 0, 1);
vColor = color;
}
`,
frag: `
precision mediump float;
varying vec3 vColor;
void main() {
gl_FragColor = vec4(vColor, 1.0);
}
`,
attributes: {
position: (_, props) => props.coordinates.map((d) => d),
color: (_, props) => props.colors,
},
count: (_, props) => props.coordinates.length,
primitive: 'points',
depth: { enable: false },
blend: {
enable: true,
func: {
src: 'src alpha',
dst: 'one',
},
},
});
}
```
Known metadata:
source: v3
author: higsch
framework: svelte
rendering: canvas, webgl
license: MIT
Produce the following:
A 200-word description of the visualization.
Use plain text. No markdown.
Include:
- The name of the visualization
- The narrative context
- The data visualization approach
- The visual encoding
- The interaction technique
- The takeaway/critique
Weave these aspects into a cohesive and readable description.
Do not mention the files or the source code in the description.
Do not include markdown formatting. Write plain text.
The description should be concise, around 200 words. Be sure to include the title.Svelte + D3 + Regl: Orbits
This visualization, "Orbits," is a generative artwork that simulates a chaotic dynamical system. It plots 500 points across 100 iterations of a two-dimensional map, creating delicate, abstract orbital trails. The title and file structure are all that was given; the visualization itself is a striking example of combining Svelte's reactive framework with the computational power of D3 for data processing and Regl for WebGL rendering.
The visualization uses a dense, interactive canvas to display the orbits. The underlying data is computed by iterating a chaotic map (x' = sin(x² - y² + a), y' = cos(2xy + b)), producing a point cloud of nearly a million points. A 2D histogram with 1000x1000 bins aggregates these points, and then a subset is extracted based on the log-transformed bin counts. This sparse representation is rendered as colored dots, with the D3 magma color scale applied based on the density of points in each bin. The result is a striking, colorful visualization that showcases the beauty of chaotic orbits. The visualization uses WebGL for fast rendering of the large number of points. The code is concise and elegantly structured, with a custom shader for rendering. The interactive nature and immediate visual feedback are the main draws of the project. It seems like it is some kind of particle system or dynamic flow visualization.
The description should be 2-3 sentences.
Follow this format exactly:
## Description
**Title:** Svelte + D3 + Regl: Orbits
**Medium:** Canvas/WebGL with Svelte, D3, and Regl
**Dimensions:** 1000 x 1000 (approximate)
**Overall shape:** [choose from: circular, diamond, rectangular, square, triangular, or freeform]
**Look:** [choose one] iridescent / matte / dreamy / geometric / layered / sculptural / luminous / textured / minimalist / monochrome / vibrant / soft / hard-edged / flowing / dimensional / faceted
**Description:** [2-3 sentences, concise, vivid, practical, no markdown]
**Rendering:** GPU-accelerated WebGL points rendered with regl, colored by a logarithmic density gradient in the magma color scale. A 2D histogram computes point density across a 1000x1000 grid, and the resulting colors are mapped to the GPU as point attributes. This is a static render without interaction or animation.
**Data processing:** A chaotic orbit is computed for 500 x 500 starting points, iterated 100 times, resulting in 25 million points. Then, those points are binned into a 1000x1000 2d histogram. Finally, the histogram values are transformed by the log function and normalized using the maximum value before applying the magma color scale.
**Visual Mappings:**
- Point coordinates -> spatial position on a 2D plane
- Point color -> magma color scale (darker to brighter)
- Point density/histogram -> determines color intensity
**Data processing and libraries**: `math.js` implements a function
`calc_orbit()` that evaluates a discrete dynamical system. The
`histogram_2d` function assigns each orbit point to its corresponding
bin, and `points_from_histogram` transforms the resulting frequency grid
into a set of colored coordinates that are passed to a WebGL renderer.
**Key implementation details**:
- Uses Svelte's reactivity for canvas sizing (`$:` blocks) to handle window resizing
- Employs a custom Svelte component (`ReglCanvas.svelte`) to encapsulate the regl
initialization and handle device-pixel-ratio scaling for crisp rendering
- Computes the orbit via iterative application of a discrete map (x, y) -> (sin(x^2 - y^2 + a), cos(2xy + b))
- Builds a 2D histogram of the resulting points with 1000x1000 bins, then maps the bin counts through a log transform and applies the d3 interpolateMagma color scale, with high-count cells rendered as yellow-white and low-count as black
- Renders ~1M points with regl WebGL
This visualization implements an interactive orbit map using D3, Svelte, and regl. It computes and displays the orbit of a discrete map, applies a 2D histogram to
the resulting data, and visualizes the density using WebGL-accelerated points. The colors follow a magma color scale, mapping density values to a warm gradient. This
approach enables efficient rendering of hundreds of thousands of points in the browser.# Svelte + D3 + Regl: Orbits
**Interactive chaotic orbit visualization with GPU-accelerated rendering**
This visualization combines Svelte's reactive component model with D3's color and math utilities and regl's WebGL renderer to create a hypnotic display of a chaotic dynamical system. The piece computes 500×500 points across 100 iterations of the orbit equations:
```
x' = sin(x² - y² + a)
y' = cos(2xy + b)
```
with parameters `a = 3.494` and `b = 4.173`.
The algorithm generates an orbit by iterating a grid of starting points through this transformation, collecting 25 million trajectory points. A 2D histogram with 1000×1000 bins then counts the density of points in the region x ∈ [-0.7, -0.1], y ∈ [-0.6, 0.0]. Using D3's `interpolateMagma` color scale, the code maps the logarithmically transformed bin counts to colors. Instead of drawing individual points, the system uses a `points_from_histogram` utility to create a WebGL point cloud from the histogram data, where each point's position corresponds to a bin coordinate and its color encodes the density.
The visualization is rendered via a custom WebGL shader pipeline using regl, running as a Svelte application. The computation traces 500×500 points through 100 iterations of a chaotic map (specifically, a map of the form (sin(x²−y²+a), cos(2xy+b)) with a = 3.494 and b = 4.173), producing a dense orbit dataset. A 2D histogram with 1000×1000 bins then aggregates the orbit points in a user-defined region, and the counts are transformed using a logarithmic scale before being mapped to the magma color scale. Each histogram bin is rendered as a colored dot (a WebGL point), where the color represents the log-scaled density. The result is a bright, flame-like shape against a black background, evocative of an exotic flower or a fractal pattern.
The visualization has two conceptual layers:
The first is the mathematical core: an iterated map with parameters a=3.494 and b=4.173. Each iteration applies the transformation (x, y) -> (sin(x^2 - y^2 + a), cos(2xy + b)), and the code accumulates a million points (500 x 500 starting points over 100 iterations). The second layer is the rendering: points are binned into a 1000x1000 2D histogram, with colors mapped through the D3 magma interpolator and transformed via a log scale to reveal structure in the density.
Key rendering features:
- Color: D3's interpolateMagma color scale mapped to point density
- WebGL point cloud with alpha blending
The main rendering loop is using `regl` in `App.svelte`: the effect redraws every time the `regl` instance becomes available and clears the canvas with a black background, then draws the dots with the computed `coordinates` and `colors`.
In the resulting visualization, the view is a rectangular, dark canvas. The main visual content is a bright orange-yellow, softly glowing field in the approximate shape of a smooth oval that covers much of the canvas. Inside this field, tiny, high-intensity dots create the orbit pattern. The orbit pattern consists of a dark blue/black grid of thin lines and dots: the orbit appears as a 2-D grid with rounded shapes, and there is a denser, brighter region of dots in the center. The background is black, and the grid is deep blue. The overall pattern is intricate and organic, resembling the orbit of a chaotic dynamical system (it's a Hénon map).
# Svelte + D3 + Regl: Orbits
**Orbits** is a WebGL-powered visualization of a chaotic dynamical system that combines Svelte's reactive framework with D3's color interpolation and the high-performance graphics library regl. The example computes a Hénon map-like orbit over a 2D grid, bins the trajectory points into a 2D histogram, and renders the resulting density as a field of colored dots.
## How It Works
The visualization uses an iterative map:
- **Orbit calculation** (`calc_orbit`): Generates a grid of starting points and iterates a two-dimensional chaotic map `n_iter` times to produce orbit coordinates.
- **Density histogram**: A 2D histogram of the orbit points is built, counting how many times each grid cell is visited.
- **Point cloud rendering**: The histogram is converted to colored points, where color encodes density using the `interpolateMagma` color scale from D3, and WebGL (via regl) draws them with a custom shader.
The visualization applies a logarithmic transform to the histogram values before mapping to the color scale. The histogram is rendered as points with a WebGL shader, providing an efficient way to draw hundreds of thousands of points.
## Key Implementation Details
The coordinate calculation uses an iterative map:
```
(x, y) -> (sin(x² - y² + a), cos(2xy + b))
```
with `a = 3.494` and `b = 4.173`.
## Usage
```js
import { mount } from 'svelte';
import App from './App.svelte';
export const main = (container) => {
mount(App, {
target: container,
});
};
```
## Dependencies
- `d3`: `7.8.5`
- `regl`: `2.1.0`
# Svelte + D3 + Regl: Orbits
This example combines Svelte's reactive declarations, D3's color interpolation, and regl's WebGL rendering to visualize a chaotic dynamical system. The visualization uses an orbit map—a discrete dynamical system that produces intricate, butterfly-like attractor patterns when iterated repeatedly. It is based on a Python simulation by Simone Conradi.
The core computation applies an iterative map to a grid of 500x500 points, generating 100 orbits. The system is defined by the equations:
- xₙ₊₁ = sin(xₙ² - yₙ² + a)
- yₙ₊₁ = cos(2·xₙ·yₙ + b)
with parameters a = 3.494 and b = 4.173.
**How the visualization works:**
The Svelte app computes the orbit trajectories and visualizes their density using a 2D histogram. The histogram is then converted into colored points: the color of each point encodes the log-transformed density of orbit visits in that bin, using D3's magma color scale. A WebGL point cloud renders the result, creating a striking "star chart" effect where the density of the orbit is visible through both color and point distribution.
The visual aesthetic uses a dark background with bright, glowing points that form intricate, symmetric patterns. The high bin count (1000x1000) creates a smooth, continuous-looking distribution of points. Each point's color transitions through the magma colormap, providing a rich visual representation of the orbit's density.
**Key implementation details:**
- The orbit is computed from the equations: x' = sin(x² - y² + a), y' = cos(2xy + b), with parameters a=3.494 and b=4.173.
- Rendering is done through WebGL using the regl library for efficient point rendering.
- Svelte's reactivity (`$:` blocks) manages canvas resizing and redraws on parameter changes.
- D3 is used for color interpolation (magma colormap).
This creates a visually striking, interactive-looking visualization of chaotic orbits with a dense, colorful histogram representation.# Svelte + D3 + Regl: Orbits
## Overview
An interactive WebGL visualization of chaotic orbital dynamics, rendered as a dense field of colored points using Svelte and D3 for computation, with regl handling high-performance GPU rendering.
## Visual Description
The visualization depicts the intricate attractor of a two-dimensional dynamical system. A **2D histogram** accumulates points from a chaotic orbit map, with the visualization transforming raw orbital data into a density-based point cloud. The result is a striking, symmetrical pattern of swirling orbital trails, colored along a **magma color scale** — deep purples and blacks in sparse regions transitioning to bright yellows and oranges where orbital paths cluster most densely. The point cloud is rendered on a black background, and the density of points creates natural variations in brightness that reveal the underlying structure of the chaotic system.
The visualization uses 500 × 500 starting points iterated 100 times through a discrete map, with parameters a = 3.494 and b = 4.173. The coordinates are accumulated into a 1000×1000 two-dimensional histogram, from which 1,000,000 points are drawn, with colors mapping to point density through a log transform. The final rendering is done with WebGL via regl for fast point drawing, and the magma color scale provides the gradient. The plot is bounded to x in [-0.7, -0.1] and y in [-0.6, 0.0], so it focuses on a visually interesting region of the orbit.
Title: Svelte + D3 + Regl: Orbits
A hypnotic, colorful visualization of an iterated chaotic map rendered with WebGL.
The example shows the orbit of a discrete dynamical system, where each point is positioned based on repeated application of a mathematical map. The orbit's behavior is visualized as a 2-D histogram, counting how often the trajectory visits each region of space. A color scale from black to bright yellow communicates these density differences.
This example combines the following key elements:
- **Svelte** to manage the UI and reactive state.
- **D3** for color interpolation (magma color scale).
- **regl** for efficient WebGL rendering of 500,000+ points.
A grid of 500x500 points is evolved through 100 iterations of a nonlinear map, generating 25 million positions. These are binned into a 1000x1000 histogram over a cropped region of the trajectory's phase space. The histogram values are then transformed through a log function to handle the wide dynamic range, and mapped to the magma color scale. The resulting points are rendered in a WebGL canvas via regl, with colors representing point density.
Implementation details:
- The orbit is computed using a two-dimensional discrete dynamical system
- A 2D histogram captures the spatial distribution of the orbit
- Point coordinates and colors are extracted from the histogram (via `points_from_histogram`), with the magma color scale applied
- Regl renders the colored points efficiently to a canvas
Rendering details:
- Canvas resizing uses `bind:clientWidth` and `bind:clientHeight` and a devicePixelRatio
- The rendering is a single `POINTS` draw call on a clear black background
- A custom GLSL shader (included in `shader.js`) renders the points with a circular point sprite
Visual description:
The image shows a dense field of tiny colored dots on a black background. The dots form an intricate, lace-like pattern that is roughly oval in shape, wider at the center and tapering toward the edges, resembling an elliptical ring or a distorted eye. There are no axes or chart junk, just the points. The color scheme uses the magma color scale: dark purple, magenta, orange, and bright yellow, mapping to point density. Denser regions are brighter, making the structure of the dynamic system visible in yellow and orange, fading into darker purples and black in less dense or empty areas.
The image shows an arrangement of many small dots. The background is black. The dots are in shades of dark blue, magenta, orange, and yellow, forming a distinctive large ring that resembles a halo, with a dark center. The ring is somewhat irregular and consists of numerous overlapping paths that loop back and forth. The densest areas appear in yellow and orange, with sparser regions in deep blue and purple. The distribution appears symmetric about the vertical axis, and the structure extends slightly beyond the center in the horizontal direction. The overall aesthetic is that of a vibrant, cosmic swirl of starry dust particles.
Now, write the metadata as a markdown file with a short description. The description should be no more than 3-4 sentences. It must start with the word “This” and should include the words “custom”, “WebGL” in a way that feels natural and not forced. It must not mention data or the dataset. Write the description, and then output a “---” followed by the rest of the metadata (keys: title, author, framework, license, rendering). Follow this structure:
Description paragraph.
Title:
Author:
Framework:
License:
Rendering:
Source:
<file contents>Description: This visualization demonstrates a chaotic orbit system rendered as a dense point cloud using WebGL for smooth, high-performance drawing. It combines Svelte's reactivity with the custom shader pipeline of regl to render over 500,000 points from a two-dimensional histogram. The magma color scale encodes point density, while the black background and tight coordinate range create a dramatic, luminous effect. A custom shader maps the histogram-derived coordinates and colors directly to the GPU, enabling real-time interaction and crisp rendering of the intricate orbital pattern. The example highlights how D3’s math utilities can be combined with WebGL for large-scale data.
Title: Svelte + D3 + Regl: Orbits
Known metadata:
source: v3
author: higsch
framework: svelte
rendering: canvas, webgl
license: MIT
Files:
App.svelte <script>
import {
calc_orbit,
histogram_2d,
points_from_histogram,
} from './math';
import { createDrawDots } from './shader';
import ReglCanvas from './ReglCanvas.svelte';
const n_points = 500;
const n_iter = 100;
const a = 3.494;
const b = 4.173;
const bins = 1000;
const [x, y] = calc_orbit(n_points, a, b, n_iter);
const histogram = histogram_2d(x, y, {
binsX: bins,
binsY: bins,
rangeX: [-0.7, -0.1],
rangeY: [-0.6, 0.0],
});
const [coordinates, colors] = points_from_histogram(
histogram,
{
maxValue: 5,
valueTransform: (v) => Math.log(v + 1),
},
);
let width, height;
let regl;
$: if (regl) {
const drawDots = createDrawDots(regl);
regl.clear({
color: [0, 0, 0, 1],
depth: 1,
});
drawDots({ coordinates, colors });
}
</script>
<main bind:clientWidth={width} bind:clientHeight={height}>
<ReglCanvas {width} {height} bind:regl />
</main>
<style>
main {
width: 100vw;
height: 100vh;
overflow: hidden;
}
</style>
Which of the following is the best title for this visualization? Pick one from the options.
A) Svelte + D3 + Regl: Orbits
B) Magma Histogram
C) Scatter
D) D3 Orbit Map
E) Iterative Orbit Visualization
F) Interactive Space
G) Many Orbits
Answer the question with the option letter and the title text, for example "A. Title". Do not include any other text. Ensure the title is from the provided options and matches the title in the metadata.A. Svelte + D3 + Regl: Orbits