Fork of D3 beginning

100%

Fork of D3 beginning

✓ Published0🌍 Public

Last edited Apr 25, 2023

Created on Apr 25, 2023

This example displays an abstract geometric pattern of thin horizontal and vertical lines across the full browser viewport. The lines are selectively revealed or hidden through two SVG masks, each populated with D3 symbols (such as circles and crosses) arranged in a row. Using D3’s selection join, the code creates 100 rectangles per axis and applies the masks via `svg.call`. The rendering is done entirely with SVG elements in React, leveraging d3’s `symbol` and `range` APIs.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Fork of d3-get-it-right-04

This example creates an abstract pattern of horizontal and vertical bars layered over each other. It uses the D3.js library’s `select`, `range`, and `join` API to generate 100 rectangles in each direction across the full canvas. Two SVG masks with circular cutouts reveal and hide portions of the bar grids, producing a dynamic interplay of light and dark stripes. The visualization is rendered in a React environment and uses an SVG viewport that fills the browser window.

Tthymdi

87% match

Loading thumbnail…

Fork of Fork of Sol LeWitt with d3

This example generates a grid of thin horizontal and vertical lines using D3’s `select`, `range`, and `join` methods, rendered as SVG rectangles across the full browser viewport. Two circular masks invert the visibility of each set of lines: the first hides everything outside a 200-pixel circle centered on the screen, while the second hides everything inside its circle. The result juxtaposes a solid disk of vertical strips against an outer field of horizontal strips, creating a Sol LeWitt-inspired geometric pattern. The code runs in React and relies on D3 v7 for data binding and SVG manipulation.

Mmax-31

87% match

Loading thumbnail…

Fork of Fork

An intricate geometric grid emerges as overlapping vertical and horizontal stripes alternate visibility through two SVG masks. Rendered with D3 v6 in React, the visualization layers 100 thin rectangles in each direction, with each mask containing all five D3 symbol shapes repeated across the canvas. The first mask reveals stripes through filled symbols, while the inverted second mask hides them, creating a woven optical effect where symbol outlines define the pattern. The result is a dynamic, mask-driven interplay of shapes and lines.

AAitorGD

87% match

Loading thumbnail…

Fork of Fork of Fork of Fork of SVG Fundamentals - D3 (group)

This example demonstrates a grid-based pattern created by overlaying horizontal and vertical rectangles, each clipped by a circular mask to reveal a central window. The visualization uses D3’s `select`, `range`, `append`, and `join` APIs to generate 100 vertical and 100 horizontal bars, which are grouped in separate `<g>` elements. Two SVG masks (`circle-mask` and `circle-mask-2`) apply inverse coloring to the bars, producing a crosshatched effect that is visible only within the circular region. The code runs in React and renders fully with SVG, drawing on D3 version 7.6.1.

SSidney Oluoch

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

86% match

Loading thumbnail…

Fork of d3 sol lewit

This visualization generates a grid of horizontal and vertical rectangles on an SVG canvas, with two masks that reveal or hide different symbol shapes across the grid. The project uses D3 v6 APIs including `select`, `range`, `symbols`, and `symbol` to render the masked patterns. The two masks, created via `renderMask`, alternate between white and black backgrounds with the opposite fill for the symbols, producing a moiré-like interplay between the line grid and the overlaid symbol clusters. The code runs on a React framework and uses raw SVG rendering with dynamic window dimensions.

HHéloïse Feldmann

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

86% match

Loading thumbnail…

Fork of Fork of HTML Starter

A geometric pattern of horizontal and vertical lines intersects within a circular window, creating a crosshatched grid centered on the screen. The visualization uses two SVG masks to reveal alternating line orientations: one mask shows horizontal stripes through a white circle, while the other displays vertical stripes around it. Built with React and D3, the code generates 100 rect elements in each direction, then applies mask circles of 200-pixel radius to control visibility.

Ccoderhh

86% match