Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

SVG - Faux Data Viz

Public visualization

Viewing a saved revision (read-only)

26fde2dc22634351a0cfc74408ac2dd6

SVG - Faux Data Viz

1 star2🌍 Public
KKirsten Lund
Last edited Mar 20, 2021
Created on Mar 20, 2021
Forked from HTML Starter

This example mimics a stream graph using an SVG exported from Figma, composed of layered, hand-drawn path shapes with custom fill colors. The visualization is rendered with React and SVG, with each path and rectangle hardcoded in the markup rather than generated from data. CSS styles the text with the Share Tech font and centers the layout, while the SVG itself sets specific dimensions and fills. The faux data viz demonstrates how static vector graphics can simulate the look of a dynamic, data-driven chart.

AI-generated description

Mimicking a Stream Graph with an SVG exported from Figma

<!-- A bare minimum [HTML](https://en.wikipedia.org/wiki/HTML) page demonstrating use of [CSS](https://en.wikipedia.org/wiki/CSS) and [JavaScript](https://en.wikipedia.org/wiki/JavaScript). See also [React Starter](https://vizhub.com/curran/c3b14112dae34ef395999cef5783324f). -->