Lan Li

@LanLi2017·5 public vizzes

Fork of React Starter

This example shows a simple React application that renders the text “Hello React!” centered on the screen. It uses the React and ReactDOM libraries to create a functional component and mount it to the DOM element with the ID `root`. The page includes inline CSS for styling, and the script tags load React from a CDN. The rendering approach is straightforward client-side React without any data source or interactive features.

May 25, 2021

Loading thumbnail…

Mouse follower

This example shows a single black circle centered on a full-screen SVG that tracks the mouse position, logging each movement’s clientX and clientY coordinates to the console. Built with React 16.9 and ReactDOM, it uses an SVG onMouseMove event handler to capture pointer movement, with the circle’s position fixed at the viewport center rather than following the cursor. The rendering relies on React’s declarative JSX syntax within an SVG element, and the layout is adjusted to the browser’s window dimensions.

May 21, 2021

Loading thumbnail…

Fork of Smiley Face Part V

A React application renders a yellow smiley face as an SVG graphic, composed of a background circle, two eyes, and an arc-shaped mouth. The code demonstrates modular component structure using ES6 modules and React Fragments, with each facial feature defined in its own file. D3’s `arc` generator creates the mouth path, while React and ReactDOM manage the SVG rendering, and D3 v5 is loaded for utility functions. The face is centered within a 960×500 viewport using SVG transform translations.

May 21, 2021

Loading thumbnail…

Fork of HTML Starter

This example fetches and parses a CSV file containing CSS named colors. The page loads the data from a GitHub Gist URL using the `fetch` API and the `fetchText` async function, which retrieves the text content of the CSV. The script then logs the raw text to the console, allowing inspection of the color names and their associated values. No further visualization is shown; the example focuses solely on the data-fetching and parsing step.

May 21, 2021

Loading thumbnail…

Fork of HTML Starter

A grid of smiling faces appears, each with slight random variations in eye position, stroke width, eye radius, and mouth radius, creating a playful, organic pattern. The example demonstrates a React-based approach to generating SVG graphics, where each face is a composition of reusable components like `BackgroundCircle`, `Eyes`, and `Mouth`. It uses `d3.arc` to define the mouth’s curved path and `d3.range` to generate the array of faces, all rendered through ReactDOM into an HTML canvas.

May 18, 2021