data viz project

100%

data viz project

✓ Published1🌍 Public

Last edited May 5, 2022

Created on May 5, 2022

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

A yellow smiley face on a black-outlined circle uses D3.js v5 to animate its eyebrows in a looping transition. The SVG face is centered via a translated group, with eyes placed using circles and eyebrows as rectangles. D3’s `transition` and `attr` methods move the eyebrow group up and down repeatedly, while the mouth is drawn with the `arc` generator using a half-circle path. The example demonstrates basic DOM manipulation and shape creation in D3, rendering entirely in SVG.

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 as an SVG circle with animated eyebrows made of rectangles. The eyebrows transition upward and then return to their original position over two seconds each using D3's `transition()`. The face is built with D3 selections, appending elements like `circle`, `rect`, and `path`, while the mouth uses the `arc()` generator. Data is hardcoded in `index.js`, and the visualization runs entirely in the browser with D3 v5.

Ccodexmon

90% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face rendered in SVG has animated eyebrows that rise and fall. The face is built through basic DOM manipulation with D3.js, appending circles, rectangles, and an arc-shaped mouth to an SVG group. A chained `transition` with a 2000-millisecond duration moves the eyebrow group up and down. The example demonstrates core D3 v5 selections and transitions for simple, focused visual animations.

WWesley Yuen

90% match

Loading thumbnail…

Dataviz 2018 - 2. D3 starter, SVG DOM manipulation, transition(animation), Smile Face - Ep4

This example shows a yellow smiley face built from SVG elements, with animated eyebrows that move up and down in a looping transition. The code creates a circle for the face, two circles for eyes, a mouth drawn with `d3.arc`, and rectangles for eyebrows using D3 selections. It demonstrates SVG DOM manipulation by appending elements to groups, and animates the eyebrow group’s `transform` attribute with chained `transition().duration()` calls. The visualization runs in D3 v7 and renders to a 960×500 SVG canvas.

MMinwoo Pak

90% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn using D3.js v5, with its eyebrows animating upward and back down in a continuous loop. The visualization demonstrates fundamental DOM manipulation by building the face from basic SVG shapes: circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth. The code uses `d3.select` and `d3.arc` to construct elements, while chained `transition` calls with a 2000-millisecond duration animate the eyebrow group's transform. The resulting animation repeats, showcasing how D3's data-driven approach applies to static and dynamic visual elements.

Mmihir2709

90% match

Loading thumbnail…

Let's make a face with D3.js!

Mmihir2709

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

90% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows is drawn in SVG using D3.js v5. The face is centered via a translated group, with circles for eyes, rectangles for eyebrows, and an arc-generated path for the mouth. The eyebrows transition upward and back downward over two seconds each using chained `transition` and `duration` calls, demonstrating fundamental DOM manipulation and animation with D3's `select`, `arc`, and transition API.

Ddtdenver

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

89% match