xinyuwangxyw

@xinyuwangxyw·9 public vizzes

Scrolling

This piece reproduces a Sol LeWitt wall drawing as a slowly shifting field of black lines on a white background. The lines bend and scroll continuously as their endpoints follow animated paths, creating a dynamic, generative composition. The code uses `d3.forceSimulation` to compute the evolving positions of the line vertices, with `requestAnimationFrame` driving the redraw of the SVG elements. It relies on d3.v7 and the DOM directly, with no external data source beyond the geometric rules of the artwork.

Mar 29, 2023

Loading thumbnail…

Sol LeWitt Reproduction (2)

This piece reproduces Sol LeWitt’s geometric wall drawing using D3 v7 to generate layered, rotated stripe patterns in SVG. The code uses masks (via `mask.append` and `rectRender`) to reveal distinct sections—vertical black stripes on the left, horizontal green and black stripes on the right, and diagonally slanted purple and orange bands in the lower corners. The rendering is deterministic, based on hard-coded coordinates and dimensions derived from the window size, with no external data source. The final composition is framed by thick black outline paths and a central dividing line, matching the original artwork’s structure.

Mar 24, 2023

Loading thumbnail…

Full Sol LeWitt Reproduction with D3

The visualization reproduces a Sol LeWitt art piece by layering horizontal and vertical bar patterns over two sets of symbol-shaped masks. It uses D3 v7 to create an SVG canvas sized to the browser window, with `d3.range` generating 100 bars in each direction, offset by 20-pixel intervals. Two masks, built with `d3.symbol` and SVG `mask` elements, alternate black-and-white fills to reveal the bar intersections, producing a geometric interplay of shapes and lines across the full viewport.

Mar 24, 2023

Loading thumbnail…

Sol LeWitt with D3

This example reproduces a Sol LeWitt wall drawing using D3.js, generating a grid of horizontal and vertical bars that intersect to create a dynamic pattern. The visualization uses two SVG masks—a front mask with a circular cutout and a back mask with an inverted circle—to create a lens effect where the bars appear to change orientation. The code constructs SVG elements programmatically, leveraging D3's `select`, `append`, `attr`, and `range` functions to efficiently build and style the 100 horizontal and vertical rectangles. The rendering is fully vector-based, scaling to the browser window dimensions.

Mar 20, 2023

Loading thumbnail…

Enter, Update, Exit

Four bars in a static HTML layout demonstrate a D3 data join, showing how elements enter, update, and exit based on an array of heights. Using `d3.select` and `selection.data`, the code binds the values `[100, 200, 300, 400]` to existing `.bar` divs, then applies inline styles for height and vertical margin to position them. The example also includes a separate SVG mask with a circle and horizontal rectangles, though it does not interact with the bars. This is a minimal v3-era reproduction using the D3 7.8.2 library.

Mar 19, 2023

Loading thumbnail…

Sol LeWitt in Vanilla JavaScript (2)

This example reproduces a Sol LeWitt art piece using only vanilla JavaScript and the SVG API. It shows a grid of black vertical and horizontal rectangles intersecting within a central white area, created through layered masking. The code builds an SVG mask with a large white rectangle and a smaller black rectangle to hide portions of the vertical stripes, while a foreground mask with a white center reveals the horizontal stripes within the same central region. The rendering approach relies on programmatic SVG element creation and mask compositing.

Mar 17, 2023

Loading thumbnail…

Sol LeWitt in Vanilla JavaScript

This example recreates a Sol LeWitt wall drawing using only Vanilla JavaScript and the SVG API, with no external libraries. The SVG dynamically adapts to the browser window’s dimensions, generating a composition of alternating horizontal and vertical bars. It uses SVG `<mask>` elements with circles to clip the bar patterns, revealing a circular region in the center where the orientation of the lines shifts, mimicking the geometric interplay found in LeWitt’s conceptual art. The code builds all shapes procedurally via `createElementNS`.

Mar 16, 2023

Loading thumbnail…

Pseudo Visualizations

This example presents a minimalist set of stylized bar-chart glyphs drawn as SVG paths within a single small viewBox. The graphic shows three abstract vertical bars of varying heights, with a horizontal baseline, where hovering over any shape turns it black. The code uses raw SVG elements—`path`, `rect`, and `circle`—with inline stroke and fill attributes, and applies a CSS `:hover` rule with a 500ms transition to change the fill color. No external libraries or data sources are used; the visualization relies entirely on static SVG markup in an HTML document.

Mar 4, 2023

Loading thumbnail…

SVG Fundamentals

This example introduces fundamental SVG shape elements, demonstrating circles, rectangles, lines, and paths on a 1000-by-1000 canvas. It shows the basic drawing primitives available in the SVG specification, with each shape assigned distinct fill and stroke colors. The code uses raw SVG elements like `circle`, `rect`, `line`, and `path` directly in HTML, and adds hover interactions through CSS transitions that turn any shape black. This serves as a minimal, self-contained reference for constructing vector graphics without external libraries.

Mar 3, 2023