Skip to main content
SimilarExport ZIP
100%

Point Cloud

✓ Published0🌍 Public
Ssofia-martinovich
Last edited Mar 21, 2021
Created on Mar 21, 2021

A circular point cloud displays 10,000 points arranged in concentric rings of varying radii. Each ring is generated by mapping an array of indices to circle positions using trigonometric functions, rendering individual SVG `<circle>` elements with React. The visualization uses ReactDOM to render the SVG container, with points drawn from three separate arrays at radial distances of 18, 30, and 50 units from the center.

AI-generated description

Circular point cloud to visualize 10.000 points, similarly to this: https://observablehq.com/@fil/disc-transport

MIT Licensed

Similar vizzes

Loading thumbnail…

Concentric circles

This example displays a field of overlapping concentric circles, arranged radially around a central point. The circles vary in size, color, and position, creating a textured, abstract composition. Using React and SVG, the code generates 50 sets of circles, with each circle's radius and fill color calculated from randomized values. The positions are derived from trigonometric functions, and the entire visualization is rendered through the `ReactDOM.render` method into an SVG container.

NNita
78% match
Loading thumbnail…

Circles

A set of 40 concentric circles radiates from the center of an SVG canvas, each stroke drawn in solid red with 50% opacity and a 10-pixel width. The circles grow from a minimum radius of 20 to a maximum of 80, incrementing linearly, while the outermost circle reaches a radius of 300. Rendered using React’s `ReactDOM.render` into a `div` root, the visualization maps an array of radii to `<circle>` elements, with the SVG dimensions fixed at 960 by 500 pixels. The code explicitly computes radius values in a loop, though the final array contains a single undefined element.

NNita
78% match
Loading thumbnail…

circle with Sine and cosine functions

A circle of overlapping rings is generated from 40 mapped points, with each point plotted twice at different radii using sine and cosine calculations. The visualization uses React components to render SVG circles, with randomized sizes and color values based on array indices and Math.random(). The result is a layered, multicolored radial pattern formed by nested circles of varying opacity and scale.

NNita
77% match
Loading thumbnail…

Circles Pack

A circular layering effect shows thirty concentric rings radiating from the center of an SVG canvas. Each ring is drawn with a radius that increases linearly from 10 to 310 units, grouped and scaled down to 30% of its original size. The visualization uses React with explicit ReactDOM rendering, defining a `Circles` component that returns an SVG `<circle>` element with semi-transparent red strokes. All rings share the same vertical center, creating a nested target-like pattern with visible overlapping strokes.

NNita
77% match
Loading thumbnail…

Circular Geometric Patterns

This example renders a circular geometric pattern by plotting 9 points along a sine-cosine path and connecting them with a closed polyline. The visualization uses React to manage the SVG output and d3’s `line` generator with `curveLinearClosed` to draw the path, while each point also gets a circle centered on it with a radius equal to the distance between adjacent points. The result is a layered, symmetric composition of overlapping rings and a bold blue stroke, all rendered in a 960px square SVG canvas.

CCurran Kelleher
77% match
Loading thumbnail…

Circular Geometric Patterns

Five circles appear around the center of an SVG, each drawn at a radius influenced by a factor of seven and connected by a closed polyline. The circles are sized by the distance between the first two points, creating an overlapping geometric composition. Implemented with React and D3 v5, the visualization uses `range`, `line`, and `curveLinearClosed` to generate the points and path, with the circles and stroke rendered directly as SVG elements. The example explores ordered circular symmetry through minimal code.

Mmshoer
75% match
Loading thumbnail…

Concentric circles

The visualization displays a radiant, multi-hued field of concentric circles that emerge from a central point and spiral outward against a rainbow gradient background. Each circle’s size and color vary randomly, creating a dense, organic pattern. Built with React and rendered as SVG, the code maps over 50 indices and 50 pixel offsets, calculating each circle’s position using trigonometric sine and cosine functions. A radial gradient defined in the SVG `defs` section fills every circle, while a drop-shadow filter adds a cyan outline for depth.

NNita
75% match
Loading thumbnail…

Concentric circles

The visualization displays a radiant, multi-hued field of concentric circles that emerge from a central point and spiral outward against a rainbow gradient background. Each circle’s size and color vary randomly, creating a dense, organic pattern. Built with React and rendered as SVG, the code maps over 50 indices and 50 pixel offsets, calculating each circle’s position using trigonometric sine and cosine functions. A radial gradient defined in the SVG `defs` section fills every circle, while a drop-shadow filter adds a cyan outline for depth.

NNita
75% match