Assignment: Tweak the Face

Tweak this Face

A yellow smiley face with black outline, two eyes, and a green iris in each eye fills the SVG canvas. The face’s mouth is rendered as a thick arc spanning the lower half of the face. The visualization uses React to define the SVG elements and D3’s `arc` API to generate the mouth path. The drawing is static, with all coordinates and radii hard-coded in the React component. The SVG is rendered directly with `ReactDOM.render`.

CChandré De Wet

Tweak Smiley Face

A stylized smiley face is rendered as an SVG graphic, centered on a yellow circle with black stroke. The face includes two eyes, white iris highlights, and a red triangular nose, all composed with React elements. A mouth is drawn using D3's `arc` generator, while D3's arc is also used to calculate the face's radius. The code demonstrates integration of React for component structure and D3 for geometry, producing a static, tweakable illustration.

Jjeffmesie

Tweak a face!

A yellow smiley face is drawn as an SVG circle with two black eyes and a half-moon mouth, all centered on a 960×500 canvas. The face is built with React 16.13.1 and D3 v6, using `d3.arc` to generate the mouth path and JSX transforms for positioning. Eye and mouth radii, offsets, and stroke widths are constants, while the mouth arc is defined with angles from π/2 to 3π/2. The SVG is rendered via `ReactDOM.render` with a fixed viewport and hidden overflow.

Ppkiaei

Tweak Face III

A yellow smiley face is drawn as a large circle with black stroke, two black eyes, and an arc-shaped mouth, with two white rectangular teeth added below the mouth’s center. Built with React and D3, the visualization uses D3’s `arc` to define the mouth’s path and SVG elements for the face, eyes, and teeth. The code constructs the composition declaratively, positioning shapes relative to the canvas center and using fixed offsets for features.

IIchi Rarámuri

Let's Make a Face Part II Assignment

This example displays a stylized smiley face built from SVG primitives, rendered in React with D3.js. The face features yellow circular head with black outline, eyes, an arc-based mouth, and asymmetrical angled lines for eyebrows. The code uses D3’s `d3.arc()` to generate the mouth path and React’s JSX to define circle, path, and line elements. All coordinates are calculated relative to the center of an SVG viewport, with fixed width and height values, and the composition is static without interactivity or data binding.

MMGamboa

Smiley Face_Tweak

This example shows a simple smiley face built from SVG shapes, with a yellow circle for the head, two black eyes, and a mouth drawn as an arc. The face is centered using a D3 arc generator to create the mouth path, while React manages the component structure. The head and eyes are rendered as SVG circles, with the eyes offset symmetrically from the center. The mouth arc uses a start and end angle of π/2 to 3π/2, creating a half-circle smile. All elements are positioned within a translated group, using the D3 v7 library alongside React.

Jjdbuening

Assignment: Tweaked Face

A smiling face rendered in yellow SVG, composed of circles, ellipses, and polylines, is programmatically assembled from React components. The face includes blinking eyes, a mouth that briefly disappears, and animated cigarettes that move across the canvas while smoke puffs fade upward using CSS keyframes. Built with React and D3 v7, the visualization uses D3's arc generator to create a partially closed eyelid, while SVG elements handle the face’s geometry. The data is static, defined through component props and hardcoded coordinates, with animation driven entirely by CSS rather than D3 transitions.

TTsaikkari

Adapted Smiley Face

This example shows a stylized smiley face built with React and D3, featuring a yellow circle head, two eyes, a mouth arc, and additional geometric decorations. The face is rendered as SVG inside a React component, with the code using `d3.arc()` to generate the mouth path and drawing eyes, eyebrows, and other shapes as basic SVG elements. The layout uses fixed pixel coordinates for positioning, and the visualization responds to no user interaction, presenting a static composition that mixes playful shapes with simple D3 path generation.

FFloorNummer