TemoSmoev

@TemoSmoev·4 public vizzes

loading data with React & D3

This example demonstrates how a React component can load external data using D3 utilities and manage the result with React state. The app fetches a CSV file from a GitHub gist containing CSS color information, uses `d3.csv` to parse the response, and logs the parsed data to the console. React’s `useState` and `useEffect` hooks handle the asynchronous data-loading process, while the component renders a simple heading. The file loading relies on the Fetch API and D3’s `csv` parser in a React 18 environment.

Jun 15, 2022

Loading thumbnail…

A program that follows your mouse with a circle.

A circle follows the mouse cursor across an SVG canvas, with its position updating in real time as the pointer moves. The code uses React's `useState` hook to track the cursor's client coordinates and re-renders the circle's `cx` and `cy` attributes accordingly. The example imports `range` from d3.v7 and builds an SVG element with a mouse-move event handler that captures the cursor's position. No data visualization occurs; the interaction is purely a demonstration of event handling and state-driven SVG rendering in a React environment.

Jun 14, 2022

Loading thumbnail…

Smiley face Part I

A grid of eighteen smiley faces, each with randomized eye and mouth sizes, demonstrates how to build reusable React components for SVG visualization. The faces are composed of a yellow circle, two eyes, and a mouth generated using d3’s `arc` generator for the curved path. Using React and d3.v7, the example renders SVG elements through functional components like `BackgroundCircle`, `Eyes`, and `Mouth`, nested inside an `FaceContainer` that handles the SVG coordinate system and translations. Each face is drawn independently, producing varied expressions across the repetition.

Jun 13, 2022

Loading thumbnail…

Fork of Hello HTML

A minimal SVG circle is drawn directly within an HTML page, centered on a yellow-filled, black-outlined circle against a white background. The example demonstrates static vector rendering without any JavaScript libraries or data processing. It uses only native SVG elements inside a 960×500 viewport, with the circle's position and radius defined as literal attributes. The rendering relies on the browser's built-in SVG support, making it a simple illustration of basic shape output rather than an interactive or data-driven visualization.

Jun 13, 2022