Let's make a face with D3

100%

Let's make a face with D3

✓ Published0🌍 Public

Last edited Mar 27, 2020

Created on Mar 27, 2020

This example shows a simple cartoon face constructed entirely from SVG shapes. D3 v5’s `select` and `arc` functions create a blue circular head, two eyes, a small rectangular brow, and a curved mouth path centered within a 960×500 viewport. The face parts are positioned using explicit coordinate offsets and transformations rather than data binding, with the mouth’s arc defined by inner/outer radii and angular start/end values.

AI-generated description

MIT Licensed

Similar vizzes

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

93% match

Loading thumbnail…

Let's make a face with D3.js!

This example creates a cartoon face using D3.js v5, rendering circles for the head, eyes, and eyebrows, and an SVG path for the mouth. It demonstrates basic SVG shape generation with `d3.select` and the `d3.arc` API for the mouth’s curved path. The face is positioned using a group transform, with fixed pixel offsets for eye spacing and radius. The visualization shows how to compose multiple SVG elements programmatically with D3, using static attributes rather than data binding.

EE.D.M.

93% match

Loading thumbnail…

Let's make a face with D3.js

This example shows how to build a cartoon face using D3.js v5 SVG primitives, assembling circles for the head and eyes with rectangles for eyebrows and an arc-generated path for the mouth. The code positions these elements within a centered group using translate transformations, while the d3.arc API calculates the mouth’s curved shape based on specified inner and outer radii and angle ranges. All shapes derive their attributes from explicit numeric constants, demonstrating manual coordinate layout rather than data binding or scales.

DDharmateja

93% match

Loading thumbnail…

Let's make a face with D3.js

This example uses D3.js v5 to draw a simple cartoon face in an SVG canvas, assembling circles and an arc path with basic shape attributes. The face is constructed with a yellow head circle, black eye circles spaced symmetrically, and a mouth created using the `d3.arc` generator with specified inner and outer radii and angular bounds. The code imports `select` and `arc` from D3, sets dimensions dynamically from the SVG, and positions elements relative to the viewport center. The rendering approach is purely SVG-based, with static styling applied via attributes and a minimal CSS file.

Aadelgrosso

93% match

Loading thumbnail…

Let's make a face with D3.js

A cartoon face is drawn with D3 selections and SVG shapes: a blue circle head, two eyes, animated eyebrows, and an arc-based mouth. The eyebrows move up and down via chained `transition().duration(2000)` calls on a group. The code uses d3’s `select` and `arc` to build the mouth path, with static circles and rectangles for other features. The example demonstrates declarative SVG construction and coordinated, timed animations in d3.v5.

Cclaudiatomateo

93% match

Loading thumbnail…

Let's make a face with D3.js!

This example draws a cartoon face using D3.js v6 in an SVG container. It shows a circular head with eyes, a mouth, and a small pink rectangle, all positioned using fixed pixel coordinates and attribute setters like `.attr()`. The code imports `select`, `line`, and `arc` from the D3 library, appends SVG shapes including circles, a path for the mouth generated with the `arc()` API, and uses a group element with a transform. No external data source is involved; shapes are placed programmatically.

AAnthony De La Fuente

93% match

Loading thumbnail…

Let's make a face with D3.js

This example builds a cartoon face from basic SVG shapes using D3.js v5. A yellow circle forms the head, while smaller circles, rectangles, and an arc path create the eyes, eyebrows, and mouth. The code uses d3.select to manipulate the SVG, and d3.arc to generate the mouth’s path with specified angles. All elements are positioned relative to a central translation, with fixed pixel offsets for facial features. The result demonstrates how D3’s shape generators and selections can construct simple compound graphics declaratively.

YYedrup

93% match

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how to build a simple cartoon face using basic SVG shapes and D3.js v5. The code creates a yellow circle for the face, two circles for eyes, rectangles for eyebrows, and a semi-circular arc for the mouth, all positioned within a centered group. It uses D3’s `select` to manipulate the SVG, the `arc` generator from the `d3-shape` module to define the mouth path, and inline attribute chaining to set coordinates and styling. The face is assembled procedurally with hardcoded offsets and dimensions, illustrating fundamental SVG construction with D3.

Sshallowater

93% match