Fork of Fork of Let's make a face with D3.js!

100%

Fork of Fork of Let's make a face with D3.js!

✓ Published0🌍 Public

Last edited Mar 1, 2021

Created on Mar 1, 2021

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

A smiley face rendered in SVG with D3 v5 demonstrates fundamental DOM manipulation. The face consists of a yellow circle, two eyes, rectangular eyebrows, and an arc-based mouth created using `d3.arc()`. The eyebrows animate upward and back downward over four seconds via chained `transition().duration()` calls, shifting the eyebrow group's `translate` transform. The code uses `d3.select` to append elements, reads the SVG dimensions for centering, and positions features with explicit x/y offsets and eye spacing constants.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by building a smiley face from SVG primitives—a yellow circle, two eyes, animated eyebrows, and an arc-shaped mouth. The eyebrows transition upward and downward over two two-second intervals using D3’s `transition()` and `attr()` methods. The code imports `select` and `arc` from D3, sets explicit constants for eye spacing and eyebrow dimensions, and renders everything on an SVG canvas with a centered group transform.

Mmanjushayarreddu

97% match

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

A yellow smiley face is rendered in SVG using D3.js, with circular eyes and an arc-based mouth. A group containing rectangular eyebrows animates vertically via chained `transition()` calls, moving up and then back down over two two-second intervals. The code uses D3 selections and the `arc` generator from `d3-shape`, with dimensions driven by the SVG's width and height attributes. This example demonstrates fundamental DOM manipulation and animation with D3 v5.

Ssrinivasaraosankula

97% match

Loading thumbnail…

Fork of Let's make a face with D3.js!

A yellow smiley face rendered in SVG uses D3.js v5 to demonstrate fundamental DOM manipulation. The face's eyes are simple circles, while the eyebrows are rectangles that animate vertically in a looping sequence via chained `transition` calls with a 2000-millisecond duration. The mouth is drawn using `d3.arc` with specified inner and outer radii and angular bounds. The entire figure is centered through a group translation, and the code directly selects and appends SVG elements using `select` and `append`.

VVenkata Rajashekar Reddy Chinthala

96% match

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

A yellow smiley face with animated eyebrows is rendered in SVG using D3.js v5. The code uses `d3.select` and `d3.append` to build circles for the eyes, rectangles for the eyebrows, and a path generated with `d3.arc` for the mouth. Eyebrow movement is achieved through chained `transition().duration()` calls that shift the group’s transform. The example demonstrates fundamental DOM manipulation and transition sequencing with D3.

Ssugunagar

96% match

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

This example shows a yellow smiley face rendered in SVG, with its eyebrows animating up and down repeatedly. The face is drawn using D3.js v5, building circles, rectangles, and a mouth path through basic DOM selection and appending. Eyebrow movement is achieved with chained `transition` calls that alternate the vertical translation of the eyebrow group over two-second intervals. The code imports `select` and `arc` from D3, computes layout from the SVG’s dimensions, and uses inline attribute settings for styling and positioning.

117761A04F1

96% match

Loading thumbnail…

Fork of Let's make a face with D3.js!

A smiley face built with SVG and animated with D3.js demonstrates fundamental DOM manipulation. Yellow circular head, two eyes, rectangular eyebrows, and a curved mouth are created using D3 selections and the `d3.arc` path generator. The eyebrows repeatedly move up and down via chained `transition` calls, each lasting two seconds. The code uses D3 v5, imports `select` and `arc` from the library, and renders entirely in SVG without external data.

Vvram80

96% match

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

A yellow smiley face is drawn on an SVG canvas using D3.js, with its eyebrows animating up and down in a repeating two-second transition. The code builds the face with D3’s `select`, `arc`, and `transition` APIs, using SVG circles for eyes, rectangles for eyebrows, and a path for the mouth. The eyebrows shift vertically via chained `transition().duration()` calls, while the face itself remains static. The example demonstrates fundamental DOM manipulation and SVG rendering with D3 v5.

Ssnehareddygurram

96% match

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

A yellow smiley face built with SVG and animated with D3 v5 demonstrates fundamental DOM manipulation. The code uses `d3.select`, `append`, and `attr` to construct circles for the face and eyes, rectangles for the eyebrows, and a `d3.arc` path for the mouth. A chained `transition().duration(2000)` moves the eyebrow group up and down in a looping motion, while the iris and additional features remain static. The example relies on SVG attributes and D3’s enter/update/exit-free imperative style, with no external data source.

SSANEEM MOHAMMAD

96% match