Skip to main content
SimilarExport ZIP
100%

Data | Make a Face Part 3 - Smiley with D3

✓ Published1🌍 Public
AAndreRGunawan
Last edited Sep 12, 2021
Created on Sep 9, 2021

A yellow smiley face rendered in SVG shows two black eyes and an open curved mouth against a circular yellow head with a black stroke. The face is built using React and D3 v7, with the mouth generated through a d3.arc() path using defined inner and outer radii and start and end angles. Eye positions are offset from the center, while the head radius derives from half the height minus stroke width, all within a 960 by 500 viewport.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Smiley Face Part I

This example renders a yellow smiley face in SVG using React and D3 v7. It shows a circular face with two eyes and a semicircular mouth, all positioned relative to a central coordinate system via a group transformation. The code uses `d3.arc` to generate the mouth path, with explicit `innerRadius` and `outerRadius` values, while the face and eyes are simple SVG `circle` elements. Stroke width and radius calculations adjust the face size based on the fixed 960×500 viewport.

SSamuel de Zoete
91% match
Loading thumbnail…

Smiley Face Part I

A yellow smiley face rendered with SVG displays a circular head, two eyes, and an arc-shaped mouth. The visualization uses React to structure the SVG elements and D3's `arc()` generator to create the mouth path. The code sets explicit dimensions, positions the face at the center, and applies a black stroke around the head. No data is loaded; the face is purely constructed from hard-coded geometry values like `centerX`, `eyeOffsetX`, and `mouthRadius`.

Yyuzhang21
91% match
Loading thumbnail…

Make a face part II

A yellow smiley face rendered in SVG, with two black eyes and an arc-shaped mouth, is drawn as a series of layered geometric shapes. The face is built using React components, with each facial feature positioned relative to the center of the canvas. D3’s `arc` function generates the mouth path, while the circle elements for the head and eyes use explicit pixel coordinates. The code applies a stroke width to the outer face circle and translates the entire group to the center using an SVG `g` transform.

Ppkiaei
91% match
Loading thumbnail…

Smiley Face Part 3

A yellow smiley face is drawn using SVG primitives, with two eyes and a mouth arc positioned on a centered background circle. The visualization is built with React and D3 v6, using the `d3.arc` API to define the mouth’s annular path, while circle elements handle the face background and eyes. The code sets fixed pixel dimensions and computes offsets for eye placement, with the final rendering handled by ReactDOM.

Hhukbk
91% match
Loading thumbnail…

Smiley Face Part 2

A yellow smiley face is drawn with SVG circles for the head and eyes, and a D3 arc path for the mouth. The code uses React to render the SVG elements and d3.arc to compute the mouth’s curved shape, with explicit angle ranges and inner/outer radii. The face is centered using a translated group, and the head and eyes are styled with fixed stroke widths and radii. The visualization is purely a static geometric composition, with no interaction or data-driven updates.

KKaitlyn Boyle
91% match
Loading thumbnail…

Smiley Face Part III

A smiley face rendered in SVG via React and D3. The code draws a yellow circular head with black stroke, two eye circles, and an open mouth using a D3 arc path. The face is centered and constructed with coordinates derived from the fixed canvas dimensions. The visualization uses React for component-based rendering and D3’s `arc` function to generate the mouth’s curved shape.

AAdrianna87
91% match
Loading thumbnail…

Smiley Face Part 3

A simple yellow smiley face is rendered as an SVG graphic, centered in a 960×500 viewport. The face consists of a yellow circle with a black stroke, two black eyes, and a smiling mouth created using an arc path. The visualization is built with React, which constructs the SVG elements, and D3 v6’s `arc` function to generate the mouth shape. All dimensions are hard-coded, with no external data source or interactive behavior.

AAlexander Dorling
91% match
Loading thumbnail…

Smiley Face Part III

A yellow smiley face with black outlines is rendered as a full-screen SVG using React. D3's `arc` generator creates the mouth as a curved path, while circles draw the face, eyes, and stroke. The visualization is built with React components and D3 v7 in an SVG coordinate system sized to the browser window.

FFábio Correia
91% match