Hudson--Fork of Circles with D3

100%

Hudson--Fork of Circles with D3

✓ Published0🌍 Public

Last edited Aug 26, 2025

Created on Aug 26, 2025

Six semi-transparent colored squares of varying sizes are scattered across a light green background, positioned with slight overlaps to create a layered composition. The visualization uses D3 v7’s selection and data-join methods (`select`, `selectAll`, `data`, `join`) to bind a static array of objects containing `x`, `y`, `width`, `height`, and `fill` properties to SVG `rect` elements. Each rectangle is centered on its coordinates by subtracting half its dimensions, and rendered with 70% opacity. The SVG canvas fills the viewport via a fixed container.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Circles with D3

This example demonstrates a set of six overlapping, semi-transparent rectangles arranged in a dynamic composition on a soft green background. The visualization uses D3.js to generate an SVG element sized to its container and binds an array of data objects to rectangle elements via the `selectAll().data().join()` pattern. Each rectangle’s position, dimensions, and fill color are set through data-driven attributes. The `attr` methods define `x`, `y`, `width`, `height`, and `fill` properties, while a fixed opacity value creates layered visual depth.

Nnitinramagiri1@gmail.com

81% match

Loading thumbnail…

Fork of Circles with D3

A fork of the "Circles with D3" example renders seven semi-transparent colored circles on a fixed full-viewport SVG, each containing a small square of contrasting color. The visualization demonstrates static, hard-coded positional data for both shapes, using D3 v7’s `select` and `join` API to bind data arrays to `circle` and `rect` elements. Circle fills are specified per datum, while squares cycle through a separate array of colors via the index parameter. The SVG is sized to the container’s client dimensions.

CCyn

81% match

Loading thumbnail…

Fork of Circles with D3

This visualization shows a fixed composition of overlapping geometric shapes on a pale green background, including seven semi-transparent circles, five thick colored lines, and three rectangles. The code uses D3 v7 with the `select` API and data joins (`join`) to bind each SVG element to its corresponding array of objects. Shapes are rendered directly as SVG `circle`, `line`, and `rect` elements, with attributes like position, size, color, and opacity set from the data. The example demonstrates static, non-interactive SVG rendering with hardcoded coordinates and no scales or axes.

Aadamsnothere@gmail.com

80% match

Loading thumbnail…

Fork of Circles with D3

This example renders a fixed composition of overlapping circles and rectangles on a full-screen SVG canvas. The visualization displays fourteen geometric shapes, each defined with explicit x, y, dimensions, color, and shape type in a static array, using a yellow-green background and semi-transparent fills. Using d3.select and data joins, the code filters the dataset by shape type and applies circle or rect attributes, such as cx, cy, r, width, and height, to draw the mixed shapes via D3 v7's selection methods.

RRyan Offstein

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

79% match

Loading thumbnail…

Fork of Circles with D3

Seven semi-transparent circles in vivid colors, such as pink, purple, and green, are positioned at fixed coordinates on a light gray background. The visualization uses D3.js v7 to render an SVG canvas that fills its container, with the `select` API joining circle elements to a static dataset containing x, y, radius, and fill properties. The circles are drawn with an opacity of 0.7, and the background color is configurable through the `viz` function’s options.

RRyan Offstein

79% match

Loading thumbnail…

Fork of Circles with D3

Seven colorful circles of varying sizes and positions float on a light green background. The circles feature vivid hex colors and a uniform 70.8% opacity. The visualization uses D3.js 7.8.5 with the general update pattern via `d3.select`, `.selectAll`, `.data`, and `.join` to create and bind the SVG elements based on an array of circle objects.

Hh.harrycoding@gmail.com

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

79% match