Skip to main content
SimilarExport ZIP
100%

practice 1 - Circle overlap or opacity check

✓ Published2🌍 Public
NNita
Last edited Nov 7, 2018
Created on Aug 27, 2018

A circle-overlap visualization arranges ten concentric circles of increasing radius along a diagonal, each filled with a distinct color and outlined in black, to test how opacity reveals underlying shapes. The SVG rendering, created with D3 v5, uses `select` and `append` to add `<circle>` elements from an array of radius and color objects, with the data reversed before binding. The group containing the circles is scaled by 1.5 via a transform attribute, while each circle’s position and size are set directly from its radius value. This example demonstrates basic D3 data joins and SVG attribute manipulation.

AI-generated description

This is a description using Markdown.

MIT Licensed

Similar vizzes

Loading thumbnail…

practice 1 - Circle overlap or opacity check

This example demonstrates how overlapping circles interact through stroke and fill opacity in D3.js. It displays a series of concentric circles with varying radii and colors, drawn as empty strokes with a fixed width, alongside solid red circles that test opacity effects. A second pair of offset circles illustrates overlap at a different position. The visualization uses D3's selection API to bind data to SVG circle elements, setting radius, position, stroke, and fill attributes directly.

NNita
93% match
Loading thumbnail…

practice 1 - Circle overlap cool graphics

This data visualization demonstrates a concentric circle overlap effect, where ten circles of increasing radii and alternating colors are layered to create a "cool graphics" pattern. It shows how varying circle sizes and positions produce an optical illusion of depth and motion. The code uses D3 v5 with an SVG rendering, appending circle elements to a group via \`select\` and \`append\`, setting attributes like \`r\`, \`cx\`, and \`cy\`, and applying a stroke for definition. The circles are drawn in reverse data order to control stacking.

NNita
89% match
Loading thumbnail…

Circle overlap

Ten concentric circles, colored from black through green, blue, yellow, orange, purple, teal, and green to yellow and finally red, are drawn inside an SVG. The circles expand outward in radius from 20 to 200, with their horizontal positions also set to their radius, creating a diagonal stack. The visualization uses d3.select to append a group, scales it by 1.5, and binds the data array via d3’s data join, setting circle attributes for radius, position, fill, stroke, and stroke width.

NNita
85% match
Loading thumbnail…

practice 1 - Circle around circle

This example displays a set of concentric circles centered on a fixed point, each filled with a different color and outlined in black. A small red circle is appended separately within the same SVG group. The visualization is built using D3 v5’s `select` and `append` methods to create SVG circles, with positions and radii driven by an array of JavaScript objects. The colored circles are stacked using `data.reverse()` to layer them from largest to smallest.

NNita
85% match
Loading thumbnail…

overlapping circles

Four orange circles and one steel-blue circle overlap at the center of an SVG canvas. The visualization demonstrates grouping and repositioning: the four identical orange circles are detected as an overlapping cluster and spread horizontally above the original join point, connected by black lines. The lone steel-blue circle remains in place. Built with D3 v4, the code uses SVG circle elements and manual selection via `d3.selectAll`, with grouping logic based on matching `cx` and `cy` attributes.

PPatrick Wojda
79% 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
79% match
Loading thumbnail…

Circles with D3

This example shows a set of seven colorful circles scattered across an SVG canvas, each with a distinct size, position, and fill color at 70% opacity. It demonstrates core D3.js v7 concepts including data binding, the General Update Pattern, and method chaining via `select`, `selectAll`, `data`, and `join` to render `circle` elements. The visualization uses static, data-driven coordinates and colors defined in a JavaScript array, rendered through an HTML import map loading D3 from a CDN. The code also showcases the `join` API for creating SVG circles within a container sized to the viewport.

CCurran Kelleher
78% match
Loading thumbnail…

Fork of Circles with D3

This example shows a collection of overlapping circles arranged on a light green background, each with distinct positions, radii, and vivid fill colors. It demonstrates how D3’s data join and method chaining bind an array of circle objects to SVG elements, setting their center coordinates, radius, and fill via attribute accessors. The visualization uses the `select`, `selectAll`, `data`, and `join` methods to manage the DOM, with a fixed dataset defined in code rather than loaded from an external source.

HHagar E
77% match