Skip to main content
SimilarExport ZIP
100%

Lets make a face

✓ Published0🌍 Public
YYineng Zhang
Last edited Oct 31, 2020
Created on Oct 31, 2020

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.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face

This example uses SVG shapes to draw a simple smiley face. The code constructs a yellow circle for the head, two black circles for the eyes, and a mouth created with an arc path, all positioned relative to the SVG’s width and height. It demonstrates basic SVG attributes and the `d3.arc` generator from D3 v6 to define the mouth’s curved shape, with static styling applied via CSS.

AApurva
94% match
Loading thumbnail…

Lets make a face with D3

This example uses D3 v5 to draw a simple smiling face entirely in SVG. It appends a yellow circle for the head, two black circles for eyes, and a mouth path created with the `d3.arc` generator, using inner and outer radii with specified start and end angles. The `select` function targets the SVG element, and attribute values like height and width are read directly from the markup. No external data is loaded; all shapes are positioned based on the SVG’s dimensions and fixed pixel offsets.

Rrpadron8
94% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face built from basic SVG shapes appears on a yellow circular head with black eyes and a curved mouth. The example demonstrates fundamental D3.js selections and the `arc` generator from the D3 module to create the mouth path. Using D3 v5.6.0, the code appends `circle` elements for the face and eyes, while a `path` element is transformed via SVG attributes to position the smile. The visualization shows how to combine D3's data-join utilities with raw SVG manipulation for simple geometric compositions.

ZZeeshan58788
93% match
Loading thumbnail…

Lets make a face

A simple face is drawn entirely with SVG shapes in a 960-by-500 viewport, using a yellow circle for the head, two black circles for eyes, and a path generated by `d3.arc()` for the mouth. The code selects the SVG element with `d3.select` and sets each shape’s attributes—`r`, `cx`, `cy`, `fill`, and `stroke`—explicitly. The mouth is positioned relative to a `<g>` group translated to (250,200), and the arc spans from angle 0 to π. This example demonstrates basic SVG rendering with static D3 v5 selections, without data binding or interaction.

Ppvhch
93% match
Loading thumbnail…

Lets make a face

A simple face is drawn entirely with SVG shapes in a 960-by-500 viewport, using a yellow circle for the head, two black circles for eyes, and a path generated by `d3.arc()` for the mouth. The code selects the SVG element with `d3.select` and sets each shape’s attributes—`r`, `cx`, `cy`, `fill`, and `stroke`—explicitly. The mouth is positioned relative to a `<g>` group translated to (250,200), and the arc spans from angle 0 to π. This example demonstrates basic SVG rendering with static D3 v5 selections, without data binding or interaction.

Ppvhch
93% 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
93% match
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
92% match
Loading thumbnail…

Lets make a face

This example assembles a smiling cartoon face from basic D3 shapes, including a bright yellow circular head, black eyes, and a curved arc mouth. It showcases manual SVG construction through D3 selections and the `d3.arc` generator for the mouth’s path. The face is centered by translating a group element, while eyes are positioned with explicit `cx` and `cy` offsets. The code relies on D3 v5’s `select`, `arc`, and attribute methods, rendering entirely in SVG with no external data source, demonstrating coordinate math and layout composition.

CCasperHogenboom
92% match