Fork of Circles with D3

100%

Fork of Circles with D3

✓ Published0🌍 Public

Last edited Dec 5, 2024

Created on Dec 5, 2024

This visualization creates a striking striped pattern using 100 horizontal rectangles of varying heights, each rendered in SVG. The code uses a D3 mask with a circular cutout to reveal the colored bars through a black overlay, producing a lens-like effect. Built with D3 v7, it employs `select`, `range`, and `join` to bind data to rect elements, while the mask is constructed with custom SVG elements.

AI-generated description

Blank Sleight

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Circles with D3

This example demonstrates a visual effect of horizontal and vertical lines intersecting within a circular mask, creating a woven or grid-like pattern. The code uses vanilla JavaScript and the SVG API to construct a mask element with a white circle over a black rectangle, then renders 100 horizontal and 100 vertical line segments. These lines are drawn using `createElementNS` and `setAttribute` rather than a D3 data join, despite the D3 library being listed as a dependency. The resulting graphic showcases a clean geometric composition where the mask isolates a circular region of the grid.

KKoneti Hemanth Raju

88% match

Loading thumbnail…

Fork of Circles with D3

A static visualization of seven circles in a cream-colored container uses a custom palette of muted colors like charcoal gray, burnt orange, and beige. The circles are connected by thin, semi-transparent lines, and larger ones are framed with rounded rectangles. Rendered with D3 v7, the code uses `select`, `join`, and attribute setters like `.attr` to draw geometric shapes from hard-coded data arrays, demonstrating basic SVG construction without animation or interaction.

KKal

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

87% match

Loading thumbnail…

Fork of Circles with D3

This example uses D3.js to render seven colored circles of varying sizes and positions on a dynamically sized SVG canvas. The visualization demonstrates the D3 data join pattern, binding an array of objects containing x, y, radius, and fill properties to circle elements with a uniform opacity. The code employs `select`, `join`, and `.attr` methods to create and style the shapes, showcasing method chaining and the General Update Pattern for dynamic SVG rendering.

JJohn J. Pinckney

87% match

Loading thumbnail…

Fork of Circles with D3

This visualization generates a dynamic abstract composition of nested rectangles and circles. The code uses D3.js (v7) to create an SVG canvas, then recursively draws a spiraling sequence of colored rectangles based on the golden ratio. Each rectangle is filled with a randomly generated hex color, while the background uses a light green tint. The rendering relies on D3's `select`, `selectAll`, `data`, `join`, and `append` methods to manage SVG elements and dynamically resize the canvas to fit its container. The final image resembles a colorful geometric fractal spiral.

11807589994@qq.com

87% match

Loading thumbnail…

Fork of Circles with D3

This interactive visualization displays seven semi-transparent circles with distinct colors and varying radii on a light green background. Built with D3.js, it demonstrates fundamental plotting techniques within an SVG container. The code uses D3’s `select` and `.join` methods to manage the SVG element and circles, setting attributes like `cx`, `cy`, `r`, and `fill` from a static data array. A method-chaining approach applies the circle properties, while an opacity value creates a layered, overlapping visual effect across the canvas.

RRajesh Rathnam

87% match

Loading thumbnail…

Fork of Circles with D3

This example is a fork of the "Circles with D3" visualization. It displays seven semi-transparent circles, each with a unique color and position, rendered on a light green background. The code uses the D3.js library, specifically the `select` and `join` functions, to create and update SVG elements. The circles' properties—center coordinates, radius, and fill color—are defined in a static data array and applied via chained attribute methods, resulting in a static, colorful composition.

AAustin Tanksley

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

86% match