Yu Liu

@zootopia198·5 public vizzes

moveCircle

A static circle is centered within an SVG of fixed dimensions, rendered by React and displayed in the browser. The code mixes React state management with D3 v5, though the current implementation does not include interactive movement. A mouse move handler is set up to log pointer coordinates to the console, but it is not attached to the SVG element or circle. The example uses React's `useState` and `useCallback` hooks, though neither is actively applied in the visible render. The circle position and radius are defined as constants, with no animation or data binding present.

Aug 5, 2021

Loading thumbnail…

loading and parsing for csv

This example demonstrates loading and parsing a CSV file containing CSS named colors. It fetches the data from a GitHub gist URL using the Fetch API, then logs the raw text content to the browser console via `fetchText` and `response.text()`. The page displays a CSS-styled layout with an oversized font size, but the core functionality focuses on asynchronous data retrieval and text conversion. The code uses vanilla JavaScript with `async/await` and promises, without any external libraries.

Aug 5, 2021

Loading thumbnail…

Fork of Smiley Face Part VI

A grid of nine randomly generated smiley faces fills the screen, each face composed of a yellow circle, black outlined eyes, and a mouth shaped as an arc. The implementation uses React components to structure each facial feature, while D3’s `arc` API generates the mouth path. Random values for stroke width, eye offset, eye radius, mouth width, and mouth radius produce subtle variations across the grid. The SVG canvas is rendered via ReactDOM, with each face centered within a 260x260 pixel viewport.

Aug 5, 2021

Loading thumbnail…

React Starter

This example renders ten identical yellow smiley faces, each composed of SVG circles for the eyes and background, with a mouth drawn using a d3.arc path. The faces are built from reusable React components, including `Fullface`, `Eyes`, `Mouth`, and `faceContainer`, which groups the shapes within an SVG `<g>` element. The `index.js` file maps over a d3.range array to produce the repeated faces, and ReactDOM renders the full set into the page. The code imports React and d3 v7, with SVG output generated through JSX components.

Aug 5, 2021

Loading thumbnail…

Fork of Smiley Face Part III

A yellow smiley face is rendered inside an SVG canvas using React and D3. The face consists of three circles for the head and eyes, plus a D3 arc path for the mouth, all positioned and scaled with computed constants. The D3 `arc` generator creates the mouth’s curved shape, and React manages the SVG elements. The visualization directly demonstrates how D3’s geometric helpers can be combined with React’s declarative component model to produce simple vector graphics.

Aug 4, 2021