Fork of Pseudo Line Chart

100%

Fork of Pseudo Line Chart

✓ Published0🌍 Public

Last edited Dec 4, 2022

Created on Dec 2, 2022

The visualization approximates a horizontal bar plot using a single thick black polyline that zigzags across an 845x389 SVG canvas against a white background. Data points are connected sequentially, with the line’s vertical positions suggesting categorical values along a baseline. Rendered as static SVG, the chart employs the Share Tech font for text and relies on raw `<path>` coordinates rather than a charting library, demonstrating a hand-coded pseudo-chart approach. The SVG `stroke-width` and `stroke-linejoin` attributes define the bold, rounded line style.

AI-generated description

An approximation of a horizontal bar plot

MIT Licensed

Similar vizzes

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

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

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

86% match

Loading thumbnail…

Pseudo Line

A pseudo-line chart approximates a bar chart by connecting six data points with a thick black path that bends through each bar’s position, creating a continuous contour over the categorical values. Rendered as static SVG using raw `<path>` and `<line>` elements in an HTML document, it displays axes and a bounding box without interactive behavior. The code defines precise coordinates for the path and axis lines, with text styling for potential labels, though none are present in the visualization.

Aalexscott-untitled

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

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

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

84% match

Loading thumbnail…

Fork of Pseudo Horizontal Bar Chart

This fork of a pseudo horizontal bar chart presents categorical data using thick, black horizontal lines instead of traditional bars, with white circles marking the end of each line. The chart includes a vertical axis line and uses the SVG `<line>`, `<circle>`, and `<text>` elements for rendering. Styling is applied via inline CSS, with classes defining the bar and chart stroke properties. The visualization is rendered directly in an HTML file using SVG, without relying on external JavaScript libraries like D3.

LLê Trần Hoàng Phúc

84% match