cniekel

@cniekel·4 public vizzes

moving sine

This example shows 15 circles moving in a sine wave pattern across the screen, with their vertical positions oscillating smoothly over time. A static green square sits in the corner as a fixed reference point. Built with D3 version 7 and rendered as SVG, the animation updates every 1000/60 milliseconds using `setInterval`. Each circle’s y-coordinate is calculated as `250 - Math.sin(d * 0.5 + t) * 220`, and its radius varies via `Math.sin(d.i * t / 20)`. The visualization uses D3’s `select`, `range`, and `.join` API to manage the dynamic circle elements efficiently.

Nov 5, 2023

Loading thumbnail…

Fork of D3 Starter

A dynamic animation shows fifteen circles moving in a sine-wave pattern across the screen, with their radii oscillating over time. The example uses D3 v7’s `select`, `range`, and data joins (`join`) to bind and update SVG circle elements every frame, driven by `setInterval` at roughly 60fps. A static green rectangle anchors the composition, while circle positions and sizes are computed from a time variable `t`, demonstrating basic D3 transitions and SVG rendering without external data sources.

Nov 5, 2023

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example recreates a Sol LeWitt-inspired geometric composition using D3.js, displaying ten red-striped rectangles overlaid with a circular mask and a diamond-shaped symbol. The SVG rendering uses `d3.select`, `range`, `scaleBand`-like positioning via manual arithmetic, and `symbol` to generate the diamond path. A mask defined with `<mask>` and appended shapes—a white background rect, a black circle, and a white diamond—controls which parts of the green-filled, red-stroked rectangles remain visible. The artwork scales to the full browser window, with layout based on `window.innerWidth` and `window.innerHeight`.

Nov 5, 2023

Loading thumbnail…

My thing

This example demonstrates how SVG elements are constructed and layered directly in the browser using the Document Object Model (DOM) and the `createElementNS` API. It shows a series of vertical black lines evenly spaced across the viewport, followed by a single blue rectangle that fills the entire screen, obscuring the lines beneath it. The rendering approach relies on manual SVG creation via `document.createElementNS`, setting attributes for line coordinates and rectangle dimensions, and appending nodes to the document body. No external libraries are used; the code runs on raw JavaScript and SVG.

Nov 5, 2023