Fork of Mouse Follower

100%

Fork of Mouse Follower

✓ Published0🌍 Public

Last edited May 12, 2021

Created on May 12, 2021

This example displays a minimal text summary of a COVID-19 deaths dataset. The React component fetches a CSV file from the Johns Hopkins CSSEGISandData repository and uses D3’s `csv` function to parse it. The resulting `data` object is passed to a custom `message` function, which computes and renders the file size in kilobytes, row count, and column count. The output updates dynamically through React’s `useState` and `useEffect` hooks, initially showing a “loading…” placeholder. D3’s `csvFormat` is used to measure the file size.

AI-generated description

A program that loads data with the use of D3 and React.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Mouse Follower

This example displays the file size, row count, and column count of a CSV dataset, dynamically updating the summary once the data finishes loading. It uses React hooks like `useState` and `useEffect` to fetch the data via `d3.csv`, and a helper function in `message.js` that leverages `d3.csvFormat` to calculate the size in kilobytes. The visualization is minimal, rendering a plain text message to the screen rather than any graphical chart, with the circle-following behavior absent from the provided code.

AAndy Curtis

87% match

Loading thumbnail…

Fork of Fork of Loading and Parsing CORONAVIRUS

This example displays a text summary of COVID-19 global death data parsed from a CSV file hosted by the CSSE at Johns Hopkins. It uses `d3.csv` to fetch and parse the time-series data, then computes the total deaths from the latest date column using JavaScript’s `reduce`. The displayed message includes file size, row and column counts, the final date, and the formatted death total via `d3.format`. The results are rendered inside a styled `<pre>` element, with the code running in a React-based build using D3 v5.

Jjesramyep1263

86% match

Loading thumbnail…

Fork of Mouse Follower

This fork of the Mouse Follower example displays a text summary of a CSV dataset loaded from a GitHub gist. The React application uses D3’s `csv` function to fetch and parse the CSS named colors data, then renders a multi-line message showing the kilobyte size of the formatted CSV, the number of rows, and the number of columns. The visualization relies on React’s `useState` and `useEffect` hooks for managing state and asynchronous data loading, with D3’s `csvFormat` used to compute the data size.

BBoris Gomaz

85% match

Loading thumbnail…

Fork of Mouse Follower

This example displays the dimensions of a loaded CSV dataset, showing row and column counts alongside file size in kilobytes. It uses a React functional component with hooks (`useState`, `useEffect`) to fetch the data asynchronously via `d3.csv`, then formats the summary message with `d3.csvFormat`. The visualization renders as plain text within a `<pre>` element, with the React app bootstrapped through `ReactDOM.render` and D3 v6 included via CDN.

Ggatperdut

84% match

Loading thumbnail…

Fork of Mouse Follower

This example displays a loading message while fetching a CSV file via D3’s `csv` function, then reports the file size in kilobytes, row count, and column count. Built with React hooks (`useState`, `useCallback`) and D3 v7, it renders the data summary inside a React component. The visualization itself is minimal, focusing solely on the asynchronous data-loading status and parsed dataset statistics.

VVictor Abrokwah

84% match

Loading thumbnail…

Fork of Mouse Follower

A React app loads a CSV of named CSS colors using d3.csv, then displays a text summary of the dataset’s size, row count, and column count via React state and the useState and useEffect hooks. The rendered message, built by the custom message function, formats the CSV size in kilobytes using d3.csvFormat. The example demonstrates integrating D3 data loading with React’s component lifecycle for simple asynchronous data visualization.

Bbitifall

84% match

Loading thumbnail…

Fork of Mouse Follower

This example demonstrates a concise display of CSV file metadata, presenting the data size in kilobytes, row count, and column count. The visualization loads a CSS named colors dataset from a GitHub gist using the D3 `csv` utility and React's `useState` and `useEffect` hooks. The app calculates and formats the summary with `d3.csvFormat`, and renders the result as large text in a `<pre>` element via ReactDOM, replacing a loading message once the data arrives.

Rrayhanasyraff

84% match

Loading thumbnail…

Fork of Fork of Mouse Follower

This example displays a simple text summary of a CSV dataset loaded from a GitHub gist, showing file size, row count, and column count. Built with React and D3.js v6, the app uses `d3.csv` to fetch and parse the data, then displays the formatted result within a styled `<pre>` element. The interface tracks the mouse cursor with a circle overlay, though the functional interaction is limited to this visual follower. The page relies on the `message` module to compose the summary from the parsed dataset.

PPrince Rajasingh Paulraj

83% match