kevinfu92@hotmail.com

@kevinfu92·7 public vizzes

Fork of Rendering Data with React & D3

This example visualizes a dataset of CSS named colors as a radial burst of pie slices, with each slice filled by its corresponding RGB hex value. The code uses React hooks (`useState`, `useEffect`, `useCallback`) to manage asynchronous data loading via D3’s `csv` utility, then renders the result as SVG paths. D3’s `pie` and `arc` generators compute the angular layout and slice geometry, while React handles the DOM updates. The data comes from a GitHub gist of CSS color names and values.

Dec 29, 2024

Loading thumbnail…

Fork of Vega-Lite API Template

This fork of the Vega-Lite API template uses the Vega-Lite API to create a scatter plot of automobile data, encoding engine displacement and horsepower on the x- and y-axes, with points colored by origin and tooltips revealing car names. The visualization reads from a CSV of auto-mpg data via d3.csv, and the config.js file customizes axis styles and fonts for readability. Rendered as SVG, it uses the vega-lite-api to build the spec programmatically, with vega-tooltip handling interactive hover details.

Dec 29, 2024

Loading thumbnail…

Fork of Fork of Smiley Face Part II

This example displays a loading message that reports the size, row count, and column count of a CSV dataset loaded from a gist, using D3's `csv` function to fetch and parse the data. The visualization is built with React, using `useState` and `useEffect` hooks to manage asynchronous data loading, and renders the summary text as an HTML `<pre>` element. The underlying D3 and React libraries are included via CDN, and the output is displayed at full browser window size.

Dec 28, 2024

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using two distinct methods. It fetches a dataset of CSS named colors and displays the file size, row count, and column count. The code uses the `d3.csv` function for one approach, while the second method employs the native Fetch API with `async` and `await`. The visualization is rendered as plain text within a `<pre>` element, styled at a large font size, and React is used as the underlying framework.

Dec 28, 2024

Loading thumbnail…

Fork of Smiley Face Part II

A smiley face rendered as a circle with two eyes responds directly to mouse movement, with the face following the cursor across the full browser window. The visualization uses React 16.9 to manage state updates through the `useState` hook, while `handleMouseMove` captures `clientX` and `clientY` coordinates to reposition the circle via its `cx` and `cy` attributes. Rendering occurs in an SVG element that fills the viewport, with the circle’s radius fixed at 30 pixels. The code demonstrates declarative mouse tracking without additional data sources or animation libraries.

Dec 28, 2024

Loading thumbnail…

Fork of Smiley Face Part II

A React component renders a smiling face as an SVG graphic, sized to fill the browser window. The face is composed of a yellow background circle with a black stroke, two eyes, and a curved mouth drawn using D3’s `arc` generator with specified inner and outer radii. The `FaceContainer` wraps the elements in a `<g>` transform and an SVG container. The face’s dimensions and feature positions are configured through props, demonstrating a modular, reusable component structure built with React and D3 v7.

Dec 24, 2024

Loading thumbnail…

Fork of Hello HTML

This example renders a simple smiley face using SVG shapes on an HTML page. The visualization loads React 16.7.0 via a CDN script tag and logs the React object to the browser console. The SVG canvas contains three circles—a yellow face with black stroke and two black eyes—positioned with explicit coordinates. The code demonstrates basic SVG circle elements alongside React's UMD production build, with CSS applied to remove page margins and hide overflow.

Dec 23, 2024