Srinivasan KR

@krsrini·4 public vizzes

Mouse Follower

This interactive visualization renders a blank SVG canvas where a single circle follows the mouse cursor. Implemented with React and ReactDOM, the program updates the circle's cx and cy coordinates based on pointer movement. The SVG viewport is set to 960 by 500 pixels, and the circle has a fixed radius of 30 pixels, creating a simple but responsive pointer-tracking effect.

Jan 12, 2022

Loading thumbnail…

Loading and Parsing CSV data

This example demonstrates the initial step of loading and parsing CSV data from an external URL. It fetches a CSS named colors CSV file from GitHub Gists using the browser’s Fetch API and logs the raw text response to the console. The code defines an async `fetchText` helper that retrieves the file and returns its contents as text, then displays the parsed result for further processing.

Jan 8, 2022

Loading thumbnail…

Smiley Face Part 1

A grid of eight cartoon smiley faces, each rendered independently with randomized facial features, demonstrates how React components compose with D3-generated paths. The faces vary in eye offset, eye radius, stroke width, and mouth curvature. The visualization uses React for component structure and state, while D3’s `arc` function creates the mouth shape. Each face is drawn as SVG circles and paths within a shared `FaceContainer`, with `d3.range` supplying the iteration count for the grid of faces.

Jan 7, 2022

Loading thumbnail…

Fork of Smiley Face Part III

Built with React and D3 v5, this example renders a smiley face as an SVG composed of layered geometric shapes. A yellow circle forms the head, with two smaller circles for eyes and an arc-generated path for the mouth, all positioned using D3's `arc()` generator and SVG transforms. The code uses React components to structure the markup, while D3 handles the mouth's curved path calculations. The face is centered within a 960 by 500 viewport, with all coordinates and radii defined as constants.

Jan 6, 2022