vschan2

@vschan2·6 public vizzes

Sol LeWitt Sample

This example reproduces a Sol LeWitt-inspired generative drawing directly in the browser. It generates a full-screen SVG canvas sized to the current window and draws a single black vertical rectangle, its height matching the viewport. The code uses the native `document.createElementNS` API for SVG creation and rendering, referencing the `svg` namespace. A loop sets an initial count but does not yet iterate, leaving the artwork minimal and incomplete.

Jan 30, 2024

Loading thumbnail…

Pseudo Bar Chart

This pseudo bar chart presents four black rectangles of varying heights on a white background, simulating a simple categorical bar chart without axes, labels, or data values. The visualization is entirely hand-coded in raw SVG using the `rect` element for each bar, with inline styles controlling fill color and stroke width. It relies on explicit `width`, `height`, `x`, and `y` attributes to position and size the bars. The Inkscape namespace declarations indicate the chart was originally authored in the Inkscape vector editor before being exported.

Jan 29, 2024

Loading thumbnail…

Pseudo Line Chart

A pseudo line chart approximates a trend line using a single SVG path element. Rendered as a vector graphic, the chart displays a thick black curved line across a white canvas. The line’s shape is defined by cubic Bézier commands (`c` and `C`) within the path’s `d` attribute, with coordinates hard-coded in the SVG. The visualization relies on native SVG path rendering and CSS styling, including a rounded line cap and a stroke width of 10.

Jan 29, 2024

Loading thumbnail…

Pseudo Horizontal Bar Chart

This example shows a pseudo horizontal bar chart comparing four labeled values, A through D, as red rectangles of varying widths. Drawn entirely with raw SVG elements, each bar is a `<rect>` with a fixed height and hover effect that transitions its fill from red to orange via CSS. Category labels are plain `<text>` elements aligned to the left. The visualization relies on explicit width and x/y attributes rather than a layout library, and uses the Montserrat web font for typography.

Jan 29, 2024

Loading thumbnail…

Pseudo Scatter Plot

A pseudo scatter plot approximates a scatter diagram using seven black circles of equal size positioned across a white 960-by-500 SVG canvas. The circles’ coordinates suggest a downward trend from left to right, mimicking data points without an explicit dataset. Rendered entirely in raw SVG, the example uses no JavaScript libraries or charting frameworks, relying instead on static `circle` elements with inline style attributes. The SVG includes Inkscape namespace declarations, indicating the graphic was likely authored or exported using the Inkscape vector editor.

Jan 29, 2024

Loading thumbnail…

SVG Fundamental

This example demonstrates basic SVG shapes, including circles, rectangles, lines, and a path, rendered in a 960x500 viewport. One circle uses SMIL animation to pulse its radius, while a rectangle changes fill color and stroke width on hover via CSS transitions. The code relies on native SVG elements and CSS, with no external libraries, and draws a large blue stroke frame around the canvas.

Jan 29, 2024