AlexClaz

@AlexClazrey·3 public vizzes

CSS Color Data Vis

This example displays a loading message and metadata about a CSS color dataset, including file size, row count, and column count, before rendering an empty SVG canvas. It uses React hooks to fetch CSV data via d3.csv from a GitHub gist, and d3.csvFormat to calculate the dataset’s size. The visualization framework is React with D3 v7, rendering to an SVG element with fixed dimensions, though no visual marks are currently drawn.

Mar 6, 2022

Loading thumbnail…

Mouse Follow Circle

A circle follows the mouse cursor across a fixed-size SVG viewport, updating its position in real time. The example uses React state to track the cursor’s client coordinates via an `onMouseMove` handler, then renders the circle’s `cx` and `cy` attributes. It demonstrates a minimal integration of SVG with React hooks, without using D3’s data-joining or animation APIs.

Mar 5, 2022

Loading thumbnail…

Smiley Face Part I

Five smiley faces render as static SVG components, each with a yellow circular head, black stroke, two eyes, and a curved mouth drawn using d3’s `arc` path generator. The React app maps over d3’s `range(5)` to generate the faces, varying each eye radius with `Math.random()` to create subtle differences. The face geometry—positions, radii, and stroke widths—is passed as props through reusable React components like `FaceContainer`, `FaceCircle`, `Eyes`, and `Mouth`, demonstrating modular composition with d3.v7 and React.

Mar 4, 2022