Brian Musisi

@brianmusisi·3 public vizzes

Smiley Face Part II

A yellow smiley face follows the mouse cursor across a full-screen SVG canvas. As the pointer moves, the face's position updates in real time through React state and event handling. The implementation uses React 16.9 with the `useState` and `useCallback` hooks within an SVG `circle` element, responding to `onMouseMove` events to set the circle's `cx` and `cy` coordinates.

Sep 12, 2020

Loading thumbnail…

Smiley Face Part 1

A grid of six-by-three smiley faces renders as React components, each face composed of SVG circles and an arc path. The code reassembles a face from reusable components—BackgroundCircle, Eye, Mouth, and Glisten—inside a FaceContainer that translates the SVG group. Each instance receives randomized eye radius, mouth width, and mouth radius via d3.range and Math.random, while d3.arc generates the mouth path. The example demonstrates composable SVG primitives within React, using d3.v6 for arc generation without any external data source.

Sep 12, 2020

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to fetch and parse a remote CSV file containing CSS named colors, logging the raw text to the browser console. It uses the Fetch API’s `fetch` and `response.text()` methods within an async/await function to retrieve the data from a GitHub Gist URL. The visualization itself is minimal—no chart or graphic is rendered—and instead focuses on the fundamental step of loading tabular data for later inspection or processing.

Sep 12, 2020