Skip to main content
SimilarExport ZIP
100%

Members

✓ Published0🌍 Public
Lliujunchao
Last edited Feb 28, 2020
Created on Feb 28, 2020
Forked from graph2.js!

A smiley face rendered in SVG displays animated eyebrows that move up and down in a looping transition. The face is built entirely with D3.js v5 selections, appending a yellow circle, two eye circles, rectangular eyebrows, and an arc-shaped mouth onto an SVG canvas. The animation uses chained `transition.duration` calls to translate the eyebrow group, while the static elements remain fixed. Data from a CSV file is loaded but not visualized in this example, which focuses on fundamental DOM manipulation and SVG shape construction.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

smiley face.js!

A yellow smiley face with animated eyebrows is drawn in an SVG using D3.js v5. The code selects the SVG element and appends groups and shapes (circles for eyes, rectangles for eyebrows, and a path for the mouth) using d3.select and d3.arc. Eyebrows move up and down via chained transition calls that alter their transform attribute. No external data is loaded; the visualization is purely code-generated.

Hhowlermonkeyar
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…

Let's make a face with D3.js!

A yellow smiley face rendered in SVG has animated eyebrows that move up and down using D3.js transitions. The example demonstrates fundamental DOM manipulation by appending circles, rectangles, and an arc-based mouth to a group, with the eyebrow movement created through chained `transition().duration()` calls that alter the group’s transform.

Ffiona187412
90% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face rendered in SVG has animated eyebrows that move up and down using D3.js transitions. The example demonstrates fundamental DOM manipulation by appending circles, rectangles, and an arc-based mouth to a group, with the eyebrow movement created through chained `transition().duration()` calls that alter the group’s transform.

Ffiona187412
90% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face drawn with SVG shapes has animated eyebrows that move up and down in a looping transition. The example demonstrates fundamental D3.js DOM manipulation, building the face with `select`, `append`, circles, rectangles, and a mouth path generated using the `arc` helper. Eyebrow motion is created through chained `transition().duration()` calls on a group element, while the face is centered using an SVG `transform`. The code uses D3 v5 modules and relies on static shape attributes rather than data binding.

MMMoronto
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
90% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental D3.js DOM manipulation by constructing an animated smiley face from SVG shapes. The face consists of a yellow circle head, two dark eyes, rectangular eyebrows, and an arc-based mouth, all positioned relative to an SVG group centered on the canvas. Using d3 selection and transition methods, the eyebrows perform a repeated up-and-down motion over two-second intervals. The code relies on d3.select, d3.arc for the mouth path, and chained transition.attrTween (via transition.attr) to animate the eyebrow group’s vertical offset, showcasing basic data-driven document updates without any external dataset.

Ttonestar
89% match
Loading thumbnail…

Let's make a face with D3.js!

A D3.js animation builds a smiley face from SVG shapes, then makes its eyebrows bounce repeatedly as a looped transition. The face is composed of a yellow circle, two eyes, rectangular eyebrows, and an arc-based mouth positioned with SVG transforms. The code imports `select` and `arc` from D3 v5 to generate the mouth path and manipulate elements. A chained `transition().duration(2000)` sequence moves the eyebrow group up and down, demonstrating basic DOM selection and animation without data binding.

Vveagy
89% match