ashutoshc018@gmail.com

@Achaudhari02·6 public vizzes

Sol Lewitt in D3 part 2

This example recreates Sol Lewitt’s geometric wall drawings using D3.js, rendering 500 horizontal and vertical stripes that overlap through two SVG masks. The code uses `d3.select`, `range`, and `symbol` to generate distinct symbol shapes (like circles and triangles) that act as the mask patterns, revealing or hiding the grid lines. Mask elements are built with `svg.append('mask')` and filled paths, producing layered visual effects of intersecting bands in black and white. The rendering approach uses SVG directly, with dimensions set from `window.innerWidth` and `window.innerHeight`.

Jan 5, 2025

Loading thumbnail…

JavaScript Arrays

This example demonstrates d3’s `range()` and `select()` functions to generate a wave of 150 circles whose vertical positions oscillate over time via `setInterval`. The SVG circles are updated using d3’s data join pattern with `.join('circle')` and `.attr('cy')`, while the animation increments a `time` variable to create a moving cosine-wave pattern across the full window width and height.

Dec 30, 2024

Loading thumbnail…

Sol Lewitt in D3

This example recreates a Sol LeWitt-inspired drawing using D3.js to render SVG masks and shape intersection. Horizontal and vertical lines are drawn across the full canvas, with two circular masks controlling which portions of each line set are visible. The code employs D3’s select, range, and join APIs to efficiently bind data to SVG elements, demonstrating a programmatic approach to geometric abstraction.

Dec 22, 2024

Loading thumbnail…

Sol Lewitt

This example visualizes a grid of horizontal and vertical lines composed with a circular mask, creating an interwoven geometric pattern reminiscent of Sol LeWitt’s minimalist drawings. The code uses native SVG elements—`rect`, `mask`, and `circle`—to control which regions of the line grid remain visible, with two complementary masks revealing intersecting bands around the center. All shapes are generated programmatically via a loop, with the window dimensions set dynamically. This work demonstrates how simple SVG masking techniques can produce complex, aesthetically striking compositions.

Dec 21, 2024

Loading thumbnail…

Fonts in SVG

This example displays static text and geometric shapes rendered directly in SVG, using inline SVG elements with CSS styling for the text. It loads the Google Font “Agu Display” via the CSS API and applies it to text elements through a stylesheet rule. The page also includes a simple JavaScript script with basic arithmetic and console logging, while the accompanying index.js exports a main function that renders a dynamic “Hello World!” message with an adjustable font size, demonstrating VizHub’s interactive widget system for live property tweaking.

Dec 20, 2024

Loading thumbnail…

SVG Basics

This example introduces VizHub V3's runtime environment, demonstrating how a main function exported from index.js replaces an index.html entry point. The code renders SVG shapes—rectangles and circles—using the direct DOM API, with CSS styles controlling hover transitions that change fill colors and stroke widths. A separate SVG path with inline fill attributes draws a custom shape, while a "Hello World" div displays a font size adjustable by alt-dragging a number in the editor. Interactive widgets enable continuous hot reloading for real-time code feedback.

Dec 18, 2024