Pseudo Bar Chart

100%

Pseudo Bar Chart

✓ Published3🌍 Public

Ssz2036

Last edited Jan 31, 2023

Created on Jan 28, 2023

A pseudo bar chart displays categorical data as horizontal bars with varying widths to imply values. Each bar is drawn as an SVG `<rect>` element, with a dark background and distinct fill colors including gold, green, white, maroon, and a blank entry. The chart renders entirely through static SVG markup, without any data-binding or interaction libraries, and uses the Aboreto font for category labels (A through E) via Google Fonts. The code relies solely on native SVG elements and CSS transitions for styling, presenting a minimal, non-dynamic visualization.

AI-generated description

Bar Chart

MIT Licensed

Similar vizzes

Loading thumbnail…

Pseudo bar chart

A pseudo bar chart represents categorical data with four wide bars labeled A through D, using varying bar widths to encode values. Built as a static SVG, the visualization uses plain `rect` elements for the bars and `text` elements for category labels, with the first bar distinguished by a white fill and thick black stroke. The rendering relies solely on inline SVG styling and HTML, with no JavaScript libraries or data-processing APIs involved.

KKhanin Sisaengsuwanchai

91% match

Loading thumbnail…

Pseudo Bar Chart

A pseudo bar chart renders four vertical bars in red, blue, yellow, and green, each paired with a black letter label (A–D) beneath it. The bars vary in height and vertical offset, suggesting categorical values without an explicit scale or axes. Built with plain SVG, the visualization uses static `rect` and `text` elements inside an `svg` container, with styling applied via CSS using the Share Tech font and a white background. No JavaScript libraries are involved; the chart relies entirely on hard-coded coordinates.

SSam Hege

90% match

Loading thumbnail…

Psuedo Bar Chart

A pseudo bar chart displays three solid color rectangles, blue, red, and yellow, of varying lengths that resemble horizontal bars, with the labels A, B, and C positioned to their left. Each colored rectangle is rendered as an SVG `<rect>` element with a fixed height of 120 pixels, while the width varies per bar to imply different categorical values. The chart is built with raw SVG markup inside an HTML document, using inline `fill` colors and a linked Google Fonts stylesheet for the label typography, with no external JavaScript libraries involved.

TTrevor Brown

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

89% match

Loading thumbnail…

Pseudo Bar Chart Horiz

A pseudo bar chart displays seven labeled categories (A–G) with rounded bars of varying lengths, where category C is highlighted in pink while the rest are black. The chart uses rotated rectangles drawn directly in SVG, with each bar positioned and rotated via the `transform` attribute. Labels are rendered as SVG text elements, using a Roboto font loaded from Google Fonts. The arbitrary bar heights appear hand-coded rather than derived from a data file, and the minimal styling is applied through CSS classes within the embedded stylesheet.

Hhelloelectro

88% match

Loading thumbnail…

Pseudo bar chart

A pseudo bar chart displays four rectangular bars of varying heights against a white background, using a pale mint fill with black outlines to mimic a categorical comparison. The SVG markup directly defines each bar’s position and size, with no axes or data labels. Rendering relies on plain SVG `rect` elements, laying out the bars at fixed coordinates without any charting library or data-binding logic. This static representation approximates a bar chart’s visual structure while omitting interactivity, scales, or computed layouts.

LLouis Astorg

88% match

Loading thumbnail…

Pseudo Bar Chart Transposed

A pseudo bar chart transposed presents categorical values as horizontal bars extending rightward from the left, with five labeled segments (A–E) sized by their widths. The visualization uses SVG rectangles with negative scaling transforms to simulate left-to-right bar lengths, while text elements label each category. The code employs raw SVG elements—`rect`, `text`, and `matrix` transforms—inside an HTML document, with no external charting library, instead relying on manual coordinate math and Google Fonts styling. The data is encoded purely through rectangle widths, not a dataset.

Ppaddyokore39@gmail.com

88% match

Loading thumbnail…

Pseudo bar chart

This pseudo bar chart displays five categories (A through E) as horizontal dark bars of decreasing length on a white background, with each category label placed to the left of its bar. The bars are static rectangles created with inline SVG elements, while the category names are rendered as text elements using the Share Tech font. The chart uses absolute pixel coordinates within a 960×500 viewBox, with bar widths ranging from 570 to 111 pixels. No dynamic data binding or JavaScript libraries are involved; the visualization is purely declarative SVG markup.

LLouis Astorg

88% match