Abdulhaq Adetunji Salako

@teejay13·4 public vizzes

Loading Data with React & D3

This example demonstrates how React manages asynchronous data loading in a D3 visualization. The app fetches a CSV file containing CSS named colors using D3’s `csv` utility, then displays a summary of the dataset—its size in kilobytes, row count, and column count—formatted as plain text. React’s `useState` and `useEffect` hooks track the loading state and trigger the data fetch, while the `message` function formats the output using `d3.csvFormat`. The interface shows a large “Loading...” message until the data arrives, then replaces it with the computed statistics.

Aug 10, 2020

Loading thumbnail…

Load and Passing CSV Data

This example demonstrates loading a remote CSV file and displaying basic metadata about the dataset. It shows the file size in kilobytes, the row count, and the column count in a large text output. The code uses the `d3.csv` method to fetch and parse the CSV data from a GitHub Gist containing named colors. This happens asynchronously through a `fetch` request, with the results rendered into a preformatted HTML element.

Aug 6, 2020

Loading thumbnail…

Mouse Follower

A full-screen React SVG tracks the cursor with a single black circle, centering the circle on the mouse position as it moves. The app uses React's `useState` and `useCallback` hooks to manage and update the mouse coordinates, which are rendered as the `cx` and `cy` attributes of an SVG `<circle>` element. The circle has a fixed radius of 30 pixels, and the SVG canvas spans the entire browser window, with the initial mouse position set to the center of the viewport.

Aug 6, 2020

Loading thumbnail…

Smiley Face

This React and D3 v5 example renders a grid of eighteen smiling faces using SVG. Each face features a gradient-filled background circle, star-shaped eyes created with `d3.symbol`, and an open mouth built from a `d3.arc` path. A white rect acts as teeth, and a tongue is drawn beneath. The faces are generated by mapping over an array from `d3.range`, each using shared components for the face container, background, eyes, mouth, and tongue, all composed within a React component tree.

Apr 17, 2020