YashuVerma1210

@YashuVerma1210·4 public vizzes

Loading Data with React and D3

This example demonstrates loading CSV data in a React component with D3, displaying the dataset’s size in kilobytes, row count, and column count as text. The app uses React’s `useState` and `useEffect` hooks to fetch the data asynchronously via `d3.csv` from a GitHub gist. Once loaded, the `message` function formats the summary using `d3.csvFormat` to calculate byte length. The visualization renders plain SVG-less text inside a `<pre>` element, showing a loading state until the data arrives.

Apr 5, 2021

Loading thumbnail…

CSS Visualization

This example displays basic metadata about a CSV file in large text on a webpage. It uses D3 v6’s `d3.csv` to load a remote dataset from a GitHub gist, then calculates and shows the approximate file size in kilobytes, the number of rows, and the number of columns. The result is rendered into a `<pre>` element using `document.getElementById` and `textContent`. The code also includes commented-out alternative approaches using `fetch` and `d3.csvParse`.

Apr 5, 2021

Loading thumbnail…

Mouse Follower

A yellow smiley face with eyes and a mouth follows the mouse cursor across an SVG canvas. The React app tracks pointer movement via the `onMouseMove` event, updating the face's position through `useState` and `useCallback` hooks. The face is composed of reusable React components (`Face`, `Eyes`, `Eye`, `Mouth`), with the mouth drawn using a `d3.arc()` path generator. The rendering is entirely SVG-based, with a single `<circle>` for the face, two smaller circles for eyes, and a filled arc for the mouth, all positioned relative to the current mouse coordinates.

Apr 5, 2021

Loading thumbnail…

Smiley 1

A yellow smiley face with black outlined eyes and a half-smile mouth is rendered in an SVG canvas. The face and eyes are simple circles drawn with SVG elements, while the mouth is created using the `d3.arc()` API to generate a path with specified inner and outer radii and angular span. The visualization is built with React components, each managing a distinct facial feature, and composed within a root `Container` that positions the entire graphic at the center of a 960x500 canvas.

Apr 5, 2021