Skip to main content
SimilarExport ZIP
100%

Pseudo Boxplot Chart

✓ Published0🌍 Public
MMarcus Vinicius da Silveira Richa
Last edited Mar 12, 2023
Created on Mar 12, 2023
Forked from SVG Fundamentals

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.

AI-generated description

Data Visualization Course 2018 - GitHub Pages

Curran Kelleher on Medium

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Pseudo_Box_Plot

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.

JJaga-droid
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
82% 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
80% match
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
80% 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
80% match
Loading thumbnail…

Pseudo Bar Chart

This pseudo bar chart presents an abstract, hand-drawn appearance, composed of multiple SVG paths that simulate irregular, sketch-like data bars rather than using standard bar shapes. The visualization is rendered with React and SVG, featuring a light background and orange strokes that create a freeform, illustrative aesthetic. The code defines precise path coordinates and stroke properties to achieve the organic, pseudo-bar effect, demonstrating a creative alternative to conventional chart rendering. The example focuses on visual form over quantitative accuracy, emphasizing stylistic expression in data representation.

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

Psuedo line chart

A pseudo line chart presents a set of data points as a single thick, black, angular path, with red and black CSS styling applied to text and an SVG element. The visualization uses a static SVG `path` element with fixed coordinates to suggest a line chart without traditional axes or data encoding. It renders directly in HTML using inline SVG and CSS, with the `stroke-linecap` and `stroke-linejoin` properties shaping the rounded path. The example demonstrates a minimal, hand-coded approach to chart-like imagery.

Gguththered
80% match