Thfc1991

@Thfc1991·8 public vizzes

Fork of Loading Data with React & D3

This example demonstrates the loading and summarization of a CSS named colors dataset. The visualization displays a plain text summary of the data, showing its size in kilobytes, the number of rows, and the number of columns. The process uses React state management, with the `useState` and `useEffect` hooks to asynchronously fetch the CSV file using the `d3.csv` utility. Once loaded, the data is passed to a message function that calculates the file size using `d3.csvFormat`, and the result is rendered inside a `<pre>` element.

Jan 10, 2022

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data, displaying the file’s size in kilobytes, row count, and column count as large text. It uses D3 v5’s `d3.csv` and `d3.csvFormat` to fetch and process the data, with commented alternatives showing `fetch`, `async/await`, and `d3.csvParse`. The data comes from a GitHub gist of CSS named colors, and the results update a single `<pre>` element without any visual chart.

Jan 10, 2022

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates the process of loading and parsing CSV data, specifically a dataset of CSS named colors, and visualizing the results. It uses the D3.js library (v5) within a React framework to fetch the CSV file, parse its contents, and render the color data. The visualization showcases the parsed colors, with the code utilizing D3’s `d3.csv` parsing capabilities and the fetch API to handle data loading asynchronously. The rendering approach highlights the color values in a clear, organized layout, emphasizing the data’s structure.

Jan 10, 2022

Loading thumbnail…

Fork of Smiley Face Part II

A yellow circle follows the mouse cursor as it moves across an SVG canvas, demonstrating a simple React-based interactive visualization. The app uses React state and the `useState` and `useCallback` hooks to track the cursor’s `clientX` and `clientY` coordinates, updating the circle’s center position on every mouse move. The visualization is rendered with ReactDOM into an SVG element of fixed width 960 and height 500, with the circle’s radius set to 30 pixels. The example is built with React 16.9.0 and ReactDOM, using a production build loaded from unpkg.

Jan 4, 2022

Loading thumbnail…

Fork of Smiley Face Part II

A React-based smiley face visualization renders a yellow circle with black outline, two eyes, and a mouth, dynamically sized to fit the browser window. The code uses React 16.9 and ReactDOM to mount the SVG, computing dimensions from `window.innerWidth` and `window.innerHeight` to center the face. Basic SVG elements like `circle` and `g` handle the drawing, with a commented-out static version showing the original specification. The implementation adapts element positions and radii based on viewport size, though the mouth is defined in variables but not drawn.

Jan 4, 2022

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL using the Fetch API. It defines an asynchronous function that fetches a text file and returns its contents, then invokes that function on a GitHub-hosted CSS named colors dataset. The fetched data is logged to the browser console, illustrating the fundamental pattern of retrieving external tabular data for use in web applications. No additional libraries are used, relying solely on native JavaScript promises and async/await syntax. The example focuses on the data acquisition step rather than any visualization or rendering.

Jan 4, 2022

Loading thumbnail…

Fork of Smiley Face Part VI

A yellow smiley face with black outlined eyes and an arc-shaped mouth is rendered on a blank background. Built with React and SVG, the face is composed of reusable components: a background circle, two eyes, and a mouth. The mouth uses the D3.js `arc` API to generate its path. The components are parameterized with properties for size and positioning, allowing the face’s geometry to be easily adjusted.

Jan 3, 2022

Loading thumbnail…

Fork of Smiley Face Part VI

This example uses React and D3 v5 to render a yellow smiley face as a scalable vector graphic. It composes custom React components for the background circle, eyes, and mouth, with the mouth drawn using D3’s `arc` generator to create a path from specified inner and outer radii and start/end angles. The SVG output is assembled inside a shared container component that applies a centering translation.

Jan 3, 2022