Pseudo line chart

100%

Pseudo line chart

✓ Published0🌍 Public

Last edited Jan 6, 2023

Created on Jan 6, 2023

This pseudo line chart displays five connected data points as a thick, black, rounded path across a white canvas. The rendering uses raw SVG with a single `<path>` element, leveraging attributes like `stroke-linecap` and `stroke-linejoin` to create the line’s smooth, chunky appearance. The chart relies on hardcoded coordinates within the SVG markup, with the visual styled using the Share Tech font loaded via Google Fonts.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

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

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

A pseudo line chart approximates a line graph with a single, thick black path. The path connects six data points across a 960 by 500 SVG canvas, using rounded line caps and joins to create a smooth, continuous appearance despite the absence of axes or data labels. The visualization is rendered using raw SVG markup in an HTML document, with the path’s `d` attribute containing explicit coordinates and styling controlled via `stroke`, `stroke-width`, and related presentation attributes.

Wwspwll@gmail.com

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

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

84% match

Loading thumbnail…

Psuedo line chart

A pseudo line chart presents a set of data points as a single thick, black, angular path, with red and black CSS styling applied to text and an SVG element. The visualization uses a static SVG `path` element with fixed coordinates to suggest a line chart without traditional axes or data encoding. It renders directly in HTML using inline SVG and CSS, with the `stroke-linecap` and `stroke-linejoin` properties shaping the rounded path. The example demonstrates a minimal, hand-coded approach to chart-like imagery.

Gguththered

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

84% match