Skip to main content
SimilarExport ZIP
100%

Pseudo scatter plot

✓ Published1🌍 Public
Bbjfmbeck
Last edited Mar 8, 2023
Created on Mar 7, 2023

This pseudo scatter plot approximates a traditional scatter plot using horizontal bar rectangles as visual substitutes for data points, with labels A through E marking categorical rows. The SVG visualization emphasizes hover interaction, turning bars red when the mouse passes over them. The code relies on raw SVG elements—rect, text, and hover states via CSS—rather than JavaScript libraries or data-binding frameworks. Purple horizontal bars of varying widths suggest proportional values, while commented-out circles and vertical bars hint at alternative design explorations. The page sets a bold, tech-inspired font and hides the body margin for an immersive full-viewport rendering.

AI-generated description

An approximation of a scatter plot.

MIT Licensed

Similar vizzes

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

Pseudo Bar Chart

A pseudo bar chart renders four vertical bars in red, blue, yellow, and green, each paired with a black letter label (A–D) beneath it. The bars vary in height and vertical offset, suggesting categorical values without an explicit scale or axes. Built with plain SVG, the visualization uses static `rect` and `text` elements inside an `svg` container, with styling applied via CSS using the Share Tech font and a white background. No JavaScript libraries are involved; the chart relies entirely on hard-coded coordinates.

SSam Hege
85% match
Loading thumbnail…

Pseudo Horizontal Bar Chart

This example shows a pseudo horizontal bar chart comparing four labeled values, A through D, as red rectangles of varying widths. Drawn entirely with raw SVG elements, each bar is a `<rect>` with a fixed height and hover effect that transitions its fill from red to orange via CSS. Category labels are plain `<text>` elements aligned to the left. The visualization relies on explicit width and x/y attributes rather than a layout library, and uses the Montserrat web font for typography.

Vvschan2
85% match
Loading thumbnail…

Pseudo Horizontal Bar Chart

A pseudo horizontal bar chart uses black rectangles to represent four labeled categories, A through D, on a white SVG canvas. The first bar is styled green with a black stroke via a CSS class, overriding its inline red fill to demonstrate CSS precedence. The visualization is built with static SVG elements, including `<rect>` and `<text>`, and uses the Share Tech font.

PPrince Kumar
83% 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
83% match
Loading thumbnail…

Pseudo Horizontal Bar Chart

This example approximates a horizontal bar chart using raw SVG rectangles and text elements, displaying categories A through D with varying bar widths. The chart uses a black-on-white design with large ‘Share Tech’ typography, emphasizing a minimalist aesthetic. Built with inline SVG markup and standard HTML/CSS, it relies on fixed pixel coordinates for bar placement and sizing rather than data-driven JavaScript or a charting library. The rendering is fully static, with no interactive or animated behaviors present in the code.

Ttriciascully
83% match
Loading thumbnail…

Pseudo Horizontal Bar Chart

This visualization uses black rectangles of varying widths to create a pseudo horizontal bar chart for categories A through D. The SVG markup defines the bar dimensions and positions, while text elements label each bar with its corresponding letter. The chart employs a minimal design with white background and the Share Tech font, rendering all elements directly via inline SVG without additional JavaScript libraries or data loading mechanisms.

Llili463e
83% match
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
83% match