Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published2🌍 Public
Eestregan
Last edited Dec 10, 2020
Created on Dec 10, 2020
Forked from Shapes with SVG

A simple yellow smiley face is drawn with SVG, featuring two eyes, eyebrows, and an arc-shaped mouth. The eyebrows rise and fall in a looping two-second animation using D3 transitions. All shapes are centered and positioned with D3’s `select` and `arc` APIs, with the arc generating the mouth’s curved path. The example demonstrates basic D3 v5 shape creation, group transforms, and chained `transition().duration()` calls for SVG animation.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn on an SVG canvas, with two eyes, eyebrows, and a mouth created from circles, rectangles, and an arc path. The eyebrows animate upward and back down over repeated two-second transitions, demonstrating D3's `transition` and `attr` methods for DOM manipulation and animation. The example uses D3 v5's `select`, `arc`, and chained transitions to build and move SVG elements dynamically.

Sstestedletbd
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn and animated entirely in SVG using D3.js v5. The code selects the svg element and appends a group, then positions circles for the eyes, rectangles for the eyebrows, and an arc-based path for the mouth. The eyebrows animate upward and back via chained `transition().duration(2000)` calls on the group’s `transform` attribute. The example demonstrates basic DOM manipulation, shape creation, and transition sequencing with d3-selection and d3-shape’s `arc` generator.

Ggcappadaniel
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG with D3.js, featuring circular eyes, a mouth created using the `d3.arc` shape generator, and animated rectangular eyebrows. The eyebrows transition vertically over two seconds up and then back down using D3’s `.transition().duration()`. The code demonstrates basic DOM manipulation by selecting the SVG element, appending groups and shapes, and setting attributes like radius, position, and fill. All rendering is SVG-based, with no external data source.

DD0no
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn with D3.js, featuring circular eyes, a curved mouth, and rectangular eyebrows that animate upward and back in a looping motion. The example demonstrates fundamental SVG DOM manipulation by selecting an `<svg>` element and appending grouped shapes with `d3.select` and `append`. It uses D3's `arc` generator to create the mouth path and `transition().duration()` to move the eyebrows and mouth, with attributes like `attr` and `translate` transforms controlling position and animation.

Mmirna981
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with black outlines is built from SVG shapes, including circles for eyes and a mouth drawn as an arc path. The animation shows the eyebrows, two rectangles, moving upward and back down via chained `transition().duration()` calls. D3.js v5 selects the SVG element and manipulates attributes like `cx`, `r`, and `transform` using `select` and `append`. The code uses D3's `arc` generator to construct the mouth, and all positioning is centered within a 960×500 viewport.

MMichael Connors
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG using D3.js v5, with a circular head, two eyes, rectangular eyebrows, and a curved mouth created via the `d3.arc` path generator. The code demonstrates fundamental DOM manipulation by selecting an `<svg>` element and appending grouped shapes to it. The eyebrows animate upward and downward using chained `transition().duration()` calls on a group element, while the face’s geometry is positioned relative to the SVG’s center.

MMarian
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG using D3.js v5, with a circular head, two eyes, rectangular eyebrows, and a curved mouth created via the `d3.arc` path generator. The code demonstrates fundamental DOM manipulation by selecting an `<svg>` element and appending grouped shapes to it. The eyebrows animate upward and downward using chained `transition().duration()` calls on a group element, while the face’s geometry is positioned relative to the SVG’s center.

MMarian
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn on an SVG canvas using D3.js, with two eyes, eyebrows, and a mouth created via basic shapes and an arc path. The entire face is centered with a group translation, and the eyebrows animate upward and back down over four seconds using chained `transition` calls. The code imports `select` and `arc` from D3 v5, sets circle, rectangle, and path attributes programmatically, and relies on SVG for rendering.

Ddbidwai
96% match