Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
Hhrvoje26
Last edited Feb 8, 2022
Created on Feb 8, 2022

This example uses D3.js to draw a simple, smiling face entirely from SVG primitives. A yellow circle forms the head, two smaller black circles serve as eyes, and two rectangles act as eyebrows. The mouth is created using D3's `arc` generator, which defines a path with a specified inner and outer radius and angular range. The code positions all elements relative to a central `g` group, using D3’s `select` and `append` methods to build the SVG structure.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Lets make a face with D3.js

This example draws a smiling face using SVG primitives and D3.js. A yellow circle forms the head, while two black circles create the eyes, and a mouth is generated with the `d3.arc` function, which defines a path with specified inner and outer radii and angle ranges. The code uses D3’s selection and attribute methods to position elements relative to the SVG’s center.

Oosaka004
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js to draw a smiling face out of basic SVG shapes: a yellow circle for the head, two eyes, and a mouth created with the `arc` generator. Eyebrows animate by repeatedly shifting their vertical position via chained `transition().duration(2000)` calls on a group element. The code relies on D3 selections and `select`, with dimensions read from the SVG attributes. The simple, playful design demonstrates how D3 can drive both static shape construction and time-based transformations in an SVG scene.

Cchristoshanes
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!

D3.js constructs a smiling face from SVG shapes, including a yellow circle for the head, two eyes, and an arc-based mouth using the `d3.arc()` generator. The eyebrows, rendered as rectangles, animate vertically through chained `transition().duration()` calls, moving up and down over two seconds each. The code uses D3 selections and attributes to position elements around a centered group, with all coordinates based on the SVG’s 960×500 dimensions.

Ddtdenver
94% match
Loading thumbnail…

Let's make a face with D3.js!

This example draws a smiling face using SVG shapes built with D3.js selections and the `d3.arc` path generator for the mouth. A yellow circle forms the head, with two dark eyes and rectangular eyebrows positioned via coordinate offsets. The eyebrows animate upward and back down over four seconds using chained `transition` calls with `attr` updates on the group’s transform. All elements are centered by translating a parent `<g>` based on the SVG’s dimensions, demonstrating fundamental DOM manipulation and data-driven styling without external data or force simulation.

Ssourcebox-bug
94% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how to build a smiley face with D3.js, using SVG elements for rendering. It shows a yellow circle with eyes, eyebrows, and a mouth, where the eyebrows are positioned as rectangles. The code uses `d3.select`, `d3.append`, and `d3.arc` to construct the shapes, with attributes set manually for placement. The face is centered via a translation on a group element, and the mouth is drawn as an arc path. The example highlights fundamental DOM manipulation and SVG shape creation in D3.

Mminimartzz
94% match
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to build a smiling face from basic SVG shapes, including a yellow circle head, two eyes, animated eyebrows, and an arc-based mouth. The code constructs the face with `d3.select`, `append`, and `d3.arc` for the mouth path, while the eyebrows animate up and down using `transition().duration()`. All elements are centered within an SVG canvas using a translated group, and the rendering relies entirely on SVG attributes rather than external data.

VVito
94% match
Loading thumbnail…

Let's make a face with D3.js!

A simple SVG face made with D3.js v5, drawn entirely from primitive shapes: yellow circle for the head, small black circles for eyes, rectangles for eyebrows, and an arc-generated mouth. The code uses `d3.select` and `d3.arc` to construct the geometry, with a fixed `innerRadius` and `outerRadius` for the smile. All elements are centered via a translated `<g>` group, and faces render directly on a 960×500 SVG canvas with no external data.

RRC
94% match