Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js

✓ Published0🌍 Public
Jjeffko18
Last edited Oct 19, 2019
Created on Oct 19, 2019

This example constructs a cartoon face out of basic SVG shapes, including a yellow circle for the head, two eyes, eyebrows, and an arc-based mouth. It demonstrates how to build and position SVG elements using D3.js v5, selecting the `<svg>` element and appending groups and shapes with transformation attributes. The code uses the `arc` generator from D3 to create the mouth path, while circles and rectangles are placed manually via coordinate offsets. The dataset is a static, hardcoded set of shape definitions rather than external data, emphasizing SVG drawing techniques over data binding.

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

Let's make a face with D3.js

This example builds a cartoon face from basic SVG shapes using D3.js. A yellow circle forms the head, with two smaller circles for eyes and rectangles for eyebrows, all positioned via SVG attributes and transformations. A mouth is created using the D3 `arc` generator to produce a curved path. The code selects the SVG element, centers a group with a translation, and applies static coordinates and dimensions throughout.

MMelissa Prax
95% match
Loading thumbnail…

Lets make a face with D3.js

This example draws a cartoon face using SVG shapes composed with D3 v5. A yellow circle forms the head, while two smaller circles create the eyes and rectangles serve as eyebrows, all positioned relative to a centered group. The mouth is a path generated with the `d3.arc` helper, using specific inner and outer radii and angle values. The code relies on D3’s `select` and `attr` methods to build and style the static SVG elements, with no data binding.

VVarun Khanna
95% match
Loading thumbnail…

Lets make a face with D3.js

This example draws a cartoon face using SVG shapes composed with D3 v5. A yellow circle forms the head, while two smaller circles create the eyes and rectangles serve as eyebrows, all positioned relative to a centered group. The mouth is a path generated with the `d3.arc` helper, using specific inner and outer radii and angle values. The code relies on D3’s `select` and `attr` methods to build and style the static SVG elements, with no data binding.

VVarun Khanna
95% match
Loading thumbnail…

Let's make a face with D3.js

This example uses D3.js v5 to construct a simple cartoon face from basic SVG shapes. It begins by creating a yellow circle for the head, then adds two black circles for eyes and an arc-generated path for the mouth. The `d3.arc` function computes the mouth’s curved shape based on specified inner and outer radii, with angles defined in radians. All elements are centered within the SVG using a translation transform, demonstrating how to combine geometric primitives and D3’s arc generator for expressive, code-driven visuals.

Bben-chin-43
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example builds a simple cartoon face out of SVG shapes using D3.js. It draws a yellow circle as the head, adds two black circles for eyes, and uses an arc path to form a mouth. The code defines the face geometry with hardcoded dimensions and positions, calculating coordinates relative to the SVG’s width and height. It leverages D3’s `select`, `arc`, and attribute chaining methods to render the shapes dynamically, with the mouth created via an arc generator using inner and outer radii and angle values.

MMOHDSAMIR96
95% match
Loading thumbnail…

Let's Make a Face with D3.js

This example illustrates how to construct a cartoon face using basic D3.js shape primitives. It renders a yellow circular head with black stroke, two eyes, and a smiling mouth as a path generated by the `d3.arc()` generator. The code selects an SVG element and uses `d3.select` to append groups and circles, positioning them via `translate` transforms. The mouth arc uses fixed inner and outer radii with defined start and end angles, demonstrating a composable approach to SVG drawing with D3 v5.

Ddanrhymes
95% match