aramys.q8@gmail.com

@AramysQA·3 public vizzes

Mouse tracker

The mouse tracker shows a single gray-outlined circle following the pointer across an SVG canvas. It demonstrates React’s state management by updating the circle’s center coordinates on every mouse movement via the `onMouseMove` event. The code uses React hooks `useState` and `useCallback`, with `clientX` and `clientY` from the browser event to set the new position. The visualization is purely interactive, with no external data, rendering the circle at a fixed radius of 30 pixels within a 960×500 viewport. The lightweight React setup relies on production builds of React and ReactDOM, and the SVG is generated directly in JSX.

Mar 23, 2024

Loading thumbnail…

Loading data with fetch

This example demonstrates how to load a CSV file of CSS named colors using the Fetch API and log its contents to the browser console. The code defines an asynchronous function that retrieves text data from a GitHub Gist URL, then calls that function and outputs the raw text response. It relies on the native `fetch` method and async/await syntax rather than a visualization library. The data source is a static CSV file hosted externally, and the example focuses on the data-loading step rather than any chart or graphical rendering.

Mar 23, 2024

Loading thumbnail…

Face SGV

Face SGV is a React-based smiley face visualization that renders a classic emoji-style face using SVG primitives. The graphic shows a yellow circle with a black stroke, two black eyes, and a curved mouth, all centered within a fixed 960×500 viewport. The code leverages React 16.9 for component rendering and D3 v5’s `arc` generator to define the mouth path, while static `circle` elements handle the face and eyes. All shapes are positioned relative to a central transform, with dimensions and offsets (like `eyeOffsetX` and `mouthRadius`) hardcoded as constants. No external data is involved; the visualization is purely programmatic, relying on SVG’s declarative model.

Mar 23, 2024