Giulio Bontadini

@GiulioBontadini·4 public vizzes

interact with user via REACT

A React application renders a full-window SVG containing a single circle that follows the mouse cursor in real time. The code uses React’s `useState` hook to store the cursor position, initialized at the window’s center, and updates it through the `onMouseMove` event listener on the SVG element. The browser’s `clientX` and `clientY` event properties drive the circle’s `cx` and `cy` attributes. The project relies on React and ReactDOM from unpkg, rendering via SVG with no external data source.

Jul 4, 2021

Loading thumbnail…

Loading and Parsing CSV data

This example demonstrates the initial step of loading and parsing a remote CSV file containing named colours. The code uses the JavaScript `fetch` API within an asynchronous function to retrieve the text data from a GitHub gist URL. It then logs the fetched content to the browser’s developer console, highlighting the difference between handling a promise directly and accessing the resolved text. No chart or visual rendering occurs; the focus is solely on data acquisition and inspection.

Jul 4, 2021

Loading thumbnail…

Understanding the basics of FETCH API

This example demonstrates the JavaScript Fetch API for retrieving remote resources, using a CSV file of named colors hosted in a GitHub gist as the data source. It logs the initial promise object and its resolved Response to the browser console, then shows how to access the response body via the `response.text()` method. The code also highlights the limitation of reading the body stream only once and introduces the nested `.then()` pattern for handling asynchronous operations before mentioning the alternative async/await syntax. The page itself renders no visual output, relying entirely on the developer console for observation.

Jul 4, 2021

Loading thumbnail…

Giulio's HTML Starter

A grid of one hundred cartoon faces, each generated with random parameters, fills the page. The faces show varied expressions through pupil position, eye size, strabismus, mouth shape, and stroke width. The visualization is built with React and D3, using SVG circles for eyes and the d3.arc API for mouths. Props control appearance, with random values assigned to variables like pupil direction and mouth smile in the component tree.

Jul 3, 2021