Circular Layout (Recursive)

100%

Circular Layout (Recursive)

✓ Published0🌍 Public

Last edited Feb 8, 2016

Created on Feb 27, 2011

A circular layout visualizes ten concentric rings, each divided into 90 wedge-shaped segments. The example derives these shapes recursively, with each ring’s path geometry generated from radial distances scaled from 180 to 240 pixels and angular slices of π/90 radians. Colors interpolate from brown to steelblue across the rings. The implementation uses D3 v3’s linear scales for radius and fill, and builds SVG paths via `d3.svg.arc` within nested `selectAll` and `enter` calls. The data is procedural, created with `d3.range(10)` for rings and angle increments.

AI-generated description

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Circular Layout (Arc)

A circular layout of concentric arcs radiates outward from a central point, with each arc’s color shifting from brown to steel blue as its radius increases. The visualization encodes two linear scales—one mapping radius size and another mapping fill color—onto a grid of 180 rotated groups. Built with D3 v3, the code uses `d3.svg.arc` to generate each path segment, with `innerRadius` and `outerRadius` driven by the same scale. Rotating each group by successive 2-degree increments creates the full circular pattern. The data is generated synthetically via `d3.range`, not from an external source.

Mmbostock

88% match

Loading thumbnail…

Circular Layout

The example shows a circular pattern of 180 radial spokes, each containing ten small circles that recede and shift in color outward from the center, producing a sunburst-like mandala effect. It uses D3 v3 to generate the SVG structure, with each spoke rotated incrementally via `transform` attributes. Circle positions and fills are mapped linearly through `d3.scale.linear`, transitioning from brown to steelblue along a radius of 180 to 240 pixels. All shapes have black strokes, and the rendering relies on SVG elements created through data joins on `d3.range` values.

Mmbostock

83% match

Loading thumbnail…

Circular Layout (Slider)

A circular layout of 180 arc-shaped segments, colored on a brown-to-steelblue scale, visualizes random values distributed by angle and radius. A range slider controls the radial display, fading arcs in and out based on their angular distance from the slider’s current value. The d3.v3 code builds the visualization using nested `g` elements, `d3.svg.arc` for geometry, and `d3.scale.linear` for mapping. The animation reveals each arc via chained transitions on `fill-opacity`, while the slider input event updates the opacity based on angular difference.

Mmbostock

80% match

Loading thumbnail…

Fork of Circular pattern of positioning circles with two distinct categories

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.

NNita

78% 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

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 calendar

This circular calendar visualizes a year as a ring of colored arcs, with each month shaded by season and individual days marked as small strokes. The visualization plots specific project dates (labeled DS, N, S, and special) as points on the ring, using a custom degree conversion from day-of-year. Built with D3 v4 and SVG, the code draws concentric arc segments via `d3.arc()`, positions them with trigonometric calculations, and applies CSS classes to color months, weeks, and days.

PPatrick Wojda

76% match