Yingkai Song

@KaikaiSong99·8 public vizzes

D3 Selection Exploration

This example demonstrates a dynamic animation of fifteen circles moving in a sinusoidal wave pattern across the screen, with each circle’s vertical position updated continuously. The visualization uses the D3.js library (version 6.6.2), specifically leveraging the `select`, `range`, and `join` APIs to manage the SVG elements. The code generates data points calculated from a time variable, then updates the circles’ `cx` and `cy` attributes at a fixed 60-frame-per-second interval using `setInterval`. The rendering is SVG-based, with a live animation that replays the wave motion indefinitely.

Dec 5, 2022

Loading thumbnail…

Fork of D3 Selection Exploration

Roughly 15 circles, each with a radius of 100, are initially positioned at x=400 by a D3 v3 selection bound to an array of indices. The visualization then repeatedly updates these SVG circles using `vizData`, which employs `selection.join('circle')` to bind new data from `makeData`, a function that computes circle positions, radii, and y-coordinates based on a sine wave and a time parameter t. This creates an animated, undulating pattern across the screen. The page is styled with a hidden overflow, and the circles' attributes are set directly via `attr` calls without CSS transitions.

Dec 3, 2022

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example recreates a Sol LeWitt-inspired geometric composition using D3 v3. It displays a grid of thin, alternating horizontal and vertical rectangles whose visibility is selectively masked by two overlapping circular cutouts, creating a layered, minimalist pattern. The implementation uses `d3.select` and `d3.range` to generate 100 rectangles in each direction, applies SVG `mask` elements with white and black fills for inversion, and positions the circles at the canvas center with a radius of 200 pixels. Rendering is done entirely via SVG, sized to the full browser window.

Dec 3, 2022

Loading thumbnail…

js basics

This example reproduces a Sol LeWitt art piece using D3.js. The visualization is rendered in an HTML page with a minimal setup, while the core logic resides in a JavaScript file that uses D3’s array mapping API to transform a range of numbers. The code applies `map` to the array `[1, 2, 3, 4]`, multiplying each value by 2 and logging the result to the console, demonstrating a basic functional programming pattern in D3. No graphical output is drawn; the piece focuses purely on the programming foundation.

Dec 2, 2022

Loading thumbnail…

Sol LeWitt Reproduction more shapes with D3

This visualization reproduces a Sol LeWitt-style geometric composition using overlapping striped rectangles and mask-based shapes. A grid of horizontal and vertical bars is drawn with D3’s `select` and `range` methods, while two SVG masks create contrasting circular cutouts—one inverted—by combining black and white fills with a `symbol` path from the `symbols` array. The masks alternate the visibility of the stripes, producing an optical interaction of positive and negative space. The piece uses fixed window dimensions and renders entirely with SVG, mirroring the minimal aesthetic of the original artwork.

Dec 2, 2022

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3.js, rendering a grid of thin horizontal and vertical rectangles that overlap to form a dynamic pattern. The code generates 100 lines in each direction, with alternating mask effects—one mask inverts a central circle’s fill to create a contrasting ring, while the other keeps it solid. Using D3’s `select`, `range`, and SVG `mask` elements, the visualization fills the entire browser window, with each line’s position and size computed from the viewport dimensions. The artwork is displayed as vector graphics, leveraging D3’s declarative API for efficient DOM manipulation.

Dec 2, 2022

Loading thumbnail…

Sol LeWitt Reproduction

This reproduction of a Sol LeWitt art piece combines two sets of SVG rectangles to create an intersecting pattern of vertical and horizontal stripes. The horizontal bands are clipped by a mask containing two white triangles, while the vertical bands are clipped by a second mask where black triangles punch holes in an otherwise white field. The code constructs the SVG and mask elements dynamically with the DOM API, drawing 100 stripes in each direction across the full viewport.

Dec 2, 2022

Loading thumbnail…

Fork of group of circles, more circles

This visualization presents a grid of 10,000 unfilled black circles arranged in a 100-by-100 array across the full browser window. The code builds the artwork using the SVG namespace with the `document.createElementNS` API, setting fixed `cx`, `cy`, and `r` attributes for each circle. It demonstrates a generative approach inspired by Sol LeWitt, creating a systematic, geometric pattern that fills the viewport without interaction or animation.

Dec 1, 2022