Pseudo Grouped Barplot

100%

Pseudo Grouped Barplot

✓ Published0🌍 Public

Last edited Jul 21, 2026

Created on Jul 21, 2026

This pseudo grouped barplot displays three categories, A, B, and C, each containing three bars in distinct pastel colors. The chart avoids a traditional axis, focusing instead on the visual comparison of bar heights across the groups. Each bar is a manually placed SVG `<rect>` element, styled with CSS classes that define its fill color and add a black outline on hover. The chart is built with plain SVG in an HTML file, using the Google Font "Share Tech" for its large text labels. The data is entered directly into the markup rather than generated programmatically.

AI-generated description

Pseudo grouped bar chart created in Figma, manually entered as svg with font from Google Fonts

MIT Licensed

Similar vizzes

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

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

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

85% match

Loading thumbnail…

Pseudo Horizontal Bar Chart

This example shows a pseudo horizontal bar chart, where four categories—A, B, C, and D—are represented by black bars of varying widths protruding from a common left edge, mimicking a real bar chart without using standard charting axes. Each bar’s length corresponds to an implicit value, with labels placed to the left. The visualization is built using raw SVG elements, including `rect` for the bars and `text` for the labels, all styled with a large `font-size` and the Share Tech font. The rendering relies entirely on inline SVG markup within an HTML file, with no JavaScript libraries or data-binding frameworks involved.

Aajoua

85% match

Loading thumbnail…

Pseudo Vertical Bar Chart

This example presents a pseudo vertical bar chart made entirely with hand-coded SVG rectangles, directly in the HTML without a charting library. The code uses the `<svg>` element and inline `<rect>` shapes, whose `height` and `y` positions encode the values for categories A through D, creating the visual hierarchy. Styling is applied via CSS classes and presentation attributes, with black-and-white fills and thick strokes outlining each bar. The text labels and the title rely on the `text` element and standard heading tags to annotate the chart.

Iinskoe@central.edu

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

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

84% match

Loading thumbnail…

Pseudo Bar Chart

This pseudo bar chart encodes four categories, A through D, as horizontal black bars of varying lengths on a white background, with the first bar highlighted in blue. Each bar’s width suggests a quantitative value, while category labels sit to the left. The visualization uses plain SVG rectangles and text elements, with styling controlled by CSS, including the Share Tech font. The layout is fixed within a 506×321 viewBox, and no interactive or dynamic data binding is present.

DDavid Hojdan

84% match