kurasahakai

@kurasahakai·3 public vizzes

Mouse Follower

A yellow circle follows the mouse cursor across a full-window SVG canvas. Built with React and rendered using SVG, the application tracks pointer movements through an `onMouseMove` event handler, updating the circle's `cx` and `cy` coordinates in real time. The code uses React's `useState` and `useCallback` hooks, with the SVG viewport sized to the browser's `window.innerWidth` and `window.innerHeight`.

May 21, 2023

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v5 and the Fetch API. It fetches the CSS Named Colors dataset from a GitHub gist and displays the raw text in the browser console. The code includes multiple commented-out approaches, showing alternatives like `d3.csv` for direct parsing and the newer async/await syntax with `fetch` and `response.text()`. It highlights the progression from callback-based "pyramid of doom" patterns to modern promise chains.

May 21, 2023

Loading thumbnail…

Smiley Face Part 1

This example renders a simple yellow smiley face using React components and D3’s `arc` generator for the mouth. The face is composed of a background circle, two eyes positioned symmetrically, and a mouth drawn as a thick arc path, all centered within an SVG via a translated group. The code demonstrates reusable nested components (`FaceContainer`, `BackgroundCircle`, `Eyes`, `Mouth`) and passes numeric props like `eyeOffsetX`, `eyeRadius`, and `mouthRadius` to control the face’s geometry. The visualization is static, with no interaction or data binding beyond hardcoded dimensions.

May 20, 2023