Skip to main content
SimilarExport ZIP
100%

Pseudo Bar Chart

✓ Published1🌍 Public
DDavid Hojdan
Last edited May 30, 2022
Created on May 30, 2022
Forked from SVG Fundamentals

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.

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

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

Pseudo Horizontal Bar Chart

This example shows a pseudo horizontal bar chart comparing four categorical values, labeled A through D. The chart uses a minimalist design with oversized Share Tech typography and solid SVG rectangles to represent data magnitudes. The code renders the visualization using raw SVG elements—`rect` for the bars and `text` for labels—without JavaScript libraries or animation. The longest bar spans 768 pixels for category A, while the shortest is only 238 pixels for D, creating a clear visual ranking. The static SVG output relies on hardcoded coordinates and dimensions rather than any data-binding or layout logic.

Ddevin.mcmanus@gmail.com
90% match