Let's make a face

100%

Let's make a face

✓ Published0🌍 Public

Last edited Jan 19, 2020

Created on Jan 18, 2020

A smiling face rendered in SVG uses D3's `select` and `arc` APIs to compose a yellow circle head, two black eye circles, and a mouth path formed by a donut-like arc with an inner radius of 150 and an outer radius of 170. The eyes are positioned symmetrically around the center, offset by 100 pixels horizontally and 70 pixels vertically. All elements are drawn directly via D3 selections, with the head and mouth grouped inside a translated `<g>` element, while the eyes are appended to the root SVG.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3

A smiling face is drawn entirely with SVG shapes, rendered as a yellow circle with a black stroke, two eyes, and an arc-based mouth. The code uses D3 v5 selections to append elements to an SVG canvas, importing `select` and `arc` from the D3 module. The `arc` generator creates the mouth with specified inner and outer radii and start/end angles. All shapes are centered using a group translation, with eye positions calculated from fixed offsets.

Hhairibung

93% match

Loading thumbnail…

Let's make a face!

A smiling face is drawn in an SVG, using simple geometric shapes for the eyes and mouth. The code imports `select` and `arc` from D3 v6 to append a yellow circle for the head, black circles for the eyes, and a path for the mouth. The mouth is created with the `arc` function, using inner and outer radii and specified angles to form a curve. The rendering is done through SVG elements, with the entire face centered via a translation based on the viewport size.

Jjlsabo

93% match

Loading thumbnail…

Let's make a face!

A bright yellow smiley face is drawn in SVG using D3 v5. The code selects an SVG element and builds the face by appending a circle for the head, two black circles for the eyes, and a path for the mouth. The mouth path is generated with the D3 `arc` generator, using an outer radius and angles to create a half-circle shape. The face is centered via a group transform, with eye spacing and vertical offsets applied to position the features.

UUGarCil

92% match

Loading thumbnail…

Let's make a face

A simple SVG face is drawn with D3 v7, composed of a yellow circular head, two black eyes, and a mouth. The code uses D3 selections and the `arc` generator to create the mouth path, while circles are positioned relative to the SVG's width and height. The example demonstrates common SVG attributes like `cx`, `cy`, `r`, `fill`, and `stroke`, rendered directly to the SVG canvas in a fixed 960x500 viewport.

AAndrew Babilonia

92% match

Loading thumbnail…

Let's Make a Face

A yellow circle with two black eye circles and an arc-based mouth forms a simple face on an SVG canvas. The example uses d3.select to target the SVG element and d3.arc to generate the mouth path with specified inner and outer radii. The rendering is done through D3 v5's SVG manipulation, positioning each shape with absolute coordinates in a 960-by-500 viewport.

Ssalvar2134

92% match

Loading thumbnail…

Let's make a face with D3

This example renders a simple smiley face as an SVG graphic. It draws a yellow circle for the head, two black circles for the eyes, and a half-arc path for the mouth, all positioned using the SVG `width` and `height` attributes. The code uses D3 v6’s `select`, `arc`, and `append` APIs to create and transform the shapes, with the mouth arc defined by inner and outer radii and start/end angles.

Tthebeef5

92% match

Loading thumbnail…

Lets make a face

This example draws a simple smiling face using SVG shapes. A yellow circle forms the head, with two black circles for eyes and a curved arc path for the mouth, all positioned relative to the SVG’s width and height. The visualization uses D3 v5’s `select` and `arc` APIs to create and place the elements, with the arc generator defining the mouth’s inner and outer radii and start and end angles. The code demonstrates basic SVG attribute manipulation through D3’s chaining methods.

YYineng Zhang

92% match

Loading thumbnail…

Let's make a face

A yellow circle forms a face with two black eyes and a wide arc-based mouth, all rendered as SVG elements. The example demonstrates basic D3.js v5 selection and shape generation, using `d3.select` to append circles and set positional attributes, and `d3.arc` to create a mouth path from inner and outer radii plus start and end angles. All geometry is computed from the SVG’s width and height attributes, with no external data.

KKwadwo 'Que' Amankwa

91% match