JannaBe27

@JannaBe27·4 public vizzes

Loading and Parsing CSV Data

This example demonstrates how to fetch and parse CSV data from a remote URL using the browser's built-in `fetch` API. The code asynchronously retrieves a gist containing CSS named colors and logs the raw text response to the console. It uses an asynchronous `fetchText` helper function that awaits the network request and returns the response as text. The visualization itself does not render any graphics; it focuses solely on the data-loading and parsing workflow in a React environment.

Aug 31, 2021

Loading thumbnail…

Mouse Follower

A yellow circle follows the mouse cursor across a blank SVG canvas. The visualization demonstrates React mouse event handling, with the circle's position updating in real time based on the user's pointer movement. The code uses React's `useState` and `useCallback` hooks within a functional component, rendering an SVG `<circle>` element whose `cx` and `cy` attributes are set from the `clientX` and `clientY` coordinates captured by the `onMouseMove` event. The viewport is fixed at 960 by 500 pixels.

Aug 13, 2021

Loading thumbnail…

Smiley Face Part 1

This example shows a smiling face built from yellow circle background, black eyes, a d3.arc-based mouth, a rectangular nose, and four rotated rectangle accents for hair and cheeks. The React components (BackgroundCircle, Eyes, Mouth, Nose) pass parameters like radius, offsets, and arc angles to render SVG elements centered on a 960x500 canvas. The d3.arc() API generates the mouth path with inner and outer radii, while all other shapes use plain SVG circle and rect tags within a transformed group.

Aug 11, 2021

Loading thumbnail…

Fork of Smiley Face Part 1

This example renders a stylized smiley face using SVG primitives within a React component. The face is centered on a 960 by 500 canvas, featuring a yellow circle head, two black eyes, a nose, eyebrows, and a mouth drawn with d3.arc. The code imports the arc function from d3 and constructs the mouth path with inner and outer radii and specified start and end angles. Additional facial features are positioned via SVG circles, rectangles, and an ellipse, all transformed relative to the center point.

Aug 10, 2021