Psuedo Bar Chart

100%

Psuedo Bar Chart

✓ Published2🌍 Public

Last edited Feb 6, 2023

Created on Feb 6, 2023

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.

AI-generated description

A demo of SVG shapes.

MIT Licensed

Similar vizzes

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

91% match

Loading thumbnail…

Pseudo Bar Chart

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.

Ssz2036

89% match

Loading thumbnail…

Psuedo bar chart

This example shows a bar chart with four labeled bars (A through D) of varying lengths, rendered as SVG rectangles. The first bar is styled with red fill and a thick black stroke via a CSS class that overrides its inline blue fill, while the remaining bars alternate between blue and black fills. The visualization uses raw SVG elements within an HTML page, styled using CSS rules that set the font family, size, and bar appearance. No JavaScript libraries are used; the rendering relies entirely on static SVG markup and CSS properties.

Gguththered

88% match

Loading thumbnail…

Plooks Psuedo Horizontal Bar Chart

This example shows a pseudo horizontal bar chart with four labeled bars (A, B, C, D), where each colored rectangle extends horizontally from a shared left axis. The bars use varying widths to imply categorical values, though the mapping is purely visual. The visualization is rendered as static SVG using plain SVG `<rect>` and `<text>` elements, styled with the Share Tech font via Google Fonts. The first bar is green due to a CSS class, while others are black; no JavaScript libraries or data sources are involved.

GGullyPlook

87% match

Loading thumbnail…

Pseudo bar chart

A pseudo bar chart displays four labeled bars (A–D) as plain SVG rectangles with varying widths, suggesting categorical values without using axes or scales. The first bar animates its fill color cycling from red to blue and back over a 10-second loop using SVG’s `<animate>` element. Rendered in an HTML page with inline SVG, the chart employs the Share Tech font and fixed viewport dimensions of 960 by 500 pixels. The bars are static except for the color animation, and no external charting library is used.

IIgorGorin00

87% match

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

87% match

Loading thumbnail…

seudo-bar

A seudo-bar chart displays four categorical bars labeled A through D, each with a distinct color and height encoded directly via SVG rectangles. The example uses raw SVG elements in an HTML file without any JavaScript libraries, setting bar dimensions explicitly through x, y, width, and height attributes. Text labels beneath the bars identify the categories, with styling applied via inline CSS for font size and weight. The rendering approach is static SVG, with bars positioned from a white background rect, and no interaction or data-binding logic present.

FFrancisco Ibelles

87% match

Loading thumbnail…

Pseudo Bar Chart

This pseudo bar chart uses black rectangles to represent categorical values A through D, with varying heights that suggest a bar chart’s visual hierarchy while omitting traditional axes. The SVG code explicitly places four rectangles and paired text labels, demonstrating a static, hand-coded layout. It relies on React’s rendering approach via the v3 framework, though the visible implementation uses raw SVG elements and CSS styling with the Share Tech font. No data binding or dynamic computation occurs; the chart is purely declarative.

TTheo-0201

86% match