Skip to main content
SimilarExport ZIP
100%

W2 pseudo joyplot

✓ Published1🌍 Public
AAlenka Guček
Last edited Mar 19, 2021
Created on Mar 19, 2021
Forked from W1 SVG essentials

This pseudo joyplot stacks five layered paths to create a mountainous terrain effect. Each path is built from an SVG path element with hand-crafted bezier curves, drawn with black or green strokes over a rectangular border. The overlapping shapes simulate a ridge-line chart without using data-driven libraries such as D3. The SVG markup is generated in Figma and rendered directly in a web page, using inline styles for full-bleed display.

AI-generated description

SVG shapes done in Figma.

MIT Licensed

Similar vizzes

Loading thumbnail…

Pseudo Visualisations

Pseudo Visualisations presents a curious, abstract shape constructed from layered orange, red, and deep blue SVG paths. The composition resembles a stylized, coiled form with irregular protrusions, rendered on a plain white background. The code defines these shapes using explicit path data within an SVG element, with colors applied via inline `fill` styles. The rendering approach relies on hand-coded coordinates and transformations, showcasing a static, artistic interpretation rather than a data-driven visualization. It appears to explore form and color through vector graphics.

MMartin
70% match
Loading thumbnail…

Pseudo Line Chart

This example shows a hand-drawn-style line chart composed of a single thick, rounded black path that steps down and up across a white canvas, suggesting an approximate data trend. The visualization uses raw SVG markup with a `path` element, specifying coordinates and stroke properties directly, and loads the Share Tech font for a single text style rule. All rendering is performed through the SVG format, with no JavaScript libraries or data-processing APIs involved. The chart’s minimal design focuses on the aesthetic of an imprecise, pseudo-line representation rather than precise data encoding.

Aajoua
70% match
Loading thumbnail…

Contour Plot

This contour plot visualizes a data surface through layered SVG paths and grouped rectangles, using filled shapes to represent different value bands. The visualization renders with React and SVG, employing path elements with complex cubic and quadratic Bézier curves to trace contour lines. A color scale ranges from dark purple through magenta and orange to pale yellow, with each colored region corresponding to a specific elevation range in the plotted dataset. The implementation uses direct SVG path data rather than a charting library, providing precise control over the geometric contour representation.

Xxyzcorrupt@gmail.com
69% match
Loading thumbnail…

Pseudo Pie Chart

This example approximates a pie chart using layered black SVG path elements that divide a circle into five irregular, wedge-like segments. Each segment consists of hand-coded bezier curves and straight lines, rather than generated arc paths from a charting library. The chart is rendered as a static SVG with a white background, and includes large text styling prepared for a 72-pixel font, though no text labels are displayed. The visualization demonstrates how a pie chart can be constructed manually through SVG path data without any JavaScript or data-binding libraries.

Aajoua
69% match
Loading thumbnail…

Pseudo Line Chart

A pseudo line chart uses an SVG path with a single, thick black stroke to suggest a conventional line chart without plotting actual data points. The path curves through a stylized, hand-drawn-looking trajectory across a white background on a dark grey canvas. Rendered entirely with inline SVG elements, including a large Share Tech font for text labels, the visualization relies on path data and stroke properties rather than data-binding libraries to create its aesthetic.

Ttriciascully
68% match
Loading thumbnail…

Fork of Pseudo Visualizations w/ Figma in D3

This fork presents a pseudo-visualization of a slope graph, depicting change across two time points through abstract, blocky SVG rectangles. The layout uses five grey rectangular forms to suggest data categories, with a path element connecting points to imply trend movement. Rendered entirely as static SVG, the graphic was originally designed in Figma, which generated the vector code. The implementation uses raw SVG elements—`rect` and `path`—within an HTML document, without any JavaScript libraries or dynamic D3 APIs. The data is implied through the spatial arrangement rather than plotted from a dataset.

KKamen Yin
68% match
Loading thumbnail…

Fork of Editing Faux Data Viz

This example displays a collection of hand-crafted SVG waveform paths drawn on a light gray canvas. Each path is rendered as a black, unfilled stroke, creating a set of overlapping curves that resemble abstract data plots or signal traces. The visualization uses D3 v7 to append the SVG elements, with path data defined as static string constants in JavaScript. The code constructs rectangular background layers and a main container, then iterates over the path array to add each curve with a consistent stroke style.

CCurran Kelleher
68% match
Loading thumbnail…

pseudo visualization

This example presents a static geometric composition built with React and rendered as SVG. The visualization displays a collection of overlapping gray shapes that form a complex, layered pattern around a central point. The code constructs these forms using multiple SVG `<path>` elements with defined fill colors and masking techniques. The rendering relies on inline SVG markup directly embedded in the HTML, demonstrating a pure SVG approach without additional data processing or interaction handling. The result is a non-interactive, decorative abstract visual exploration.

Jjustinhersom@gmail.com
68% match