Diego Isla López

@jeudicode·3 public vizzes

Mouse Follower

A smiling face drawn with React SVG components follows the mouse cursor across the screen. The face is composed of reusable React components (BackgroundCircle, Eyes, Mouth) that use d3.arc for the mouth path. The app tracks mouse movement via React’s onMouseMove and useState hook, updating the circle’s cx and cy coordinates in real time. The visualization demonstrates interactive, state-driven rendering with React 17 and d3.v7, tightly coupling user input to SVG output.

Aug 20, 2021

Loading thumbnail…

fetching

This example demonstrates a minimal web page that fetches a CSV file from a remote URL and logs its contents to the browser's console. The page uses the JavaScript `fetch()` API to asynchronously retrieve the text data, with the response handled through the `.then()` method. The HTML page is styled with simple CSS to center the large "Hello HTML" text on the screen, providing a static visual backdrop. The example focuses on the data retrieval process itself, showing how to connect a web page to an external data source using standard web technologies.

Aug 20, 2021

Loading thumbnail…

face VI

A smiling face built from basic SVG shapes, with a pink circular head, two black eyes, and a semi-circular mouth. The code splits the face into reusable React components (BackgroundCircle, Eyes, Mouth, and FaceContainer) and composes them with fixed, hard-coded size values passed as props. The mouth uses d3.arc to generate the path’s coordinate data. The final SVG renders at 960 by 500 pixels, centered with a 10-pixel stroke outline.

Aug 18, 2021