panthabuddhi@gmail.com

@panthabuddhi·12 public vizzes

Fork of Sol LeWitt practice

This example uses JavaScript and the SVG API to create a full-window, grid-like pattern of vertical bars. It calculates the number of bars needed based on the window’s width and a fixed bar length with padding, then dynamically generates and positions each SVG rectangle. The code uses `document.createElementNS` and `setAttribute` to construct the vector graphics, and `console.log` examples in the README illustrate basic variable reassignment with `let` and `var`. The result is a minimalist, striped composition that directly references Sol LeWitt’s geometric wall drawings.

Feb 19, 2024

Loading thumbnail…

SVG Fundamentals_E1

A demonstration of SVG shape fundamentals, this example draws a collection of primitive graphics directly onto an SVG canvas within an HTML document. The code displays three circles with varying radii and fill colors, a large yellow rectangle with a thick blue stroke, a green diagonal line, and a filled orange path. The path defines a triangle using absolute movement (M) and line-to (L) commands, showing how paths connect multiple points. The example illustrates the syntax for specifying center coordinates (cx, cy) for circles, the upper-left corner positioning for rectangles, and the layering of SVG elements.

Feb 19, 2024

Loading thumbnail…

Sol Le Witt practice

This visualization recreates Sol LeWitt’s geometric wall drawings as an interactive abstract composition. It shows a dense grid of lines and arcs that respond to mouse movement, with overlapping strokes and subtle color shifts. The piece uses d3.forceSimulation to animate the positions of line endpoints, while a canvas rendering loop draws the paths each frame. Input data comes from a predefined set of coordinates and angles, not from an external dataset. The code relies on D3’s scale functions and the Canvas API, with no additional libraries beyond D3.

Feb 19, 2024

Loading thumbnail…

Sol le Witt practice

This example reproduces a Sol LeWitt wall drawing using SVG. It shows a static geometric composition of lines and shapes, exploring the artist's algorithmic approach to visual form. The sketch uses an SVG canvas set to 960 by 500 pixels, with basic HTML and JavaScript structure. The current code only initializes the drawing area and logs a message to the console, without yet implementing the drawing logic or any data-processing libraries.

Feb 19, 2024

Loading thumbnail…

Psudo Barplot 2 (horizontal)

This example shows a horizontal bar chart with four rectangular bars labeled A through D, where the first bar displays a CSS-specified green fill that overrides its inline red fill attribute. The SVG is rendered directly in HTML using inline `<rect>` and `<text>` elements, with Google Fonts providing the typography. The primary visualization demonstrates how CSS class styling takes precedence over presentation attributes in SVG, as the green fill from the `.first-bar` class rule overrides the `fill='red'` attribute on the first rectangle.

Feb 19, 2024

Loading thumbnail…

Psudo Barplot 1

This example shows a simple bar chart with four bars of varying heights, rendered directly as SVG rectangles using HTML markup. Each bar is drawn with hard-coded x, y, width, and height attributes, without any JavaScript or data-binding library. The y-coordinate for each rectangle starts from the top of the 960×500 viewport, meaning taller bars extend downward. The visualization relies solely on inline SVG elements within the HTML file, with a minimal CSS reset to remove page margins and hide overflow.

Feb 19, 2024

Loading thumbnail…

css practice

This example demonstrates a bar chart built entirely with CSS styling, where the visual properties of the bars are overwritten dynamically to reflect data values. It uses D3.js to bind data to DOM elements, while the bar heights and positioning are controlled through inline CSS styles rather than SVG or canvas rendering. The chart is rendered directly in an HTML file, with a minimalist approach that highlights how CSS can serve as the primary drawing mechanism. The code relies on D3's selection and data-join methods to update the elements.

Feb 9, 2024

Loading thumbnail…

Psudo Scatter Plot

This example shows a sparse scatter plot with six circular points arranged diagonally across an SVG canvas. Each circle has a fixed radius and distinct x/y coordinates, creating a pseudo-random distribution that resembles a simple data visualization. The visualization is rendered using plain SVG elements—specifically `<circle>` and `<rect>` tags—within an HTML page. It uses React as the underlying framework, though the code is written as static markup without interactive features or data-binding logic. The white background and cleaned-up body styling highlight the simple, minimal approach to displaying categorical or numeric point data.

Feb 9, 2024

Loading thumbnail…

Fork of SVG fundamentals E2

This example demonstrates a simple interactive SVG graphic: a single red rectangle with a thick black border that transitions smoothly to a green fill and an even thicker border when hovered. It uses CSS transitions applied directly to SVG `rect` elements, triggered by the `:hover` pseudo-class. The rendering is static SVG within an HTML document, with the transition duration set to 2000 milliseconds. The code relies on native browser CSS support rather than JavaScript libraries, showcasing how SVG styling and animation can be handled purely through stylesheet rules.

Feb 8, 2024

Loading thumbnail…

SVG fundamentals E2

A red rectangle with a thick black border sits centered in an SVG canvas. The example demonstrates CSS transitions triggered by hover, causing the rectangle to gradually change its fill color to green while its stroke width expands from 20px to 100px over three seconds. The code uses plain SVG elements with inline CSS style rules, applying the `transition` property to all animated attributes. No external libraries or data sources are involved; the visualization relies solely on native SVG and CSS animation capabilities within an HTML document.

Jan 29, 2024

Loading thumbnail…

Fork of Blank Slate

This example demonstrates the minimal setup required for a VizHub V3 visualization, rendering a simple “Hello World!” message in a large, centered font. The main function exported from `index.js` receives a container DIV and directly sets its `innerHTML` with inline styles to display the text. The visualization relies on the V3 Runtime Environment’s hot reloading—there is no `index.html`, and the runtime supplies the container element. The code uses plain JavaScript and CSS, with no external libraries or data sources, serving as a blank canvas for further development.

Jan 26, 2024

Loading thumbnail…

Fork of p5-starter

This example shows a minimal p5.js sketch as a starting point for the VizHub V3 Runtime Environment, which supports hot reloading and interactive widgets. The code draws five horizontal bars on a 400×400 canvas, with each bar’s width randomized via the `random()` function and redrawn once per second using `frameRate(1)`. It uses p5.js’s `setup()`, `draw()`, `createCanvas()`, and `rect()` APIs, and loads the library from a CDN in a simple HTML file.

Jan 26, 2024