Polina Sysoeva

@psysoeva·6 public vizzes

Mouse follower

A React application renders an SVG circle at the center of a 960 by 500 viewport. The component uses the `useState` hook to track mouse position, with an `onMouseMove` handler on the SVG element that logs client coordinates to the console upon mouse movement. The visualization demonstrates basic event handling and state management in React, though the logged coordinates are not yet used to update any visual elements.

Jan 25, 2022

Loading thumbnail…

Loading and parcing CSV

This example demonstrates the initial step of loading and parsing a CSV file from a remote URL. The page fetches the raw text data from a GitHub gist and outputs the contents directly to the browser console, showcasing the raw format before any transformation. The implementation uses the JavaScript `fetch` API with an asynchronous function to retrieve the text, and calls `console.log` to display the unparsed CSV data. No visualization or charting library is employed, as the focus is solely on the data acquisition and inspection stage.

Jan 25, 2022

Loading thumbnail…

Let's Make a Face Part IV - VI

The gallery presents a grid of randomly generated smiley faces, each composed of stacked SVG primitives: a yellow background circle, two eyes, and a mouth. The faces vary in stroke width, eye offset, eye radius, and mouth dimensions, demonstrating parameterized component reuse. The code builds each face from React components, with the mouth using D3's `arc` generator to create a curved path. Rendering is handled by React and ReactDOM, with D3 v7 used for range generation and the mouth's arc geometry.

Jan 24, 2022

Loading thumbnail…

Let's Make a Face Part III

A smiling face rendered with SVG, built using React and D3. The code draws a yellow circle with a black stroke, two black eyes, and a mouth created via the `d3.arc()` generator with specified inner and outer radii and angular range. React components define the SVG elements, while D3’s arc path computes the mouth shape. The face is centered using SVG group transformations.

Jan 22, 2022

Loading thumbnail…

Let's Make a Face Part II

A smiley face rendered as two black eyes on a yellow circular head, built with React 16.9 and SVG. The component defines fixed dimensions for the canvas, calculates the face’s center, and uses offset constants for eye positions, with stroke width and radius as explicit variables. It renders three circles: a yellow outer circle with a black stroke, and two smaller black eyes placed symmetrically around the center. The code uses ReactDOM to mount the component into a root element, with styling that hides page overflow.

Jan 22, 2022

Loading thumbnail…

Fork of Let's Make a Face Part I

A yellow circle with a black outline forms the base of a simple face, centered in an SVG canvas. Two smaller black circles serve as eyes, positioned symmetrically on either side of the face’s vertical midline. The code renders directly to SVG elements using static `<circle>` tags, with inline attributes for coordinates, radius, fill, and stroke. No JavaScript libraries or interaction are present; the visualization is a purely declarative HTML and SVG composition, with styling applied through a minimal embedded CSS rule that hides page margins.

Jan 21, 2022