Skip to main content
SimilarExport ZIP
100%

Pseudo Horizontal Bar Chart

✓ Published1🌍 Public
Ccssergio
Last edited May 21, 2022
Created on May 8, 2022

This pseudo horizontal bar chart presents a sequence of five values as thick, rounded line segments. The SVG path connects points from the bottom-left to the top-right, with varying segment lengths and angles, visually approximating a bar chart without traditional rectangular bars. The visualization uses an SVG `<path>` element with a `stroke-linecap="round"` and `stroke-linejoin="round"` to create the bar-like appearance, while a large, custom font displays the title. The chart is rendered using raw SVG markup within an HTML document, with styling provided by CSS.

AI-generated description

An aproximation of a scatter plot

MIT Licensed

Similar vizzes

Loading thumbnail…

Pseudo Horizontal Bar Chart

A pseudo horizontal bar chart displays five labeled bars (A through E) as black rectangles against a white background, with each bar's length varying by category. The SVG markup creates the bars using fixed path coordinates, while labels are positioned along the left axis via text elements. The visualization uses a clipped rectangular container and a 'Share Tech' font from Google Fonts. This example relies purely on inline SVG paths and text elements, demonstrating a static, non-interactive chart built directly with raw SVG code.

KKhanAzmat
88% match
Loading thumbnail…

Pseudo Bar Chart

A pseudo bar chart presents five vertical bars of varying heights as solid black rectangles against a white background, suggesting categorical data through minimal visual encoding. Built with raw SVG elements, the chart uses five `<rect>` shapes positioned at increasing x-coordinates, with heights ranging from 400 to 150 pixels to imply descending values. The code renders directly in the browser without any JavaScript libraries, relying solely on static SVG markup within an HTML document. This example demonstrates a hand-crafted, design-focused approach to bar chart construction, prioritizing visual clarity over data-driven generation.

Ttverdone
86% match
Loading thumbnail…

Pseudo horizontal bar chart

Four dark horizontal bars of varying widths sit on a white background, approximating a horizontal bar chart. The bars are ordered longest to shortest from top to bottom. Each bar is labeled with a black SVG text path, using custom geometric letterforms. The visualization is rendered as a single static SVG element with no axes, gridlines, or interactivity. It uses only basic SVG shapes and paths, with no JavaScript libraries or data-binding frameworks.

Aadriana-ss
86% match
Loading thumbnail…

Pseudo Bar Chart

This pseudo bar chart uses SVG rectangles and paths to render a set of abstract, hand-drawn-style bars on a plain white background. The chart shows five vertical bars of varying heights and widths, arranged across the canvas with dark gray fills against a light gray backdrop. The code directly constructs each bar using static SVG elements, such as `<rect>` and `<path>`, rather than relying on a JavaScript library or data binding. With no scales, axes, or data-driven logic, this example serves as a minimal, visual approximation of a conventional bar chart.

WWannabeProgrammerr
85% match
Loading thumbnail…

Pseudo horizontal bar chart

Four dark rectangular bars on a white background create a pseudo horizontal bar chart, with each bar spanning a different width and height to suggest varying categorical values. The chart uses raw SVG shapes—`rect` and `path` elements—rather than a charting library, and the rendering relies on inline SVG attributes for coordinates and dimensions. The visualization demonstrates a minimalist, static approach to bar chart composition without interactive behavior or data binding.

WWasanta Pruttisarikorn
85% match
Loading thumbnail…

Pseudo Horizontal Bar Chart

This example shows a pseudo horizontal bar chart with four labeled bars (A–D) of varying lengths, rendered as simple SVG rectangles. The first bar is styled with a distinctive white fill and black stroke, while the others are solid black. Text labels are placed to the left of each bar using SVG text elements. The visualization uses the Share Tech font and relies on raw SVG markup within an HTML file, with no external JavaScript libraries or data-binding frameworks involved.

CCurran Kelleher
85% match
Loading thumbnail…

Pseudo Horizontal Bar Chart

This example presents a stylized horizontal bar chart using four labeled bars (A–D) of varying widths. The visualization uses SVG rectangles to encode values, with each bar positioned to align with its corresponding text label. It relies on the SVG API directly for drawing, and uses the Share Tech font from Google Fonts for typography. The chart approximates a classic bar layout while omitting axes and scales, focusing purely on the geometric relationship between categories and their proportional lengths.

KKerotyzzzmo
85% match
Loading thumbnail…

Pseudo Horizontal bar chart

The chart approximates a horizontal bar chart with three black bars of varying lengths and one green bar at the top, each paired with a large letter label on the left. It uses raw SVG elements, including `<rect>` for the bars and `<text>` for the label, with a fixed 960×500 viewBox. The rendering is static, relying on the Share Tech font from Google Fonts and inline CSS styling, with no JavaScript libraries or data-binding logic involved.

Tt0miwa22
84% match