Krzesimir04

@Krzesimir04·4 public vizzes

circle and mouse

A circle follows the mouse cursor inside an SVG canvas. The example demonstrates React's state management and event handling by updating the circle's center coordinates on every mouse move. Built with React 16.9 and ReactDOM, it uses the `useState` hook to store the mouse position and the `onMouseMove` event to update it. The circle's `cx` and `cy` attributes are bound directly to the state, causing the SVG to re-render responsively.

Mar 27, 2022

Loading thumbnail…

Load data from csv

This example demonstrates loading a CSV file from a remote URL and printing its raw text to the console. It uses the native JavaScript `fetch` API to retrieve the file and the `response.text()` method to extract the content from the HTTP response. The data source is a gist containing named CSS colors. No visualization is rendered; the example focuses solely on the data-loading step, returning text via async/await.

Mar 27, 2022

Loading thumbnail…

Smiley Face Part V

Eighteen instances of a smiley face, rendered as SVG graphics within a React application, are displayed in a grid. Each face is composed of a yellow background circle, two black eyes, and a curved mouth, with randomly varied dimensions and stroke widths for each component. The visualization demonstrates the use of React components for modular structure and D3’s `arc` API to generate the mouth’s path. The `range` function from D3 generates the array used for iteration, while the random variations show how parameters can drive distinct visual outcomes.

Mar 27, 2022

Loading thumbnail…

Fork of Smiley Face Part III

This example shows a yellow smiley face rendered as an SVG using React and D3. The face is built with a large yellow circle for the head, two smaller black circles for the eyes, and a curved mouth path created with the D3 `arc` generator. The code uses React’s declarative JSX to define the SVG elements and D3 v5’s `arc` function to compute the mouth’s path geometry based on specified radii and angles. All elements are positioned relative to a central transform, with dimensions hardcoded in the component.

Mar 27, 2022