Minchan Jun

@MinchanJun·4 public vizzes

Fork of Fork of Sol LeWitt Reproduction with D3

This interactive artwork reproduces a Sol LeWitt drawing using D3.js. Inside a circular mask, a grid of alternating horizontal and vertical red rectangles intersects to form a dynamic, geometric pattern. The rendering is created using D3’s `select`, `range`, and `join` APIs to append SVG rect elements, while two SVG masks define the circular viewing window. The result is a modern, code-based interpretation of the artist's minimalist aesthetic.

Jun 12, 2022

Loading thumbnail…

D3 Sol LeWitt Reproduction Mask

This example renders a Sol LeWitt-inspired geometric mask using D3 v6, displaying an abstract composition of overlapping lines and shapes across the full browser window. The visualization is built with React and SVG, where the `select` function from D3 appends an SVG element sized to the viewport dimensions. The code sets up the rendering environment but does not include the drawing logic itself, resulting in a blank canvas ready for the reproduction algorithm. No external data source is used; the artwork is generated entirely through code.

Jun 12, 2022

Loading thumbnail…

Fork of Sol LeWitt Reproduction Mask

This example uses SVG masking to reproduce a Sol LeWitt-inspired geometric composition. It draws 100 horizontal rectangles across the full viewport width, each masked by a single black circle centered on the screen. The mask, defined with the SVG `mask` element and a `rect` plus `circle`, reveals the stripes only within the circular area, creating a clean cutout effect. The code builds the visualization imperatively via `document.createElementNS`, with no external libraries, and responds to the window’s dimensions for full-screen display.

Jun 12, 2022

Loading thumbnail…

SVG Experiment

This example demonstrates the interactive styling capabilities of SVG graphics, using CSS transitions to create a smooth visual response when the user hovers over a blue circle, which gradually turns red and thickens its border over three seconds. The visualization composes a variety of SVG primitives, including lines, a circle, and a path, all rendered directly within the HTML page using inline SVG markup. The implementation relies on vanilla CSS and JavaScript, with no external libraries, and is built using React as indicated by the project metadata, though the code itself is a standalone HTML file.

Jun 10, 2022