Allison Leggett

@Alliemack77·5 public vizzes

Pseudo Line Chart

This pseudo line chart creates a jagged, black polyline across a blank SVG canvas, suggesting a hand-drawn or abstract data series. The line connects points at varying heights, forming a distinct zigzag pattern from the lower left to the upper right, ending in an arrow-like tick. The visualization is rendered using a single SVG `<path>` element with explicit coordinates, styled with the Inconsolata monospace font though no text is displayed. It relies solely on native SVG APIs within an HTML file, with no external JavaScript libraries or data processing involved.

Jun 23, 2022

Loading thumbnail…

Pseudo Horizontal Bar Chart

This pseudo horizontal bar chart displays categorical data for values A through D, with bars extending from a common left baseline. The SVG rendering uses basic rectangular shapes with black fills to represent the bar lengths, which decrease progressively from A to D. A separate text element using the Inconsolata font displays the category labels. The chart uses plain SVG attributes for positioning and sizing rather than a JavaScript visualization library, reflecting its creation as a Figma export.

Jun 22, 2022

Loading thumbnail…

Pseudo Bar Chart

This pseudo bar chart displays six vertical bars of varying heights across a dark background, suggesting categorical data without axes or labels. Each bar is a simple SVG `<rect>` element positioned manually, with heights that imply quantitative differences between groups. The chart uses no JavaScript libraries or data binding; instead, it relies on hardcoded SVG coordinates and dimensions, with a fixed viewport of 802 by 368 pixels. The bars are rendered directly in the HTML, created in Figma and exported as static SVG markup.

Jun 22, 2022

Loading thumbnail…

Pseudo Scatter Plot

This example shows six circles arranged diagonally across a white SVG canvas, creating a minimal pseudo-scatter plot. The circles are placed at fixed coordinates, with no axes or data mapping. The visualization uses raw SVG elements—a `<rect>` background and `<circle>` shapes—without any JavaScript libraries. The code is generated from Figma exports, as noted in the README, and rendered directly in the browser via static SVG markup. Each circle has a radius of 33.5 pixels, and their positions suggest a loose downward trend from left to right.

Jun 22, 2022

Loading thumbnail…

SVG Fundamentals

This example shows a simple cat face constructed from basic SVG shapes, including circles for the ears, head, eyes, and nose, and lines for whiskers. It renders directly in the browser using SVG elements with inline styling and percentage-based coordinates for positioning. The code demonstrates fundamental SVG concepts like shape elements, fill colors, and stroke attributes, all within a static HTML page that uses no external JavaScript libraries or data sources.

May 20, 2022