Fork of Svelte + D3 + Regl starter (WebGL)

100%

Fork of Svelte + D3 + Regl starter (WebGL)

✓ Published0🌍 Public

Last edited Oct 2, 2024

Created on Oct 2, 2024

Forked from Svelte + D3 + Regl starter (WebGL)

This example displays 11,000 dots arranged on a canvas using WebGL rendering via the `regl` library. Each dot has a unique radius, color, and opacity, with colors generated using D3's `interpolateWarm` sequential scale. The visualization demonstrates how Svelte integrates with D3 for data generation and Regl for high-performance point rendering, with the point shader handling anti-aliased circular shapes and configurable blending.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Svelte + D3 + Regl starter (WebGL)

This example displays 100,000 colored dots of varying sizes and opacities on a WebGL canvas, with an overlay text reporting the total count. The visualization uses Svelte to manage the application state and interface, D3 for generating the data—including coordinates, radii via `randomExponential`, a warm color scale via `scaleSequential` and `interpolateWarm`, and opacities—and the regl library to render the points as a canvas-based WebGL scene. A custom regl fragment defines the dot shape with antialiasing, while blending controls the visual stacking of overlapping points.

MMatthias Stahl

91% match

Loading thumbnail…

Fork of Svelte + D3: Canvas & renderless components

This example shows 34,000 circles on a canvas, each updated every five seconds with random positions and radii. A Svelte renderless component system separates canvas management from rendering logic: a canvas component provides a draw context, while circle components register individual draw functions and use Svelte's `tweened` motion with `cubicOut` easing to animate transitions between data updates. The visualization uses D3's `scaleLinear` and `scaleSequential` with `interpolateMagma` to map random values to coordinates and colors.

Rrudi.oreillymeehan@gmail.com

81% match

Loading thumbnail…

100,000 dots

This visualization displays 100,000 randomly positioned dots, each with a unique color, opacity, and size, rendered as a single dense field. The dots are generated with D3's `scaleSequential` and `interpolateWarm` for the color palette, `randomExponential` for radius distribution, and uniform random functions for coordinates and opacities. The scene is drawn using the Regl library on a WebGL canvas, with a custom fragment shader applying antialiasing and per-dot blending for a smooth, overlapping presentation.

NNita

80% match

Loading thumbnail…

Fork of Svelte + D3 Starter

This gallery example presents a set of colored circles scattered across a 1000x500 SVG canvas. A Svelte component iterates over an array of JavaScript objects, each containing x, y, radius, and fill color values, to render `<circle>` elements with a semi-transparent orange background. The visualization uses the Svelte `{#each}` block to map data to SVG shapes, with styling applied via CSS to achieve a 0.7 opacity level, demonstrating a minimal integration of D3 data structures within the Svelte framework.

CCurran Kelleher

80% match

Loading thumbnail…

Fork of Svelte + D3 Starter

This example visualizes a small dataset of six circles, each positioned with explicit x and y coordinates and varying radii, to create a non-interactive scatterplot-like composition. The data is hardcoded in the Svelte component, and the circles are rendered as SVG elements via an `{#each}` block. The visualization uses a warm translucent orange background with semi-transparent circles, layering them to show overlaps and depth. It relies on Svelte’s built-in templating and styling, with no D3 API calls present, though the project is set up to import D3 as a dependency. The rendering approach is direct SVG manipulation through Svelte’s reactivity.

SSafrin La Batu

79% match

Loading thumbnail…

Fork of Svelte + D3 Starter

This example shows a collection of six semi-transparent circles scattered across a warm orange-tinted background, each positioned by explicit x and y coordinates with varying radii and shades of blue. The circles are rendered as SVG elements within a 1000x500 viewport, using Svelte’s `{#each}` block to iterate over the static dataset defined in the component’s script. The visualization relies on Svelte’s reactive template syntax for declarative SVG attribute binding, while D3 is imported as a dependency but not actively used in this code. The circles are given a uniform opacity of 0.7, creating subtle overlaps that hint at layered relationships between the points.

SSafrin La Batu

79% match

Loading thumbnail…

Fork of Svelte + D3 Starter

This example displays a static collection of six semi-transparent circles in varying shades of blue, arranged on a warm orange background. The visualization is built with Svelte’s `{#each}` block to render SVG `<circle>` elements, with position, radius, and fill color defined directly in the data array. The code includes D3 as a dependency, though no D3 functions are actively used, serving as a foundational starter project for integrating Svelte with D3. The renderer uses SVG within a 1000×500 viewport.

BBeaverage

78% match

Loading thumbnail…

Fork of Svelte + D3 Starter

Six translucent circles of varying sizes and colors from a blue palette are overlaid on a warm orange-tinted SVG canvas. The circles’ positions, radii, and fills come from hardcoded JavaScript objects, rendered as SVG `<circle>` elements via Svelte’s `{#each}` block. The example demonstrates a minimal Svelte component using declarative markup, with styling applied through a scoped `<style>` tag, while D3 is loaded as a dependency but not used in the visible code.

Rrichard.adamson@hotmail.com

77% match