Erika Nagai

@Enagai-nagai·6 public vizzes

Interaction with React

A React application renders a single SVG circle at the center of a 960×500 canvas. The circle follows the mouse by logging the cursor's clientX and clientY coordinates to the console on every mousemove event. Using React 16.9 and ReactDOM, the example demonstrates event handling within an SVG element, where the `onMouseMove` prop triggers a `handleMouseMove` function. The circle itself remains static at its initial position, showing how React manages state and events in a minimal interactive visualization.

Jan 20, 2023

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL using the native Fetch API. It fetches a gist containing CSS named colors and logs the raw text response to the browser console. The code defines an async `fetchText` function that returns the response as text, and then calls it with a promise to display the parsed CSV content. No external libraries are used, relying solely on modern JavaScript's `fetch` and `async/await` syntax.

Jan 20, 2023

Loading thumbnail…

Fork of Fork of Smiley Face Part 6

The visualization shows a grid of eighteen randomly generated smiley faces, each displaying subtle variations in eye position, eye size, mouth width, and stroke thickness. Built with React and D3 v7, the code composes reusable SVG components—BackgroundCircle, Eyes, Mouth, and FaceContainer—to render each face. The Mouth component uses D3’s `arc()` generator to create a semicircular path, while the index.js file maps over an array from `d3.range()` to produce multiple faces with randomized parameters. The SVG output is rendered directly into the DOM via ReactDOM, creating a playful, algorithmic collection of faces.

Jan 18, 2023

Loading thumbnail…

Fork of Smiley Face Part 5

A grid of eighteen randomly generated smiley faces fills an SVG canvas. Each face reuses the same React component structure with randomized eye offsets, radii, and mouth dimensions. The example combines React for component composition with D3 v7’s `arc()` generator to draw the mouth path, while the face container applies a centered translation transform to position each face.

Jan 18, 2023

Loading thumbnail…

Smiley Face Part 1

A smiling face drawn with SVG shapes appears at the center of a yellow circle with a black outline. The component uses React to compose reusable pieces for the background, eyes, and mouth, with D3’s `arc()` generating the curved path of the smile. Fixed numeric constants define the radius, offsets, and stroke width, and the entire face is positioned by a `translate` transform. The example demonstrates modular React components combined with D3 geometry for simple, static vector graphics.

Jan 17, 2023

Loading thumbnail…

Fork of Smiley Face Part 1_Assignment

This example uses D3’s `arc` generator to draw a smiling face composed of SVG shapes. The visualization shows a pink circle for the face, two black circles for eyes, and a semicircular mouth created with an arc path that spans from 90 to 270 degrees. The chart is built with React 18 and D3 v7, rendering to an SVG canvas with fixed dimensions. The drawing is centered mathematically, and the face’s radius is defined relative to the canvas height and stroke width.

Jan 17, 2023