Hello HTML

100%

✓ Published0🌍 Public

Last edited Sep 24, 2021

Created on Sep 24, 2021

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

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`.

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

94% match

Loading thumbnail…

Hello HTML

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.

AArunGauchan

93% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows is rendered in SVG using D3.js. The face is constructed from basic SVG shapes: circles for the eyes, rectangles for the eyebrows, and an arc path for the mouth. The code uses D3 selections (`select`, `append`) and the `arc` generator, with `transition().duration()` to move the eyebrows up and down. The animation runs once, lifting the eyebrows 50 pixels and then returning them to their original position, demonstrating fundamental DOM manipulation with D3 v5.

PPhilippe Rigovanov

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

90% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG with D3.js, featuring animated eyebrows that move up and down. The code selects the SVG element, appends circles for the face and eyes, rectangles for the eyebrows, and an arc for the mouth using d3.arc. Eyebrow movement is achieved through chained transition().duration() calls that shift their vertical position. The example demonstrates fundamental DOM manipulation with D3's select and append methods, using static attributes and no external data.

VVito

90% match

Loading thumbnail…

HTML Starter

This example shows a yellow smiley face rendered as an SVG, with animated eyebrows and a mouth that shifts between a filled arc and a thin outline. The face is centered using a translated group element, with circles for eyes and an arc-generated path for the mouth. Built with D3 v6 in a React framework, it uses `select`, `arc`, and chained `transition().duration()` calls to animate the eyebrow position and mouth shape over two seconds. The code demonstrates basic SVG attribute manipulation and data-free geometric drawing.

LLuisEnrique-Naica

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!

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