Recreation of Visualization Taxonomy

100%

Recreation of Visualization Taxonomy

✓ Published0🌍 Public

Last edited May 14, 2023

Created on May 14, 2023

This visualization recreates a taxonomy of chart types as a layered area chart, using a pink gradient palette to distinguish five hierarchical rows of categories. The SVG rendering relies on hardcoded path data with distinct quadratic curves and clipped rect boundaries, while the HTML structure defines the 895×606 viewBox with a clipPath to contain the shapes. The paths are drawn with white strokes to separate each band, and the design maps categorical divisions through stacked, wavy regions rather than interactive elements.

AI-generated description

My Pseudo Visualization Area Chart.

MIT Licensed

Similar vizzes

Loading thumbnail…

Pseudo visualizations

This SVG-based pseudo visualization demonstrates typographic hierarchy through nested black rectangles on a white field. A single large black letter “A” anchors the left side, while four descending width blocks create a bar-chart-like progression. The rendering uses plain SVG elements (`rect` and `text`) with Roboto italic type, with no JavaScript libraries or data binding. The example strips visualization to geometric abstraction, where proportional rectangle widths suggest diminishing categories or values.

LLorenzo Lazzarotto

69% match

Loading thumbnail…

Exercise2: Pseudo Visualization

Four horizontal bars, colored orange, red, green, and blue, with varying widths, sit on a white background, each outlined in black. The visualization uses basic Scalable Vector Graphics (SVG) primitives—`rect` elements defined directly in the HTML—to create a static, pseudo-chart that mimics a stacked bar layout. No JavaScript libraries or data-binding frameworks are present; the rendering is purely declarative, with positions and dimensions hard-coded in the markup and styling provided by a simple external stylesheet.

Nnubhatia

69% match

Loading thumbnail…

Creating Own Pseudo Visualization

This pseudo bar chart uses a central vertical line as a dividing axis, with five rectangles of varying widths and positions representing approximate data categories. The author, nimrod-grandpierre, manually constructs the visualization using raw SVG primitives (`<line>`, `<rect>`) within an HTML document, specifying hardcoded coordinates and fill colors (black and blue) to simulate a chart without any data-binding or layout algorithms. The SVG canvas is set to 960 by 500 pixels with a hidden overflow, and the rectangles are placed at fixed y-positions to imply categorical rows. This example demonstrates a hand-coded, static approximation rather than a data-driven solution.

Nnim@brejnholt.dk

69% match

Loading thumbnail…

Pseudo Cluster Visualisation

This example visualizes a pseudo cluster analysis using an interactive SVG scatterplot. It shows a set of points, colored pink and yellow, distributed across a white canvas, with a large black-outlined circle suggesting a cluster boundary. The rendering relies on raw SVG elements, including `circle` tags with specific coordinates and fill colors, and CSS `:hover` styles that turn points black on mouseover. The visualization is a static, hand-drawn representation of clustered data, using only basic SVG and HTML.

YYiorgos Bagakis

69% match

Loading thumbnail…

SVG scatter plot and bar chart

This example combines a pseudo scatter plot with a bar chart in a single SVG visualization. Seven vertical bars in green and yellow represent categorical data points labeled A through G, while a dark red line overlay approximates a scatter plot trend across the same categories. The visualization uses raw SVG elements including `rect`, `path`, and `text` within multiple layers, with the text styled using the Imbue font from Google Fonts. The rendering approach relies on inline SVG styling with custom stroke widths, opacities, and layer transformations to create the composite chart layout.

GGiacomo Rossoni

69% match

Loading thumbnail…

Data Visualization ICE-8 Animals tree Chart

This example shows an animated tree chart of the animal kingdom, with circles sized by value and colored by type for each taxonomic group, connected by curved links with color-coded levels. Using d3.hierarchy and d3.tree, the code positions nodes in a hierarchical layout, then renders the structure as SVG paths and circles. Data is embedded directly in the source, with node circles and links styled via D3’s selection and attribute methods, all running within a React framework using D3 v5.

Vvamshisoletii

69% match

Loading thumbnail…

Pseudo scatter plot

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.

Bbjfmbeck

68% match

Loading thumbnail…

Pseudo Visualizations

This example presents a minimalist set of stylized bar-chart glyphs drawn as SVG paths within a single small viewBox. The graphic shows three abstract vertical bars of varying heights, with a horizontal baseline, where hovering over any shape turns it black. The code uses raw SVG elements—`path`, `rect`, and `circle`—with inline stroke and fill attributes, and applies a CSS `:hover` rule with a 500ms transition to change the fill color. No external libraries or data sources are used; the visualization relies entirely on static SVG markup in an HTML document.

Xxinyuwangxyw

68% match