Jaewoo Chung

@jaewoochung·6 public vizzes

Loading Data in React

This example demonstrates how to load and parse CSV data in a React application. It fetches the `cssNamedColors` dataset from a GitHub gist using D3's `csv` function, storing the result in React state with the `useState` hook. The app initially renders a simple message showing the raw data object, but does not yet visualize it—it serves as a foundation for integrating D3 data loading into React's component lifecycle. The page uses React 16.9 and D3 v5, rendering to the DOM without any SVG charts yet.

Dec 30, 2021

Loading thumbnail…

Mouse follower

A circle follows the mouse cursor in real time across an SVG canvas, highlighting the immediate connection between pointer movement and visual feedback. The visualization uses React state management, with a `useState` hook tracking the cursor's `clientX` and `clientY` coordinates, which are updated via a callback on the SVG's `onMouseMove` event. Rendered with React’s `ReactDOM.render`, the circle’s position transitions smoothly as the state changes, while D3.js is loaded but not actively used in the logic. The example demonstrates a simple, responsive interaction pattern.

Dec 10, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This example renders a full-screen yellow smiley face using React and SVG. It computes the window dimensions and centers the head, eyes, and mouth geometry dynamically. The code defines circle elements with calculated radii and offsets for the face, eyes, and mouth, using React’s JSX syntax and ReactDOM for mounting. The SVG responds to the viewport size, with strokes and fills specified as inline attributes. No data source is used; the visualization is purely geometric and interactive only through window resizing.

Dec 10, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example shows how to load and parse CSV data from a remote source using the native Fetch API. The code defines an asynchronous function that fetches a text file from a GitHub gist URL containing CSS named colors, then logs the raw CSV text to the browser console. It demonstrates both a modern async/await approach and a commented-out promise chain alternative, highlighting the simplicity of fetching external tabular data without additional libraries.

Dec 10, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

A yellow smiley face rendered as SVG shows two black circular eyes on a blank face, with the circle elements hard-coded into the markup. The React library manages the DOM through ReactDOM, while the SVG’s dimensions and coordinates appear fixed at 960 by 500 pixels. The example demonstrates basic SVG shape rendering without interactivity, serving as an initial step toward a fuller face visualization.

Dec 9, 2021

Loading thumbnail…

Fork of Hello HTML

A yellow circle with a black outline and two smaller black circles forms a simple smiley face, rendered directly in SVG. The page uses no JavaScript libraries; instead, it relies on bare HTML and inline SVG elements, including three `<circle>` tags, with the main shape set to fill yellow and stroke black. The layout is hardcoded with fixed coordinates and radius values, and the body margin is removed to prevent scrolling, making the graphic fill the entire viewport.

Dec 7, 2021