alfredwang0707

@alfredwang0707·10 public vizzes

Fork of Rendering Data with React & D3

This example visualizes United Nations population data from 2019 using React and D3. It loads the CSV dataset with `d3.csv` and renders the country values as a radial burst of colored arcs in an SVG. The code constructs a band scale with `scaleBand` for positioning, while commented-out sections show how `arc` and `pie` would compute angular segments, and a scaleLinear is prepared for potential x-axis mapping. React’s `useState` and `useEffect` hooks manage asynchronous data loading, displaying a loading message until the dataset arrives.

May 11, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between engine displacement and horsepower across a dataset of automobiles from the auto-mpg CSV file. Each point represents a car, with opacity and size encoding density, and tooltips reveal the vehicle name. The visualization uses the Vega-Lite API to construct the scatter plot, built on Vega and Vega-Lite, with D3.js handling CSV loading. The rendering uses configurable axis styling and a dark color scheme for improved readability.

May 8, 2021

Loading thumbnail…

Fork of Loading Data with React & D3

This example demonstrates how to load and summarize a dataset of CSS named colors using React and D3. It fetches a CSV file from a GitHub gist via the `d3.csv` utility, stores the parsed data in React state with the `useState` and `useEffect` hooks, and renders a text summary that displays the file size in kilobytes, row count, and column count. The visualization uses React 16.9 and D3 v5, with the `d3.csvFormat` API calculating the data's byte length.

May 6, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL, displaying the file size in kilobytes, row count, and column count as plain text. It uses the `d3.csv` function from D3 v5 to fetch and parse the CSS Named Colors dataset. The code also includes commented-out alternatives using `fetch`, async/await, and `d3.csvParse`, showing different approaches to handling asynchronous data loading. The visualization itself is minimal, prioritizing the data-loading process over graphical representation.

May 6, 2021

Loading thumbnail…

Fork of Fork of Smiley Face Part III

A React and D3 v5 application renders a smiley face as an SVG graphic. The code uses the `d3.arc()` function to create a mouth path, while eyes and the background circle are defined as React components. The face is centered with a yellow circle, black stroke, and two black eye circles, all positioned using calculated offsets. The visualization demonstrates combining React’s declarative component structure with D3’s shape generators for static SVG rendering, with the entire composition displayed in a fixed 960 by 500 viewport.

May 4, 2021

Loading thumbnail…

Fork of Smiley Face Part III

A yellow smiley face rendered with React and D3 draws its circular head, two eyes, and an open mouth using SVG elements. The face’s dimensions, including the eye offsets, radius, and mouth arc, are defined as constants in JavaScript. React renders the SVG hierarchy, while D3’s `arc` generator produces the mouth’s path, with the mouth spanning from 90 to 270 degrees. The face is centered on a 960 by 500 canvas, with a thick black stroke outlining the yellow circle.

May 4, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This React and SVG visualization displays a smiley face that scales to fill the browser window, with its dimensions derived from `window.innerWidth` and `window.innerHeight`. The face is centered via a translated `<g>` group, with a yellow circle, black stroke, and two eye circles positioned using constant offsets. The code uses ReactDOM to render the SVG elements, and it omits the mouth from the initial commented markup, resulting in a face with only eyes.

May 4, 2021

Loading thumbnail…

Fork of Smiley Face Part II

A yellow smiley face rendered with React and D3 v5. The code draws a large yellow circle for the face, two black circles for the eyes, and a D3 `arc()` path for the mouth. The SVG is constructed using React’s declarative JSX syntax, with D3 providing the mouth arc’s geometry via its `arc()` generator. All shapes are positioned relative to the center of the 500-pixel-tall viewport, with the face circle’s radius based on the height minus a stroke width.

May 4, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

A React and SVG visualization uses circles to render a simplified smiley face. The face is drawn with a yellow circle outlined in black, and two smaller circles serve as eyes, positioned symmetrically around the center. The code defines constants for dimensions, offsets, and radii, then constructs the SVG elements using React and renders them into the DOM via ReactDOM. It references an instructional YouTube video but contains no interactive behavior.

May 4, 2021

Loading thumbnail…

Fork of Hello HTML

This example uses Scalable Vector Graphics (SVG) to draw a simple smiley face: a yellow circle with a black outline and two smaller filled circles for eyes. The static graphic is constructed directly in HTML using SVG elements like `<circle>`, with positions and radii specified via attributes. No JavaScript or data-binding libraries are involved; the visualization simply demonstrates basic SVG markup and styling within a minimal web page structure.

May 4, 2021