atqlong

@atqlong·7 public vizzes

Fork of Loading Data with React & D3

This example visualizes the CSS named colors dataset as a donut chart, with each slice colored according to its corresponding RGB hex value. The visualization uses React state to manage loading the CSV data asynchronously through the `csv` utility from D3 v5. Once loaded, the data is rendered as SVG path elements using the `arc` generator from D3, with each slice’s angle proportional to its position in the dataset. The React component displays a “Loading…” message until the data arrives.

Jan 19, 2022

Loading thumbnail…

Loading D3 and React

This example shows a minimal React application that loads a CSV file of CSS named colors using D3 and displays the raw data as text. The code imports `useState` from React and the `csv` function from D3. It fetches data from a gist URL with `d3.csv`, then uses the asynchronous result to update the component's state. The page renders the data array directly within a `div` element, demonstrating a simple integration of D3's data-loading capabilities inside a React component.

Jan 19, 2022

Loading thumbnail…

Mouse Follower

A single gray circle follows the mouse cursor across an SVG canvas, creating a direct and responsive visual interaction. The example demonstrates how React manages the circle's position through state, with an `onMouseMove` event handler updating the cursor coordinates on every movement. D3's `d3.min.js` library is loaded but not used for any calculations or rendering, as the visualization relies entirely on React's `useState` hook and ReactDOM to draw the SVG circle. The full-screen, borderless layout keeps the focus on the smooth, real-time tracking of the pointer.

Jan 17, 2022

Loading thumbnail…

Loading data from a CSV

This example demonstrates loading data from a CSV file using the Fetch API. It fetches a remote CSV containing CSS named colors and logs the raw text response to the browser console. The page uses async/await syntax with `fetch` and `response.text()` to handle the network request. No visualization is rendered; the focus is solely on retrieving and inspecting the CSV content.

Jan 17, 2022

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates the initial step of loading and parsing a CSV file in a web page, displaying a placeholder message with oversized text. It fetches a dataset of CSS named colors from a GitHub Gist using the Fetch API, logging the resulting Promise to the console. The code uses plain JavaScript within an HTML file, with no external libraries or frameworks, and relies on the `fetch()` function to handle the asynchronous data request.

Jan 17, 2022

Loading thumbnail…

Fork of Smiley Face Part III

A React component composes D3 arc shapes into a smiling face, drawn as SVG circles and a path. The face uses separate components for the yellow background circle, eyes, and mouth, with D3’s `arc()` generating the curved smile from specified radii and angles. React renders the SVG via `FaceContainer`, while the D3 arc API computes the mouth path. Built with d3.v5 and React 16.9, the example demonstrates declarative component reuse and geometry-based shape generation.

Jan 17, 2022

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple smiley face built with React and D3, rendered as SVG. It draws a yellow circle with a black stroke, two eyes, and a curved mouth using the `d3.arc()` generator. The face is centered via a `<g>` transform, with eye and mouth positions computed from offset constants. The code uses React 16.9 for DOM rendering and D3 v5 for the arc path calculation, with all shapes drawn declaratively as SVG elements.

Jan 15, 2022