Skip to main content
SimilarExport ZIP
100%

hi

✓ Published0🌍 Public
KKeerthanaD11
Last edited Sep 22, 2023
Created on Sep 22, 2023

This example renders a cheerful face in SVG, with a yellow circular head, two eyes, animated eyebrows, and a smiling arc-shaped mouth. The eyebrows smoothly move up and down using chained `transition` calls over two-second intervals. The code uses D3 v7’s `select` and `arc` APIs, importing them directly from the `d3` module. All shapes are positioned and scaled relative to the SVG’s width and height attributes.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

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

Hello

This example renders a cheerful yellow face with eyes, eyebrows, and a mouth as animated SVG shapes. The face is centered and drawn using D3 v5 primitives like `circle`, `rect`, and `arc`, with the eyebrows moving through a sequence of D3 transitions. The code imports `select` and `arc` from D3 and manipulates SVG attributes directly, showcasing a simple, playful animation built with React and D3’s SVG rendering.

BBrad Johnson
88% match
Loading thumbnail…

SVG Face

A smiling yellow SVG face with animated eyebrows demonstrates basic D3 shape and transition techniques. The face is centered using SVG groups and transforms, with circles for eyes, rectangles for eyebrows, and a path generated by D3’s `arc` function for the mouth. The eyebrows move upward and return via chained `transition().duration()` calls. The example uses d3-v5 select and arc APIs to build the static face and animate its expressions purely through SVG attribute interpolation.

Rrams211
88% match
Loading thumbnail…

SVG Face

A smiling yellow SVG face with animated eyebrows demonstrates basic D3 shape and transition techniques. The face is centered using SVG groups and transforms, with circles for eyes, rectangles for eyebrows, and a path generated by D3’s `arc` function for the mouth. The eyebrows move upward and return via chained `transition().duration()` calls. The example uses d3-v5 select and arc APIs to build the static face and animate its expressions purely through SVG attribute interpolation.

Rrams211
88% match
Loading thumbnail…

Hello D3.js!

A cheerful face with yellow circular head, black-outlined features, and a smiling arc mouth is drawn using SVG. The eyes and eyebrows animate upward and back down repeatedly using chained `transition().duration()` calls. Built with React and D3 v6, the example selects the SVG element, computes dimensions from its attributes, and uses the `arc()` generator from D3 to create the mouth path. The code demonstrates basic D3 selections, attribute manipulation, and timed animations.

Aalotia
88% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow circle face with black eyes, animated eyebrows, and a smiling arc mouth is drawn in SVG using D3 v5. The example demonstrates basic shapes and transitions, with the eyebrows moving up and down in a looping animation via chained `transition` calls. Code imports `select` and `arc` from D3, uses SVG attributes like `cx`, `r`, and `path` with an `arc` generator, and positions elements relative to the SVG center. Static eye circles and a mouth path complete the composition.

GGulrez
88% match
Loading thumbnail…

Let's make a face!

A smiling yellow face is drawn in SVG using D3 v7, with a circle for the head, smaller circles for eyes, and an arc-generated path for the mouth. The eyebrows, rendered as rectangles, animate upward and back down via chained `transition` calls. This example demonstrates basic SVG shape creation and animation with D3's selection and arc API.

LLYD
88% match
Loading thumbnail…

face

A smiling face drawn with SVG shapes—a yellow circle, black outlines, pink ellipses for cheeks and ears, and an arc for the mouth—has animated eyebrows that continuously move up and down. The example demonstrates fundamental DOM manipulation with D3.js v5, using `select`, `append`, and `attr` to build the face from primitive elements. A `transition` with a two-second duration moves the eyebrow group, while `arc` generates the mouth path. No external data is loaded; all geometry is hardcoded in `index.js`.

MM Hema
88% match