John Ngo Circles

100%

John Ngo Circles

✓ Published0🌍 Public

Last edited Sep 11, 2025

Created on Sep 11, 2025

A collection of opaque, overlapping circles in varied sizes and colors is drawn against a solid background, creating a layered composition. The circles are positioned at fixed coordinates, with several concentric rings centered on the same point at different radii. The visualization is rendered as an SVG using D3 v7, with the `select`, `join`, and `attr` methods binding static data directly to circle elements. The code defines the chart size from the container's client dimensions and applies a uniform opacity to all shapes.

AI-generated description

MIT Licensed

Similar vizzes

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

81% match

Loading thumbnail…

Circles with D3

This example displays seven translucent circles at fixed positions and sizes across a pale green canvas, each filled with a distinct neon color. The visualization demonstrates how D3’s `select` and `join` API can declaratively create and style SVG circle elements from a static array of coordinates, radii, and hex fill values. Opacity is set uniformly to 0.708 via an attribute, with the rendering driven by D3 7.8.5.

Iinskoe@central.edu

81% match

Loading thumbnail…

Fork of Circles with D3

This example displays a collection of colored circles of varying sizes and positions on a light blue background. The circles are arranged without a specific pattern, creating a chaotic, abstract composition. The visualization uses D3.js to render the SVG elements, with each circle's properties (center coordinates, radius, and fill color) specified in a hardcoded data array. The code employs D3's `select` and `join` API, setting the background, and applies a consistent opacity of 0.708 to all circles.

Ppbruss@bu.edu

81% match

Loading thumbnail…

Fork of Circles with D3

This visualization displays six semi-transparent circles of varying sizes, positions, and bright colors against a pale green background. It uses the D3.js library's select, selectAll, and join methods to efficiently bind and render the circle elements within an SVG container, sizing the visualization to fit the available space. The circles are drawn based on hard-coded data containing x and y coordinates, radius, and fill color, with a fixed opacity value applied to all shapes. The example serves as a template for creating and styling simple geometric compositions using D3's data-driven document manipulation.

NNita

81% match

Loading thumbnail…

Fork of Circles with D3

This example displays a set of overlapping translucent circles in vibrant colors on a light green background, with sizes and positions varying across the canvas. Using D3 v7, the code binds an array of objects to SVG circles via `selectAll` and `data`, then sets each circle’s `cx`, `cy`, `r`, and `fill` attributes. The visualization includes a large black circle that partially obscures others, creating layered depth through an opacity of 0.7. The data is hardcoded, and rendering uses the `join` method to manage element creation.

BBar Shopen

81% match

Loading thumbnail…

Fork of Circles with D3

A colorful collection of seven overlapping circles with varying radii and fill colors rendered as SVG. The visualization demonstrates D3's data join pattern, binding an array of circle objects to SVG circle elements with chained attribute setters for position, radius, color, and opacity. The code imports `select` from `d3` and uses `.selectAll()`, `.data()`, `.join()`, and `.attr()` methods to create the static composition from hardcoded data.

Bbepnye@gmail.com

81% match

Loading thumbnail…

Fork of Circles with D3

This visualization displays a collection of colored circles scattered across a light background, each positioned with distinct coordinates and radii. The code uses D3.js version 7.8.5 to bind an array of data objects to SVG circle elements, setting their `cx`, `cy`, `r`, and `fill` attributes while applying a 70.8% opacity. The example demonstrates basic data joins with `selectAll` and `join`, showcasing how static positional and stylistic properties map directly from data. The rendering approach relies on SVG within a responsive container, with no animation or interaction, highlighting a simple, static scatter-like composition.

Vvishal R

80% match

Loading thumbnail…

Fork of Circles with D3

Seven translucent circles of varied sizes and neon colors float on a pale green background. Using the D3.v7 `select` API, the visualization joins SVG circles to an array of position, radius, and fill data, setting each circle's circumference attributes and a uniform 0.7 opacity. The fixed full-viewport container resizes the drawing with the browser window.

Sskasliwal@wpi.edu

80% match