82MARY

@82MARY·6 public vizzes

Rendering Data with React

A pie chart displays all 148 CSS named colors as equal-sized slices. The example loads CSV data about named colors from a GitHub gist using `d3.csv`, then converts the data to arc segments with `d3.pie` and `d3.arc`. React components render each slice as an SVG `<path>`, with the fill color set to the corresponding RGB hex value from the dataset. The visualization demonstrates integrating D3 data utilities with React's declarative rendering approach.

Apr 30, 2021

Loading thumbnail…

Loading Data with React

This example demonstrates loading a CSS Named Colors dataset with D3 and rendering it as horizontal strips in React. The `csv` function from D3 fetches a remote CSV file asynchronously, and React’s `useEffect` and `useState` hooks manage the data state, showing a loading message until the data arrives. Each row is then mapped to a styled `div` whose background color matches the color’s hex value, creating a visual color spectrum across the screen.

Apr 30, 2021

Loading thumbnail…

loading data in react

This example demonstrates how to load and display CSV data within a React component, using React state to manage the asynchronous data-fetching lifecycle. The app fetches a dataset of CSS named colors via `d3.csv`, then renders a summary message showing the data’s size in kilobytes, row count, and column count. The example highlights the integration of D3’s data-loading utilities with React hooks like `useState` and `useEffect`, and relies on a simple SVG-less `<pre>` element for output while the data is loading or ready.

Apr 30, 2021

Loading thumbnail…

CSS-Color Name

This example loads a CSV file of CSS named colors from a GitHub gist and displays basic summary statistics: the file size in kilobytes, the number of rows, and the number of columns. It uses `d3.csv` to fetch and parse the data, then `d3.csvFormat` and `Math.round` to compute the size, writing the results into a `<pre>` element via `textContent`. Alterna-tive commented-out implementations show the same task using `fetch` with `async/await` and `d3.csvParse`.

Apr 26, 2021

Loading thumbnail…

dot Follower

A yellow circle follows the mouse cursor across a 960 by 500 SVG canvas. The visualization directly maps the cursor's client coordinates to the circle's center position. Built with React, the app uses the `useState` hook to track mouse position and the synthetic `onMouseMove` event on the SVG element to trigger updates. The circle’s radius is fixed, and no data source or additional encoding is present.

Apr 25, 2021

Loading thumbnail…

SmileFace

This example renders a cheerful cartoon face using React and SVG. A pink circular background, two black eyes, and a curved mouth are composed from reusable components. The face is centered within a 960 by 500 pixel viewport, with all positioning and sizing driven by explicit props. The mouth is drawn using the D3 `arc` generator, while the remaining shapes use basic SVG `<circle>` and `<path>` elements.

Apr 18, 2021