Let's make a face with D3.js!

100%

Let's make a face with D3.js!

✓ Published0🌍 Public

Last edited Oct 8, 2022

Created on Oct 8, 2022

A cheerful yellow face built from SVG shapes appears centered in the viewport, with two black eyes and a curved mouth. The example demonstrates basic D3.js shape generation using the `select` and `arc` APIs. Circles define the head and eyes with fixed pixel coordinates, while the mouth uses `d3.arc` with an inner and outer radius and a half-circle angle range. The SVG canvas is 960 by 500 pixels, and all elements are positioned relative to its dimensions.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

A yellow circle face is drawn in SVG using D3.js v7, with two eyes, eyebrows, and an arc-based mouth centered in the viewport. The code builds the face by appending SVG elements—a circle for the head, circles for eyes, rectangles for eyebrows—and uses D3’s `arc` generator to create the mouth path. All shapes are positioned relative to a translated group, with the face filling the 960×500 canvas.

Ffkukcha

95% match

Loading thumbnail…

Let's make a face with D3.js

A face built from basic SVG shapes—a yellow circle for the head, circles for eyes, and an arc-generated path for the mouth—is centered on a 960×500 canvas. The code uses D3.js v5’s `select` and `arc` APIs to append and position elements, with `transition()` animating the eyebrows up and down over two-second intervals. The rendering is entirely SVG, with all coordinates computed relative to the svg’s center using its width and height attributes.

BBen Daniel

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

94% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow circle with black outline forms a face, featuring two black eyes and a curved arc mouth. Built with D3.js v5, the example uses `d3.select` to manipulate SVG elements directly, setting position and size attributes for the head and eyes. The mouth is drawn using `d3.arc()` with specified inner and outer radii and angular ranges, all centered on the SVG canvas.

TTiffani Gamboa

94% match

Loading thumbnail…

Lets make a face with D3.js!

A cheerful cartoon face is rendered as SVG using D3.js, composed of layered geometric shapes: a yellow circle head with black-outlined stroke, eyes, irises, cheeks, a nose line, and two mouth arcs built with d3.arc. The code uses d3.select to manipulate the SVG canvas and attributes like `attr` for positioning and styling. All facial features are positioned relative to the viewport dimensions (960x500). The mouth paths are generated via the `arc` function with specified inner and outer radii and angular ranges, demonstrating D3's utility for constructing complex shapes from simple primitives.

Ssslee8778960

94% match

Loading thumbnail…

Let's make a face with D3.js

A yellow face built from SVG shapes is rendered centered in a 960x500 viewport. D3 selections create circles for the eyes and an arc-generated path for the mouth, while rectangular eyebrows animate vertically via chained `transition().duration()` calls on a group element. The code imports `select` and `arc` from d3 v5, using SVG attributes like `cx`, `r`, and `transform` to compose the figure.

Ssakhabutdinov

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

94% match

Loading thumbnail…

Let's make a face with D3.js

This example draws a yellow cartoon face in SVG, centered within a 960x500 viewport, using D3’s `select` and `arc` functions. The face features black circular eyes, rectangular eyebrows, and a mouth generated from an arc path. An animation demonstrates D3's `transition` method, which moves the eyebrows upward and back down over two two-second intervals. All shapes are built with D3 selections, and the SVG elements are positioned via translation and attribute assignments.

MMauradion

94% match