D3Trial full

100%

✓ Published0🌍 Public

Last edited Oct 13, 2023

Created on Oct 13, 2023

Forked from D3Trial

This example renders a full-screen SVG grid of 100 horizontal and 100 vertical bars, each drawn as a thin rectangle. The bars are layered and clipped by two SVG masks. One mask inverts its fill to hide the horizontal bars over a central region, while the other mask similarly hides the vertical bars in a complementary area, creating a cross-hatched visual effect. The code uses D3 v6 selections with `.join()`, `d3.range`, and `d3.symbol` (commented out), with masks constructed via `svg.append('mask')` and filled rectangles. The dimensions are set to `window.innerWidth` and `window.innerHeight`.

AI-generated description

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

Similar vizzes

Loading thumbnail…

D3Trial

This example uses D3 version 6.6.1 to generate a grid of 100 horizontal and 100 vertical rectangles, each 10 pixels thick, that span the full width and height of the browser window. Two SVG masks create a circular cutout effect: the first mask, using a white circle on a black background, hides the horizontal bars outside a 200-pixel-radius circle centered on the screen, while the second mask, with inverted colors, shows only the vertical bars inside the same circle. The result is a contrasting composition of crossing lines, where the horizontal and vertical strokes meet within the circle’s boundary. The code uses `d3.select`, `d3.range`, and the `.join()` method to bind data to SVG elements.

Ffdrigui

93% 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…

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

85% match

Loading thumbnail…

First D3 Viz

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.

Vvmistry94@gmail.com

84% match

Loading thumbnail…

Fork of Fork of Fork of SVG Fundamentals - D3

This example demonstrates a full-screen grid of horizontal and vertical bars revealed through two circular masks. The visualization uses D3’s `select`, `range`, and data joins to generate 100 rectangles in each orientation, with CSS masks defining a central circular viewport. Two SVG masks—one with a black background and white circle, another inverted—control which bar segments remain visible, creating a crosshatch pattern that fades at the edges. The rendering relies on the SVG `<mask>` element and D3’s `join` API.

SSidney Oluoch

83% match

Loading thumbnail…

Fork of d3-get-it-right-04

This example creates a hundred horizontal and vertical striped rectangles overlaid to form a grid, with a symbol-shaped hole cut through the pattern. The code uses d3.select, d3.range, and d3.join to bind data to SVG rect elements. Two SVG masks, one inverted and one normal, are built with d3.symbol and a d3.symbols[0] path (a circle) to punch a central circular reveal. The result shows layered d3.mask and d3.symbol APIs combined on a full-window SVG canvas.

Tthymdi

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

83% match

Loading thumbnail…

Fork of D3 Implementation

This example shows a grid of horizontal and vertical bars covering the full screen, with two circular masks revealing the intersection of the bars. Each bar is a separate SVG `<rect>` element, generated using `d3.range` and `selectAll().join()`. The first mask uses a black background with a white circle to show the horizontal bars, while the second inverts the colors to show the vertical bars. The code relies on D3 v7’s `select` and `range` functions to construct the elements and masks dynamically.

VVikil Lakkavatri

83% match