piekarczvk@gmail.com

@piekarczvk·5 public vizzes

VErical lines

This example reproduces a Sol LeWitt-inspired drawing using dynamic SVG rectangles. The code generates 100 vertical lines, each rendered as an SVG `rect` element with a fixed width of 500 pixels and a height of 10 pixels, incrementing the y-coordinate by 20 pixels per line. The visualization is built by directly manipulating the DOM using the Document Object Model API, creating elements in the SVG namespace without relying on external libraries. The result is a stark, geometric grid of horizontal bands that demonstrates the fundamental process of programmatically constructing a plot.

Jan 12, 2025

Loading thumbnail…

Fork of Fork of JS and d3

This example is a simple reproduction of a Sol LeWitt-inspired drawing, created with plain JavaScript and the SVG DOM API. It renders 100 vertical rectangles, each 10 pixels wide, spaced 20 pixels apart across a 960 by 500 pixel canvas, filling the viewport without margins. The code directly manipulates SVG elements via `document.createElementNS` and `setAttribute`, demonstrating a minimal, non-D3 approach to generative art. The static composition highlights the geometric repetition characteristic of LeWitt’s wall drawings.

Jan 12, 2025

Loading thumbnail…

Fork of JS and d3

This example demonstrates a simple static SVG scene composed of two circles and a rectangle, serving as a basic template for the VizHub V3 runtime. The code uses directly authored SVG elements via `index.html`, including a black circle, a red circle, and a blue stroked rect with no fill. It showcases how the runtime renders markup without requiring an `index.js` entry point or any JavaScript libraries like D3. The file highlights the minimal setup and interactive widget capabilities of VizHub’s hot reload environment, providing a starting point for more complex visualizations.

Jan 12, 2025

Loading thumbnail…

JS and d3

A minimal SVG scene demonstrates static shapes rendered in a browser using plain HTML and SVG elements. The code declares three fixed shapes—two circles and a rectangle—with hard-coded coordinates, fill colors, and stroke properties. This "Hello World" example for VizHub v3 highlights the runtime environment's support for interactive widgets and hot reloading, though the visualization itself shows only static SVG markup without animation or data binding. The entry point bypasses an index.html file, relying instead on a main function exported from index.js.

Jan 12, 2025

Loading thumbnail…

SVG basics

This example introduces the VizHub V3 Runtime Environment, demonstrating a static SVG scene rendered directly in an `index.html` file. It displays three primitive shapes—two circles and one stroked rectangle—using hardcoded coordinates and fill colors. The code relies on the SVG API’s `<circle>` and `<rect>` elements, with no JavaScript or external libraries, showing how the runtime can render markup without an entry-point function. The blank slate serves as a baseline for interactive widgets and hot reloading, as described in the accompanying README.

Jan 11, 2025