Tabassum Kakar

@tkakar·3 public vizzes

Mouse Follower

This example shows a simple interactive visualization where a smiley face follows the mouse cursor across the screen. The face is composed of SVG circles for the head and eyes, rendered with React and ReactDOM, which update the circle positions based on the cursor's location. The code uses `window.innerWidth` and `window.innerHeight` to set the canvas size and calculates eye offsets to position the features relative to the mouse.

Apr 18, 2022

Loading thumbnail…

csvparser

This example demonstrates fetching a CSV file containing CSS named colors from a remote GitHub gist and parsing it with D3.js (v5). The page displays a large static “Hello HTML!” message, while the JavaScript console logs the number of parsed data rows using `d3.csvParse` on fetched text, and also logs the column count and formatted CSV length via the `d3.csv` function. The code uses the Fetch API for async requests and D3’s CSV utilities to handle the data.

Apr 14, 2022

Loading thumbnail…

Face Part 1

A grid of procedurally generated cartoon faces shows variation in eye size, eye spacing, and mouth curvature. Each face is rendered as an SVG using React components for the face circle, eyes, and mouth. The code employs the D3 `arc` API to create the mouth path, while `d3.range` generates the repeating array of faces. Random values for eye radius, offset, and mouth dimensions drive the visual differences.

Apr 13, 2022