NclKgn

@NclKgn·6 public vizzes

Loading data with React D3

This example demonstrates how to load external data using D3 utilities and manage it with React state. The application fetches a CSV file containing CSS named colors using d3.csv, then stores the parsed data in React’s useState hook. The rendering shows the raw data object in the DOM via ReactDOM.render. It combines React 16.9’s hooks with D3 v5’s asynchronous data loading and csv formatting APIs, providing a basic template for integrating D3 data loading into React component workflows.

Apr 14, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file containing CSS named colors, displaying summary statistics such as file size, row count, and column count. The code uses D3.js v5's `d3.csv` method to fetch and parse the data asynchronously, while a commented alternative shows the same process using the Fetch API with `await` and `d3.csvParse`. The output is presented as large text within an HTML `<pre>` element.

Apr 14, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a yellow circle that follows the mouse cursor across an SVG canvas. Built with React, it uses the `useState` hook to track mouse coordinates and the `useCallback` hook to handle the `onMouseMove` event. The circle’s position is updated by setting the `cx` and `cy` attributes based on the pointer’s client coordinates. The visualization is rendered using React’s `ReactDOM.render` into a root element, with SVG as the output format.

Apr 12, 2021

Loading thumbnail…

Untitled

This example demonstrates how to fetch and parse a CSV file containing CSS named colors using the Fetch API and Promises in JavaScript. The code loads data from a GitHub Gist URL and logs the raw response object to the browser console, showing the initial step of handling asynchronous data retrieval. It uses the native `fetch` function, followed by a `.then()` method to access the response, though it does not yet parse or visualize the CSV contents. The example serves as a minimal introduction to loading external data for future React-based visualization projects.

Apr 12, 2021

Loading thumbnail…

Untitled

This example demonstrates asynchronous data loading in React by fetching a CSV file of CSS named colors and parsing the response. The code uses the browser’s `fetch` API with Promises to request the dataset from a GitHub Gist, then logs the response object to the console. It focuses on the initial steps of handling network requests and inspecting the raw response structure, without yet rendering the data visually or applying any parsing logic. The interaction is limited to observing the fetched result in the developer tools.

Apr 12, 2021

Loading thumbnail…

Smile

This smiley face visualization displays a simple, static facial graphic composed of three geometric shapes: a large yellow circle for the head and two smaller black-outlined circles for the eyes. The image is rendered directly as inline SVG elements within the HTML. The code imports React 17 and ReactDOM, though it relies primarily on raw SVG markup—including circle properties like `cx`, `cy`, `r`, and `stroke-width`—rather than dynamic React components or JavaScript-driven data, working as a fixed, minimal illustration.

Apr 8, 2021