JulianLeira

@JulianLeira·4 public vizzes

Fork of Rendering Data with React & D3

This example displays a radial burst of CSS named colors as a circular pie chart, with each color’s name and hex value represented by a slice. It loads data from a CSV file using d3.csv, then constructs the pie layout with d3.pie and arc generator d3.arc. React manages the component state via useState and useEffect, rendering the loading message while the data is fetched. The visualization relies on React 16.9, D3 v5, and a custom SVG layout within a 960×500 viewport, though only the initial loading screen is shown in the provided code.

Oct 21, 2021

Loading thumbnail…

Loading data with react D3

This example demonstrates how to load external data using D3 utilities and manage it with React state. The application fetches a CSV file listing CSS named colors, then displays the data size, row count, and column count as text. The code uses the `csv` function from D3 v5 to load the data, `useState` and `useEffect` hooks from React 16.9 to store and trigger the data fetch, and renders the calculated statistics as an SVG-based `<pre>` element.

Oct 20, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example displays file statistics for a CSV dataset containing CSS named colors. It fetches the data from a remote URL and reports the file size in kilobytes, the number of rows, and the number of columns in a large text display. The implementation uses the `d3.csv` function to load and parse the data, leveraging the Promise-based API from D3 v5. A commented alternative demonstrates fetching text with `fetch`, `async`, and `await`, followed by `d3.csvParse`.

Oct 20, 2021

Loading thumbnail…

CaraLoca

This gallery example, CaraLoca, shows a grid of eighteen cartoon faces, each with the same yellow circular head, black stroke, and fixed mouth, but with randomly generated eye radii that vary from face to face. The faces are rendered as SVG elements using React components for the face, eyes, mouth, and background circle, with the d3 `arc()` function generating the mouth path. The data is not sourced from an external file; instead, a `range` from d3 creates the array that maps over to produce each face, with each eye’s radius set by `Math.random()`.

Oct 19, 2021