Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js, bitches!

✓ Published2🌍 Public
Vvsalas20
Last edited Nov 29, 2019
Created on Nov 29, 2019

A smiling face built from SVG shapes is drawn with D3.js v5. The yellow head, black eyes, and rectangular eyebrows are positioned using absolute coordinates in a 960×500 viewport. The left eyebrow demonstrates an animated sequence by chaining four `transition().duration(400)` calls that move it up and down vertically. The example uses D3’s selection API (`select`, `append`, `attr`) to create and style the elements, with no data binding or scales involved.

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!

A smiling face built from SVG shapes animates as its eyebrows lift and lower repeatedly. The yellow circle head, eyes, and mouth are drawn using D3 selections with attributes like radius and position, while an arc path forms the smile. The eyebrows use D3's `transition().duration()` to shift vertically in a looping sequence. All shapes are centered via a translated group, with the example rendered entirely in SVG using d3.v5.

Jjmarcrum3
93% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face is constructed entirely from SVG shapes, with a yellow circular head, two dark eyes, eyebrows, and an arc-based mouth. The example demonstrates basic SVG composition and D3 selections, then animates the eyebrows by chaining `transition` calls to shift their vertical position. It uses D3 v5’s `select`, `arc`, and `attr` APIs to generate the mouth path and manage transform attributes. A centered `<g>` group positions all features, with fixed pixel constants controlling eye spacing and offsets.

Iianleekq
93% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face built with SVG demonstrates basic D3.js DOM manipulation and animation. Drawn with a yellow circle, two eyes, rectangular eyebrows, and an arc-based mouth, the face animates by moving the eyebrows upward and back down using chained `transition().duration()` calls. The example uses D3 v5’s `select`, `arc`, and `attr` methods to construct and style elements, with the eyebrow displacement triggered automatically on load.

RRoyCsuka
93% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face built with SVG uses D3.js v5’s selection methods to append a circle for the head, two circles for eyes, and rectangles for eyebrows, with an arc-generated path forming the mouth. The code demonstrates chained transitions via `transition.attr` to animate the eyebrow group’s vertical position over two 2-second phases, creating a raising and lowering effect. The face is centered using a group transform, with all shapes positioned relative to that origin.

BBendrog
93% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face rendered as SVG is built entirely through D3.js v5 DOM manipulation, with a circular head, two eyes, and a mouth drawn using `d3.arc()`. The example demonstrates layered selections and chained transitions by animating the eyebrows upward and back down over two two-second intervals. The code uses D3's `select`, `append`, and `transition` methods to construct and update elements, while a constant eye spacing offsets left and right features around the face's center. No external data is used; geometry derives from hardcoded pixel dimensions on a 960×500 viewport.

AAngelii
93% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn using SVG elements, with two eyes, eyebrows, and a mouth created via D3.js shape generators. The eyebrows animate upward and back down in a repeating loop using chained `transition` calls with a 2000-millisecond duration. Built with D3 v5, the code uses `select`, `arc`, and attribute setters like `attr` to construct the face from circles and a path.

Mmmustafau
93% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow SVG smiley face with black facial features demonstrates D3.js’s core DOM manipulation and transition APIs. The head, eyes, eyebrows, nose, and mouth are built by appending SVG circles, rectangles, and arcs via `d3.select` and `d3.arc`. Concurrent two-second `transition` chains animate the eyebrow group upward, eyeballs sideways, nose sideways, and mouth downward before returning all groups to their original positions. The example is rendered entirely in SVG and uses D3 v5 from a CDN.

Bbukbukbukka
93% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face built from SVG primitives in D3 v5, centered with a translated group and animated with chained transitions. The code draws a yellow head, black eyes, and rectangular eyebrows that move downward in two sequential 2-second transitions, while a mouth is rendered as an arc using the `d3.arc` shape generator. The example demonstrates basic D3 selection, attribute chaining, and SVG coordinate transforms without external data, relying on hardcoded dimensions and spacing values for the facial features.

RRichard-Koeln
92% match