Fork of Smiley Face Part II

Fork of Smiley Face Part II

This example displays a classic smiley face rendered as an SVG graphic, with a yellow circular head, two black eyes, and a curved mouth drawn using an arc path. The visualization is built with React and D3 v7, using the `arc` function to generate the mouth shape from specified inner and outer radii. The face is centered on the screen and dynamically sized based on the browser window dimensions, with all elements positioned relative to the center point. The code defines constants for eye offset, radius, and stroke width to control the facial features.

JJasmine Ye Han

Fork of Smiley Face Part II

This example shows a smiling face constructed from scalable vector graphics, with the size and position adapting to the browser window. The face features a yellow circle with a black stroke for the head, two black eyes, a smaller nostril in the center, and a thick arc-shaped mouth. The code uses React to manage the SVG elements and the `arc()` function from `d3` to generate the mouth path. All shape dimensions, including eye offsets, radii, and stroke width, are derived from the window dimensions, making the drawing responsive.

GGAItingw

Fork of Smiley Face Part II

A smiley face is rendered as a scalable vector graphic, centered on a yellow circle with black outlines, two eyes, and a curved mouth. The visualization is built with React and D3, using D3’s `arc` generator to create the mouth path and SVG circle elements for the face and eyes. The SVG canvas fills the browser window, and coordinates are calculated from the viewport dimensions. The code imports React, ReactDOM, and `arc` from D3, demonstrating a straightforward combination of React’s component structure with D3’s shape-generation utilities.

AAliUrden

Fork of Smiley Face Part II

This example shows a yellow smiley face rendered as a scalable vector graphic, with black-outlined circular eyes, a mouth formed by an arc, and a small nose. The face is centered and sized to fill the browser window, using React components to structure the SVG elements. It imports the `arc` function from d3 to generate the mouth and nose paths, calculating coordinates and radii relative to the window dimensions. The visualization uses plain SVG circles and paths, with the D3 arc generator handling the curved shapes.

Ppkhansen

Fork of Smiley Face Part II

This example shows a smiley face rendered as a large yellow circle with two eyes and a mouth, all positioned relative to the browser window’s center and sized based on its dimensions. Built with React and D3 v5, it uses D3’s `arc` generator to create the mouth’s curved path, while SVG circles handle the face and eyes. The drawing scales dynamically with the viewport, using `window.innerWidth` and `window.innerHeight` to set the canvas size.

Aabhashdiu

Fork of Smiley Face Part II

This example shows a responsive smiley face rendered as an SVG using React components for scalable vector graphics. The face consists of a yellow circle with a black stroke, two eye circles, and a mouth arc, all positioned relative to the window dimensions. The code uses React’s `createElement` API via JSX, `ReactDOM.render` to mount the app, and D3 v7’s `arc` function (imported but not used in the visible code) to define the mouth shape. Rendering adapts to the browser viewport through `window.innerWidth` and `window.innerHeight`.

SSadaf Siddiqui

Fork of Smiley Face Part II

This example shows a yellow smiley face rendered as a scalable vector graphic, with two eyes and a curved mouth positioned symmetrically around the center of the viewport. Built with React and D3 v7, the visualization uses the `d3.arc()` API to generate the mouth’s path, while circles are drawn directly as SVG elements. The graphic fills the entire browser window, with dimensions and positions computed from `window.innerWidth` and `window.innerHeight`. The face is centered via a group transformation, and the code is structured as a React component that mounts into the DOM using `ReactDOM.render`.

Ppaulinemnguyen

Fork of Smiley Face Part III

This example shows a yellow smiley face rendered as a scalable vector graphic, consisting of a circular face with two eye circles and an arc-shaped mouth. The visualization is built using React to construct the SVG elements and D3’s `arc` API to generate the mouth path. The face is centered via a translation transform, and all shapes are defined with explicit coordinates and radii within a 960-by-500 viewport.

Wwisdomseal