Kamen Yin

@KamenYin·5 public vizzes

Pseudo Bar Chart using Figma

A pseudo bar chart displays four categories, labeled with Japanese characters, alongside horizontal bars of varying lengths to suggest a quantitative comparison. The chart is rendered as a fixed SVG, generated from a Figma design, and embeds the bars and text directly within the markup. It uses a custom web font, Shizuru, for the labels. The SVG relies on basic `rect` elements with rounded corners and `text` elements, with no underlying dataset or interactive behavior.

Dec 9, 2023

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.

Dec 9, 2023

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.

Dec 9, 2023

Loading thumbnail…

Fork of SVG Fundamentals

This example displays a large, intricate SVG path depicting an abstract, organic form, likely a map or creature shape, composed of numerous curved segments. The path data defines a complex silhouette with many internal details, rendered as a solid black shape on a white background within a 1000x1000 viewport. The rendering relies solely on the SVG `path` element and its `d` attribute, using the inherent styling of SVG within an HTML page. The source code is a static SVG fork of a tutorial, with no additional JavaScript libraries like D3.js involved.

Dec 9, 2023

Loading thumbnail…

ミッキーマウス

This visualization draws a stylized Mickey Mouse face using raw SVG elements within a React application. The code defines the character through circles for the ears and face, rectangles with rounded corners for the eyes, pupils, and nose, and a path to create the smile and tongue. The scene is rendered on a 1000x600 SVG canvas with fixed coordinates, and includes branded text elements like “仮面” and “ミッキーマウス” styled with white strokes and black fills. No external libraries are used; all shapes are specified directly via SVG markup in the JSX.

Nov 26, 2023