practice 1 - Circle overlap cool graphics

100%

practice 1 - Circle overlap cool graphics

✓ Published1🌍 Public

Last edited Aug 27, 2018

Created on Aug 27, 2018

Forked from practice 1 - Circle overlap or opacity check

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.

AI-generated description

This is a description using Markdown.

MIT Licensed

Similar vizzes

Loading thumbnail…

practice 1 - Circle overlap or opacity check

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.

NNita

89% match

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

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

83% match

Loading thumbnail…

Hello Data viz

This example displays five overlapping circles of varying sizes and colors, arranged to create a visually dense, colorful target-like composition on a 960 by 500 SVG canvas. The circles are manually positioned with fixed coordinates and radii, each using distinct fill and stroke colors such as red, green, purple, and magenta. The visualization is built with plain HTML, CSS, and JavaScript, rendering shapes directly through SVG circle elements without any external libraries or data-driven logic. It simply demonstrates static vector shapes with heavy strokes and overlapping layers for visual effect.

Iillyyo

81% match

Loading thumbnail…

Circles with Animation

Eleven concentric circles pulse sequentially from a central point, expanding and collapsing in three alternating colors: red, green, and yellow. Each circle animates its radius from zero up to a multiple of its index times ten pixels, then shrinks back. The visualization uses D3 v5 selections with chained `transition().duration()` calls to animate SVG `circle` elements, setting radius, position, fill, and stroke attributes. The data array of indices 0 through 10 drives the size progression, while CSS opacity at 0.1 gives the overlapping circles a translucent, layered effect.

NNita

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

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

79% match