MateusGaldinoLG

@MateusGaldinoLG·4 public vizzes

React Mouse

A React application renders a single black circle that follows the mouse cursor across the full browser window. The circle’s position updates in real time using React’s `useState` and `useCallback` hooks, driven by an `onMouseMove` event on an SVG element. The SVG canvas sizes itself to `window.innerWidth` and `window.innerHeight`, and the circle starts at the screen’s center. The code relies on React 16.9 and ReactDOM to mount the component, with no additional data sources or rendering libraries beyond plain SVG.

Jan 20, 2022

Loading thumbnail…

Smiley Face Part III

React renders a full-screen SVG smiley face with a yellow circle head, black stroke, two eyes, and an arc-based mouth. The component computes dimensions from window.innerWidth and innerHeight, centering the face dynamically. D3’s `arc()` helper generates the mouth path with specified inner/outer radii and angular range, while `ReactDOM.render` mounts the SVG directly into the DOM. No external data is loaded; all geometry uses static constants for offsets and radii.

Jan 12, 2022

Loading thumbnail…

Smiley Face Part II

A large yellow smiley face fills the entire browser window, sized dynamically to the viewport. The face is drawn with three circles: a yellow head with a black outline, and two black eyes positioned symmetrically. The visualization uses React to render SVG elements, with an SVG coordinate system that centers the face using a transform. The code computes all circle positions and radii from the window dimensions and uses constants for offsets, demonstrating a responsive, code-driven approach to simple geometric drawing.

Jan 12, 2022

Loading thumbnail…

Making a Face

A simple SVG face built with basic shapes offers a playful introduction to static data visualization. The yellow head is a large circle with a black outline, while two smaller unfilled circles serve as eyes, all rendered directly in the HTML markup without any JavaScript libraries. This example demonstrates fundamental SVG drawing through declarative elements like `circle` and `stroke` attributes, showing how raw geometric primitives can compose a recognizable figure. The code uses plain SVG within an embedded `svg` tag, with no external dependencies.

Jan 12, 2022