Skip to main content
SimilarExport ZIP
100%

Pseudo Horizontal Bar Chart

✓ Published0🌍 Public
Iissam.benabid@gmail.com
Last edited Jan 5, 2023
Created on Jan 5, 2023
Forked from HTML Starter

This example presents a pseudo horizontal bar chart where three labeled bars (A, B, C) are drawn as filled black rectangles of varying widths, with large text labels positioned to their left. The visualization uses only raw SVG elements—`rect` and `text`—inside an inline `<svg>` tag, with no JavaScript or data-binding logic. The bars are hardcoded in the markup, and the chart relies on CSS (including the Share Tech font) and the SVG coordinate system to position elements, with commented-out path data suggesting an alternative icon-based labeling approach.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Pseudo Horizontal Bar Chart

This example presents a pseudo horizontal bar chart, approximating a traditional bar layout with black rectangles of varying widths on a white background. Four bars are labeled A through D using SVG text elements. The visualization is built entirely with raw SVG shapes—specifically `rect` and `text` elements—rendered in an HTML page, with no JavaScript libraries or data-binding involved. Styling uses the Share Tech font and fixed coordinates within a 960 by 500 viewBox.

Wwspwll@gmail.com
94% match
Loading thumbnail…

Pseudo horizontal bar chart

This pseudo horizontal bar chart is a static SVG composition built directly in HTML. Four labeled bars (A, B, C, D) extend from a common left margin, each with a fixed height and varying widths to represent distinct magnitudes. The visualization relies on raw SVG `<rect>` and `<text>` elements styled with CSS, including a custom Share Tech font. A hover effect is applied to a small circle, changing its fill and stroke color via a CSS transition, though the chart itself is non-interactive.

NNico-Nico
93% 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
93% 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
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
91% match
Loading thumbnail…

Pseudo Bar Chart

This example shows a pseudo bar chart with six black rectangular bars labeled A through F, rendered as static SVG elements on a white canvas. The bars vary in height and y-position to simulate quantitative values, while labels sit beneath each bar. The code uses raw SVG `<rect>` and `<text>` elements, positioned manually with pixel coordinates, and styled with the Share Tech font from Google Fonts. It demonstrates a minimal, hand-coded alternative to data-driven charting, using only HTML and CSS within a React-free setup.

Ccharlieronchetti@gmail.com
91% match
Loading thumbnail…

Pseudo Horizontal Bar Chart

This visualization uses black rectangles of varying widths to create a pseudo horizontal bar chart for categories A through D. The SVG markup defines the bar dimensions and positions, while text elements label each bar with its corresponding letter. The chart employs a minimal design with white background and the Share Tech font, rendering all elements directly via inline SVG without additional JavaScript libraries or data loading mechanisms.

Llili463e
90% 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
90% match