Psuedo Bar Chart

100%

Psuedo Bar Chart

✓ Published2🌍 Public

Last edited Mar 16, 2021

Created on Mar 15, 2021

This example visualizes four evenly spaced bars of varying heights as a playful take on a standard bar chart, set against a white SVG canvas. The chart uses only raw SVG elements—a single `<path>` for the background and four `<rect>` elements with hardcoded x, y, width, and height values—to create the pseudo-bars. No JavaScript libraries or data binding are present; the rendering is purely static SVG markup. The design deliberately misaligns the bars’ vertical positions to suggest a skewed or alternative ordering, emphasizing form over data accuracy.

AI-generated description

It l00ks like a B4r Ch4rt

MIT Licensed

Similar vizzes

Loading thumbnail…

Pseudo Bar Chart

This pseudo bar chart uses SVG rectangles and paths to render a set of abstract, hand-drawn-style bars on a plain white background. The chart shows five vertical bars of varying heights and widths, arranged across the canvas with dark gray fills against a light gray backdrop. The code directly constructs each bar using static SVG elements, such as `<rect>` and `<path>`, rather than relying on a JavaScript library or data binding. With no scales, axes, or data-driven logic, this example serves as a minimal, visual approximation of a conventional bar chart.

WWannabeProgrammerr

92% match

Loading thumbnail…

Psuedo Bar Chart 2

This visualization presents four white rectangles of varying widths positioned against a white background, creating the illusion of a bar chart without any data axes or labels. The single SVG element contains four static `<rect>` elements at different x and y coordinates, with widths of 900, 450, 675, and 225 pixels. The code uses raw SVG markup directly in the HTML, with no JavaScript libraries or data binding, resulting in a purely declarative chart-like arrangement that mimics bars but lacks any meaningful quantitative encoding.

AAndre J Denais

91% match

Loading thumbnail…

Psuedo Horizontal Bar Chart

A pseudo horizontal bar chart uses a minimalist SVG layout to visualize data as four outlined rectangles of varying heights and widths, arranged along a horizontal axis. Each `<rect>` element is placed at different x and y coordinates, with the tallest bar at the left and progressively shorter bars to the right. The chart is rendered directly via SVG markup inside an `index.html` file, with a white background and no axis labels or tick marks. This example demonstrates how raw SVG primitives can create a simple, abstract bar-like comparison without relying on a charting library.

AAndre J Denais

91% match

Loading thumbnail…

Pseudo Bar Chart

The pseudo bar chart displays four vertical rectangles of varying heights and positions, approximating a scatter plot through bar-like shapes. Each rectangle is drawn as a raw SVG `<rect>` element with fixed x, y, width, and height attributes, directly embedded in the HTML without any scripting or data-binding logic. The rendering relies on static SVG coordinates, and the chart is presented on a blank canvas with no axes, labels, or interaction. The file uses inline SVG within an HTML document, and the visualization is purely declarative, showing only the styled rectangles without any additional charting library or computed data source.

PPrince Kumar

90% match

Loading thumbnail…

Pseudo bar chart

Four black rectangles of varying heights float on a white SVG canvas, approximating a bar chart without any axes, labels, or data encoding. The bars are positioned at irregular x-coordinates and y-coordinates, suggesting a deliberately skewed or abstract representation of categorical values. The visualization renders purely through static SVG `<rect>` elements defined directly in the HTML, with no JavaScript or external libraries driving the layout. Each rectangle uses a uniform fill color and fixed dimensions, creating a minimal, decontextualized take on standard bar chart aesthetics.

Aadriana-ss

90% match

Loading thumbnail…

Pseudo Bar Chart

This example approximates a bar chart using four black rectangles on a white background, each representing a data value. The bars vary in height and position, creating a static, minimalist visualization. The SVG rendering uses the `<rect>` element with explicit x, y, width, and height attributes to define each bar, laid out on a 960 by 500 canvas. The chart relies on raw SVG markup rather than a charting library or JavaScript, with the data encoded directly in the coordinates.

SSeanmgard

90% match

Loading thumbnail…

Pseudo bar chart

This SVG-based pseudo bar chart approximates a standard bar chart without using any charting library, instead relying on hand-coded SVG `<rect>` elements. It displays four vertical bars of varying heights and equal widths, positioned along the x-axis with distinct y-coordinates and heights to suggest categorical data. The code uses plain SVG markup within an HTML file, with a fixed viewport of 960 by 500 pixels and no axes, labels, or gridlines, prioritizing visual similarity over statistical accuracy. The rendering approach is direct and minimal, with each rectangle explicitly defined via its `x`, `y`, `width`, and `height` attributes.

NNikki Masroor

90% match

Loading thumbnail…

Pseudo Bar Chart

Four simple SVG rectangles form an approximate bar chart, creating a pseudo-visualization of categorical values. The chart uses hardcoded coordinates and heights to simulate bars of varying magnitudes, with no axes or labels. Each rectangle is drawn directly via SVG `rect` elements inside an inline `<svg>` tag, with positioning and dimensions set manually. The rendering relies purely on static SVG markup with no JavaScript libraries, CSS styling only affecting the page body, and the bars arranged horizontally across a 960 by 500 pixel canvas.

Aajoua

89% match