philmae

@philmae·2 public vizzes

Full SolVit Starting with D3

This example generates a striped grid of horizontal and vertical rectangles, overlaid with two complementary masks that reveal distinct D3 symbol shapes in the negative space. Built with React and rendered as SVG, it uses d3.select, d3.range, d3.symbol, and d3.symbols to place the shapes. The first mask shows the symbols in white on black, while the second inverts the pattern, creating an interlocking visual effect across the full viewport.

Jan 2, 2023

Loading thumbnail…

Starting with D3

This example creates a full-screen SVG pattern of horizontal and vertical stripes using D3’s `select`, `range`, and `join` methods. Two sets of 100 rectangles are generated, each masked to reveal or hide a circular region at the center. The code uses SVG `mask` elements with black-and-white circles to produce a cross-shaped visual intersection. The data is synthetic, generated via `range(n)`, and rendered entirely with D3 v6 and SVG attributes.

Jan 2, 2023