AaronnSeah

@AaronnSeah·6 public vizzes

Fork of Loading and Parsing CSV Data

This example visualizes the top 10 countries by 2020 population from a UN dataset, displaying horizontal bars scaled by population. It uses React hooks to asynchronously fetch and parse CSV data with d3.csv, then renders an SVG bar chart via d3.scaleBand for the y-axis, d3.scaleLinear for the x-axis, and d3.max for domain calculation. Grid lines and country labels are drawn manually with SVG elements, while a message component calculates row, column, and file size statistics from the parsed data.

Nov 2, 2021

Loading thumbnail…

Fork of Fork of Hello HTML

This example renders a simple cartoon face using React components and SVG. The Face component composes background circles for the head, offset circles for eyes, and an arc-based mouth. The mouth shape is generated with the D3 `arc` generator, producing a curved path. The SVG canvas is created via React’s JSX markup, with coordinates centered through a translation transform. The code uses d3.v7’s arc API and React 16.9 for structure, drawing a static, yellow-faced character without animation or data input.

Nov 1, 2021

Loading thumbnail…

Fork of Hello HTML

A React app renders a grid of 50 randomly generated smiley faces, each with independently randomized stroke width, eye position, eye radius, mouth radius, and mouth width. The faces are composed from reusable components—`BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer`—that build an SVG scene using d3.arc for the mouth path. This example demonstrates stateless functional React components combined with D3's arc generator to produce varied, data-driven SVG visualizations without any external data source.

Nov 1, 2021

Loading thumbnail…

Fork of Fork of Fork of Hello HTML

This example builds a data-driven face using React and SVG primitives. It composes a yellow circular background, two eyes, and an arc-based mouth into a reusable `Face` component. The `Mouth` component uses `d3.arc` to generate a path, while a separate SVG tracks mouse movement, drawing a red circle that follows the cursor. The app renders via `ReactDOM.render`, with all geometry defined by explicit parameters like `eyeOffsetX` and `mouthRadius`.

Oct 29, 2021

Loading thumbnail…

Fork of Fork of Hello HTML

This example demonstrates an interactive SVG face that follows the user’s mouse movements across a 960×500 viewport. Built with React and D3 v7, it renders a yellow circle tracking the cursor while a separate Face component, composed of a background circle, eyes, and an arc-based mouth, sits at the page center. The mouse position is tracked via React’s `useState` and `useCallback` hooks, while D3’s `arc` generator creates the mouth path. The visualization showcases component composition and event-driven state updates without any external data source.

Oct 28, 2021

Loading thumbnail…

Fork of Hello HTML

This example renders a simple cartoon face using React components and SVG. The face is composed of a yellow background circle, two eyes, and a mouth drawn with a D3 arc path. The FaceContainer component handles the SVG setup and translates the group to center the face. All elements are positioned relative to central coordinates, with the mouth using d3.arc() to create a curved shape. The code demonstrates a minimal integration of React with D3 for declarative SVG visualization.

Oct 28, 2021