TImmykiller5

@TImmykiller5·3 public vizzes

Fork of Loading Data with React & D3

This example demonstrates how React state manages asynchronously loaded data in a visualization. It fetches a CSV file of CSS named colors using D3’s `csv` utility, storing the parsed result in React’s `useState` hook. While the data loads, the interface displays “Loading…”, then renders a text summary showing the file size in kilobytes, row count, and column count using `d3.csvFormat`. The code integrates React hooks like `useEffect` and `useCallback` with D3 v5 to bridge data processing and component rendering.

Mar 1, 2023

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data in a web page. It displays the size of the dataset in kilobytes, the number of rows, and the number of columns in a large text element. The primary method uses `d3.csv` to fetch and parse the CSS Named Colors dataset from a GitHub gist URL. The code also includes commented-out alternatives using the Fetch API with `async`/`await` and `d3.csvParse`, as well as a nested promise pattern.

Mar 1, 2023

Loading thumbnail…

smiley face part 1

This example renders a smiley face using React and D3.js v7, with the face composed of SVG shapes generated through JSX. A yellow circle forms the head, two black circles create the eyes, and a D3 `arc` generator defines the mouth as a thick arc path. The layout is centered using a translated `<g>` element, with positions and radii calculated from fixed constants for the 960×500 viewport. The code demonstrates mixing React components with D3’s `arc` API to produce static, declarative SVG visuals.

Mar 1, 2023