Skip to main content
SimilarExport ZIP
100%

Fork of Pseudo Visualizations w/ Figma in D3

✓ Published1🌍 Public
KKamen Yin
Last edited Dec 9, 2023
Created on Dec 9, 2023

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.

AI-generated description

A pseudo-visualization of a slope graph, which shows change over 2 points in time. It was created in Figma which generated the SVG copied here.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Pseudo Slope Graph

This fork of a pseudo slope graph visualizes hypothetical changes over two points in time, mimicking a standard slope chart. It is rendered as static SVG in a single `index.html` document, with black lines connecting two vertical axes of circles. The data is represented by these fixed positions, with no interactivity or dynamic behavior. The SVG is generated from Figma, as noted in the README, and copied directly into the HTML file, using no external libraries or JavaScript APIs.

Bbtlhgboy@icloud.com
88% match
Loading thumbnail…

Pseudo Visualizations w/ Figma in D3

This example shows a slope graph as a set of black, grey, red, and blue circles arranged along two implied time points, with each circle representing a data point’s position at those moments. The visualization is a static SVG generated in Figma and embedded directly into the page, rather than being computed by D3. The code uses no JavaScript APIs; it simply renders the SVG markup with ellipses, each having explicit cx, cy, and fill attributes. The rendering approach is purely declarative, with all visual encoding hardcoded in the SVG source.

KKamen Yin
85% match
Loading thumbnail…

Pseudo Slope Graph

A pseudo slope graph visualizes change across two points in time using black slanted lines connecting circular nodes, all rendered in SVG. The static chart includes horizontal and vertical axes, with data points positioned along the timeline. Created in Figma and exported as SVG, the visualization uses basic SVG elements—`line`, `circle`, and `path`—without any JavaScript libraries like D3. The minimal styling, including black strokes and fills, and the absence of interactivity highlight its static, design-tool origin.

WWaseem Medhat
78% match
Loading thumbnail…

Fork of Pseudo Bar Chart 2

This fork of D3’s Pseudo Bar Chart 2 uses raw SVG elements to draw five horizontal black bars on a white background, each with differing widths and labeled with letters. The chart encodes categorical values through bar length, though no underlying data or axes are present. The code constructs the visualization directly with `<rect>` and `<text>` tags inside an SVG container, without using any D3 scales, layouts, or data-binding methods. The rendering is purely static, with bar widths hardcoded in the SVG coordinates.

WWannabeProgrammerr
78% match
Loading thumbnail…

Fork of Pseudo Line Chart

The visualization approximates a horizontal bar plot using a single thick black polyline that zigzags across an 845x389 SVG canvas against a white background. Data points are connected sequentially, with the line’s vertical positions suggesting categorical values along a baseline. Rendered as static SVG, the chart employs the Share Tech font for text and relies on raw `<path>` coordinates rather than a charting library, demonstrating a hand-coded pseudo-chart approach. The SVG `stroke-width` and `stroke-linejoin` attributes define the bold, rounded line style.

Rroyable88
76% match
Loading thumbnail…

Fork of Pseudo Horizontal Bar Chart

This fork of a pseudo horizontal bar chart displays four labeled bars (A–D) using raw SVG rectangles and text elements. The first bar is blue with a thick black stroke, while the remaining bars are black, sized to approximate descending values. Rendered with inline SVG in an HTML page, it uses the Share Tech font and no JavaScript libraries or data-binding frameworks. The chart is a static approximation of a bar chart, with the SVG viewBox, rect positioning, and font styling defined directly in the markup.

Iinnocent thomas
76% match
Loading thumbnail…

Fork test

This example displays a set of static geometric shapes composed of paths and rectangles rendered as SVG. The visualization uses plain HTML, CSS, and JavaScript, with CSS transitions applied to rectangles that change color and stroke width on hover. The layout shows a large outlined container with smaller filled blocks in orange, green, gray, and blue, using SVG elements like `<path>` and `<rect>` directly in the markup. It demonstrates basic SVG styling and interactivity without any external data or charting libraries.

Zzaioris
76% match
Loading thumbnail…

Fork of Fork test 2

This visualization displays a set of geometric shapes, including paths and rectangles, arranged in a static composition. The SVG elements use a defined color palette and some rectangles have hover effects, while a JavaScript script dynamically generates and appends an additional 100 horizontal rectangles, which overlay the existing shapes to create a striped pattern. The page is built with raw HTML, CSS, and JavaScript, using the React framework for the project structure, and renders entirely as SVG.

Zzaioris
76% match