Martina Sladekova

@martinasladek·3 public vizzes

Loading data using D3 and React

This example demonstrates how to load and summarize a CSV dataset using D3 and React. It fetches CSS named colors data via `d3.csv` and stores the parsed result in React state with the `useState` and `useEffect` hooks. While the data loads, the UI displays "Loading..."; once available, the preformatted text reports the file size in kilobytes, row count, and column names using the custom `message` utility. The code combines D3's CSV parsing with React's component lifecycle and conditional rendering.

Jan 17, 2022

Loading thumbnail…

Loading and parsing CSV data

This example demonstrates how to load CSV data from a remote URL and display basic statistics about it. The page shows the file size in kilobytes, the number of rows, and the number of columns with column names. It uses d3.csv to fetch and parse the data from a GitHub gist containing named CSS colors. The results are rendered as plain text inside a pre element, with the message constructed using string concatenation. The code also includes commented-out alternatives using fetch and d3.csvParse.

Jan 17, 2022

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across an SVG canvas in this React-based visualization. The app tracks pointer coordinates using a React `onMouseMove` event handler and stores them in component state with the `useState` hook. Each mouse movement updates the circle’s `cx` and `cy` attributes, repositioning it instantly at the cursor’s location. The visualization uses React 16.9 and D3 v5 for rendering, with the SVG circle set to a fixed radius of 30 pixels. No data source is involved; the interaction is purely driven by user input.

Jan 17, 2022