John H

@jhoegger·7 public vizzes

Load Data and Store State

This example demonstrates a minimal React application that attempts to load a CSV file containing CSS color data from a GitHub gist using D3’s `csv` function, then store the parsed result in component state via `useState`. The current code logs the CSV URL and contains commented-out logic that would display loading status and report the data’s size in kilobytes, row count, and column count. The page uses React 16.9.0 and D3 7.6.1.

Nov 29, 2022

Loading thumbnail…

Move the Dot and Data

A single yellow circle follows the mouse cursor across an SVG canvas, updating its position in real time. The example demonstrates React state management with the `useState` and `useCallback` hooks, rendering via React DOM into an SVG element. Mouse movement events trigger state updates that reposition the circle by changing its `cx` and `cy` attributes. The code uses React 16.9 and plain SVG, with no external data source.

Nov 29, 2022

Loading thumbnail…

Using Data with D3

The example uses D3 to fetch and parse a CSV file of CSS color names, then displays a status message with the file size, row count, and column count. React 16.13.1 renders the message to the DOM, while D3 v7 handles the asynchronous text retrieval via `fetch` and parsing with `d3.csvParse`. The visualization is minimal, showing only textual data metrics rather than graphical output.

Nov 28, 2022

Loading thumbnail…

Move the Dot

A yellow circle moves across an SVG canvas, tracking the mouse cursor in real time. The React component uses the `useState` hook to store the mouse position and the `useCallback` hook to update it on every mousemove event, repositioning the circle via its `cx` and `cy` attributes. The visualization relies on React 16.9 and ReactDOM, rendering directly to SVG elements in the browser.

Nov 28, 2022

Loading thumbnail…

Fork of Let's make a face with D3.js!

This example shows a static smiley face drawn as a single SVG circle, centered within a 960×500 viewport. It demonstrates fundamental DOM manipulation with D3.js v5, loading the library from a CDN while also including React 16.7. The code defines circle coordinates and radius as constants, then renders the element via React’s `createElement` structure. Although the project title mentions moving eyebrows, the provided code only renders the basic face without animation or additional facial features. The SVG output is styled with a full-bleed body and hidden overflow.

Nov 28, 2022

Loading thumbnail…

Loading and Parsing data

This example demonstrates how to fetch and log a CSV file containing CSS color data from a GitHub gist, showing the raw text output in the browser console. The code uses the JavaScript `fetch` API to asynchronously retrieve the remote resource, then calls `response.text()` to parse the response body as a string. The `url` variable points to a specific gist URL hosting the CSSColors.csv dataset. Built with a minimal HTML structure and embedded script, the visualization focuses on the data loading process rather than any visual representation.

Nov 28, 2022

Loading thumbnail…

D3 Viz 1

This interactive face built with React and D3.js v7 renders a yellow circular head with black stroke outline, two eyes, and an arc-based mouth using SVG. The visualization uses D3’s `arc` generator from the `d3` module to construct the mouth path, while custom React components (`BackgroundCircle`, `Eyes`, `Mouth`, `FaceContainer`) organize the SVG elements. The code defines parameters like `eyeOffsetX`, `mouthRadius`, and `strokewidth` to control the face’s geometry, all within a fixed 960×500 viewport.

Nov 27, 2022