Chandré De Wet

@chandredewet·4 public vizzes

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL using the Fetch API and D3 v7. It displays a summary of the parsed dataset, including file size in kilobytes, row count, and column count, inside a large `<pre>` element. The code uses `fetch` and `response.text()` to retrieve the raw CSV text, then converts it into a parsed data array and column list with `d3.csvParse`. The data comes from a GitHub-hosted file containing CSS named colors.

Jul 9, 2021

Loading thumbnail…

Mouse Follower

A yellow circle follows the mouse cursor across an SVG canvas, responding instantly to pointer movement. The example demonstrates React state management with the `useState` and `useCallback` hooks, where the cursor's `clientX` and `clientY` coordinates are stored in state and passed as the circle's `cx` and `cy` attributes. Built with React 16.9 and ReactDOM, the component renders a single SVG `<circle>` element that updates its position on every `onMouseMove` event, showcasing a minimal, real-time interactive visualization using only SVG rendering.

Jul 9, 2021

Loading thumbnail…

Smiley Face Part 1

A grid of eighteen smiley faces is rendered as SVG, each with randomized proportions for the stroke width, eye offset, pupil radius, and mouth dimensions. The face is composed of React components that generate a yellow circle, two black eye circles, and a mouth path created with the d3.arc generator. The d3.range function creates the six-by-three array of faces, and each face is drawn independently within a translated SVG group using d3.v7 and React 17.

Jul 6, 2021

Loading thumbnail…

Tweak this Face

A yellow smiley face with black outline, two eyes, and a green iris in each eye fills the SVG canvas. The face’s mouth is rendered as a thick arc spanning the lower half of the face. The visualization uses React to define the SVG elements and D3’s `arc` API to generate the mouth path. The drawing is static, with all coordinates and radii hard-coded in the React component. The SVG is rendered directly with `ReactDOM.render`.

Jul 6, 2021