LALA: et's make a big face!

100%

LALA: et's make a big face!

✓ Published2🌍 Public

Last edited Dec 10, 2019

Created on Dec 9, 2019

Forked from Let's make a face with D3.js!

A large yellow smiley face is drawn with D3.js, featuring two eyes, rectangular eyebrows, and a mouth created using the `d3.arc` API. The eyebrows animate vertically in a looping sequence using chained `transition` calls with a 2-second duration. The SVG scene is centered via a `g` element, with all shapes positioned relative to the viewport dimensions. The code demonstrates fundamental DOM manipulation through D3 selections and attribute updates.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in the center of an SVG canvas, with a black-outlined circle, two eyes, a nose, arched mouth, and pair of rectangular eyebrows. The eyebrows animate upward and then back down in a looping sequence. Built with D3.js v5, the example demonstrates fundamental DOM manipulation using selection and append methods, along with the `arc` generator to create the mouth and nose, and `transition` with `duration` to move the eyebrow group. No external data is used; all shapes are coded directly.

LLinn

88% match

Loading thumbnail…

03_Let's make a face with D3.js!

A yellow smiley face is drawn on an SVG canvas using D3.js, with circles for the eyes, a mouth formed by the `d3.arc` generator, and rectangular eyebrows that animate upward and back down via chained `transition` calls over two seconds each. The code selects the SVG element, positions a group at its center, and uses D3's modular imports (`select`, `arc`) to construct and manipulate shapes. The eyebrows' movement demonstrates basic DOM updates through D3's data-join-free attribute transitions.

LLuiz Domingues

88% 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 circles for eyes, rectangles for eyebrows, and an arc-generated path for the mouth. The code uses d3.select to build the face elements and d3.arc to shape the mouth, while a chained transition animates the eyebrows moving up and down over two-second intervals. The face is centered via an SVG transform, and the animation runs in a loop, demonstrating basic DOM manipulation and state changes with D3 transitions.

LLara Issa

88% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with moving eyebrows is assembled on an SVG canvas using D3.js v5. The code builds the face from primitive shapes—circles for the eyes, rectangles for the brows, and a path from the `d3.arc()` generator for the mouth. The eyebrows are animated via chained `transition().duration()` calls that shift their container group up and down over four seconds. All dimensions are derived from the SVG's width and height attributes, and the face is centered with a translated `<g>` element.

MMartin Lauf

87% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn with D3.js, featuring two eyes, a curved mouth, and animated eyebrows that move up and down in a looping transition. The visualization demonstrates fundamental DOM manipulation by appending and transforming SVG shapes (`circle`, `rect`, `path`) within grouped elements (`g`), using D3 v5’s selection and transition APIs. The face is centered via a translated group, and the mouth is generated with D3’s `arc` shape helper, while the eyebrow motion relies on chained `.transition().duration()` calls.

Ccollv004

87% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows appears inside a black-bordered circle. The code demonstrates fundamental DOM manipulation in D3.js v5 by selecting the SVG element, appending a group, and using `arc()` to generate a mouth path. The two rectangular eyebrows animate independently using chained `transition().duration(2000)` calls, moving them up and down in a looping sequence.

LLonwabo11

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

87% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG with D3.js, featuring two eyes, brown eyebrows, and a mouth created using the `d3.arc` path generator. The eyebrows, grouped with the eyes, animate downward over two seconds and then return to their original position, using chained `transition` calls on the group's `transform` attribute. The face is centered within an SVG canvas by translating a root group, with all shapes positioned relative to this group. The code demonstrates fundamental DOM manipulation, selection, and attribute handling in D3 version 6.

Yyycgrace

87% match