fixh9879

@fixh9879·4 public vizzes

Loading data with React and D3

This example demonstrates how React can manage D3-loaded data to display a concise summary of a CSV file. The code fetches a CSS Named Colors dataset using `d3.csv` and calculates its size in kilobytes, row count, and column count, rendering the results as large text. It relies on React’s `useState` and `useEffect` hooks to trigger the asynchronous data load, while `d3.csvFormat` measures the data’s byte size. The visualization is purely textual, with the message built by a separate `message.js` module, and the output is presented inside a `<pre>` element.

Jan 18, 2022

Loading thumbnail…

Load csv Data

This example loads a remote CSV file containing CSS named colors and displays summary statistics about the dataset. The visualization presents three key metrics as large text: the file size in kilobytes, the number of data rows, and the number of columns. Using D3.js v7, the code fetches the text from the GitHub-hosted CSV file, parses it with `d3.csvParse`, and then updates a `pre` element in the HTML document. The implementation relies on the JavaScript `fetch` API for asynchronous data retrieval.

Jan 17, 2022

Loading thumbnail…

Tracking the Mouse

A black circle on a white SVG canvas follows the mouse cursor in real time. The React component uses the `useState` hook to track the mouse position, updating it via the `onMouseMove` event handler on the SVG element. The circle’s `cx` and `cy` attributes are bound to the current `clientX` and `clientY` coordinates, and both React and ReactDOM are loaded from CDN. The visualization demonstrates simple interactive state management and SVG rendering within a React application.

Jan 17, 2022

Loading thumbnail…

Hello HTML!

This example shows a stylized face constructed from SVG shapes, including a yellow circular background with a black outline, two black eyes, and a curved mouth. The face is rendered using React components that compose the `svg` output, with the mouth path generated by the `d3.arc` API. The code uses React and ReactDOM to render the face into an HTML page, and defines D3 functions for the arc path.

Jan 16, 2022