Line Chart

100%

✓ Published1🌍 Public

Last edited Sep 10, 2025

Created on Sep 10, 2025

Forked from Fork of An approximation of a column chart

This line chart shows a jagged polyline connecting five points across a white canvas, with a single black stroke of 20-pixel width tracing an upward and downward path. The chart is rendered as static SVG markup directly in the HTML, using a `path` element with explicit coordinates and a `rect` background. No JavaScript libraries are involved; the example relies on raw SVG geometry and minimal CSS for text styling, with an unused `index.js` that merely logs a message.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

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.

AAllison Leggett

85% match

Loading thumbnail…

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.

Ddevin.mcmanus@gmail.com

84% match

Loading thumbnail…

psuedo Line Chart

This example presents a minimalist line chart as a single, jagged polyline. The chart displays a data series with sharp peaks and valleys, suggesting fluctuating values. The code renders directly to an SVG element within the HTML, using a `path` element with a bold black stroke for the line. The visualization relies on the native SVG API, with no external charting libraries or JavaScript for data processing, creating a static representation.

NNikki Masroor

84% match

Loading thumbnail…

Pseudo line chart

A pseudo line chart renders a jagged polyline as a decorative approximation of a data series, using a single SVG `<path>` element with rounded stroke caps and joins. The path connects seven points across a 960-by-500 canvas, alternating between descending and ascending segments to suggest fluctuating values. The visualization is hand-coded in raw SVG, with no JavaScript libraries, and relies on explicit coordinate data in the `d` attribute to define the line’s shape. A white background rectangle provides contrast for the thick black stroke.

LLouis Astorg

84% match

Loading thumbnail…

Pseudo line chart

A pseudo line chart approximates a scatter plot by drawing a single thick black polyline through five points across an SVG canvas. The path uses stroke-linecap and stroke-linejoin for rounded corners, with no underlying data points or axes. Rendered via raw SVG markup, the code defines a path element with explicit coordinate pairs (e.g., M4.5 131.5L237.5 269) and relies on styles.css for purple bars and red circles that are not present in the HTML. The chart employs Google Fonts' Share Tech typeface, though no text or additional elements appear.

Bbjfmbeck

84% match

Loading thumbnail…

Line Chart with HTML

A pseudo line chart renders a jagged, multi-segment path in SVG to suggest a time-series trend. The line moves diagonally across the canvas, changing direction sharply at each data point, with a thick stroke and rounded joins. The visualization uses hardcoded coordinates from a JavaScript array of objects with x and y values, rather than plotting real data. The chart is drawn with a single SVG `<path>` element, where the `d` attribute defines the line’s geometry. The data, though present in the source, is not directly mapped to the path’s coordinates.

BBismark Kofi Owusu Sarfo

82% match

Loading thumbnail…

Pseudo Line Chart

A pseudo line chart approximates a line plot with a single thick black stroke that connects six data points across a white SVG canvas. The path uses manually defined coordinates rather than a data-driven scale, creating a stylized, hand-drawn appearance. The example employs SVG path elements with a 15-pixel stroke width, set within an HTML document styled with the Share Tech font from Google Fonts. The rendering is purely static, with no axes, labels, or interactive behavior, emphasizing the abstract visual form over quantitative accuracy.

KKerotyzzzmo

82% match

Loading thumbnail…

Pseudo Line Chart with HTML

This example shows a pseudo line chart built entirely without a charting library, using a single SVG `<path>` element to approximate a data series with thick, rounded strokes. The chart presents six connected points across a fixed 960 by 500 canvas, using a black line with `stroke-width="40"` and `stroke-linecap="round"` to create a bold, abstract visual. The path’s coordinates are hardcoded in the `d` attribute, and the rendering relies on SVG’s native `stroke-linejoin` for smooth corners. No data is loaded externally; the visualization is a static, hand-authored approximation of a line chart.

CCurran Kelleher

82% match