Irene Jiang

@Clocloaky·3 public vizzes

Pseudo Graphs

This visualization uses raw SVG text elements and rectangles to construct a pseudo graph, labeling four nodes A through D vertically while drawing thick black bars at varying angles as stand-in edges. The code relies on native SVG APIs like `text` and `rect` with `transform="rotate"` to position the graph elements, with no JavaScript libraries involved. The design deliberately mimics a simple graph structure using only static HTML/SVG markup, rendered directly from a Figma export as noted in the README. The visualization demonstrates a minimal, non-interactive approach to graph representation.

Nov 14, 2022

Loading thumbnail…

Horizontal Bar Chart

This horizontal bar chart displays four categories as rectangular bars of varying heights, scaled along a vertical axis. The chart is rendered as a static SVG using the raw `svg` element with `rect` components, positioned via `x` and `y` coordinates and sized by fixed `width` and `height` attributes. Each bar originates from a distinct horizontal starting point and extends to a common width, visually comparing magnitudes across categories. The data appears to be manually encoded in the markup rather than generated from an external dataset, as no JavaScript libraries or data-binding APIs are present.

Nov 14, 2022

Loading thumbnail…

SVG Fundamentals

This example demonstrates how to construct a simple face using basic SVG shapes. It shows a circle as the head, with paths for eyebrows, small circles for eyes, an ellipse for a mouth, and lines for whiskers. The code directly uses raw SVG elements including `<circle>`, `<path>`, `<ellipse>`, and `<line>`, with absolute coordinates and stroke styling. No JavaScript libraries or data sources are involved; the visualization relies solely on static SVG markup rendered inline in the HTML.

Nov 14, 2022