aramaki-san

@aramaki-san·5 public vizzes

Fork of Hello HTML

This example shows a cartoon face rendered with reusable React components, featuring a yellow circular background, two black eyes, and a smiling mouth. The code combines React for component structure with D3’s `arc` generator to create the mouth’s curved path. A `FaceContainer` wraps the SVG output, centering all elements via a `transform` translation. The face’s dimensions and positions—such as eye offset, stroke width, and mouth radius—are passed as props from a top-level `App` component, demonstrating a modular, data-driven approach to static SVG visualization.

Jan 1, 2022

Loading thumbnail…

Smiley SVG

This example displays a simple circular smiley face drawn with a single SVG path using cubic Bézier curves. The code references D3 version 7 through the `d3.min.js` distribution, though the drawing itself uses only raw SVG path data with `d` attribute and `transform` attributes. The shape is rendered as a dashed-border 100x100 pixel SVG element, with the face outline stroked in black. No JavaScript from the `bundle.js` file is visible in the provided HTML, so the visualization relies entirely on static SVG markup.

Dec 27, 2021

Loading thumbnail…

Loading Data with React and d3

This example shows a color wheel built from a CSV of named CSS colors, loaded asynchronously and rendered as SVG arcs using React and d3. The React component uses `useState` and `useEffect` to fetch the data with `d3.csv`, then displays a loading message until the data arrives. The chart maps each row to an arc via `d3.arc` and `d3.pie`, with fill colors taken directly from the `RGB hex value` column. The code relies on React 16.9 for components and d3 v6 for data loading and shape generation.

Jun 5, 2021

Loading thumbnail…

CSS Named Colors

This example demonstrates the process of loading and parsing a CSV file containing CSS named colors. It displays the file size in kilobytes, the number of data rows, and the number of columns in a large text format. The visualization uses the D3.js library, specifically the `d3.csv` method to fetch and parse the data, and `d3.csvParse` to handle the text. It also utilizes the browser's native `fetch` API to retrieve the raw text from a GitHub Gist URL.

Jun 4, 2021

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across a full-screen SVG, changing position live as the pointer moves. The visualization uses React state and the `useState` hook to track mouse coordinates, with a `useCallback` handler for `onMouseMove` events on the SVG element. The circle’s center is set to the cursor’s client coordinates, and its fixed radius of 30 pixels is defined as a constant. The example demonstrates a minimal React-rendered interactive graphic without external data sources or charting libraries.

Jun 3, 2021