mk3737

@mk3737·5 public vizzes

Loading and parsing CSV data

This example demonstrates loading and parsing a CSV file from a remote URL using D3 version 7. It fetches the data with the `fetch` API and parses it with `d3.tsv`, then displays the dataset’s size in kilobytes, row count, and column count in a large `<pre>` element. The data source is a GitHub gist containing CSS color names, and the visualization is purely textual, summarizing the parsed structure without rendering a chart.

Apr 13, 2022

Loading thumbnail…

Loading data with react & D3

This example demonstrates how to load external data in a React application using D3, displaying the loaded dataset’s size, row count, and column count in a large <pre> element. The app uses React’s useState and useEffect hooks to manage the data state and trigger the asynchronous fetch, while d3.tsv loads the CSV file from a GitHub gist URL. A separate message.js module formats the summary using d3.tsvFormat, and the interface initially shows “loading” until the data arrives.

Apr 6, 2022

Loading thumbnail…

Fork of Smiley Face Part III

This example renders a single yellow circle that follows the mouse cursor across an SVG canvas. Built with React and D3 v5, it uses React’s `useState` and `useCallback` hooks to track pointer coordinates from the `onMouseMove` event, updating the circle’s `cx` and `cy` attributes in real time. The visualization demonstrates a minimal interactive pattern, combining React’s declarative state management with SVG’s native shape rendering.

Apr 6, 2022

Loading thumbnail…

mouse follower

A circle follows the mouse pointer across an SVG canvas, updating its center position in real time to mirror the cursor's location. The React component uses a `useState` hook to track mouse coordinates and a `useCallback` handler on the SVG element's `onMouseMove` event. The circle is rendered with a D3.js arc path, though the simple shape relies on React's declarative SVG attributes for positioning, with no external data source.

Mar 25, 2022

Loading thumbnail…

Loading and parsing CSV data

This example demonstrates fetching and logging the contents of a CSV file containing CSS color names. It uses the browser’s native `fetch` API to retrieve the remote text file, then chains a promise to parse the response via `response.text()` and prints the raw CSV data to the console. No visualization or parsing library is used; the code shows only the loading step, relying on plain JavaScript async/await syntax. The data source is a GitHub Gist URL.

Mar 25, 2022