This is my title

100%

This is my title

✓ Published1🌍 Public

Last edited Feb 2, 2021

Created on Feb 2, 2021

A yellow smiley face is drawn on a light blue SVG canvas, featuring two black eyes and a curved mouth. The mouth begins as a wider arc and animates into a smaller, more pronounced smile using a D3 transition on a path generated with the `d3.arc` generator. The face is constructed with basic SVG circle and path elements, positioned via a `g` transform. The animation uses D3 v6's selection transition, showing a dynamic shift in the mouth's start and end angles over time.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Making a smily face

A yellow smiley face is drawn on an SVG canvas with two eyes, a smile, and animated eyebrows. The face is centered using a D3 selection with the `translate` transform, and the mouth is created with the `d3.arc` path generator. The eyebrows use `transition().duration()` to move up and down over two seconds each, demonstrating chained D3 transitions. The code relies on `d3.select`, `d3.arc`, and SVG elements like `circle` and `rect`, all rendered with d3.v5.

Kketuckychix

89% match

Loading thumbnail…

Smily Face

A yellow smiley face is drawn with SVG shapes, including circles for the eyes and an arc-based mouth, centered on a blank canvas. The code uses D3 v6 to construct the face and animates the eyebrows and mouth with chained `transition().duration()` calls, shifting their transforms over two-second intervals. The mouth path is generated using `d3.arc`, and the animation cycles the eyebrows up and down while rotating and recoloring the mouth. The example demonstrates basic SVG styling, grouping, and transition sequencing in D3.

CChristine Lanser

88% match

Loading thumbnail…

Smiley face

A yellow smiley face with black eyes, eyebrows, and an arc-shaped mouth is drawn in the center of an SVG canvas using D3.js v6. The face is constructed with D3 selections and shape generators, including `d3.arc` for the mouth and appended SVG `circle` and `rect` elements. A brief animation occurs when the eyes transition their fill color to black after a one-second delay. The graphic is rendered as static SVG with a simple transition effect.

AArun

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

88% match

Loading thumbnail…

make a smile face

A yellow smiley face is drawn in the center of an SVG canvas using D3 v7. The face includes a circular head, two black eyes, and an arc-based mouth created with the `d3.arc` generator. Two rectangular eyebrows are added, and the right eyebrow animates by repeatedly transitioning its vertical position via `transition.attr` over two-second durations, causing a winking effect while the rest of the face remains static.

Ddaniel

88% match

Loading thumbnail…

face

A yellow smiley face is drawn as an SVG circle with black-stroked eyes and an arc-shaped mouth. Using D3.js v5, the code selects and appends SVG elements to a 960x500 canvas, centering the face via a translation. The eyebrows, rendered as rectangles, animate upward and downward through chained `transition` calls with a 2000-millisecond duration, demonstrating fundamental DOM manipulation and data-join-free animation.

Mmyoung1032

88% match

Loading thumbnail…

let's animate the face

A yellow smiley face is drawn as an SVG circle with eyes, eyebrows, and a mouth, all positioned using D3.js selections and attribute helpers. The eyebrows and mouth animate via chained `transition.attr` calls, moving vertically and scaling over two-second intervals, demonstrating fundamental DOM manipulation with `d3.select`, `d3.arc`, and transition methods. The example uses D3 v5 and renders entirely in SVG.

TT E Simon

88% match

Loading thumbnail…

Lets make a face

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.

Kkhuton

87% match