Yu Nazarova

@Shatokua·3 public vizzes

Mouse Interaction

A mouse-following circle rendered as a React SVG component tracks the cursor's position across the full viewport. The circle is fixed at the center of the window, while the `onMouseMove` event handler logs the `clientX` and `clientY` coordinates to the console. The code uses React 16.9.0 with `ReactDOM.render` to mount an SVG element sized to `window.innerWidth` and `window.innerHeight`. No external data source is involved; the interaction is purely based on browser mouse events.

Mar 15, 2021

Loading thumbnail…

CSS Colors Yolka

This example displays the CSS color names from a CSV file as oversized, page-filling text. It fetches the data from a GitHub-hosted CSV using the Fetch API, then logs the raw text to the browser console. The visualization itself is minimal, relying on HTML and CSS centering and a 13em font size to present the color names as the dominant visual element, with no additional charting library or rendering logic.

Mar 15, 2021

Loading thumbnail…

Smiley Face I Yolka

This example displays a grid of stylized smiley faces, each generated with randomized facial feature positions and sizes, creating a playful variety of expressions. The faces are rendered as SVG elements using React components, with each face composed of a yellow circle, two eyes, a smile, and a hat. The code builds these compositions using ReactJS and the D3.js library, specifically utilizing `d3.arc` to define the mouth path and `d3.range` to generate the grid of faces.

Mar 14, 2021