pirani.sabah@gmail.com

@sabahpirani·12 public vizzes

JS Arrays

A simple animation shows a line of fifteen circles moving vertically as a wave, with each frame rendering circles at positions along a sine curve. The circles animate by updating their y-coordinates over time, creating a smooth undulating pattern. Built with React and D3, the code uses `d3.select` to append an SVG to the body and `d3.range` to generate the data points, then updates the circles’ positions every second via `setInterval`. Rendering is handled through direct SVG manipulation, with each circle’s radius fixed at 10 pixels.

Nov 21, 2024

Loading thumbnail…

JS arrays

This example shows a horizontal sequence of 15 circles rendered in an SVG canvas, each positioned along the x-axis at intervals of 100 pixels with a fixed radius of 100. The visualization uses the D3.js library (v7.9.0) with its `select` and `range` functions to construct the visualization declaratively. The code appends circles to an SVG element that spans the full width and height of the viewport, using a data-driven approach where each element’s `cx` attribute is computed from its index in the generated data array.

Nov 18, 2024

Loading thumbnail…

JS arrays

This example demonstrates how JavaScript arrays are built and logged to the browser console. The code defines a `range` function that uses a `for` loop to populate an array with numbers from a start value up to a stop value, stepping by a specified increment. It then calls this function with arguments (2, 5, 1) and outputs the result using `console.log`. The page is a minimal HTML structure with embedded JavaScript, showcasing basic array manipulation and iteration without any external libraries or frameworks.

Nov 18, 2024

Loading thumbnail…

JS Arrays

This example demonstrates JavaScript array manipulation through a simple range function. The code defines a `range(start, stop, step)` function that iterates from a start value to a stop value, pushing each step increment into an array using a for loop and the `array.push()` method. The main script calls `console.log` to output the result of `range(2,5,1)` to the browser console. It shows the fundamental use of basic JavaScript syntax and array operations within an HTML environment, relying on no external libraries.

Nov 18, 2024

Loading thumbnail…

Full Sol Lewitt D3 changing rect dir

This example, built with D3.js (version 6.6.1), dynamically generates a Sol LeWitt-inspired drawing of alternating vertical and horizontal black rectangles. The code uses D3's `select`, `range`, `symbols`, and `symbol` APIs to construct SVG elements and masks. It creates two layers of rectangles, each masked by a group of three geometric symbols (like circles or squares), producing a complex, intersecting pattern. The rectangles are generated programmatically based on screen dimensions, with mask shapes positioned horizontally across the canvas.

Nov 18, 2024

Loading thumbnail…

Full Sol Lewitt D3

This example uses D3’s selection and join API to create a grid of black rectangles overlaid with geometric shapes. Solid black bars are drawn repeatedly, masked by a set of white star-like symbols, while a second mask inverts the shapes to create a cutout effect. The code relies on `d3.select`, `d3.range`, `d3.symbol`, and SVG `mask` elements, with rectangle positions computed from screen width and thickness. The rendering is entirely SVG, driven by JavaScript that calculates layout from `window.innerWidth` and `window.innerHeight`.

Nov 18, 2024

Loading thumbnail…

Sol Lewitt D3 v2

A grid of vertical and horizontal striped rectangles, generated with D3 v6, covers the screen. The full-width and full-height strips use `select` and `range` to map data to `rect` elements. Two SVG masks reveal overlapping circular regions: a white-filled circle on a black background shows the horizontal lines, while an inverted cutout mask displays the vertical lines, creating a cross-shaped intersection at the center. Rendering is via SVG with D3's `join` method.

Nov 13, 2024

Loading thumbnail…

Sol Lewitt D3

This example reproduces a Sol LeWitt-inspired drawing using D3.js to render SVG rectangles in a browser. It shows a grid of alternating vertical and horizontal bars that are masked to create a circular focal point, with bars inside the circle appearing inverted relative to those outside. The code uses D3’s `select` and `range` APIs to generate and join the rectangles, while custom SVG masks (`circle-mask` and `circle-cutout-mask`) control visibility. The visualization resizes to the full window and uses only the built-in D3 library (v6.6.1).

Nov 13, 2024

Loading thumbnail…

Sol Lewitt with JS

This example generates an abstract geometric composition inspired by Sol LeWitt, using only JavaScript and the SVG API. It creates two nested masks—a circular cutout and a circular fill—to render a grid of vertical and horizontal rectangles that intersect only within a central circle. The vertical rectangles are visible outside the circle, while the horizontal ones appear only inside it, producing a clean, mask-based interaction. The code sets the SVG dimensions to the browser window size and constructs all shapes procedurally via the DOM API.

Nov 12, 2024

Loading thumbnail…

Sol Lewitt in only JS

This example recreates Sol LeWitt’s geometric wall drawings using only JavaScript and D3. It renders a series of abstract, rule-based compositions—lines, arcs, grids, and color bands—on an SVG canvas. The code implements each drawing as a separate function that generates SVG elements using D3’s selection and data-binding methods, with shapes built from `d3.line`, `d3.arc`, and `d3.area` generators. Coordinates are computed mathematically, and the drawings are displayed in a grid layout, showcasing how algorithmic instructions translate into visual form without external data sources.

Nov 12, 2024

Loading thumbnail…

SVG Fundamentals

This example demonstrates how to create geometric patterns using SVG masks and rectangles. The code generates full-screen vertical and horizontal rectangle grids, with a circular mask that reveals only the overlapping central region. It uses the SVG namespace API (`document.createElementNS`) to construct elements dynamically in vanilla JavaScript, with a mask containing a white circle to define the visible area. The rendering adapts to the browser window dimensions, setting the SVG width and height to match the viewport size.

Nov 12, 2024

Loading thumbnail…

SVG Fundamentals-Sabah

This example demonstrates the "Hello World" of the VizHub V3 Runtime Environment, a blank canvas for interactive coding and data visualization. It shows how a simple `main` function, exported from `index.js`, takes a `container` DIV and injects HTML into it, rendering a large, centered text string via inline styles. The code highlights the platform’s interactive widget feature, allowing a number like `fontSize` to be adjusted in real-time with an Alt-drag, providing immediate visual feedback. This serves as a foundational template for building more complex visualizations within the V3 environment.

Nov 5, 2024