pfennig

@ModernTrips·5 public vizzes

Fork of Loading Data with React & D3

This example demonstrates the use of React state to manage data loading and display summary statistics about CSS named colors. The app fetches a CSV file containing color names and values using the `d3.csv` utility, then presents a text summary showing the data size in kilobytes, the number of rows, and the number of columns. The visualization uses a React functional component with `useState` and `useEffect` hooks, and renders the output as a large `<pre>` element. Data is sourced from a GitHub gist containing the CSS named colors dataset.

Jun 21, 2021

Loading thumbnail…

Mouse Follower

The Mouse Follower example demonstrates real-time interactive feedback by rendering a single circle that tracks the cursor’s position across an SVG canvas. Built with React hooks (`useState`, `useCallback`), it updates the circle’s `cx` and `cy` attributes on every `mousemove` event, using D3 v7 for SVG manipulation. The visualization overlays a large yellow circle with black stroke as a static background, while the moving circle responds dynamically to pointer coordinates, highlighting coordination between React state management and D3’s SVG rendering.

Jun 21, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates the initial stage of a data-driven visualization workflow, showing how to retrieve raw CSV data from a remote source. The code fetches a CSV file containing CSS named colors from a GitHub Gist using the Fetch API and the `async`/`await` syntax. Once the response is received, `response.text()` converts the payload into a plain text string, preparing it for subsequent parsing. The example focuses solely on the loading and text-extraction step, with no parsing or rendering logic implemented yet, highlighting the foundational data acquisition process for future visualization.

Jun 21, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

A grid of randomly generated smiley faces fills the screen, each face composed of a yellow circle, black eyes, and a mouth drawn as a half-circle arc. The code defines reusable React components—Face, Eyes, Mouth, and BackgroundCircle—that render SVG elements, while FaceContainer wraps the drawing in a translated group. Using d3.range to create fifteen face instances, each face varies in stroke width, eye offset, and eye radius through randomized properties. The mouth shape is generated with d3.arc, setting inner and outer radii and angle ranges to form a smile.

Jun 20, 2021

Loading thumbnail…

Hello Html

This example displays a minimal HTML page that loads React from a CDN and logs the React object to the browser console. It demonstrates the foundational setup for integrating React into a plain HTML document, using the umd production build of React 17.0.2. The page includes a stylesheet block within the head and an empty body, with JavaScript executed via the `console.log(React)` call in index.js. It serves as a bare-bones starting point for understanding how React and HTML interact without build tools or additional frameworks.

Jun 19, 2021