mbindal-10

@mbindal-10·7 public vizzes

Fork of Rendering Data with React

This example displays a color wheel generated from a CSV file, where each slice represents a row and is filled with its corresponding RGB hex value. The visualization uses React’s `useState` and `useEffect` hooks to load data with `d3.csv`, while `d3.pie` and `d3.arc` compute the angular layout and SVG paths. A loading state shows text until the data arrives. The final chart is rendered as SVG elements inside a React component.

Aug 10, 2022

Loading thumbnail…

Rendering Data with React

A React component loads a CSV of color data via `d3.csv` and renders each row as a horizontal strip, using the `RGB hex value` field for the background color. Once the data arrives, the component maps over the array to create a stacked sequence of divs, each 960 pixels wide and 4 pixels tall, forming a continuous color band. The visualization demonstrates React's declarative rendering of external data, with a loading state shown until the asynchronous fetch completes.

Aug 10, 2022

Loading thumbnail…

Loading Data with React and D3

This example demonstrates how to asynchronously load a CSV file from a remote URL using D3’s `csv` method within a React component’s `useEffect` hook. While the data is being fetched, the interface displays a "Loading..." message; once loaded, a summary of the dataset—its size in kilobytes, column count, and row count—is rendered as plain text using the `d3.csvFormat` method. The React state hook `useState` stores the fetched data, and the `message` utility formats the output into a readable string.

Aug 9, 2022

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file using D3.js, displaying summary statistics about the dataset in a large text format. The page fetches a sample CSV file from a GitHub Gist using the `d3.csv` method, which returns a promise with the parsed data. The code then calculates and presents the file size in kilobytes, the number of columns, and the number of rows by using `d3.csvFormat` to reconstruct the CSV text. The statistics are rendered in the browser via the `message-container` element using D3 v7.

Aug 9, 2022

Loading thumbnail…

Mouse Moving

A full-screen SVG scene tracks the mouse cursor with a single circle that updates its center coordinates in real time. Built with React’s `useState` and `useCallback`, the `handleMouseMove` event captures `clientX` and `clientY` from the SVG’s `onMouseMove` listener, then re-renders the circle’s `cx` and `cy` properties. React 16.9 and D3 v5 are loaded via CDN, with the circle’s radius fixed at 30 pixels. The visualization demonstrates declarative state-driven rendering without any data source or animation.

Aug 9, 2022

Loading thumbnail…

Let's Make a Face Part I

A cheerful yellow face with a black outline is drawn repeatedly, producing a grid of randomized facial expressions. The face is composed of separate React components for the background circle, eyes, and mouth, all rendered as SVG elements within a transformed group. Parameters such as eye offset, eye radius, and mouth dimensions are randomly varied for each instance. The code uses React for component structure, D3’s `arc` function to generate the mouth’s arc path, and D3’s `range` to create the array of faces.

Aug 6, 2022

Loading thumbnail…

Fork of Hello HTML

This example displays a simple yellow circle centered on an SVG canvas, framed by a black stroke and accompanied by two smaller unfilled circles. Drawn directly in a static HTML page, it uses SVG elements with explicit `cx`, `cy`, and `r` attributes to position the shapes. The code relies on the native SVG library within the browser, and the rendering is entirely vector-based with no external data sources or interactive behavior. The page’s CSS hides overflow for a clean presentation.

Aug 3, 2022