Skip to main content
SimilarExport ZIP
100%

first exercise

✓ Published0🌍 Public
Ddcheek
Last edited Nov 2, 2021
Created on Nov 1, 2021
Forked from HTML Starter

This example shows a yellow smiling face rendered with SVG circles and arcs, centered in a 960 by 500 viewport. It uses React to construct the SVG elements and d3.arc to define the mouth and right eyebrow paths, while the eyes are plain circles with white highlights. The face is drawn with a yellow fill, black stroke, and positioned via a translated group. The code relies on d3.v7 and React 16.9, with all shapes generated procedurally from fixed variables rather than external data.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

React starter

This example shows a yellow smiley face rendered as SVG, centered within a 960 by 500 viewport. It draws a yellow background circle with a thick black stroke, two black eyes positioned with horizontal and vertical offsets, and a mouth created using D3’s `arc()` generator to produce an SVG path. The project is built with React 18, uses JSX components for the face parts, and relies on D3 version 7.8.5 for the arc geometry. The application sets up a React root and renders the components into an HTML page.

AArchit Bhargava
89% match
Loading thumbnail…

part 1

This example shows a simple yellow face built from SVG shapes, rendered in a browser using React and D3. The face consists of a large yellow circle with a black stroke, two smaller circles for eyes, and a D3 arc path for a mouth. The code constructs the mouth arc using the `arc()` API from D3, specifying inner and outer radii and start and end angles. The entire composition is centered via an SVG `<g>` transform, and the drawing uses React’s declarative syntax to output SVG elements.

MMasoud Naji
89% match
Loading thumbnail…

Exercise 1

A simple yellow smiley face rendered as an SVG, with black outlined circular head, two eyes, an elliptical nose, and a curved mouth arc. The visualization is built using React for component structure and D3 v7’s `arc` generator to define the mouth path. The SVG is centered on a 960×500 canvas, with all shapes positioned relative to the center point, and the mouth arc spans a half-circle using specified inner and outer radii.

AAhmed Fathi
89% match
Loading thumbnail…

My First Face

A yellow smiley face drawn with SVG circles and a mouth arc takes center stage. The code uses React to render the SVG structure and the d3 `arc` generator to create the mouth path. Each eye is placed using simple coordinate offsets, while the face radius and stroke width are derived from the chart dimensions. The entire face group is translated to the center of a 960 by 500 viewport, with the mouth arc configured between specified start and end angles.

TTHB-account
89% match
Loading thumbnail…

part 1

This example displays a yellow smiley face with two black eyes on a blank canvas, all rendered as scalable vector graphics. The face is constructed using SVG circles via React, with the D3.js library imported solely for the `arc` function, though the code does not actually use it. The face is centered in a 980 by 500 pixel viewport, with the head, eyes, and stroke width defined by hardcoded numeric constants. The visualization is static, showing no animation or interaction.

FFlak
89% match
Loading thumbnail…

First program

This example shows a simple cartoon face rendered with React and D3.js in an SVG. It uses three reusable components—BackgroundCircle, Eyes, and Mouth—to compose a yellow circle with black outlined eyes and an arc-based mouth. The components accept props to control dimensions like radius, eye offset, and stroke width. D3’s `arc()` API generates the mouth path, while React handles component structure and SVG rendering. The face is centered via an SVG `<g>` transform, and all styling is applied through inline SVG attributes.

GGOKULKRISHNA22
89% match
Loading thumbnail…

Chapter Exercises

This example shows a smiley face drawn with SVG circles and a D3 arc path. The face is centered within an 960 by 500 viewport, using a yellow circle with a black stroke, two smaller circles for eyes, and a D3 `arc` generator for the mouth. The code uses React to render the SVG elements, with D3's `arc` API to define the mouth's inner radius, outer radius, and angular range. All positioning is calculated relative to the center using constants for eye offset and radius.

YYasara Peiris
89% match
Loading thumbnail…

Chapter Exercises

This example shows a smiley face drawn with SVG circles and a D3 arc path. The face is centered within an 960 by 500 viewport, using a yellow circle with a black stroke, two smaller circles for eyes, and a D3 `arc` generator for the mouth. The code uses React to render the SVG elements, with D3's `arc` API to define the mouth's inner radius, outer radius, and angular range. All positioning is calculated relative to the center using constants for eye offset and radius.

YYasara Peiris
89% match