deep1358

@deep1358·5 public vizzes

Fork of Loading Data with React & D3

This example shows a React component that loads CSS named color data from a CSV file using D3’s `csv` function, then displays a summary of the dataset’s size and structure. The data is fetched asynchronously and stored in React state via the `useState` and `useEffect` hooks. Once loaded, the `message` function computes the file size in kilobytes, row count, and column count using `d3.csvFormat` and the data’s `columns` property. Before the data arrives, the UI renders a simple “Loading…” placeholder.

Apr 10, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file containing CSS named colors using D3 v5. The page displays three key statistics about the dataset: the number of rows, the number of columns, and the file size in kilobytes. The code uses `d3.csv` to fetch the external CSV URL and return a parsed array of objects, then applies `d3.csvFormat` to measure the data’s string length. A secondary, commented approach shows an alternative using the Fetch API with `fetchText` and `d3.csvParse`.

Apr 10, 2021

Loading thumbnail…

Mouse Follower

A yellow circle follows the mouse cursor across an SVG canvas, with its position updating in real time as the pointer moves. The visualization combines React's state management with D3's geometric utilities, using `useState` and `useCallback` hooks to track mouse coordinates via `onMouseMove` events. D3's `arc` function is imported, though only a basic SVG circle element renders the follower. The app is built with React 16.9 and D3 v5, mounting directly to the DOM root.

Apr 10, 2021

Loading thumbnail…

Fork of Fork of Fork of Fork of Let's Make a Face Part I

A field of fifteen yellow smiley faces, each drawn with SVG circles and a D3 arc, repeats in a grid. The faces vary slightly in stroke width, eye radius, and mouth thickness due to random values from `Math.random()`. The React components `Face`, `Eye`, `Mouth`, and `BackgroundCircle` are assembled within a `FaceContainer` that applies a translation. The D3 `arc` API generates the mouth path, while the `range` function from d3 creates the iteration array for the map.

Apr 10, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

This example uses React and D3 to draw a smiley face with SVG primitives. It shows a yellow circle head with two black eyes and a curved mouth rendered as an arc. The code constructs the mouth using the `d3.arc()` generator, setting inner and outer radii and start and end angles for a half-circle opening. The fixed dimensions are centered in a 960×500 viewport, with all facial features positioned relative to the center using SVG’s `transform` attribute and D3’s arc path output. The implementation uses React 16.9 and D3 v6.

Apr 10, 2021