sixsoxsix

@sixsoxsix·5 public vizzes

Fork of Fork of Fork of Hello HTML

This example demonstrates a React and D3 visualization that displays the size and row count of a CSS named colors dataset loaded from a CSV file. The interface initially shows a loading message, then renders a concise summary of the data once fetched. The code uses React hooks (`useState`, `useEffect`) to manage asynchronous data loading, and the `d3.csv` function to parse the dataset. The `message` utility formats the output by computing the CSV file size in kilobytes using `d3.csvFormat` and reporting the number of data rows.

May 2, 2022

Loading thumbnail…

Fork of Fork of Loading and Parsing CSV Data

This example demonstrates the loading and parsing of a CSV file containing CSS named colors and their corresponding hex values. The visualization fetches the data from a remote URL using the `fetch` API, then parses the text content with `d3.csvParse`. The program logs the number of rows parsed to the console, confirming successful data retrieval. It uses asynchronous JavaScript with `async`/`await` syntax to handle the network request, and relies on D3 v7 for CSV parsing functionality.

May 2, 2022

Loading thumbnail…

Fork of Fork of Hello HTML

An interactive SVG visualization renders a single circle that follows the mouse cursor, with its radius dynamically scaling based on the cursor's combined x and y coordinates. Built with React and D3.js v7, the application tracks mouse movement through React's event handling and updates the circle’s position and size in real time. The rendering layer uses an SVG viewport of 960 by 500 pixels, and the circle’s radius is calculated as the sum of the cursor’s x and y positions divided by 30.

May 2, 2022

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL using the Fetch API and async/await syntax. The code fetches a dataset of CSS named colors from a GitHub gist and logs the raw text response to the browser console. It illustrates the modern promise-based approach for handling asynchronous data loading, with a commented-out alternative showing the older fetch-with-nested-then pattern. The visualization itself is minimal, focusing purely on the data retrieval and parsing workflow rather than any graphical output.

May 2, 2022

Loading thumbnail…

Fork of Hello HTML

A stylized face rendered with React and D3 components draws a yellow circle for the head, red eyes, and a curved mouth using D3's arc generator. The FaceContainer builds an SVG with a centered group, while BackgroundCircle and Eyes define the individual shapes as React components. The visualization demonstrates a modular, component-based approach to SVG rendering within the React framework, using D3 v7 for the mouth path calculation.

May 2, 2022