Skip to main content
SimilarExport ZIP
100%

let's make a face with d3

✓ Published0🌍 Public
Ccguibourg
Last edited Oct 23, 2019
Created on Oct 23, 2019

A smiling face is drawn entirely with SVG shapes: a gold circular head, two black eyes, and a mouth created as an arc path. The code uses D3 v7’s `select` to append elements to an SVG canvas, and the `arc` generator to compute the mouth’s path with specified inner and outer radii and start/end angles. All shapes are centered via a translated group, with fixed pixel dimensions for the 960 by 500 canvas.

AI-generated description

An example including some commonly used features of SVG.

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
94% match
Loading thumbnail…

Let's make a face with D3

A smiling face composed of simple geometric shapes is rendered in an SVG canvas. A large yellow circle forms the head, with two smaller black circles for eyes and a dark arc for the mouth, all centered within a 960 by 500 pixel space. The example uses D3 version 7 to select the SVG element and append the shapes, with the mouth drawn via the `d3.arc` API, which constructs a path based on specified inner and outer radii and angular ranges.

Mmayankmunjal41
93% match
Loading thumbnail…

Let's make a face with D3.js!

This example creates a smiling face using basic SVG shapes—two circles for the eyes, a larger circle for the head, and an arc for the mouth—all positioned with fixed coordinates. The code uses D3.js v5 selection methods like `svg.append` and `.attr` to build the elements, alongside the `d3.arc` generator to define the mouth’s path based on inner and outer radii and start/end angles. The SVG canvas is 960 by 500 pixels, with styling applied via an external stylesheet.

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

let's make face with d3.js

This example draws a smiling face on an SVG canvas using D3.js version 7. The code creates a yellow circle for the head, two circles for eyes, rectangles for eyebrows, and a path arc for the mouth, all positioned using absolute coordinates within a 960×500 viewport. It uses D3’s `select`, `append`, and `attr` methods to build and style the SVG elements, and the `arc` generator to define the mouth’s curved shape. The rendering is entirely vector-based, with no external data source.

JJoora Song
93% match
Loading thumbnail…

Let's make a face with d3.js!

A smiling face is drawn on an SVG canvas using D3.js primitives. The code constructs a yellow circular head with black circular eyes and a mouth shaped as an arc path. The visualization is built from explicit coordinate calculations for positioning the face elements. It uses D3's `select` to access the SVG, `append` to create shapes, and `arc` to generate the mouth's path data, with a static, hand-coded layout rather than a data-driven approach.

Cccheung9595
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 with D3 new

This example displays a cheerful cartoon face constructed from SVG primitives: a yellow circle for the head, two smaller circles for eyes, a rectangle for an eyebrow, and an arc-based path for the mouth. Built with D3 v5, the code uses `select` to target the SVG element and `attr` to position shapes, while the `arc` generator computes the mouth’s path geometry. The face is centered via a translated group, and all elements are drawn directly to the SVG canvas with fixed dimensions.

Mmirna981
92% match