Smiley Face Part I

100%

Smiley Face Part I

✓ Published0🌍 Public

Last edited May 16, 2021

Created on May 6, 2021

A static SVG chart shows a grey circle with a yellow outline, nearly filling the frame, plus two smaller yellow circles positioned as eyes. The piece is titled "Smiley Face Part I," suggesting the start of a larger sequence. The code renders these shapes directly within an HTML body using raw SVG elements, while a React component, defined with `ReactDOM.render`, also draws a similar circle. D3's `arc` API is referenced in the JavaScript, though no arc is visible in the final output, and the chart uses a fixed 960×500 viewport.

AI-generated description

Half way towards smiley face

MIT Licensed

Similar vizzes

Loading thumbnail…

Smiley Face Part 1

A static SVG smiley face is drawn using React and D3, with a yellow circle for the head, two black eyes, and a D3-arc-generated mouth. The code defines constants for dimensions and positions, then renders the face centered in a 960×500 viewport. The mouth uses `d3.arc` to create a partial ring, while the head and eyes are plain SVG circles. The rendering relies on React's `ReactDOM.render` and D3 v7's arc API, with no interactivity or animation.

MMoondoz

91% match

Loading thumbnail…

Smiley Face Part I

A yellow circle with two black eyes and an open mouth forms a static smiley face centered in an SVG canvas. The face is drawn using React components that render SVG primitives, including circles for the head and eyes and a d3.arc path for the mouth. The d3 arc generates the mouth shape with specified inner and outer radii and angular extents, while the head and eyes are plain SVG elements. The visualization uses a fixed 960 by 500 pixel viewport with the face grouped and translated to the center.

JJon

91% match

Loading thumbnail…

Smiley Face part 1

A yellow SVG circle is drawn as a face, with two smaller circles for eyes and a semicircular arc for a mouth. The arc is created using the `d3.arc` API, with its inner radius determining the mouth depth and start and end angles set to form a downward curve. The shape is centered on screen using SVG transforms, and the React component renders the entire graphic. The visualization demonstrates basic D3 shape generation and React integration for static SVG assembly.

JJuan Pablo Sanin

91% match

Loading thumbnail…

Smiley Face Part I

A static smiley face rendered in SVG shows a yellow circle with black stroke, two eyes, and a mouth arc centered on a 960 by 500 canvas. This React component draws the face using D3’s `arc` generator with specified inner and outer radii and angles for the mouth, while circles are positioned via eye offsets and radius constants. Built with D3 v6 and React 17, the example hardcodes all geometry values rather than loading external data, demonstrating precise coordinate-based composition in a reusable component.

Eendomo

91% match

Loading thumbnail…

Smiley Face Part I

A smiley face drawn with SVG shapes appears centered on a yellow circular face with black outlines. Two black eyes sit symmetrically above an arc-based mouth, all positioned within a 960×500 viewport. The example uses React to render the SVG, with D3’s `d3.arc()` generating the mouth path. Circles define the face and eyes, while a `<g>` transform offsets the elements. The code demonstrates combining React components with D3 shape generators for static geometric visualizations.

DDan Bo

91% match

Loading thumbnail…

Smiley Face Part I

This example uses React to render a simple smiley face as a static SVG graphic. It displays a yellow circle with a black stroke for the head, plus two smaller filled circles positioned symmetrically as eyes. The code draws shapes using D3’s `arc` import, though only SVG circle elements are used. The face is centered on a 960x500 canvas, with eye offsets and radii defined mathematically. React 17 and D3 v7 are loaded via UMD bundles.

PPatrick Asante Owusu

91% match

Loading thumbnail…

Smiley Face Part I

This visualization displays a simple smiley face constructed from three yellow and black SVG circles: a large face with a black outline and two smaller black circles for eyes. Built with React and D3 v6, the code uses the `arc` import from D3 and renders the graphic through SVG elements. The face is centered on a 960 by 500 canvas, with the eye positions calculated using offsets from the center point. The example demonstrates basic SVG shape creation within a React application, using hard-coded coordinates and dimensions rather than external data.

EEmerson Castillo

91% match

Loading thumbnail…

Smiley Face Part III

A yellow smiley face with black-outlined eyes and a curved mouth is rendered as a static SVG chart. The React component constructs the face using D3's `arc()` generator for the mouth path, while positioning circles for the head and eyes through SVG attributes. The visualization uses hard-coded dimensions and coordinates, with React managing the DOM and D3 v5 providing geometric calculations for the arc.

Bbingsen0806

91% match