Mark Christian

@mhackyu·6 public vizzes

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style geometric composition using overlapping horizontal and vertical bands that are partially revealed by SVG masks. The D3 code generates 100 rectangular strips in each direction and applies two distinct masks—one inverted, one not—that use D3’s `symbol` shapes to create cutout effects. The visualization relies on `d3.select`, `d3.range`, and SVG mask elements within a React-free, plain HTML setup. The final pattern emerges from the interplay of line density and symbolic transparency across the full viewport.

Jun 8, 2022

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example recreates a Sol LeWitt–style grid using two sets of horizontal and vertical rectangles, each clipped by a circular mask to produce a black-and-white geometric composition. The code uses D3’s `select`, `range`, and `join` to generate 100 stripes in each direction, while `d3.symbol` and `symbols[1]` draw a diamond-shaped mask path. Two SVG masks alternate inverted fills, revealing or hiding parts of the grid. The visualization runs in React, renders as SVG, and adapts to the full browser window size.

Jun 8, 2022

Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt drawing as a full-screen SVG composition of horizontal and vertical striped rectangles. Two circular masks reveal the overlapping line grids, creating a dynamic intersection pattern. The visualization uses D3 v6 with `select`, `range`, and data joins to generate the rect elements, while SVG `mask` elements define the circular cutouts. The rendering is built with React and SVG, adapting to the window dimensions.

Jun 7, 2022

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3.js within a React framework, rendered as an SVG. It displays a grid of horizontal and vertical rectangular stripes that are partially revealed through two circular masks, creating a crosshatched pattern with a central circular void. The code leverages D3's `select`, `range`, and `.join()` API to generate the stripes, while SVG mask elements define the visibility zones. The visualization dynamically sizes to the browser window, demonstrating a blend of generative art and data-driven DOM manipulation.

Jun 7, 2022

Loading thumbnail…

Learn D3

This example demonstrates how SVG masks can create a striking visual composition using only rectangles and circles. It renders 100 horizontal and 100 vertical thin rect elements across the full viewport, with each set masked by a circular aperture defined via native SVG `mask` elements. The first mask uses a white circle on a black background, while the second inverts the colors to alternate visibility between the two rectangle sets. No D3 library calls appear in the code; instead, it relies on `document.createElementNS` and `setAttribute` for all SVG construction, making it a pure vanilla JavaScript and SVG demonstration.

Jun 6, 2022

Loading thumbnail…

Fork of HTML Starter

A minimal HTML page demonstrates a centered, large-format styled message and a single SVG circle using raw CSS and JavaScript without any external libraries. The circle is drawn with the SVG `<circle>` element inside an inline `<svg>` tag, positioned at coordinates (50, 50) with a radius of 50. The page’s layout relies on CSS classes for text styling, while the SVG rendering approach is purely declarative, showing how static vector graphics can be embedded directly in HTML. This example serves as a bare-bones starter template for browser-based visualizations.

May 15, 2022