Lets make a face

100%

Lets make a face

✓ Published0🌍 Public

Last edited Jul 19, 2019

Created on Jul 19, 2019

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.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Lets make a face

Ppvhch

100% 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

94% 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

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

92% 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

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

91% match

Loading thumbnail…

Let's make a face

This example draws a simple yellow face using SVG shapes. It demonstrates basic D3.js selections and attribute manipulation by creating a large circle for the head, two smaller circles for eyes, and an arc for the mouth. The code uses d3.select to append elements, parse SVG width and height attributes, and a d3.arc path generator with inner and outer radii plus start and end angles. The right eye is positioned using an SVG group with a transform translation, while the left eye and mouth use direct coordinates.

PPUUDI

91% 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

91% match