Skip to main content
SimilarExport ZIP
100%

first D3

✓ Published0🌍 Public
GGusnaRWX
Last edited Dec 28, 2023
Created on Dec 28, 2023
Forked from HTML Starter

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

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
82% match
Loading thumbnail…

d3 art

This example renders a series of red horizontal rectangles across the full screen using SVG, with each rectangle positioned at a fixed y-coordinate. The code builds an array of mark objects and uses D3 v5's `select`, `range`, and `append` methods to create the shapes, while the HTML page loads D3 from a CDN. The visualization is minimal, showing only stacked red bands without interaction or animation.

Aaissatheprogrammer
81% 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
81% match
Loading thumbnail…

D3.js 教程

This example generates a colorful grid of rectangles using D3.js. The visualization displays twenty rectangles arranged in a responsive layout, with each rectangle's fill color cycling through a palette of six distinct colors. The code leverages the D3.js library (v6) to select the chart container, append an SVG element, and join data to SVG rectangles using the `selectAll`, `data`, and `join` methods. The SVG renders at half the window's width and full height, with a light cream background.

Vvivianaaai@qq.com
81% match
Loading thumbnail…

D3 first steps

This example generates a full-screen grid of 100 vertical and horizontal bars using D3 selections and joins, then applies two circular SVG masks to create a striking cross-hatch pattern. Built with a React-wrapped D3 v6 setup, the code uses `select`, `range`, and `join` to bind data to rectangles, while the masks—one with a white circle on black, the other inverted—reveal and hide intersecting lines around a central focal point.

Ccyriltoneatto965
80% match
Loading thumbnail…

d3 intro

This example renders a full-screen SVG filled with 100 horizontal rectangles, each stacked vertically with a fixed height of 10 pixels and a small gap between them. The visualization uses d3.select and d3.range to generate the data, then binds it to rect elements via a data join. The rectangles span the entire window width, creating a simple striped pattern that highlights D3’s declarative approach to binding data to SVG shapes using the .attr and .join methods.

Ssukumardunn
80% match
Loading thumbnail…

d3d3d3 2

Two layered grids of thin rectangles sweep across the full screen, one horizontal and one vertical, creating a moiré-like interference pattern. Each grid is partially hidden by an SVG mask that reveals the shape of a large symbol—a star from the d3 symbol set—at the center. The code builds the visualization with D3 selections, joining data arrays to create 100 rects per grid, and defines reusable mask-rendering functions via `svg.call`. Rendering uses SVG elements within a React framework, with masks composed of a full-screen rect and a symbol path.

GGusnaRWX
79% match
Loading thumbnail…

D3 Random Abstract Art

This example generates a grid of 100 colored rectangles whose fills use randomized pairs from the d3 `schemeCategory10` palette via `d3.scaleLinear`. As the mouse hovers over a square, that rectangle and its entire row are re-appended to the SVG to bring them to the foreground, while the square’s width and height are scaled up or down by a factor of three or four. Clicking anywhere reloads the page to generate a fresh random composition. The visualization is built with D3 v6 selections and SVG rendering, and includes a small instruction bar.

CCaroline Ghisolfi
79% match