100%

Olympic Circles with D3

✓ Published1🌍 Public

Last edited Jan 14, 2024

Created on Jan 14, 2024

This example renders the Olympic rings as five semi-transparent circles arranged in the classic overlapping pattern against a light green background. The code uses D3’s `select` and `join` pattern to bind an array of coordinate and color data to SVG `circle` elements, setting each circle’s `cx`, `cy`, `r`, and `fill` attributes directly. The rings are drawn statically with an opacity of 0.7, emphasizing the layered interlocking effect rather than animation.

AI-generated description

Creating circles with D3.

Challenge

Fork this example
Modify it
Maybe make it Halloween themed
Maybe make it Christmas themed
Be creative

MIT Licensed

Similar vizzes

Loading thumbnail…

Olympics logo

This example renders the Olympic logo as five static SVG circles in blue, black, red, yellow, and brown, arranged in the iconic interlocking pattern on a white background. The HTML defines each circle directly with explicit `cx`, `cy`, `r`, and `stroke` attributes, while D3 is loaded via UNPKG but only used in `index.js` to set a message text. The visualization demonstrates basic SVG composition without any data binding or dynamic behavior, relying on plain markup for the graphic.

AAkinola Samson

82% match

Loading thumbnail…

My Circles with D3

This example displays seven circles of varying sizes and neon colors, each with a fixed position and radius, rendered on a light background. The final state is a static composition, though the code suggests a D3 join operation to create the SVG elements. It uses the `select` API and the `join` method from D3 v7.8.5 to bind data arrays to circle elements, setting `cx`, `cy`, `r`, and `fill` attributes directly. The circle data is hardcoded, and no animation or interaction is present.

Iissam.benabid@gmail.com

82% match

Loading thumbnail…

Fork of Circles with D3

This example showcases five static, semi-transparent circles scattered across an SVG canvas, each with a distinct size, position, and color. The code uses D3 v3’s `select` and data joins to bind an array of circle objects to SVG elements. Rendering is driven by setting attributes like `cx`, `cy`, `r`, and `fill` directly from the data, with a fixed opacity value of 0.5. The visualization is a minimal demonstration of D3’s declarative approach to creating simple geometric shapes from a hardcoded dataset.

DDonald Bagwell

81% match

Loading thumbnail…

Five Ring with D3.js!

Five interlocking Olympic-style rings are drawn as partially filled circular arcs, each rendered in a distinct color, and arranged in two staggered rows against a plain white background. The D3.js v5 code constructs each ring using the `d3.arc` generator, specifying inner and outer radii and a full 360-degree angle sweep, then applies SVG `path` elements with black strokes and colored fills. The rings are positioned via nested `g` groups and `translate` transforms, with the author manually laying out the five circles. The visualization is built with the D3.js library, rendering to SVG, and the source is authored by lexchenzhang.

LLex

80% match

Loading thumbnail…

Fork of Circles with D3

This example uses D3.js to render three semi-transparent circles on a soft green SVG background. It shows how to use D3’s method chaining and the `select`, `selectAll`, and `join` functions to create and update SVG elements from a hard-coded data array. The code measures the container’s dimensions via `clientWidth` and `clientHeight` to size the canvas, then sets each circle’s position, radius, and fill color. It demonstrates the general update pattern for idempotent rendering.

Ccaowlhs@163.com

80% match

Loading thumbnail…

Circles with D3

Six translucent circles in contrasting colors—gold, pink, cyan, purple, green, and magenta—overlap on a pale green background. Each circle’s position, radius, and fill are hard-coded in an array of objects. The example uses D3 v7’s `select`, `selectAll`, and `join` to bind this data to SVG `circle` elements, setting `cx`, `cy`, `r`, `fill`, and a fixed opacity of 0.708. The visualization demonstrates basic data-join and SVG rendering with d3.

SSubhendu Karmakar

80% match

Loading thumbnail…

Fork of Circles with D3

This example uses D3 to render a static collection of semi-transparent circles on a light green background. It shows how the `selectAll` and `join` pattern efficiently binds an array of data objects to SVG circle elements, each with its own position, radius, and color. The visualization demonstrates D3’s data-driven approach by defining the circles’ coordinates and styling in the data array, then applying these values via attributes like `cx`, `cy`, `r`, and `fill`. The code uses `select` from D3 and relies on the `join` method to manage DOM elements, creating a clean, declarative scene without interaction or animation.

CCurran Kelleher

80% match

Loading thumbnail…

Fork of Circles with D3

This example displays six semi-transparent circles with varied colors and sizes positioned across a light green background. Built with Svelte and D3, it uses `d3.select` to create an SVG canvas and binds an array of circle objects containing x, y, radius, and fill properties. The `join('circle')` pattern renders the shapes with specified coordinates and dimensions, while the opacity attribute applies a fixed transparency. The code serves as a simple base for creative modifications, such as holiday-themed variations.

Rrpal28384@gmail.com

80% match