Sreynit Khatt

@sreynit02·3 public vizzes

Smiley Face with JS and React

This example renders a classic smiley face as a React component, using SVG for display. It builds the face from primitive shapes: a yellow circle for the head, black-stroked eyes, and a mouth drawn with the D3 `arc` generator. The D3 arc creates a semicircular path by specifying inner and outer radii, a stroke width, and start/end angles, while React manages the SVG elements and JSX markup. The visualization demonstrates a minimal integration of D3’s geometry utilities with React’s declarative rendering in a static, non-interactive diagram.

Feb 14, 2024

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a yellow smiley face rendered across the full browser window, with two black eyes positioned symmetrically on the face. The face is drawn using React and ReactDOM, with SVG circle elements for the head and eyes, and a black stroke for the outline. The dimensions and positions are calculated from the window’s width and height, centering the face and scaling the head radius relative to the available space. The code also includes an empty mouth region, though its radius is defined but not drawn.

Feb 14, 2024

Loading thumbnail…

Fork of Smiley Face Part II

A React application renders a full-screen smiley face using SVG. The face consists of a yellow circle with a black stroke, two black eyes, and is centered using a coordinate transform. The code uses React and ReactDOM to render the SVG elements, with dimensions and offsets calculated from the browser window size. The face scales its radius relative to the viewport height, creating a responsive visualization that adapts to any screen resolution.

Feb 14, 2024