aredmond-re

@aredmond-re·5 public vizzes

Rendering Data With React

This example shows a React application that loads a CSV dataset and renders it as a pie chart using SVG. The code uses D3's `csv` method to fetch data from a GitHub gist, then applies the `pie` and `arc` generators to compute the chart geometry. React state management with the `useState` and `useEffect` hooks handles the asynchronous data loading and conditional rendering of a loading message. The visualization is drawn as a static pie chart with no slices visible, as the data mapping is left incomplete.

Sep 17, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, plotting each car’s country of origin on the x-axis and horsepower on the y-axis as translucent circles. The visualization is built with the Vega-Lite API, using `vl.markCircle` and `vl.encode` to define the marks and channels, while `d3.csv` loads the remote CSV data. The code leverages vega, vega-lite, and vega-tooltip libraries for rendering and interactive tooltips, with a custom config adjusting axis styles and font sizes for readability.

Sep 3, 2021

Loading thumbnail…

Load Data

This example demonstrates how to load and parse external CSV data using D3 v5. It fetches a text file from a GitHub gist URL using the Fetch API, then converts the raw text into an array of JavaScript objects with `d3.csvParse`. The parsed data is logged to the browser console, showcasing the basic pattern for retrieving and structuring tabular data for use in a visualization. No visual rendering occurs; the focus is purely on data acquisition and formatting.

Sep 3, 2021

Loading thumbnail…

Mouse Follower

A black circle follows the mouse cursor across a blank SVG canvas. The example demonstrates React state management with the `useState` and `useCallback` hooks, updating circle coordinates via the `onMouseMove` event. It renders a single `<circle>` element using ReactDOM, with a fixed radius of 30 pixels, and initializes the pointer position at the center of the 960×500 viewport.

Aug 31, 2021

Loading thumbnail…

Smiley

A smiling face composed of a yellow circular head, two black eyes, and a curved mouth is rendered as an SVG graphic. The React component hierarchy, including `FaceContainer`, `Head`, `Eyes`, and `Mouth`, assembles the visual from configurable props like eye offset, radius, and mouth dimensions. D3’s `arc` API generates the mouth path, while the component-based structure allows the face’s geometry to be easily parameterized and reused.

Aug 31, 2021