Skip to main content
SimilarExport ZIP
100%

Smiley face D3.js

✓ Published0🌍 Public
BBruno Simoes
Last edited Jun 21, 2021
Created on Jun 21, 2021

A yellow smiley face, composed of SVG circles and a path-based mouth, demonstrates D3.js DOM selection and manipulation. The code uses the `select` and `arc` APIs from D3 v5 to construct the face, and its appended groups and shapes are animated via chained `transition().duration(2000)` calls, which move the eyebrow rectangles up and down. The animation runs over a 960x500 SVG canvas, using a static JavaScript bundle for rendering.

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 with D3.js

A yellow smiley face rendered in SVG appears, composed of circles for the head and eyes, rectangles for eyebrows, and an arc for the mouth. The eyebrows animate upward and downward using chained D3 transitions. Built with D3.js v5, it employs `select`, `arc`, and `transition`, drawing all shapes on a blank 900x500 canvas without an external dataset.

SSoUmItRoBoT
95% match
Loading thumbnail…

Smiley Face with D3.js

This example renders a static SVG smiley face—yellow circle, eyes, nose, and an arc-based mouth—centered on a 960×500 canvas. D3.js v5 selections build the shapes, while the `arc()` generator defines the mouth and nose paths. The only animation is a repeated 2-second `transition()` that moves the eyebrows up and down, demonstrating D3’s chained transitions on SVG attributes.

YYifu Chen
94% match
Loading thumbnail…

Smiley face using D3

A smiley face rendered in SVG uses D3.js to demonstrate fundamental DOM manipulation, with animated eyebrows that move up and down. The code draws yellow circles for the face and eyes, rectangles for eyebrows, and an arc-generated mouth, all positioned via D3 selections and transforms. A transition chain animates the eyebrow group’s vertical position over four one-second intervals, showcasing repeated attribute updates. The example relies on D3 v5’s `select`, `arc`, and `transition` APIs within a static SVG container.

AAyush Gupta
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
93% match
Loading thumbnail…

d3js

A yellow smiley face with black outlines and animated eyebrows is drawn in a 960x500 SVG canvas using D3 v5. The face comprises circles for the head and eyes, rectangles for eyebrows, and a path generated with the D3 `arc` function for the mouth. The `d3.select` and `d3.transition` APIs animate the eyebrow group’s vertical position over two seconds, creating a blinking effect. All shapes are appended to a central group, with code structured for clarity.

Ppei9223
93% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn with SVG circles, rectangles, and a path, centered on a 960-by-500 canvas. The face’s eyebrows animate upward and back down using chained `transition` calls with 2-second durations. The code demonstrates fundamental D3.js DOM manipulation by selecting the SVG, appending grouped elements, and using the `arc` generator to shape the mouth. D3 v5 is loaded via a CDN, with `select` and `arc` imported from the library.

Mmoonstorm86
93% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn and animated entirely in SVG using D3.js v5. The code selects the svg element and appends a group, then positions circles for the eyes, rectangles for the eyebrows, and an arc-based path for the mouth. The eyebrows animate upward and back via chained `transition().duration(2000)` calls on the group’s `transform` attribute. The example demonstrates basic DOM manipulation, shape creation, and transition sequencing with d3-selection and d3-shape’s `arc` generator.

Ggcappadaniel
93% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face rendered with SVG demonstrates D3.js DOM manipulation. The code uses `d3.select` to build circles for eyes and a face, a `d3.arc` path for the mouth, and `transition().attr()` to animate rectangular eyebrows moving up and down over two seconds. The example highlights chained transitions and attribute updates on a fixed SVG canvas.

Wwindwardpassage
93% match