Pseudo Line Chart

100%

Pseudo Line Chart

✓ Published0🌍 Public

Last edited Mar 13, 2024

Created on Mar 13, 2024

This example shows a pseudo line chart, approximating a scatter plot with a single thick, rounded black stroke that connects six discrete points across a 782-by-355 SVG canvas. It renders directly in the browser using an inline `<svg>` element, relying on the SVG `path` element and its `d` attribute to define the line, with `stroke-linecap` and `stroke-linejoin` set to `round` for a smooth, bulbous appearance. The visualization deliberately avoids using a dedicated charting library, instead demonstrating raw SVG fundamentals for drawing a simplified data representation.

AI-generated description

An approximation of a scatter plot.

MIT Licensed

Similar vizzes

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

91% 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

91% 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

90% 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

89% match

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.

Vvschan2

88% match

Loading thumbnail…

Pseudo Line Chart

A pseudo line chart uses an SVG path with a single, thick black stroke to suggest a conventional line chart without plotting actual data points. The path curves through a stylized, hand-drawn-looking trajectory across a white background on a dark grey canvas. Rendered entirely with inline SVG elements, including a large Share Tech font for text labels, the visualization relies on path data and stroke properties rather than data-binding libraries to create its aesthetic.

Ttriciascully

87% match

Loading thumbnail…

Pseudo Line Chart

This example shows a hand-drawn-style line chart composed of a single thick, rounded black path that steps down and up across a white canvas, suggesting an approximate data trend. The visualization uses raw SVG markup with a `path` element, specifying coordinates and stroke properties directly, and loads the Share Tech font for a single text style rule. All rendering is performed through the SVG format, with no JavaScript libraries or data-processing APIs involved. The chart’s minimal design focuses on the aesthetic of an imprecise, pseudo-line representation rather than precise data encoding.

Aajoua

86% match

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

86% match