Skip to main content
SimilarExport ZIP
100%

Fork of Circular pattern of positioning circles with two distinct categories

✓ Published1🌍 Public
NNita
Last edited Mar 30, 2021
Created on Mar 30, 2021

This example visualizes a circular arrangement of lines radiating outward from a central point, with two distinct categories represented by different stroke colors. The visualization uses D3 v6 to generate 800 lines positioned randomly within a circular boundary, with each line extending 100 units from its starting point. The code calculates angles and coordinates using trigonometric functions, then renders the result as SVG elements with animation capability through D3 transitions. The rendering approach uses SVG line elements with opacity and stroke-width styling to create the circular pattern.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Circular pattern of positioning circles with two distinct categories

This example generates two concentric circular patterns of small dots, each representing a distinct category. The outer ring contains 1000 circles, and the inner ring contains 800 circles, both positioned using trigonometric calculations with randomized radii. Each circle animates its position via chained `transition()` calls in D3 v6, which moves them from their initial origin to their computed coordinates. The visualization uses SVG rendering within a React framework, with opacity applied based on the x-coordinate to create a half-visible effect that distinguishes the two layers.

Ssofia-martinovich
90% match
Loading thumbnail…

Fork of Fork of Fork of Concentric circles -linear gradient

This visualization generates 50 concentric circles with random radii, radiating outward from the center of the canvas to explore the interplay of linear gradients and projected shapes. Each circle is broken into numerous small line segments that vary in stroke and fill color based on mathematical randomization. Pulsing paths are drawn using hard-coded SVG path data. Built with React and D3.js, the example uses D3's `d3.line` generator and SVG radial gradients to create a complex, layered composition on a green-to-black background.

NNita
85% match
Loading thumbnail…

Circular circles

Two animated clusters of small circles drift outward from their origins against a dark background, with green circles generated by a loop of 500 iterations and red circles by a separate loop of 300 iterations. Each circle uses D3’s `transition()` to move along the x-axis via `attr('cx', y[i])` and the y-axis via `attr('cy', i)`, while positions derive from `Math.cos` and `Math.sin` with random scaling. The visualization renders in SVG within a React framework, leveraging D3 v6’s `select` and `append` to structure the two groups.

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

Fork of Fork of Concentric circles -linear gradient

The visualization renders a dense field of semi-transparent concentric circles with a linear gradient background, generated through a nested React component mapping over arrays of pixel offsets and index values. It uses D3.js v5 for the line generator and random color calculations, while React 16.10 renders SVG elements with a radial gradient fill and drop shadow filter. The composition also includes a large embedded SVG path of a map or organic shape, scaled and positioned centrally, illustrating a hybrid approach to generative and predefined geometry.

NNita
83% match
Loading thumbnail…

Fork of Circles with D3

This visualization displays six semi-transparent circles of varying sizes, positions, and bright colors against a pale green background. It uses the D3.js library's select, selectAll, and join methods to efficiently bind and render the circle elements within an SVG container, sizing the visualization to fit the available space. The circles are drawn based on hard-coded data containing x and y coordinates, radius, and fill color, with a fixed opacity value applied to all shapes. The example serves as a template for creating and styling simple geometric compositions using D3's data-driven document manipulation.

NNita
82% match
Loading thumbnail…

Fork of Circles with D3

This visualization displays a collection of colored circles scattered across a light background, each positioned with distinct coordinates and radii. The code uses D3.js version 7.8.5 to bind an array of data objects to SVG circle elements, setting their `cx`, `cy`, `r`, and `fill` attributes while applying a 70.8% opacity. The example demonstrates basic data joins with `selectAll` and `join`, showcasing how static positional and stylistic properties map directly from data. The rendering approach relies on SVG within a responsive container, with no animation or interaction, highlighting a simple, static scatter-like composition.

Vvishal R
82% match
Loading thumbnail…

Fork of Fork of Fork of Fork of Concentric circles -linear gradient

A dense field of randomly generated lines, rendered in SVG, creates a chaotic, textured visual against a green-to-black gradient backdrop. The lines are positioned using trigonometric calculations that radiate outward from the screen's center, with their coordinates multiplied by random values. A large Saturn-like planet shape, defined by a complex SVG path and filled with a radial gradient, sits at the center. The visualization uses React components and D3's `d3.line` and `d3.min` APIs within a React framework.

NNita
82% match