d3 tutorial 4

100%

✓ Published0🌍 Public

Last edited Feb 15, 2023

Created on Feb 15, 2023

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.

AI-generated description

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

Similar vizzes

Loading thumbnail…

d3 tutorial

This example demonstrates a simple SVG visualization where 100 horizontal rectangles are drawn across the full window width, with a circular mask revealing only the central portion of the stacked bars. The code uses d3.select, d3.range, and the .join() method to bind data to rectangle elements, then appends an SVG mask containing a black background rect and a white circle to create the viewport effect. Rendering is handled entirely through SVG attributes, with the visualization sized dynamically to the browser window.

JJesper Martinsson

90% match

Loading thumbnail…

d3 tutorial code camp

This example generates a pattern of horizontal and vertical bars overlaid with two circular masks, revealing a cross-hatched grid within a circular window. The visualization uses D3 v6 to create SVG rectangles and mask elements, with `select` and `range` from the d3 library. Data is generated programmatically with a loop for horizontal bars and `range` for vertical bars, while masks combine white and black shapes to control visibility. The result demonstrates how SVG masks can create layered geometric compositions.

Aaissatheprogrammer

87% match

Loading thumbnail…

d3-get-it-right-04

This example uses React with D3 v6 to generate an SVG visualization of intersecting horizontal and vertical stripes. The code creates 100 rectangular bands in each direction, then applies two SVG masks: a diamond-shaped mask formed with a `d3.symbol` path, and a circular mask created with a basic SVG circle. The masks reveal the underlying stripes in geometric patterns, demonstrating how D3's `select`, `range`, and `join` methods can construct layered SVG elements with custom clipping. The visualization dynamically fills the browser window using `window.innerWidth` and `window.innerHeight`.

Tthymdi

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

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…

d3

This example demonstrates masked striped patterns overlaid on top of each other. It creates 100 horizontal rectangles and 100 vertical rectangles, each with a height or width of 10 pixels, spaced 20 pixels apart. The rectangles are masked using SVG masks with circular cutouts, creating a crosshatch effect with a circular reveal. The visualization uses D3 v6 with `select`, `selectAll`, and `data` joins to bind the mark arrays to the SVG elements, rendering the output as SVG in a React-styled HTML page.

Eelgato_1994

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

85% match

Loading thumbnail…

Example D3

This example creates an abstract visual composition by rendering two perpendicular sets of thin rectangular strips. One hundred horizontal bars span the full canvas width, while one hundred vertical bars traverse its height, with the two sets overlapping. Both layers are masked by circular regions that intersect at the center, using the `mask` element to reveal or hide portions of the strips. The code relies on the D3 library’s `select`, `range`, and `join` methods to generate and attach the SVG rectangles, producing a grid-like pattern with a circular cutout effect.

Ttelsmahk@gmail.com

84% match