Skip to main content
SimilarExport ZIP
100%

d3js

✓ Published7🌍 Public
Ppei9223
Last edited Sep 11, 2022
Created on Sep 10, 2022

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.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

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

D3.js

A smiley face rendered in SVG animates by raising and lowering its eyebrows. The yellow circular head, black eyes, and mouth are drawn using D3 v6 shape generators and SVG primitives. The code uses `arc()` for the mouth, `circle` and `rect` elements for facial features, and chained `transition().duration()` calls to move the eyebrow group up and down over two-second intervals.

SSerena Fang
94% match
Loading thumbnail…

Animated smiley with D3.js

A yellow smiley face with eyebrows animates on an SVG canvas using D3.js v6. The face is constructed from SVG primitives: a circle for the head, smaller circles for eyes, rectangles for eyebrows, and a path generated with the `d3.arc` generator for the mouth. The `transition` API repeatedly moves the eyebrows up and down in a looping animation.

AAditya Kumar
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
93% match
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
93% match
Loading thumbnail…

Let's make a face with D3.js!

A smiley face, drawn with yellow circles and a black smile, animates by shifting its eyebrows upward and back down. The entire face is constructed in an SVG canvas using D3.js version 5, with the D3 selection and append API building the DOM elements. The eyebrows move through a chained sequence of D3 transitions, each lasting two seconds, which change the transform attribute of a group containing two rectangles. The mouth is generated using D3’s arc shape helper to create a path with specified inner and outer radii and angular range.

Ssara17585
93% match
Loading thumbnail…

Smiley face D3.js

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.

BBruno Simoes
93% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows is drawn entirely through D3.js selections and SVG shapes. The face uses circles for the head and eyes, rectangles for the brows, and a d3.arc path for the mouth. A chained transition on the eyebrows group animates their vertical position over two seconds, moving them up and back down, demonstrating fundamental DOM manipulation and tween-less attribute transitions in D3 v5.

Mmi-desai
93% match