ulrichzhan

@ulrichzhan·3 public vizzes

D3 Selections

Animated D3 selections demonstrate data join patterns through a field of moving circles. The visualization uses `d3.selectAll`, `data`, and `join` to bind incoming arrays to SVG circle elements, updating their `cx`, `cy`, and `r` attributes each frame. Data is procedurally generated using `d3.range` and `Math.sin` to create oscillating positions and sizes. The example relies on `d3.select` to append the SVG canvas and runs a `setInterval` loop at 60 frames per second, with the commented CSS transition property hinting at possible smoothing.

Sep 27, 2023

Loading thumbnail…

D3 selections

This example demonstrates the basics of JavaScript arrays within an HTML page, using the Array constructor and the `push` method to add an element. It shows how the console logs the updated array length, illustrating array mutation and property access. The code relies on plain JavaScript and the browser’s console API, with no external libraries or rendering. The focus is on foundational scripting behavior, not data visualization.

Sep 27, 2023

Loading thumbnail…

Sol LeWitt Reproduction in d3

This example reproduces a Sol LeWitt-inspired drawing using D3.js, rendering a grid of horizontal and vertical black-and-white stripes on an SVG canvas. The SVG is populated with 100 rectangles in each orientation, using D3’s selection and `join` API to bind data to elements. Two circular masks, defined in D3’s `append` and `attr` calls, clip the stripes so that only a central circular region is visible, creating a geometric optical effect against the full-screen canvas.

Sep 27, 2023