practice 1 - Circle around circle

100%

practice 1 - Circle around circle

✓ Published0🌍 Public

Last edited Sep 9, 2018

Created on Aug 27, 2018

Forked from practice 1 - Circle overlap cool graphics

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.

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

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

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

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

81% match

Loading thumbnail…

circle

A single red circle rendered in SVG, centered within a full-viewport canvas, with a green radial line extending from its center to the right edge. The visualization demonstrates basic D3.js v6 setup and styling, using inline SVG elements and a CSS hover animation that rotates the entire group containing both shapes. The code defines a `g` element with an id, positions it via a CSS transform, and applies a keyframe animation on hover that spins the group 360 degrees over five seconds. No data is loaded; the example focuses purely on static geometric primitives and interactive CSS-driven motion within an SVG coordinate system.

MMTR

81% match

Loading thumbnail…

"Javascript Practice"

An example of basic SVG circle placement using D3 version 7. The code creates three circles positioned via groups at different screen coordinates, with contrasting stroke and fill colors. It uses `select` to append an SVG element sized to the window, then applies explicit `attr` calls for circle positions and styling, demonstrating straightforward group transforms and child element creation in a D3 SVG canvas.

Fferneyhoughedward@gmail.com

80% match

Loading thumbnail…

circle

This example shows a single green circle with a blue stroke rendered on a blank SVG canvas. The visualization demonstrates basic D3 version 7 usage by importing the `select` function from the `d3` module and updating the page text. The circle is defined directly in the HTML markup with fixed `cx`, `cy`, `r`, and fill attributes, while SVG provides the rendering surface. The code illustrates how to begin a D3 project, though it does not yet bind any external data.

Cclass-sikh

80% match

Loading thumbnail…

Presentation SVG

This example demonstrates how to style and manipulate basic SVG circle elements using D3.js selections. The static HTML page contains three circles positioned horizontally, and the JavaScript code first applies a uniform red fill to all circles, then conditionally recolors them based on their index—alternating between red and blue. The visualization relies on D3's `selectAll` method to query SVG elements and the `style` method to set CSS properties. The circles are rendered as static SVG shapes without any data binding or interaction, showcasing simple DOM manipulation with D3 v7.

RRobindj2000

80% match