First D3 Viz

100%

✓ Published0🌍 Public

Last edited May 10, 2024

Created on May 9, 2024

This example creates a full-screen SVG pattern of intersecting horizontal and vertical bars, separated into two masked groups. D3’s `select` and `range` generate 100 rectangles per axis, while `symbol` and `symbols[7]` draw the star-shaped mask, and a circle forms the second mask. The masks reveal or hide parts of the grid, producing a geometric composition against a black-and-white backdrop. The visualization runs in a React framework using raw JavaScript and D3 v7, with no external data source.

AI-generated description

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

Similar vizzes

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

88% match

Loading thumbnail…

d3d3d3

This example shows a full-screen pattern of intersecting horizontal and vertical bars, each rendered as a set of thin SVG rectangles. The bars are generated using `d3.range` and joined to `rect` elements, but only the central circular area is visible due to two SVG masks. The first mask reveals the horizontal bars through a white circle on a black background, while the second mask hides the vertical bars in the same region using a black circle on white. The result is a cross-hatched grid with a circular cutout, built with React and D3 v7.

GGusnaRWX

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

86% match

Loading thumbnail…

d3 tutorial 4

This example uses D3 to render a full-window SVG image. It draws 100 horizontal bars, each with a height of 10 pixels and stacked vertically, to create a striped pattern across the canvas. A clipping mask, defined with the `<mask>` element, applies a white star-shaped path over the stripes, so only the area inside the star remains visible against a black background. The code uses D3's `select`, `range`, `symbol`, and `symbols` APIs to generate the star path and SVG elements.

JJesper Martinsson

86% match

Loading thumbnail…

D3, Mask code with star shape

This example shows a grid of horizontal and vertical stripes overlaid on a full-screen SVG, with two complementary star-shaped masks cutting through the pattern. The first mask reveals the horizontal stripes through a white star on black, while the second mask applies the inverse effect to the vertical stripes. The visualization uses D3 v7’s `range`, `selectAll`, and `symbol` API to generate 100 rect elements per orientation and construct the star paths via `symbol(symbols[4], 100000)`. Masks are defined with custom `mask` elements and applied via the `mask` attribute, producing a layered, intersecting star composition.

JJetlinZ

86% match

Loading thumbnail…

Full Fork of D3 Starter

This example demonstrates how D3 SVG masks can create overlapping geometric patterns. It generates 100 horizontal and 100 vertical rectangles, then applies two distinct masks with inverted fill rules to reveal or hide different regions. The code uses D3’s `select`, `range`, `symbols`, and `symbol` APIs to draw predefined symbol shapes within each mask. The visualization fills the browser window, with symbol paths placed at regular intervals across the width, producing a dynamic interplay between the grid lines and masked shapes.

Llt_vandegrift@live.com

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

86% match

Loading thumbnail…

Visualization

This visualization creates a striped pattern of horizontal and vertical bars that are selectively revealed through two SVG masks. The masks use alternating black-and-white rectangles and D3 symbols to alternate visibility of the grid lines, producing an overlapping geometric composition. Built with D3 v7, the code uses `select`, `range`, `scaleBand`, and `symbol` to generate the shapes, while `append('mask')` and `attr('mask', ...)` control the clipping. The rectangles are sized based on `window.innerWidth` and `window.innerHeight`, with the pattern repeated 120 times across the screen.

DDaniel R Handoko

86% match