Lets make a face

100%

Lets make a face

✓ Published4🌍 Public

Last edited Feb 15, 2021

Created on Jan 3, 2021

A simple yellow smiley face is drawn in an SVG, composed of a large circle, two eyes, and a curved mouth. The face’s eyebrows animate upward and then back down in a repeating sequence using D3 v6 transitions. The visualization is built with D3 selections and the `arc` generator for the mouth, while all geometric properties are defined as constants in the code.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Lets make a face

A yellow smiley face is drawn on an SVG canvas using D3.js selection and arc methods. The face includes circles for eyes and a path for the mouth, while rectangular eyebrows animate vertically through chained transition calls over two-second intervals. This example demonstrates fundamental DOM manipulation by building shapes from appended SVG elements and updating their attributes with D3 transitions.

BBreu1995

94% match

Loading thumbnail…

Lets make a Face!

A yellow smiley face appears centered on an SVG canvas, built from D3 shapes: a circle for the head, two circles for eyes, rectangles for eyebrows, and a path for the mouth. The eyebrows animate upward and back down repeatedly using D3's `transition()` with a two-second duration. The code uses `d3.select`, `d3.arc`, and attribute setters to construct the static face, while the animation is driven by chained `transition().attr()` calls, rendering in SVG.

OOvxOO

94% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face rendered in SVG demonstrates fundamental D3.js DOM manipulation. The face uses D3 v5's `select` and `arc` to append a circle, eyes, and a mouth, with the mouth created via the `arc()` generator. Eyebrows, drawn as rectangles, animate upward and downward through chained `transition().duration()` calls, while the mouth also shifts position over two seconds. All elements are positioned within a centered `<g>` group, showing basic SVG construction and data-driven updates.

AAniket

94% match

Loading thumbnail…

Let's Make a Face with D3.js!

A yellow smiley face is rendered in SVG, with the head as a circle, two eyes, and a mouth drawn using d3.arc. Animated eyebrows repeatedly move up and down via d3 transitions, changing their transform attribute over two seconds. The face is centered using D3 selections and attribute manipulation, with all shapes positioned relative to the SVG’s center. The visualization uses d3.select, d3.arc, and transition calls, with no external data source.

JJordan Arnold

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 smiley face is drawn in SVG using D3.js, with circular eyes, rectangular eyebrows, and a mouth created via `d3.arc` for the half-circle path. The face is centered by translating a group element to the middle of the 960×500 SVG canvas. The eyebrows animate upward and back down over four seconds, using chained `transition().duration(2000)` calls that modify the group’s `transform` attribute. The example relies on D3 v5 selections and the `arc` generator to construct the facial features.

Ooabundes

93% match

Loading thumbnail…

Let's make a face

A yellow circle becomes a smiley face as the animation runs. D3 v5 builds the face from SVG shapes—a circle for the head, two circles for eyes, two rectangles for eyebrows, and an arc path for the mouth—centered within an SVG canvas. The left eyebrow briefly moves upward via chained `transition` calls, while all other elements remain static. The code uses d3-selection, d3-arc, and SVG attributes, with no external data source.

Jjf1978

93% match

Loading thumbnail…

Let's make a face with D3.js!

A simple yellow smiley face is drawn with SVG shapes, featuring circular eyes, rectangular eyebrows, and a mouth created using the `arc` generator. The eyebrows animate upward and back down via chained `transition` calls over two-second durations. The code builds the face with D3 v5 selections, using `select`, `attr`, and `append` to position elements relative to a centered group, with coordinates calculated from the SVG’s width and height.

Pphongbui81062

93% match