D3 starter

100%

✓ Published5🌍 Public

Last edited Sep 2, 2023

Created on Aug 31, 2023

This example uses the D3.js library (v7.8.5) to generate a grid of rectangles. The visualization shows two sets of alternating horizontal and vertical bars overlaying the canvas, with the vertical set applied through an SVG mask. The mask is created dynamically by rendering all available D3 symbol paths (stars, triangles, etc.) as fill regions. The horizontal bars are drawn first, then masked by the symbol shapes, while the vertical bars remain unmasked, creating an intersecting pattern across the full window dimensions.

AI-generated description

Learning

MIT Licensed

Similar vizzes

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

88% match

Loading thumbnail…

D3 Starter

This example demonstrates a generative, grid-based visual composition using D3 version 7. It creates an SVG canvas that fills the browser window and draws 100 horizontal and vertical striped rectangles, each masked by a set of overlaid symbols. The code uses D3's `select`, `range`, `symbols`, and `symbol` APIs to generate the stripes and to render mask patterns that reveal or hide the underlying grid. The masks are created with SVG `<mask>` elements, and the two complementary masks produce an interlaced effect across the screen.

AAhsanNayaz

87% match

Loading thumbnail…

d3 start

This example creates a striped grid of horizontal and vertical rectangles, each masked so that the overlap reveals alternating symbol shapes. The visualization uses D3 v6’s `symbol` API to draw seven distinct shapes—circle, cross, diamond, square, star, triangle, and wye—as SVG paths inside two mask definitions. The masks are applied via the `mask` attribute to the rects, which are generated with `d3.range` and `join`. The page captures the full window dimensions, scaling the SVG and grid accordingly, and demonstrates a minimal React-free setup with D3 selections.

VVedran Škarica

85% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a geometric masking effect by layering vertical and horizontal rectangles on an SVG canvas. Using D3 v7, it creates 100 vertical bars and 100 horizontal bars across the viewport, applying two SVG masks to reveal intersecting shapes. The first mask uses a white background with a black circle, while the second inverts the pattern, producing a cross-shaped visual interaction. The code relies on D3 selections, the `range()` generator, and SVG `mask` elements to achieve the composition.

HHaritscode

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

83% match

Loading thumbnail…

D3 starter

This example demonstrates a simple SVG-based visualization using D3 v7 within a React-compatible setup, rendering 100 horizontal bars across the full viewport width, each 10 pixels tall. The bars are created with `d3.range` and `svg.selectAll(...).join('rect')`, masked by a circular `mask` element with the ID `circle-mask`. The mask, appending a white background, visually clips the bars through SVG masking. The code imports `select` and `range` from the D3 library, though the HTML page is minimal and the JavaScript is designed to run in a browser environment.

Ggyan9427

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

83% match

Loading thumbnail…

D3 Starter-episode 04

This example demonstrates a basic D3.js bar-like visualization of 100 horizontal rectangles stacked vertically, each with a height of 10 pixels and width matching the viewport. The code uses `d3.select`, `d3.range`, and the `join` pattern to bind data to SVG `rect` elements, spacing them at 20-pixel intervals. It renders quickly to show the minimal setup for D3 version 6, with styling from a large body font size. The visualization is purely layout-driven, using no external data source or interaction.

Mmaxthamt

83% match