devin.mcmanus@gmail.com

@devinmcmanus·6 public vizzes

Pseudo Line Chart

The example shows a hand-drawn style line chart rendered as a single black polyline across a blank 960-by-500 SVG canvas, connecting six points from left to right with thick, rounded strokes. It uses raw SVG path data with `stroke-linecap` and `stroke-linejoin` to create the pseudo-chart aesthetic, while the 64px Share Tech font is defined but not applied to any visible text. The chart is static, with no axes, labels, or interaction, and relies solely on the `d3`-free inline `path` element for its minimal visual output.

Jul 17, 2025

Loading thumbnail…

Pseudo Horizontal Bar Chart

This example shows a pseudo horizontal bar chart comparing four categorical values, labeled A through D. The chart uses a minimalist design with oversized Share Tech typography and solid SVG rectangles to represent data magnitudes. The code renders the visualization using raw SVG elements—`rect` for the bars and `text` for labels—without JavaScript libraries or animation. The longest bar spans 768 pixels for category A, while the shortest is only 238 pixels for D, creating a clear visual ranking. The static SVG output relies on hardcoded coordinates and dimensions rather than any data-binding or layout logic.

Jul 17, 2025

Loading thumbnail…

Pseudo Bar Chart

This example shows a pseudo bar chart consisting of four large, blocky rectangles of varying heights arranged horizontally on a plain white background. The visualization uses raw SVG elements defined directly in the markup, with each `rect` specifying explicit `x`, `y`, `width`, and `height` attributes to encode the chart’s data through bar length. No D3 or other JavaScript libraries are involved; the rendering relies solely on static SVG geometry and inline CSS to set the page layout and hide scrolling. Each bar is represented by a simple filled shape without axes, labels, or interactivity.

Jul 17, 2025

Loading thumbnail…

Pseudo Scatter Plot

Six circles sit at varying positions across a white SVG canvas, resembling a minimal scatter plot with uniform point sizing. Each circle is drawn directly with explicit `cx` and `cy` coordinates on an SVG `<circle>` element, creating a static pseudo-scatterplot without any axes or data encoding. The visualization uses raw SVG markup embedded in an HTML file, rendering six fixed data points without interaction or animation. This straightforward example demonstrates a hand-coded approximation of a scatter plot, relying solely on basic SVG shape elements rather than a charting library.

Jul 17, 2025

Loading thumbnail…

Composition in Red, Blue, and Yellow

A static SVG composition reinterprets Piet Mondrian’s geometric abstraction using primitive shapes. The viewport contains red, blue, and yellow rectangles separated by thick black horizontal and vertical lines, with a bold black bar spanning the upper-left region. The layout relies on explicit SVG elements—`rect` for color blocks and `line` for the intersecting strokes—positioned via absolute coordinates on a 960×500 canvas. No JavaScript or data-driven logic is involved; the rendering is purely declarative markup embedded directly in the HTML.

Jul 17, 2025

Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shape rendering and styling, including circles, rectangles, lines, and paths, all displayed on a 960x500 canvas. The chart shows how different SVG elements appear with various fill colors, stroke widths, and stroke colors, such as red, green, and blue circles, a yellow rectangle with a navy border, and black lines and paths. The code uses native SVG markup within an HTML file, with shapes positioned via coordinate attributes like `cx`, `cy`, `r`, `x`, `y`, and `d` for paths, and no external libraries are employed. The rendering is static, showcasing the versatility of SVG for basic geometric compositions.

Jul 17, 2025