Skip to main content
SimilarExport ZIP
100%

Make a face with D3

✓ Published0🌍 Public
NNigel Quinlan
Last edited Mar 14, 2021
Created on Mar 14, 2021

A smiling cartoon face rendered in SVG uses D3.js to draw a yellow circle for the head, two black circles for eyes, and an arc-based path for the mouth. The code imports `select` and `arc` from the D3 library, appends SVG shapes directly, and positions them using hardcoded coordinates and spacing values. The example demonstrates basic SVG shape creation and path generation with D3’s arc generator.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Make a face with d3.js

This example uses d3.js to draw a smiling face directly in SVG. A yellow circle forms the head, with two smaller black circles for eyes and an arc-generated path for the mouth. The code positions elements by translating to the center of an SVG canvas and uses d3’s `select` and `arc` API to create shapes, all rendered with fixed pixel coordinates.

Vvietiscool
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
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
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…

Make a face with D3.js

This example builds a cartoon face entirely with D3.js shapes in an SVG. It uses `select` to target the SVG element and appends a yellow circle for the head, two black circles for eyes, and rectangles for eyebrows, all positioned with explicit pixel offsets. A mouth is created using the `arc` generator, which defines an annular sector with inner and outer radii and start/end angles. The face is centered by translating a group element to the middle of the 960 by 500 SVG canvas, demonstrating basic SVG shape construction and transformations in D3 v6.

ZZachery2008
92% match
Loading thumbnail…

Lets make a face with D3

This example demonstrates how to build a simple cartoon face using D3 version 6’s selection and shape APIs. The SVG output shows a yellow circle for the head, two eyes, eyebrows as rectangles, and a mouth drawn with the `d3.arc` shape generator. The code uses `select` and `attr` to position elements relative to the SVG center, while the arc’s inner and outer radii define the smile. No external data is loaded; all shapes are hardcoded in JavaScript.

IiXilef
92% match
Loading thumbnail…

Let's make a face with D3.js

A simple D3.js example draws a cartoon face using SVG shapes. The code selects an SVG element and appends a yellow circle for the face, two black circles for eyes, and a path for the mouth. The mouth uses `d3.arc()` to generate a partial ring based on specified inner and outer radii and start and end angles. The example demonstrates importing `select` and `arc` from the d3 module and loading D3 v7 via UNPKG.

Cccocco1
92% match
Loading thumbnail…

D3-1: Making a face

A smiling face is drawn using SVG shapes, with a yellow circle for the head, black circles for eyes, and a mouth created as an arc path. The example demonstrates basic SVG element creation and positioning through D3’s `select`, `append`, and `attr` methods, along with the `arc` generator to define the mouth’s shape. Coordinates are centered by translating a group element, and dimensions are read from the SVG attributes. The code uses D3 v5 and renders entirely in SVG.

GGreenBreakers
92% match