Sergio Razza

@serchuz·4 public vizzes

Load Data in React

This example demonstrates how to load and parse a CSV file in a React application using D3’s `csv` method. It fetches the CSS named colors dataset from a GitHub gist and displays a summary message showing the file size in kilobytes, row count, and column count. The React `useState` and `useEffect` hooks manage the asynchronous data loading, while `csvFormat` calculates the data size. Before the data arrives, a "Loading...." placeholder is shown in a large `pre` element.

Nov 12, 2020

Loading thumbnail…

Load and parse data from CSV

This example demonstrates how to load and parse a CSV file from a remote URL using D3 v6. It fetches the raw text of a gist containing CSS named colours, then parses it into a JavaScript array of objects with `d3.csvParse`. The parsed data is logged to the browser console, showing the structured result of the CSV conversion. The code uses the native `fetch` API alongside D3’s `csvParse` to handle the asynchronous data retrieval and parsing workflow.

Nov 12, 2020

Loading thumbnail…

Smiley Face Part II

A lone black circle follows the cursor across a blank, full-window SVG canvas. Built with React, the app tracks the pointer's coordinates through the `onMouseMove` event, stores them in state with `useState`, and re-renders a single `<circle>` element at the current position. The example uses React 16.9 and ReactDOM to update the SVG in real time, demonstrating a minimal interactive visualization driven by mouse input.

Nov 12, 2020

Loading thumbnail…

Smiley Face Part 1

A smiley face rendered as a yellow SVG circle with black outline, two eyes, and a smiling mouth, centered on a blank canvas. The visualization uses React components for each facial feature, with D3’s `arc` generator defining the mouth’s curved path. Hardcoded dimensions for eye offset and radius, mouth radius, and stroke width control the proportions. The scene is drawn entirely via SVG primitives within a single `<g>` transform, with no interactive or animated behavior.

Nov 11, 2020