Skip to main content
SimilarExport ZIP
100%

100,000 dots

✓ Published0🌍 Public
NNita
Last edited Feb 14, 2024
Created on Feb 14, 2024

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.

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
83% match
Loading thumbnail…

500 glowing dots

Five hundred glowing dots scatter across a dark, square SVG canvas. Each dot consists of a larger outer circle filled with a cyan radial gradient and a smaller, brighter white inner circle created using SVG `radialGradient` definitions. A plain `for` loop generates the dots at random positions within a fixed boundary, using D3 v4 to append `circle` elements and apply CSS classes for styling. The result is a dense, luminous field of varied-sized orbs against a near-black background.

PPatrick Wojda
80% match
Loading thumbnail…

500 glowing dots

Five hundred glowing dots scatter across a dark, square SVG canvas. Each dot consists of a larger outer circle filled with a cyan radial gradient and a smaller, brighter white inner circle created using SVG `radialGradient` definitions. A plain `for` loop generates the dots at random positions within a fixed boundary, using D3 v4 to append `circle` elements and apply CSS classes for styling. The result is a dense, luminous field of varied-sized orbs against a near-black background.

CCurran Kelleher
77% 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
76% match
Loading thumbnail…

Dots

A force-directed simulation scatters and repels 300 small circles within a square field, with each new dot entering at the center and easing outward through an animated radius transition. The code uses the `d3.layout.force` API for physics, appends `circle` elements to an SVG canvas, and triggers a `transition` with a `Math.sqrt` easing function. Data points are generated procedurally with random offsets, and the simulation stops once the node count exceeds 300.

Mmbostock
74% match
Loading thumbnail…

points

One hundred thousand points render as colored particles in WebGL, smoothly morphing between different distributions—random walks, phyllotaxis spirals, sine waves, and grids—at regular intervals. The animation uses regl to draw points and interpolate between buffer states in the vertex shader, with a viridis colormap applied per point. A control panel lets viewers adjust point radius and the total number of points.

11wheel
74% match
Loading thumbnail…

Untitled

This example shows a simple scatter plot of 100 randomly generated points, each positioned on a 500-by-500 pixel SVG canvas. The visualization uses D3.js v4 scales and axes to map linear domains to screen coordinates, with red circles drawn for each point. The code appends an SVG group to the page, translates it by a 40-pixel margin, and uses `d3.scaleLinear` for both the x- and y-axes, which are rendered via `d3.axisBottom` and `d3.axisLeft`. Data is created in a loop using `Math.random()`.

Ffay Alomar
74% match
Loading thumbnail…

Compact circles

A grid of small translucent circles is scattered inside a large bounding circle, creating a roughly uniform field of overlapping dots. The visualization uses React to render SVG elements, with nested `Array.map` calls generating the circles. Each circle’s position is determined by multiplying array values with `Math.random()`, producing a semi-random distribution within the 960×500 viewport. The code defines constants for the outer radius (400) and inner radius (40), and uses ReactDOM to mount the component, with no external data or interaction.

NNita
74% match