Naveen Pratiksha

@pratikshafsmk·3 public vizzes

Fork of D3 Selection Exploration try

Fifteen circles animate across an SVG canvas, their positions and radii oscillating in a wave-like pattern driven by a sine function. The visualization demonstrates D3 selections by binding data to circle elements using `selectAll`, `data`, and `join`. The `makeData` function generates coordinates and sizes from an animated time parameter, while `vizData` applies these values as `cx`, `cy`, and `r` attributes. The code uses D3 v6 modules `select` and `range`, with dimensions set to the full browser window.

Jan 18, 2024

Loading thumbnail…

Sol LeWitt Reproduction with D3 -pr

A grid of thin horizontal and vertical bands fills the browser window, but a circular mask reveals only the central intersection of the two patterns. The piece reproduces a Sol LeWitt wall drawing. Created with D3.js (v6.6.1) using `select`, `range`, and `.join` to build SVG `rect` elements, it applies two SVG masks—one with a black background and white circle, the other inverted—to cut the stripes into a disc-like view at the center of the canvas.

Jan 2, 2024

Loading thumbnail…

Sol levit reproduction

This example reproduces a static visualization using only SVG shapes, drawing a single vertical black rectangle on a white canvas. The code creates the SVG element via the raw Document Object Model (DOM) API, using `document.createElementNS` to set namespace attributes, and then appends a rectangle with fixed width, height, and x-coordinate. No external libraries are used, and the rendering is entirely procedural, with no data source or interaction. The visualization demonstrates basic SVG construction through native JavaScript methods.

Dec 31, 2023