theV1rTual

@theV1rTual·5 public vizzes

Loading Data with React & D3

A donut chart built with React and D3 displays the full distribution of colors from a CSV dataset of color names. The visualization renders every row as a single pie slice, using `d3.pie()` to compute the angles and `d3.arc()` to generate the SVG paths. Data loading is handled inside a React `useEffect` hook with `d3.csv`, while a loading state shows "Loading..." before the chart appears. The example demonstrates integrating D3’s data manipulation with React’s component lifecycle.

Oct 28, 2021

Loading thumbnail…

Loading Data with React & D3

This example displays a dataset summary in large text, showing the number of rows, columns, and file size of a CSS named colors CSV loaded from a GitHub gist. The React component uses `useState` and `useEffect` to fetch the data with `d3.csv`, then passes it to a `Message` function that computes statistics using `d3.csvFormat`. The app renders the summary inside a `<pre>` element, with a loading message displayed until the data arrives.

Oct 28, 2021

Loading thumbnail…

Data fetch

This example fetches a CSV file containing CSS named colors and displays a short summary of its size and structure in large text. It reports the number of rows, the number of columns, and the file’s size in kilobytes after formatting the data with `d3.csvFormat`. The visualization uses `fetch` and `response.text()` to retrieve the raw data, then `d3.csv` to parse it into an array of objects. The final message is written into a `<pre>` element using the DOM API, with styles applied via CSS.

Oct 28, 2021

Loading thumbnail…

Mouse follower

This example demonstrates a mouse-follower visualization: a circle that tracks the cursor’s position across an SVG canvas. The circle moves continuously as the user moves the mouse, with its center coordinates updated from the event’s `clientX` and `clientY` values. The implementation uses React’s `useState` and `useCallback` hooks to manage and update the mouse position, while the `<svg>` element’s `onMouseMove` handler triggers the state change. The rendering is done via SVG, with a single `<circle>` element whose `cx` and `cy` attributes are bound to the current position. D3 is loaded but not used for interaction or data processing.

Oct 28, 2021

Loading thumbnail…

Document

A grid of identical smiley faces is rendered, with each face composed of SVG circles and an arc path. The faces are generated using React components, and the mouth shape is created with the `arc` function from d3. The `range` function from d3 is used to create an array of 18 elements, each mapped to a face. The result is a repetitive pattern of faces, each with yellow circular heads, black outlined strokes, and simple facial features.

Oct 28, 2021