Stoockbroker

@Stoockbroker·4 public vizzes

Fork of Rendering Data with React & D3

This example visualizes CSS named colors as a radial burst, with each color rendered as a colored div. It loads color data from a remote CSV file using the `csv` function from D3 v5, and manages the asynchronous data fetching with React’s `useState` and `useEffect` hooks. The React app displays a “Loading...” message until the data arrives, then maps each row to a div whose background color is set from the data’s `color` field. The visualization is built with React 16.9 and uses D3 solely for data parsing.

Jan 24, 2021

Loading thumbnail…

Fork of Mouse Follower

A React SVG circle tracks the mouse in real time within a 960x500 viewport. The application uses React hooks `useState` and `useCallback` to manage and update the circle's position on every `onMouseMove` event on the SVG element. Rendered with `ReactDOM`, the circle has a fixed radius of 30 pixels and responds directly to client cursor coordinates, demonstrating a simple interactive state-driven visualization without external data sources.

Jan 12, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

This gallery piece displays a static smiley face constructed from three SVG circles: a large yellow head with a black stroke and two smaller eyes positioned symmetrically on either side. The work is built with React and rendered as SVG, using hard-coded coordinates and radii. The code loads React and ReactDOM from a CDN, but the visible display comes directly from the trailing SVG markup, not from the React component, which only outputs a heading. The example thus contrasts a functional React setup with a purely declarative SVG drawing.

Jan 2, 2021

Loading thumbnail…

Fork of Hello HTML

This example displays a single yellow circle centered on a 960-by-500 SVG canvas, outlined with a thick black stroke. The page is a minimal HTML document with a full-bleed body style and hidden scrollbars. It uses inline SVG markup within the HTML, directly defining the circle element with explicit `fill`, `stroke`, and `stroke-width` attributes, and does not employ any external JavaScript or visualization libraries. The data is static and hard-coded into the markup.

Jan 2, 2021