Pseudo Horizontal Bar Chart

100%

Pseudo Horizontal Bar Chart

✓ Published0🌍 Public

Last edited Feb 16, 2024

Created on Feb 16, 2024

This example approximates a horizontal bar chart, using four labeled bars (A through D) with varying widths to represent categorical values. It shows categorical comparison via bar length, with labels positioned to the left of each bar. The visualization is built with plain SVG, directly creating rectangles and text elements inside a static `<svg>` container. Rectangles use explicit `x`, `y`, `width`, and `height` attributes, while the first bar is styled with a green fill and black stroke via a CSS class.

AI-generated description

An approximation of a horizontal bar chart

MIT Licensed

Similar vizzes

Loading thumbnail…

Pseudo Horizontal Bar Chart

This example shows a pseudo horizontal bar chart comparing four labeled values, A through D, as red rectangles of varying widths. Drawn entirely with raw SVG elements, each bar is a `<rect>` with a fixed height and hover effect that transitions its fill from red to orange via CSS. Category labels are plain `<text>` elements aligned to the left. The visualization relies on explicit width and x/y attributes rather than a layout library, and uses the Montserrat web font for typography.

Vvschan2

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

92% match

Loading thumbnail…

Pseudo Horizontal Bar Chart

The visualization displays four horizontal bars of varying lengths, labeled A through D, on a white background, using a pseudo bar chart format where bars are represented as black rectangles. It is rendered as an SVG with hardcoded coordinates, with each bar’s width decreasing from top to bottom, mimicking a categorical comparison. The text labels are placed to the left of each bar using the Share Tech font, and the chart uses basic SVG elements like `rect` and `text` without any external libraries or data-driven logic.

Mmaciekawsq@gmail.com

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

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

91% match

Loading thumbnail…

Pseudo Horizontal Bar Chart

This pseudo horizontal bar chart displays four categories (A through D) as solid black rectangles of varying widths, with the largest bar spanning 800 pixels and the smallest 414 pixels. The visualization uses static SVG rectangles and text elements within an HTML document, with labels positioned along the left margin. The chart is built with hardcoded SVG coordinates and inline styling, including 64-pixel text for the category labels. This example demonstrates how simple SVG markup can create a categorical comparison without JavaScript libraries or data-binding frameworks.

Ttverdone

91% match

Loading thumbnail…

Pseudo Horizontal Bar Chart

A pseudo horizontal bar chart uses black rectangles to represent four labeled categories, A through D, on a white SVG canvas. The first bar is styled green with a black stroke via a CSS class, overriding its inline red fill to demonstrate CSS precedence. The visualization is built with static SVG elements, including `<rect>` and `<text>`, and uses the Share Tech font.

PPrince Kumar

90% match

Loading thumbnail…

Pseudo Horizontal Bar

Four horizontal black bars on a white background approximate a bar chart, with category labels A through D positioned to the left. The bars vary in length, though the chart does not include axes, data values, or a scale to interpret the magnitudes. Rendered as static SVG shapes, the visualization uses only `<rect>` elements for the bars and `<text>` elements for labels, all defined directly in the HTML markup without JavaScript libraries. The pseudo-bars are intentionally simple, suggesting a minimal or stylistic take on standard bar chart encodings.

Aalexscott-untitled

90% match