marvell99

@marvell99·5 public vizzes

Fork for Mouse Follower Project

A circle follows the mouse position inside an SVG canvas. The React-based app uses a `useState` hook to track mouse coordinates and updates the circle's `cx` and `cy` attributes accordingly. The visualization relies on React's event handling and direct SVG rendering, with D3 loaded but not actively used in the interaction logic.

Jan 17, 2022

Loading thumbnail…

Fork Smiley*

This example shows a classic smiley face rendered as an SVG graphic, composed of a yellow circular background, two black eyes, and a curved mouth. The visualization is built using React components, with each facial feature (BackgroundCircle, Eyes, Mouth) defined in its own file. The SVG output is assembled by positioning these components within a transformed group. The mouth shape is generated using the D3.js arc API, which creates a path with specified inner and outer radii and angle parameters. The code defines all dimensions and positions as constants, making the smiley face easily customizable.

Jan 14, 2022

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load a remote CSV file containing CSS named colors and output its raw text to the browser console. It uses the Fetch API with an asynchronous `fetchText` function that retrieves the file and converts the response to text via `response.text()`. The data source is a GitHub Gist URL, and the code provides a straightforward pattern for fetching and parsing CSV data without relying on external parsing libraries.

Jan 13, 2022

Loading thumbnail…

Fork of Smiley Numba One

This example shows a grid of 18 randomly generated smiley faces, each composed of SVG circles and an arc path. The faces vary in eye position, eye radius, mouth width, and stroke thickness due to randomized parameters. The visualization is built with React and D3, using the `range` API from D3 to create the array of faces and the `arc` API to generate the mouth path. Each face is rendered as a separate SVG element within a shared container.

Jan 13, 2022

Loading thumbnail…

Smiley Numba One

This example renders a simple, cheerful smiley face using React components and SVG. The face consists of a yellow background circle, two black eyes, and a mouth created with a D3 arc path. The React components BackgroundCircle, Eyes, and Mouth are composed within an SVG, with the D3 arc() API generating the curved mouth shape. The rendering is fully data-driven through props like radius, eyeOffsetX, eyeRadius, and mouthRadius, demonstrating a modular approach to building static SVG visualizations with React.

Jan 13, 2022