Fork of Pseudo Bar Chart

100%

Fork of Pseudo Bar Chart

✓ Published1🌍 Public

Last edited Mar 5, 2024

Created on Mar 5, 2024

A simple SVG bar chart displays four dark gray rectangles of varying heights on a blank canvas, approximating categorical data without axes or labels. The bars, sized via explicit pixel values, are positioned horizontally across a 900x500 viewBox. The code uses raw SVG `<rect>` elements with hardcoded coordinates and dimensions, styled with a uniform `#1E1E1E` fill. No JavaScript libraries or data-binding frameworks are involved; the rendering relies solely on static markup and inline attributes, with a minimal CSS reset to remove page margins.

AI-generated description

An apporximation of a bar chart.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Pseudo Bar Chart

Four static black rectangles on a white background approximate a bar chart in a 960-by-500 SVG canvas. The chart shows four bars of decreasing height, with no axes or labels. The code uses plain SVG `<rect>` elements with fixed `x`, `y`, `width`, and `height` attributes, and sets the page to hide overflow via CSS. No JavaScript libraries or data sources are involved, making it a minimal, hand-coded visual mockup.

TTowlGol

93% match

Loading thumbnail…

Fork of Pseudo Bar Chart

Five plain rectangles form a pseudo bar chart, approximating a scatter plot by using bar heights to encode data values. The SVG markup in index.html hardcodes each rectangle’s x, y, width, and height attributes, with no JavaScript or data-loading logic. The chart uses only static SVG shapes on a white background, with bars rendered in black and positioned from x=166 to x=718, yielding a simple, hand-coded visualization that relies on manual coordinate calculation rather than a layout or scale API.

Ppaddyokore39@gmail.com

92% match

Loading thumbnail…

Fork of Pseudo Bar Chart

This example shows four rectangular bars approximating a simple bar chart, with each bar varying in height and position along the x-axis. The visualization is drawn entirely with plain SVG `<rect>` elements inside an `<svg>` tag, using hard-coded pixel coordinates for placement and sizing. No JavaScript libraries or data-binding APIs appear in the code—the chart is static and rendered directly via SVG in the browser. The styling sets the body margin to zero and hides overflow, making the chart fill the viewport without additional layout interference.

AAgilan

92% match

Loading thumbnail…

Fork of Pseudo Bar Chart

This is a simple SVG chart that uses filled rectangles to approximate a data visualization, resembling a scatter plot or bar chart. The rendering is achieved through hard-coded `<rect>` elements on a white background, without using any external libraries. The chart presents four distinct rectangular shapes of varying heights and positions, suggesting a comparison between different data points. A second HTML file demonstrates basic SVG shapes and CSS styling, including hover effects that change rectangle fill and stroke properties.

Ccssergio

91% match

Loading thumbnail…

Fork of Pseudo Bar Chart

This fork of a pseudo bar chart presents four horizontal bars of varying widths and heights, arranged vertically within an SVG canvas. Each bar is drawn as an individual `rect` element with explicit `x`, `y`, `width`, and `height` attributes, showing a simple categorical comparison. The visualization uses static SVG markup, with no JavaScript libraries or data bindings, and the layout is fixed to an A4 portrait viewBox of 210 by 297 units. The bars appear to represent approximate values, but no axes, labels, or data values are included.

WWirawan Setio Aji

91% match

Loading thumbnail…

Fork of Fork of Pseudo Bar Chart

A single SVG with four horizontal bars uses value encoding to compare categorical items A through D, with the first bar given extra visual weight through conflicting CSS, inline styles, and a purple outline. The chart renders entirely through static SVG `rect` and `text` elements, with bar lengths increasing from 384 to 725 pixels. The first bar’s fill is overridden three times—by class, presentation attribute, and inline style—while all bars share the same height and vertical spacing, producing a pseudo bar chart where only the first category is highlighted.

Aandu006@gmail.com

91% match

Loading thumbnail…

Fork of Pseudo Bar Chart

This example approximates a bar chart using four oversized red rectangles, with each bar’s height visually encoding a value through its vertical extent. The chart is rendered as static SVG elements, with a single empty red div preceding the graphic for no apparent purpose. The code uses plain SVG `<rect>` elements for the bars and relies on hardcoded coordinates rather than a data-binding library like D3, making it a minimal, non-interactive visualization of categorical comparisons.

NNita

90% match

Loading thumbnail…

Fork of Pseudo Horizontal Bar Chart

This example shows a simple horizontal bar chart with four labeled bars (A–D) drawn as plain SVG rectangles, using the burlywood background and black or white fills to distinguish the first bar. Text labels appear in orange, red, green, and blue. The visualization uses static SVG elements directly in HTML, with styling via CSS (including the Share Tech font), and no JavaScript or data-binding libraries. All dimensions and positions are hard-coded in the SVG markup, making it a purely declarative rendering of categorical values.

Mmrteee2

89% match