D3_one

100%

✓ Published1🌍 Public

Last edited Dec 12, 2024

Created on Dec 12, 2024

A vertical gradient of colored rectangles fills the screen, with hues shifting from dark to light across the horizontal axis. The visualization uses D3.js (`d3.select`, `d3.range`) to generate and position the rectangles, each with a fixed width and a computed RGB fill. A circular mask, created with `d3.symbol` and applied via SVG `mask`, reveals only the central area of the gradient, leaving the rest dimmed. The code sets up an SVG canvas sized to the browser window and animates a smooth transition on the body element over 10 seconds.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 JS

An SVG grid of 100 horizontal and 100 vertical rectangles covers the full viewport. Two circular masks, defined via D3's `mask` element, create a lens-like effect: the first mask exposes a central white circle outlined by black-filled rectangles, while the second inverts the fill to produce a complementary pattern. Using D3 v7's `join` method, the code binds `d3.range` data to generate the rectangles, with each strip sized 10 pixels thick and spaced 20 pixels apart. The overlapping masks reveal alternating stripe orientations, forming a dynamic moiré-like crosshatch within the central circular region.

TTehran Mammadov

80% match

Loading thumbnail…

D3 Starter

This example builds a full-screen SVG visualization of 50 horizontal rectangles arranged in a vertical sequence, with their heights and spacing varying incrementally by index. A circular mask reveals only the central portion of the layered bars, creating a lens-like effect against a white background. The code uses D3 v7 selections and the `range()` generator to bind data, then appends rectangles via `join()`. A dedicated `<mask>` element contains a single white circle positioned at the center, demonstrating basic D3 masking and data-binding techniques.

Sscheenmi@gmail.com

79% match

Loading thumbnail…

D3 beginning

This example shows a grid of thin horizontal and vertical rectangles that intersect to form a visible weave pattern, with a circular region in the center where the crossing lines appear to invert in contrast. The visualization uses D3 v6’s `select` and `range` functions to generate 100 rectangles in each direction, appended as SVG elements across the full window width and height. Two SVG masks, each containing a rectangle and a circle, selectively control which parts of the horizontal and vertical lines remain visible, creating the central circular effect against a dark background.

AAleOG

78% match

Loading thumbnail…

2. D3

A large SVG displays horizontal and vertical stripes created from 100 rectangles each, layered with two circular masks. The overlapping masked striping produces a radial, sunburst-like pattern centered on the canvas. Built with D3.js, the code uses `range`, `selectAll`, and `join` to generate the bars, while `symbol` and `symbols` define the circular mask paths. The viewport is sized dynamically to the browser window.

SSubhamChhetri

78% match

Loading thumbnail…

my first d3

This example generates a full-screen SVG composition of 100 horizontal and 100 vertical rectangles, each 10 pixels thick and spaced 20 pixels apart. Two SVG masks with 200-pixel-radius circles in the center determine visibility: the first mask (white circle on black) reveals horizontal strips, while the second (black circle on white) hides vertical strips. Using d3.select, d3.range, and the .join() pattern, the rectangles are created and styled, with the masks applied via the url(#…) attribute. The result is a striped grid where horizontal and vertical bars cross, creating a contrasting pattern inside and outside the circular regions. Data is procedurally generated from the range of 100.

NNeeraj Kumar

78% match

Loading thumbnail…

first D3

This example shows a fullscreen grid of 200 vertical rectangles, each a random color, animating upward indefinitely. The rendering approach uses raw SVG elements created via the `document.createElementNS` API, with styles set directly on each rectangle. The animation relies on the Web Animations API (`element.animate`) to translate each rectangle along the Y-axis with randomized durations and infinite iterations. No external JavaScript libraries are used; the page is a minimal HTML document with inline CSS and JavaScript, demonstrating basic D3-free DOM manipulation for a generative visual effect.

GGusnaRWX

78% match

Loading thumbnail…

d3d3d3 3

This example generates a grid of 100 horizontal and vertical stripes, each using a mask to reveal differently-shaped symbol outlines at the center of the screen. The horizontal bars are masked by shapes like circles and crosses, while the vertical bars are masked by their inverses, creating a striking geometric interplay between foreground and background. Built with React and D3, the code uses `d3.range`, `d3.symbol`, and `d3.symbols` to construct paths, with masks defined via SVG and applied using the `mask` attribute. The visualization renders entirely through SVG, with a flickering effect caused by the contrasting masked regions.

GGusnaRWX

78% match

Loading thumbnail…

some

This example generates a geometric pattern of horizontal and vertical stripes across the full browser window, using D3.js version 7.9.0 to create SVG rectangles. Two circular masks reveal the stripes: the first mask shows horizontal lines within a white circle on black, while the second displays vertical lines in the inverse, creating an intersecting visual effect. The code uses D3's `select`, `range`, and `.join` API to efficiently append and position 100 rectangles in each direction, with the masks defined as separate SVG elements.

AAdityan Nainar

78% match