Skip to main content
SimilarExport ZIP
100%

Psuedo Visualisations Code Along (Episode 2)

✓ Published0🌍 Public
GGautam Doshi
Last edited Jul 11, 2024
Created on Jul 9, 2024

An approximate bar plot shows five labeled categories with varied rectangular bar lengths on a blank canvas. Each bar uses raw SVG `rect` elements, with the first bar styled via a CSS class and the remaining bars filled with a solid red color. Text labels are positioned manually using SVG `text` elements, and the entire visualization is rendered within a fixed 501×389 viewBox.

AI-generated description

An approximation of a bar plot

MIT Licensed

Similar vizzes

Loading thumbnail…

Pseudo Bar Plot

This pseudo bar plot approximates a traditional bar chart using four wide, dark rectangles of varying heights arranged across a 960 by 500 SVG canvas. The rectangles, positioned at increasing x-coordinates with decreasing y-coordinates, visually suggest quantitative categories without any axes, labels, or data encoding. The rendering relies entirely on raw SVG `rect` elements defined in the HTML, without employing any external JavaScript libraries like D3 or Three.js. The design focuses solely on the geometric silhouette of bars, leaving all chart context and semantic information absent.

Rroyable88
81% match
Loading thumbnail…

Psuedo bar chart

This example shows a bar chart with four labeled bars (A through D) of varying lengths, rendered as SVG rectangles. The first bar is styled with red fill and a thick black stroke via a CSS class that overrides its inline blue fill, while the remaining bars alternate between blue and black fills. The visualization uses raw SVG elements within an HTML page, styled using CSS rules that set the font family, size, and bar appearance. No JavaScript libraries are used; the rendering relies entirely on static SVG markup and CSS properties.

Gguththered
80% match
Loading thumbnail…

Exercise2: Pseudo Visualization

Four horizontal bars, colored orange, red, green, and blue, with varying widths, sit on a white background, each outlined in black. The visualization uses basic Scalable Vector Graphics (SVG) primitives—`rect` elements defined directly in the HTML—to create a static, pseudo-chart that mimics a stacked bar layout. No JavaScript libraries or data-binding frameworks are present; the rendering is purely declarative, with positions and dimensions hard-coded in the markup and styling provided by a simple external stylesheet.

Nnubhatia
80% match
Loading thumbnail…

Pseudo Bar

An SVG bar chart receives a minimalist reinterpretation through a pseudo-3D presentation. Five black rectangles of varying heights stand on a white background, their horizontal positions and vertical extents approximating categorical data values. The chart uses raw SVG `<rect>` elements, specifying x, y, width, and height coordinates to render each bar directly, with no JavaScript libraries or data-loading mechanisms involved. The static image, titled "Pseudo Bar," offers a simple, abstracted visual comparison.

Aalexscott-untitled
80% match
Loading thumbnail…

Pseudo Horizontal Bar Plot

Four labeled bars approximate a horizontal bar plot using SVG rectangles. The first bar is red with a black outline, while the remaining three bars are dark gray. Two texts mark categorical labels A through D on the left axis. The HTML file defines a 960 by 500 pixel SVG canvas, using the Share Tech font at 72 pixels to display labels. The layout uses fixed coordinates to position each bar, but no interactive elements or data bindings are present.

Rroyable88
79% match
Loading thumbnail…

Creating Own Pseudo Visualization

This pseudo bar chart uses a central vertical line as a dividing axis, with five rectangles of varying widths and positions representing approximate data categories. The author, nimrod-grandpierre, manually constructs the visualization using raw SVG primitives (`<line>`, `<rect>`) within an HTML document, specifying hardcoded coordinates and fill colors (black and blue) to simulate a chart without any data-binding or layout algorithms. The SVG canvas is set to 960 by 500 pixels with a hidden overflow, and the rectangles are placed at fixed y-positions to imply categorical rows. This example demonstrates a hand-coded, static approximation rather than a data-driven solution.

Nnim@brejnholt.dk
79% match
Loading thumbnail…

Psudo Barplot 2 (horizontal)

This example shows a horizontal bar chart with four rectangular bars labeled A through D, where the first bar displays a CSS-specified green fill that overrides its inline red fill attribute. The SVG is rendered directly in HTML using inline `<rect>` and `<text>` elements, with Google Fonts providing the typography. The primary visualization demonstrates how CSS class styling takes precedence over presentation attributes in SVG, as the green fill from the `.first-bar` class rule overrides the `fill='red'` attribute on the first rectangle.

Ppanthabuddhi@gmail.com
79% 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
79% match