sumakokima2

@sumakokima2·7 public vizzes

Fork of Fork of Rendering Data with React & D3

This visualization displays CSS named colors as a vertical sequence of colored rectangles, one per color, loaded from a remote CSV file. The React component uses the `useEffect` hook to fetch data via D3’s `csv` utility, then renders each row as an SVG `rect` with its fill set to the color’s RGB hex value. The app initially shows a "Loading..." message until data arrives. It builds on React 16.9 and D3 v5, combining D3’s data-loading with React’s declarative SVG output.

Jun 10, 2021

Loading thumbnail…

Fork of Rendering Data with React & D3

This visualization renders a radial burst of CSS named colors as an SVG donut chart. It loads color data from a CSV file using D3’s `csv` utility, then applies `d3.pie` and `d3.arc` to compute the arcs. React manages the component state and renders each colored path via `ReactDOM.render`, with a loading fallback displayed until the data arrives.

Jun 10, 2021

Loading thumbnail…

Fork of 4:32

This example displays each named CSS color as a horizontal stripe, sorted by the order in which they appear in the source CSV, creating a visual gradient of hues. The data is loaded asynchronously from a GitHub gist using `d3.csv`, while React manages the component state with `useState` and `useEffect` to render a loading message until the fetch completes. Each stripe is a styled div whose background color is set directly from the parsed ‘RGB hex value’ column, with the SVG markup in the HTML file left unused.

Jun 10, 2021

Loading thumbnail…

Fork of Fork of Smiley Face Part II - 2

This example displays a concise summary of a CSV dataset loaded from a GitHub gist, showing the file size in kilobytes, row count, and column count. Built with React and D3 v6, it uses the `csv` method from D3 to fetch the data and React hooks (`useState`, `useEffect`) to manage the asynchronous loading state. The resulting metrics are rendered as plain text in a large `<pre>` element, while the original smiley face SVG markup remains commented out in the HTML.

Jun 10, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL, displaying summary statistics about the dataset. It fetches a CSV file containing CSS named colors and reports the file size in kilobytes, the number of rows, and the number of columns in a large-text HTML element. The code uses `d3.csv` to fetch and parse the data, followed by `d3.csvFormat` and `data.length` to compute metrics. The page also includes commented-out alternatives using the Fetch API with async/await and `d3.csvParse`.

Jun 9, 2021

Loading thumbnail…

Fork of Smiley Face Part II

A React application renders a smiley face as an SVG, with a yellow circle for the head and two smaller circles for eyes. A third circle tracks the mouse cursor's position, moving dynamically across the screen as the user moves the pointer. The code uses React's `useState` and `useCallback` hooks to manage and update the mouse coordinates, and `ReactDOM.render` to mount the component. The SVG's `onMouseMove` event triggers the position update, creating an interactive visual where the tracked circle responds in real time to cursor movement.

Jun 8, 2021

Loading thumbnail…

Fork of Hello HTML

This example displays a 6x3 grid of cartoon faces, each with a yellow circular background, black stroke, two eyes, and an arched mouth. The faces are rendered as React components using SVG elements, with each face’s eye radius, mouth width, and mouth radius randomized on every render. The code leverages React’s functional components, `d3.range` for array generation, and the `d3.arc` API to draw the mouth path, all composed within a custom `FaceContainer` that wraps the SVG output.

Jun 7, 2021