Skip to main content
SimilarExport ZIP
100%

Pseudo Scatt bar chart

✓ Published1🌍 Public
DDanilo Moraes
Last edited May 8, 2022
Created on May 8, 2022
Forked from Pseudo Scatt

This pseudo scatter bar chart displays four black vertical bars of varying heights on a white background, suggesting a simplified bar chart or scatter plot hybrid. The HTML page uses inline SVG with rectangular elements explicitly positioned and sized to create the visual effect. The design relies on raw SVG markup within the index.html file, utilizing basic CSS for page styling and body margin reset, while the React framework and JavaScript are referenced but not actively implemented in the visible code.

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 Scatter

Pseudo Scatter presents a static SVG bar chart that mimics the appearance of a scatterplot. Seven black vertical rectangles of varying heights sit on a white background, each positioned at a different x-coordinate to suggest distributed data points. The example relies on raw SVG elements—specifically `<rect>` tags—rendered directly in the HTML without any JavaScript or external libraries. It demonstrates a minimal, hand-coded approach to data visualization, using only CSS for margin reset and overflow control, and does not employ React or any dynamic rendering framework despite the listed metadata.

Ttkhalid.ds@gmail.com
86% 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
83% 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
83% match
Loading thumbnail…

Pseudo Horizontal bar chart

This example demonstrates a pseudo horizontal bar chart that uses narrow vertical rectangles to encode four values for categories A through D. The chart is hand-coded with SVG shapes, where each `<path>` element defines a rectangle via its edge coordinates, and `<text>` elements label the bars. The design uses an HTML/CSS foundation with the Share Tech font and custom styling for the first bar. This particular bar chart is implemented in React, leveraging SVG for all visual rendering.

DDanilo Moraes
83% match
Loading thumbnail…

Pseudo Bar Chart

This example displays a pseudo bar chart composed of five black bars of varying heights on a white background. The bars are rendered as plain SVG shapes—using `rect` and `path` elements—positioned within a 960 by 500 viewBox. The visualization uses no JavaScript or external libraries, relying solely on static SVG markup defined in the HTML. The bars are clipped using an SVG `clipPath` to maintain a clean rectangular boundary.

EEarnAnurat
83% match
Loading thumbnail…

Pseudo Bar Chart

This example shows a pseudo bar chart with six black rectangular bars labeled A through F, rendered as static SVG elements on a white canvas. The bars vary in height and y-position to simulate quantitative values, while labels sit beneath each bar. The code uses raw SVG `<rect>` and `<text>` elements, positioned manually with pixel coordinates, and styled with the Share Tech font from Google Fonts. It demonstrates a minimal, hand-coded alternative to data-driven charting, using only HTML and CSS within a React-free setup.

Ccharlieronchetti@gmail.com
82% 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
82% match
Loading thumbnail…

Pseudo Scatt

This example, titled “Pseudo Scatt,” presents a minimal static scatterplot-like composition using raw SVG elements. It shows seven blue circles positioned across a white 960×500 canvas, with no axes, labels, or data encoding beyond the circles’ coordinates. The rendering approach relies on hand-coded SVG `<circle>` and `<rect>` elements within a plain HTML page, using CSS only for styling and overflow control. No JavaScript libraries or data sources are involved; the visual is entirely defined by hardcoded SVG markup, offering a simple, non-interactive illustration of geometric placement.

DDanilo Moraes
81% match