Skip to main content
SimilarExport ZIP
100%

D3 Starter

✓ Published1🌍 Public
EErika Tomakic
Last edited Dec 11, 2024
Created on Dec 10, 2024
Forked from HTML Starter

This example introduces D3.js by recreating a Sol LeWitt-inspired generative art piece. It demonstrates foundational SVG concepts and progressive coding techniques, from static shapes to dynamic, programmatic generation. The code uses D3's `select` and `range` functions to efficiently create a grid of horizontal and vertical rectangles, which are then masked by two overlapping circles. The rendering is done via SVG, and the final output is a visual pattern where the intersection of the circular masks creates a striking contrast. The example also includes a vanilla JavaScript version for comparison, highlighting the declarative power of D3's API.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Starter

This example demonstrates generating a grid of horizontal and vertical lines across the full browser window, masked by two circular cutouts. The alternating line orientations create a crosshatch pattern that appears only within the circular regions, leaving the rest of the canvas blank. The visualization uses D3's `select` and `range` functions to append SVG `rect` elements, with masks (`circle-mask` and `circle-mask-2`) defining the visible areas. The code highlights the declarative D3 API for data-driven element creation and SVG attribute manipulation.

Llt_vandegrift@live.com
88% match
Loading thumbnail…

Sol LeWitt with D3

This example renders a generative art piece inspired by Sol LeWitt, using D3 to create a full-screen SVG composition. It builds a circular mask and overlays alternating horizontal and vertical black bars, demonstrating SVG manipulation through DOM creation methods. The code uses the `selection` import from D3 and constructs elements like `circle`, `rect`, and `mask` programmatically, with the browser’s viewport dimensions determining the canvas size. The result is a geometric pattern that explores the interplay of positive and negative space.

NNico-Nico
86% match
Loading thumbnail…

Fork of D3 Starter

This example demonstrates a generative grid of horizontal and vertical striped bars rendered as an SVG, overlaid with circular mask effects that reveal or conceal portions of the pattern. The code uses D3 v3’s selection, selection, range, symbols, and symbol APIs, appending rectangles to an SVG canvas sized to the window. Two masks are created via the renderMask function, each with a path drawn from the symbol API’s circle shape, applying inverted fill logic to produce contrasting visibility. The visualization is purely procedural, with no external data source.

EErika Tomakic
86% match
Loading thumbnail…

D3 Sol LeWitt

This example generates a geometric abstraction inspired by Sol LeWitt using D3.js and SVG rendering. It draws 100 horizontal and vertical lines across the full canvas, with each line masked to create circular forms. The horizontal lines use a mask that reveals a white circle, while the vertical lines use an inverted mask that hides the same circle, resulting in a composition of overlapping striped bands and a central circular void. The code uses D3's `select`, `append`, and `range` functions to construct the SVG elements.

JJMeltzer92
85% match
Loading thumbnail…

Fork of Sol LeWitt With D3

This example recreates a Sol LeWitt-style generative drawing using D3.js within a React framework, rendered as SVG. The code builds layered horizontal and vertical black rectangles, masking portions with white and black shapes to create intersecting bands, plus a set of concentric elliptical paths that peek through a central circular opening. It uses D3’s `select` and `range` functions to generate data and chain SVG element creation, with `mask` elements controlling visibility. The composition fills the browser window, producing a geometric, abstract pattern.

Ccraig harbottle
85% match
Loading thumbnail…

D3 Starter

This example demonstrates a generative, grid-based visual composition using D3 version 7. It creates an SVG canvas that fills the browser window and draws 100 horizontal and vertical striped rectangles, each masked by a set of overlaid symbols. The code uses D3's `select`, `range`, `symbols`, and `symbol` APIs to generate the stripes and to render mask patterns that reveal or hide the underlying grid. The masks are created with SVG `<mask>` elements, and the two complementary masks produce an interlaced effect across the screen.

AAhsanNayaz
85% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired drawing using the D3.js library in a React framework, rendered as scalable vector graphics. The code creates an SVG canvas that fills the browser window and applies circular masks to horizontal and vertical striped rectangles, producing an overlapping grid pattern. The implementation uses D3’s `select` method to build the SVG element and appends shapes programmatically, though the mask and rectangle logic is commented out, leaving only the blank SVG. The visualization adopts LeWitt’s geometric, rule-based aesthetic.

TTheo-0201
85% match
Loading thumbnail…

Fork of D3 Starter

This example generates a grid of horizontal and vertical stripes that intersect to create a geometric pattern. It uses SVG masks with circles to reveal or hide different sections of the stripes, producing a composition reminiscent of Sol LeWitt’s wall drawings. The code leverages D3 v7 selection methods, including `select`, `append`, and `join`, along with `range` to create 100 rectangles for each direction. The visualization is fully responsive, sized to the browser window, and includes hover effects that change the fill color to magenta.

YYiorgos Bagakis
85% match