Skip to main content
SimilarExport ZIP
100%

Psuedo Visualisations

✓ Published0🌍 Public
GGiorgi Xiaoyu Zhang
Last edited Dec 27, 2022
Created on Dec 26, 2022
Forked from HTML Starter

This example presents a set of four gray rectangles in descending heights, arranged as a pseudo bar chart. The letter “A” hovers above, and a single rectangle transitions its fill and stroke on hover. Built with React, it renders using SVG, with CSS transitions and the Share Tech Mono font. The code directly uses SVG primitives like `rect` and `text` without external visualization libraries.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Psuedo charts

This example displays four vertical bars as raw SVG `<rect>` elements, each with hard-coded positions and sizes, forming a minimal bar chart. The bars vary in height to suggest different values, though no axes or labels are included. The visualization uses plain SVG markup inside an HTML page, with CSS setting the margin to zero and hiding overflow. No JavaScript libraries or data-processing APIs are employed; the chart is purely static, relying on inline coordinates for each rectangle.

Gguththered
86% match
Loading thumbnail…

Pseudo

This example shows four gray bars labeled A, B, C, and D, each with different heights representing categorical values. The bars are rendered as SVG rectangles on a white background, with text elements using black fill for labels. The visualization uses a static HTML page with CSS for styling and inline SVG markup, demonstrating a minimal bar chart without any JavaScript libraries or data processing. The bars are positioned at fixed coordinates within a 361×372 viewBox, with heights varying from 120 to 328 pixels to convey relative magnitudes.

Vvalsorayksterob
86% match
Loading thumbnail…

Pseudo Bar Chart

A pseudo bar chart displays four black rectangles of varying heights and widths on a white background, suggesting categorical data through simple geometric shapes. The example demonstrates foundational SVG rendering with raw `rect` elements and explicit width, height, and fill attributes, all defined directly in the HTML markup. Built with React, the code uses no external visualization libraries, relying instead on static SVG coordinates to create a clean, minimalist chart. The layout follows a fixed 1512-by-982 pixel canvas, illustrating how basic shapes can communicate quantitative comparisons.

Jjinjuta.s.au@gmail.com
85% match
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
85% match
Loading thumbnail…

Psudo

The visualization shows four white rectangles of decreasing heights arranged horizontally on a white background, creating a simple bar-chart-like composition. Built as a static SVG scene using React, the code directly embeds the SVG markup in the HTML file without any JavaScript logic or data processing. The rendering relies solely on CSS for the page layout, preventing scrolling and margins, while the SVG elements are specified with fixed pixel coordinates and dimensions. This example demonstrates a minimal, non-interactive chart with no external data source or animation.

OOshigeAkito
85% match
Loading thumbnail…

psuedo bar graph.

A pseudo bar graph rendered with raw SVG rectangles presents a series of vertical bars in varying shades of gray and black, ranging from light to dark, against a white background. The chart shows a set of categorical values distributed across the horizontal axis, with bar heights corresponding to the data points. This example uses hand-coded SVG primitives within an HTML file, utilizing the `rect` element to construct the visualization without any charting library or JavaScript framework.

Ffaraz189
85% 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
85% match
Loading thumbnail…

Pseudo bar chart

The visualization presents a pseudo bar chart built from four rectangular bars of varying heights, each rendered as a static SVG element. It uses raw SVG `<rect>` shapes within an HTML page, with CSS styling for hover effects on circles. The chart relies on basic JavaScript and CSS, with no external charting library, instead encoding categorical data through bar lengths. The backdrop is a white canvas, and the bars are positioned to create a simple, unlabeled comparison.

NNico-Nico
84% match