Skip to main content
SimilarExport ZIP
100%

Fork of so lewit reproduction using D3.js inbuilt shape

✓ Published0🌍 Public
Yyoav95
Last edited Oct 8, 2023
Created on Oct 8, 2023

This example visualizes a sunrise and sunset pattern as a 500-by-500 pixel square using D3.js’s built-in shapes. It renders a single visual root element via the `select`, `selectAll`, `range`, and `scale` functions from the D3 v7.6.1 library, drawing geometric forms that represent the day-night cycle. The code relies on a simple HTML container with linked CSS, and the graphic is generated entirely on a blank canvas without external data files.

AI-generated description

Sunrise/sunset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of so lewit reproduction D3.js fundamental

This example manipulates SVG masks to create a dynamic visual composition of overlapping horizontal and vertical stripes. The main view is a grid of 100 rectangles that cycle through a circular mask, revealing a sunburst-like pattern from the center. A second set of rectangles uses an inverted mask to create a contrasting cross-hatch effect. The code uses the D3.js library (v7) to construct the SVG elements and apply the masking logic via the `append` and `attr` methods.

Yyoav95
78% match
Loading thumbnail…

Fork of Full So LeWitt Reproduction with D3

This visualization generates a grid of thin, evenly spaced horizontal and vertical lines across the entire viewport. Using D3’s `select`, `append`, and `join` APIs, it draws 48 rectangles in each direction, with each set masked by a large circular path created via `d3.symbol`. The mask inverts the line pattern within the circle, producing a striking contrast between the masked and unmasked regions. The rendering is done as SVG within a React starter template.

Mmax-31
77% match
Loading thumbnail…

Fork of Fork of Create a face with d3.js!

This example animates a sunrise scene built with D3 v7, showing a sun rising over mountains while the sky transitions from light blue to orange. The visualization renders SVG shapes—a sky rectangle, a sun with radiating spikes, and three triangular mountains—using D3 selections and attribute setters. Animation is driven by `requestAnimationFrame`, updating the sun’s position and interpolating the sky color via `d3.interpolate`. The code imports D3 from UNPKG and demonstrates local ES6 module usage, though the script is loaded directly. The scene focuses on simple geometric composition and smooth color blending rather than data-driven elements.

Ppeddubalaji@gmail.com
77% match
Loading thumbnail…

Fork of Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3.js, rendering SVG output. It draws a grid of horizontal and vertical rectangular strips across the full canvas, with each strip positioned iteratively. The visualization currently defines two mask elements for potential circular cutouts, though the mask-creation code is commented out. The artwork uses D3’s `select`, `range`, and `symbol` APIs to generate the ordered pattern, with the structure derived from a deterministic repetition of lines.

SShahin Alam
76% match
Loading thumbnail…

so lewit reproduction using D3.js inbuilt shape

This example creates an abstract geometric composition by layering two sets of 100 thin horizontal and vertical rectangles across the canvas. Two SVG masks, each containing a row of distinct D3 symbols (circle, cross, and other shapes), selectively reveal or hide the intersecting grid lines. The piece uses D3.js v7’s `select`, `range`, and `symbol` APIs to generate the shapes and masks, with the horizontal and vertical bars alternately shown or concealed depending on the mask’s fill logic.

Ddeebanks77
76% match
Loading thumbnail…

Fork of Fork of Create a face with d3.js!

This example animates a sunrise scene with a rising sun, sun spikes, and mountains, rendered as SVG shapes. It shows how D3.js can build and animate graphical elements, with the sky color interpolating from light blue to orange as the sun moves. The code uses D3 v7 selections and the `interpolate` API to transition colors, while `requestAnimationFrame` drives the animation loop. The scene includes static mountain polygons and dynamically updated sun and line elements, all defined in D3 code.

Ppeddubalaji@gmail.com
76% match
Loading thumbnail…

so lewit reproduction using D3.js inbuilt shape 3

This example reproduces a Sol LeWitt-inspired geometric composition using D3.js v7. It layers two sets of thin rectangles—one horizontal, one vertical—across the full viewport, creating a grid-like pattern. Two SVG masks, each containing a D3 symbol (a cross), selectively reveal or hide portions of the rects by applying alternating black and white fills. The code uses `d3.range` to generate data, `d3.symbol` with `symbolCross`, and `d3.select` to append elements and masks.

Ddeebanks77
75% match
Loading thumbnail…

Fork of Fork of Sol LeWitt-d3-3

This example generates a grid-based abstract pattern using D3.js version 6, rendering SVG rectangles in horizontal and vertical orientations. The visualization uses the d3.select and d3.range functions to create 100 stripes of each direction, layered with SVG mask elements to create two circular cutout effects at the center of the viewport. The first mask uses a white circle on black, while the second uses a black circle on white, producing contrasting visibility through the overlapping stripes. The visualization fills the entire browser window dynamically by setting the width and height to the inner dimensions of the viewport.

Bbillzhou2005
75% match