RyanJHorwitz

@RyanJHorwitz·9 public vizzes

Loading Data in React

This example demonstrates how to load external CSV data and manage it with React state. The app fetches a dataset of CSS named colors from a GitHub gist using D3’s `d3.csv` utility inside a `useEffect` hook, then displays summary statistics—file size in kilobytes, row count, and column count—in a large `<pre>` element. React’s `useState` holds the parsed data while the component renders a “Loading…” message until the data arrives. The visualization combines D3 v7’s data-loading capabilities with React 16.9’s hooks for asynchronous state management, rendering text output via SVG-free HTML.

Apr 6, 2022

Loading thumbnail…

Mouse Follower

A yellow circle follows the mouse cursor across a 960-by-500 SVG canvas. The example demonstrates React’s state management and event handling: the `App` component tracks mouse coordinates via `useState` and updates the circle’s `cx` and `cy` attributes on every `onMouseMove` event. It renders through `ReactDOM.render` into an HTML `#root` element, with the SVG output generated entirely by React elements rather than a separate charting library.

Apr 6, 2022

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates the process of fetching raw CSV data from a remote URL using the Fetch API and outputting the text to the console. It relies on the `fetch()` function with asynchronous `async`/`await` syntax to retrieve the CSS Named Colors dataset from a GitHub Gist. The code highlights the first step in a data visualization pipeline: loading and parsing external data before any charting or rendering occurs. No visualization is drawn; the focus is solely on the data acquisition method.

Apr 6, 2022

Loading thumbnail…

Fork of Smiley Face Part VI

Eighteen identical smiley faces render in a grid, each with a randomly sized eye radius generated by `Math.random()`. The example demonstrates modular React component composition, splitting `Face`, `BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer` into separate ES6 modules. It uses React Fragments for grouping SVG elements and the D3 `arc()` generator to draw each mouth path. The `FaceContainer` wraps the SVG group with a centered translation, while ReactDOM mounts the array of faces into the page.

Apr 5, 2022

Loading thumbnail…

Fork of Fork of Smiley Face Part V

A smiling face rendered in SVG combines React components with D3's arc generator. The `BackgroundCircle`, `Eyes`, and `Mouth` components define circles and a path, while D3's `arc()` creates the mouth with controlled inner radius, width, and start/end angles. React handles component composition and state, passing numeric props for positioning and dimensions. The final SVG is mounted via ReactDOM, using fixed coordinates centered on a 960×500 canvas.

Apr 5, 2022

Loading thumbnail…

Fork of Smiley Face Part IV

A yellow smiley face with black-outlined eyes and a thick, arc-shaped mouth is rendered inside an SVG. The example demonstrates how to integrate React components with D3's arc generator, using `arc()` to compute the mouth path with specified inner and outer radii and angle extents. React manages the SVG elements, while D3 handles the geometry calculations. The face is centered on a 960×500 canvas with a circular background and eyes positioned using fixed offset values.

Apr 5, 2022

Loading thumbnail…

Fork of Smiley Face Part III

This example uses React and D3.js to draw a full-screen smiley face as SVG shapes, centered dynamically based on the window dimensions. The face consists of a yellow circle with a black outline, two eyes positioned symmetrically, and a mouth created with D3’s `arc()` generator, which defines a ring segment spanning from 90 to 270 degrees. React renders the SVG elements via `ReactDOM.render()`, while D3’s `arc` API supplies the mouth’s path data. The visualization adapts to the viewport size, scaling the face proportionally to the window’s height.

Apr 5, 2022

Loading thumbnail…

Fork of Let's Make a Face Part II

This example shows a yellow smiley face rendered as an SVG circle with two smaller circles for eyes, computed from fixed dimensions rather than loaded data. The face is built using React 18, with JSX defining SVG elements inside the App component. The face’s geometry is calculated via constants for center coordinates, offsets, and radii, then rendered by ReactDOM into the DOM. The code uses no external visualization libraries, relying solely on React’s declarative SVG rendering to position the shapes.

Apr 5, 2022

Loading thumbnail…

Smiley Face Part 1

This visualization draws a yellow smiley face composed of three SVG circles on a black-bordered, 960x500 canvas. It shows a large face circle with two smaller eye circles, though the mouth is absent, representing the first step toward a complete smiley. The code uses plain SVG elements with explicit `cx`, `cy`, and `r` attributes, styled with fills, strokes, and stroke-widths, and no JavaScript libraries. The rendering approach is static SVG markup embedded directly in the HTML body.

Apr 5, 2022