Skip to main content
SimilarExport ZIP
100%

Fork of Circles with D3

✓ Published0🌍 Public
XXiaojun
Last edited Sep 9, 2025
Created on Aug 27, 2025
Forked from Circles with D3

This gallery example uses D3.js v7 to render a circular composition of filled circles on an SVG canvas. A large purple circle is positioned at the center, while six smaller circles with vivid colors orbit around it, evenly spaced using basic trigonometric placement with `Math.cos` and `Math.sin`. The layout dynamically adjusts the ring radius based on container dimensions and circle sizes, ensuring the arrangement fits within the viewport. The code uses D3’s data join pattern with `selectAll().data().join()` to bind circle elements, applying position, radius, and color attributes with 70% opacity against a light green background.

AI-generated description

Creating circles with D3

Challenge

  • Fork this example
  • Modify it
  • Be Creative
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Circles with D3

This example uses D3.js to render a static collection of circles on an SVG canvas. Seven circles with varying positions, radii, and bright colors are drawn against a light green background, with a semi-transparent opacity that creates overlapping color effects. The code demonstrates the D3 data join pattern and method chaining by binding an array of circle objects to SVG elements. The visualization is created using d3.select, d3.selectAll, and the .attr method to set circle coordinates, radius, and fill properties.

Aauer.major7@gmail.com
91% match
Loading thumbnail…

Fork of Circles with D3

This example renders seven semi-transparent circles in fixed positions across a light green background using D3 v7. Each circle is defined by explicit x, y, radius, and fill color data, with the `select` API and `.join()` pattern binding data to SVG circle elements. The visualization demonstrates basic data-driven shape generation and styling through D3’s attribute setters, producing a static, colorful composition without interaction or animation.

XXiaojun
90% match
Loading thumbnail…

Fork of Circles with D3

This example renders seven semi-transparent circles in fixed positions across a light green background using D3 v7. Each circle is defined by explicit x, y, radius, and fill color data, with the `select` API and `.join()` pattern binding data to SVG circle elements. The visualization demonstrates basic data-driven shape generation and styling through D3’s attribute setters, producing a static, colorful composition without interaction or animation.

XXiaojun
90% match
Loading thumbnail…

Fork of Circles with D3

This D3.js example displays seven colorful circles of varying sizes and positions on a light green background, creating an abstract composition. The circles use a semi-transparent opacity, allowing overlaps to blend their colors. The code demonstrates D3’s `select`, `selectAll`, and `join` API methods, chaining attribute setters like `attr('cx', ...)` and `attr('r', ...)`. The circle data is hardcoded as an array of objects containing coordinates, radii, and hex color values, with an SVG element sized to the container.

PPremkumar
90% match
Loading thumbnail…

Fork of Circles with D3

This example demonstrates how to create and position circles using D3.js’s data join pattern. It renders a fixed dataset of seven circles, each with explicit x and y coordinates, radius, and fill color, onto an SVG canvas sized to its container. The code uses `select`, `selectAll`, `.data()`, and `.join()` to bind the data and generate circle elements, then applies attributes like `cx`, `cy`, `r`, `fill`, and `opacity` through method chaining. The visualization shows a colorful, overlapping composition with semi-transparent circles, highlighting basic D3 selection and rendering techniques.

LLI, CHENG-TSE
90% match
Loading thumbnail…

Fork of Circles with D3

This example demonstrates how to create and position circles using D3.js’s data join pattern. It renders a fixed dataset of seven circles, each with explicit x and y coordinates, radius, and fill color, onto an SVG canvas sized to its container. The code uses `select`, `selectAll`, `.data()`, and `.join()` to bind the data and generate circle elements, then applies attributes like `cx`, `cy`, `r`, `fill`, and `opacity` through method chaining. The visualization shows a colorful, overlapping composition with semi-transparent circles, highlighting basic D3 selection and rendering techniques.

LLI, CHENG-TSE
90% match
Loading thumbnail…

Fork of Circles with D3

This example demonstrates how to create and position circles using D3.js’s data join pattern. It renders a fixed dataset of seven circles, each with explicit x and y coordinates, radius, and fill color, onto an SVG canvas sized to its container. The code uses `select`, `selectAll`, `.data()`, and `.join()` to bind the data and generate circle elements, then applies attributes like `cx`, `cy`, `r`, `fill`, and `opacity` through method chaining. The visualization shows a colorful, overlapping composition with semi-transparent circles, highlighting basic D3 selection and rendering techniques.

LLI, CHENG-TSE
90% match
Loading thumbnail…

Fork of Circles with D3

This example uses D3.js to render seven colored circles of varying sizes and positions on a dynamically sized SVG canvas. The visualization demonstrates the D3 data join pattern, binding an array of objects containing x, y, radius, and fill properties to circle elements with a uniform opacity. The code employs `select`, `join`, and `.attr` methods to create and style the shapes, showcasing method chaining and the General Update Pattern for dynamic SVG rendering.

JJohn J. Pinckney
89% match