Skip to main content
SimilarExport ZIP
100%

Hello HTML

✓ Published0🌍 Public
AArunGauchan
Last edited Aug 14, 2021
Created on Aug 14, 2021

This animation demonstrates how D3.js can manipulate SVG elements to create a moving smiley face. The yellow face with eyes, eyebrows, and a mouth is drawn using basic shapes and a d3.arc path. Eyebrows animate up and down through chained d3 transitions that adjust their transform attribute over two-second intervals. The example uses D3 selections to append circles, rectangles, and an arc-generated path within a centered group.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Hello HTML

This example shows a yellow smiley face drawn with SVG circles and a path, whose eyebrows rise and fall in a looping animation. It demonstrates fundamental DOM manipulation with D3.js by appending SVG elements to a group and using chained `transition().duration()` calls to animate the eyebrow group’s `transform` attribute. The mouth is created using `d3.arc()` with specified inner and outer radii and angle ranges. The code relies on `d3.select` to access the SVG and sets geometric attributes like `cx`, `cy`, and `r` directly.

Ddatadunphy
93% match
Loading thumbnail…

Hello HTML

A yellow smiley face with animated eyebrows is rendered in SVG. D3.js builds the face by appending circles, rectangles, and an arc path, then uses `transition().attr()` to move the eyebrows up and down in a two-second loop. The animation demonstrates fundamental DOM manipulation with `d3.select` and `d3.arc`.

Kkalinarpr
93% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG, with animated eyebrows that move up and down in a looping transition. The example demonstrates fundamental DOM manipulation by using D3 selections to create and position circles, rectangles, and an arc-based mouth via the `d3.arc` API. Built with D3 v5, it chains `.transition().duration(2000)` calls to animate the eyebrow group's transform attribute. The source code imports `select` and `arc` from D3, and renders everything within a fixed 960×500 SVG canvas.

Mmmustafau
91% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face rendered in SVG with animated eyebrows that move up and down. D3.js creates the face using circles for the eyes, rectangles for the eyebrows, and an arc path for the mouth, all positioned within a central group. The animation uses chained transitions on the eyebrows group, alternating between two vertical offsets over two-second intervals. The code imports `select` and `arc` from d3 and uses an SVG container sized 960 by 500 pixels.

AAngelii
91% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face rendered in SVG, with its eyebrows moving up and down in a looping animation. The face is built entirely through D3.js v5 selections, using `append` to create circle, rectangle, and path elements, and `arc()` to generate the mouth shape. Eye spacing, eyebrow dimensions, and positions are defined as constants, while the eyebrow motion is driven by chained `transition().duration()` calls that shift the group’s `transform` attribute. The code runs in a standalone HTML page with a 960x500 SVG canvas.

SShengjie-Sun
91% 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
91% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face drawn with SVG circles, rectangles, and an arc path, with animated eyebrows that rise and fall in a looping transition. The code uses D3.js v5 selections to append elements to an SVG canvas and `transition().duration()` to move the eyebrow group vertically. Using `d3.arc` for the mouth and fixed pixel offsets for features, it demonstrates fundamental DOM manipulation and chained transitions without external data.

Rranger
91% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face drawn with SVG shapes, whose eyebrows animate upward and then back down in a looping motion. It demonstrates fundamental D3.js DOM manipulation by selecting an `<svg>` element and appending groups for the eyes and eyebrows, using `d3.select` and `d3.arc` for the mouth path. The eyebrow movement relies on chained `transition().duration()` calls that adjust a `transform` attribute, while the face’s geometry is defined via static attributes for circles, rectangles, and the arc path.

LLuce Liu
91% match