BugGreen

@BugGreen·4 public vizzes

Mouse Follower

A black circle follows the mouse cursor across a full-screen SVG, updating its position in real time as the cursor moves. The example uses React's `useState` and `useCallback` hooks to track the cursor's `clientX` and `clientY` coordinates, which are then passed as `cx` and `cy` attributes to the SVG `<circle>` element. The circle renders dynamically within an SVG canvas sized to the browser window, with ReactDOM mounting the component to manage updates.

Nov 18, 2021

Loading thumbnail…

csv data

A minimal React-free demonstration fetches and logs raw CSV text from GitHub-hosted color data. The page uses the Fetch API and `response.text()` to retrieve the file, though no parsing or visualization occurs. The code highlights the initial step of loading external tabular data, with the raw output appearing in the browser console via `console.log`.

Nov 17, 2021

Loading thumbnail…

Fork of Smiley Face Part II

A React and D3 v7 component renders a smiling face as an SVG graphic, composed of a yellow background circle, two black eyes, and a curved mouth. The face is drawn using reusable components like `BackgroundCircle`, `Eyes`, and `Mouth`, with the mouth generated by the `d3.arc()` API. The SVG is centered within a 960×500 viewport, with all coordinates and dimensions defined as constants. The example demonstrates how to combine React’s component model with D3’s shape generators for declarative, data-driven visualization.

Nov 17, 2021

Loading thumbnail…

Smiley Face Part II

This example renders a smiley face using React and SVG, scaling its size to fill the browser window. The face is centered by translating a group element to the middle of the viewport, with the head radius computed from the window height and a fixed stroke width. Eye positions and radii are defined as constants (eyeOffsetX, eyeOffsetY, eyeRadius) and rendered as two circles. The visualizations uses React's `React.createElement` and `ReactDOM.render` to draw the SVG elements procedurally, adapting the face to any screen dimensions.

Nov 17, 2021