Kunal Kabra

@kunalkabra46·4 public vizzes

Smiley Face Part II

A grid of randomized smiley faces fills the screen, each with a yellow circular head, black outline, eyes, and an arc-based mouth. The faces vary in stroke width, eye size and position, and mouth dimensions due to randomly generated values. Built with React and D3 v7, the visualization uses reusable components like `BackgroundCircle`, `Eyes`, and `Mouth`, with the latter employing the `arc()` API. SVG rendering is handled via a `FaceContainer` that translates each face to a shared center point.

Dec 10, 2022

Loading thumbnail…

Smiley Face Part II

A full-window smiley face is drawn as a yellow circle with black outlines, two eyes, and an arc-shaped mouth. The visualization uses React to define the SVG structure and D3’s `arc` generator to create the mouth path, with all positions computed relative to the window dimensions. Circle elements render the face and eyes, while the mouth’s inner radius and start/end angles are set via D3’s arc API. The code runs in a React production build, using D3 v7 and ReactDOM to mount the component into the page’s root element.

Dec 10, 2022

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a full-window smiley face rendered with React and SVG, using D3’s `arc` generator to draw the mouth and plain circle elements for the eyes and head. The face scales to the browser viewport, with the head sized relative to the window height and the mouth centered via a half-circle arc spanning from 90 to 270 degrees. Coordinates for the eyes and mouth are fixed offsets from the center, and the SVG is built declaratively inside a React component using JSX.

Dec 10, 2022

Loading thumbnail…

Smiley face part 1

This example displays a single yellow smiley face drawn as a basic SVG circle centered on a 960 by 500 canvas. The face uses a fixed radius and a black stroke with a defined width, leaving the interior filled with yellow. The visualization is built with React 18, using JSX to declare the SVG `<circle>` element, and is rendered into the DOM via `ReactDOM.render`. The code defines constants for the center coordinates and stroke width to position the shape.

Dec 6, 2022