practice 1 - Circle overlap or opacity check

100%

practice 1 - Circle overlap or opacity check

✓ Published1🌍 Public

Last edited Oct 24, 2018

Created on Aug 25, 2018

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.

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

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

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

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

78% match

Loading thumbnail…

Fork of Circles with D3

This example demonstrates how to create and style a set of overlapping circles with D3.js, using a static dataset of coordinates, radii, and fill colors to define each circle’s position and appearance. The code selects an SVG container, sets its dimensions based on the parent element, and binds the data to circle elements via D3’s data join pattern. It then applies attributes like `cx`, `cy`, `r`, `fill`, and `opacity` through method chaining, producing a visually layered composition on a light green background.

NNita

76% match

Loading thumbnail…

opacity vs. fill-opacity example

This example demonstrates the visual difference between SVG opacity attributes by placing three circles with distinct transparency settings side by side. It shows how `fill-opacity` affects only the fill color, while `opacity` fades the entire element including its stroke, and how combining `fill-opacity` with `stroke-opacity` allows independent control of fill and stroke transparency. Built with D3 v4, the code appends circles and reference lines to an SVG, using attributes like `attr("fill-opacity", "0.5")` and `style("stroke", "Red")` to style each element. Additional polylines and lines illustrate stroke properties such as `stroke-linecap` and `stroke-linejoin`, with hover effects defined via CSS on the `.dot` class.

335degrees

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

75% match

Loading thumbnail…

test

This example shows two overlapping black-outlined circles on an empty white field, creating a simple Venn-like intersection. The shapes are drawn using raw SVG `<circle>` elements within an HTML5 document, with no external JavaScript or styling libraries. Each circle has a fixed radius of 50 pixels and a stroke-only fill, positioned at distinct coordinates to demonstrate basic geometric overlap in a static, hand-coded visualization. The rendering is handled entirely by the browser's native SVG support, with no data source or interactive behavior involved.

Lliu yang

75% match