Jacual

@JuanAcual·4 public vizzes

Loading Data with React & D3

This example demonstrates loading and summarizing a CSV dataset in a React application with D3.js. The app uses React state and the `useEffect` hook to fetch CSS named colors from a GitHub gist via D3’s `csv` function, then displays a text summary of the file size, column count, and row count. The UI renders as a large `<pre>` element, initially showing “Loading...” until data arrives. While the code imports `d3.csv`, the actual format and length calculations rely on `d3.csvFormat` and array properties. The visualization is minimal, focusing on data loading rather than graphical output, with no SVG or chart elements present.

Mar 2, 2022

Loading thumbnail…

Loading and Parsin DSV Data

This example demonstrates how to load and parse DSV data in D3, displaying a summary of a CSV file’s size, column count, and row count in large text. It uses `d3.csv` to fetch and parse the data from a GitHub gist, relying on the modern `fetch` API under the hood. The code also includes commented alternatives using `fetchText` with `async`/`await` and `d3.csvParse`, showing multiple approaches to the same task. The result is formatted with `d3.csvFormat` and `Math.round` to compute the file size in kilobytes.

Mar 2, 2022

Loading thumbnail…

Mouse Follower

A React and SVG-based smiley face follows the cursor across a 960-by-500 canvas. The application tracks pointer movement through the `onMouseMove` event, storing coordinates in state and positioning a single yellow circle accordingly. The rendering uses ReactDOM to update the SVG circle’s `cx` and `cy` attributes. The code relies on React’s `useState` and `useCallback` hooks for state management and event handling, with the visual output written in pure SVG markup.

Mar 2, 2022

Loading thumbnail…

Smile

This gallery example shows an array of identical smiley faces, constructed from basic geometric shapes—a yellow circle, two black eyes, and a mouth. The faces are generated by a React application that renders SVG elements. The code defines reusable components for the face, background, eyes, and mouth, using D3’s `arc` API to draw the mouth’s curved path. Each face is given a random eye radius, creating slight visual variety across the grid.

Feb 22, 2022