Pseudo_Box_Plot

100%

Pseudo_Box_Plot

✓ Published0🌍 Public

Last edited Feb 4, 2023

Created on Feb 4, 2023

The Pseudo_Box_Plot displays four hand-coded box-and-whisker diagrams as static SVG primitives, with colored interquartile-range rectangles, black median and whisker lines, and coordinate points placed directly in a 2000×2000 viewport. The visualization uses raw SVG elements—`rect`, `line`, and `path`—styled via inline attributes and a global CSS class for red strokes, with no JavaScript computation or data binding. It renders fixed, pre-defined positions for each plot, showing the structural look of a statistical chart without an underlying dataset or algorithmic generation.

AI-generated description

Sol Lewitt in Vanilla JS

Gist :

Overview of Sol Lewitt works : -American artist who doesn't create his own work -Gives instructions to his team who then create the piece of art, much like an algorithmic instruction
Javascript Fundementals
The DOM(Document Object Model) API
SVG Masks and Clip paths

MIT Licensed

Similar vizzes

Loading thumbnail…

Pseudo Boxplot Chart

A pseudo boxplot chart illustrates the distribution of a dataset using static SVG shapes. The visualization shows a box-and-whisker diagram created from hand-coded SVG elements—a rectangle for the interquartile range, lines for whiskers, circles for median and outliers, and a row of circles for individual data points. The chart uses React to render an SVG canvas and applies the Share Tech font from Google Fonts. It constructs the pseudo boxplot entirely through explicit SVG primitives, including `rect`, `line`, and `circle` elements, without relying on a charting library.

MMarcus Vinicius da Silveira Richa

86% match

Loading thumbnail…

Pseudo Charts

This example presents Pseudo Charts, a set of small, stylized SVG charts that mimic classic data visualizations without using real data. The page displays four mini visualizations—a bar chart, line chart, scatter plot, and area chart—each rendered with basic SVG shapes like `rect`, `path`, and `circle`. A hover effect on each chart (via the `.charts:hover` CSS rule) reveals its label, such as "Bar Chart" or "Scatter Plot," while the page's main title is set in the Share Tech font. The HTML and CSS structure, including the use of `display: none` on chart text until hover, drives the interactive labeling, but no underlying dataset or JavaScript library is used for the plots themselves.

Rrakshitmakadia

77% 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

77% 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

77% match

Loading thumbnail…

Pseudo Horizontal Bar Chart

This pseudo horizontal bar chart displays four vertical rectangles of varying heights. It approximates a scatter plot’s visual distribution using fixed SVG `<rect>` elements rather than data-driven bars. The code uses raw SVG markup within an `index.html` file, setting each rectangle’s position and dimensions via `x`, `y`, `width`, and `height` attributes. The visualization relies solely on static SVG rendering, with no JavaScript libraries or external data sources, to create a simple, hard-coded chart.

PPrince Kumar

76% match

Loading thumbnail…

Pseudo bar chart

Four dark rectangles of varying heights sit on a black background, resembling bars in a chart. The shapes are drawn as SVG `path` and `rect` elements, layered over a white `rect` that covers the entire 960 by 500 viewport. Created with static SVG markup, this pseudo bar chart uses simple geometric primitives to suggest a categorical comparison without depicting actual data values.

WWasanta Pruttisarikorn

76% 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

76% match

Loading thumbnail…

Pseudo bar chart

This pseudo bar chart presents four vertical bars using basic SVG shapes. Each bar is a simple `<rect>` element with fixed coordinates and dimensions, approximating a bar chart without any data binding or axes. The visualization is rendered using the SVG API directly within an HTML file, with the page styling removing margins and hiding overflow. The chart’s purpose is illustrative, showing how static rectangles can mimic a bar chart’s visual structure. It uses no JavaScript libraries or dynamic data processing, relying solely on the markup and CSS for its appearance.

Tt0miwa22

76% match