osaidhashmi31

@osaidhashmi31·5 public vizzes

Fork of Fork of Fork of Smiley Face Part 4

A smiley face built with SVG shapes, rendered entirely through React components and D3’s arc generator. The code defines a yellow background circle, two fixed-position eyes, and a mouth created using the `d3.arc()` API with specified inner and outer radii plus angular extents. The React app imports `arc` from D3 v7, mounts to a root div, and centers elements via a `translate` transform on a group. No external data is loaded; the visualization is purely geometric and static.

Aug 30, 2021

Loading thumbnail…

Fork of Fork of Fork of Smiley Face Part 3

This example renders a yellow smiley face composed of a large circle, two smaller circles for eyes, and an arc for the mouth. The entire face is drawn as an SVG group centered on the canvas, with all shapes positioned relative to that center. The code uses React for the component structure and `d3.arc` from D3 v7 to generate the mouth path. Y-coordinates for the eyes are negative, placing them above the center. The mouth is drawn as an arc between π/2 and 3π/2 radians.

Aug 30, 2021

Loading thumbnail…

Fork of Fork of Smiley Face Part 3

A yellow smiley face is drawn in an SVG, centered within a 960 by 500 viewport. The face consists of a large yellow circle with a black stroke, two smaller circles for eyes, and a curved arc for the mouth. The visualization uses React to render the SVG elements, with the mouth arc generated programmatically using the `d3.arc()` API. All shapes are positioned relative to a central group element using a `translate` transform, and the code defines specific variables for radii, offsets, and stroke widths.

Aug 30, 2021

Loading thumbnail…

Fork of Smiley Face Part 2

A yellow smiley face rendered with React and SVG occupies the center of a 960 by 500 canvas. Three circles are drawn: a large yellow face with a black stroke, and two smaller black eyes positioned symmetrically on either side of the center. The face’s radius is calculated from the canvas height and stroke width, while eye offsets are fixed constants. ReactDOM renders the SVG elements, with styling applied via inline SVG attributes.

Aug 30, 2021

Loading thumbnail…

Smiley Face Part 1

A yellow circle with a black outline forms the base of a smiley face, with two smaller black circles positioned as eyes. The face is drawn using React components that render SVG shapes, with dimensions and positions calculated from center coordinates and offset constants. React 16.9.0 and ReactDOM 17.0.2 are loaded via UNPKG, and the interactive-less, static visualization is generated through declarative JSX code. The current version shows only the head and eyes, omitting the mouth as indicated by the title and file comments.

Aug 30, 2021