Nick Hartmann (Data Science)

@nickhartmann·4 public vizzes

Loading Data with React & D3

A React component uses the useEffect hook to load a CSV of CSS named colors with d3.csv, storing the result in state. Once loaded, it renders an SVG donut chart where each slice is a path generated by d3.arc, with the fill color set from the CSV's hex value column. The visualization demonstrates asynchronous data loading in React while leveraging D3's arc generator for geometric layout.

Sep 9, 2021

Loading thumbnail…

CSS Colors

This example loads a CSV of CSS named colors and logs the row count to the console. It fetches the data asynchronously using `d3.csv` with a Promised-based callback, then reports the number of rows once parsing completes. The visualization itself is not yet rendered; the code only demonstrates data ingestion and verification. The data originates from a GitHub gist containing the full set of CSS color names. The page uses D3 v7, loaded via a CDN script tag.

Sep 6, 2021

Loading thumbnail…

Mouse Follower

A small orange circle follows the mouse cursor as it moves across an SVG canvas. The visualization uses React with the `useState` hook to track the cursor’s `clientX` and `clientY` coordinates from the SVG `onMouseMove` event, updating the circle’s `cx` and `cy` attributes accordingly. Rendered as SVG within a React component, it demonstrates cursor tracking and reactive state updates. D3 and ReactDOM are also imported in the page setup.

Sep 6, 2021

Loading thumbnail…

Hello HTML

A stylized yellow face built from SVG shapes appears centered on a blank page, constructed with React components and D3’s `arc` generator for the mouth. The visualization composes reusable parts—background circle, eyes, and mouth—positioned via a translated group, with dimensions and offsets passed as props. It demonstrates declarative SVG rendering in a React frontend, using D3 v7 for the curved mouth path. The face’s proportions remain fixed, showing a simple modular approach to building static, graphic data-visualization elements without external data.

Sep 5, 2021