Skip to main content
SimilarExport ZIP
100%

Face With D3.js

✓ Published0🌍 Public
Wwusushi
Last edited Dec 10, 2020
Created on Sep 23, 2020
Forked from Cars Scatter Plot

A yellow face with black eyes and eyebrows is drawn in the center of a red SVG canvas. The code uses D3 v5 to create and style the shape, then animates the eyebrows upward and back down with `transition().duration()`. The mouth is drawn using the `d3.arc()` generator. The example demonstrates basic SVG rendering with D3 selections and transitions, without loading external data.

AI-generated description

This scatter plot shows data about cars, from UCI Machine Learning Repository: Auto MPG Data Set.

MIT Licensed

Similar vizzes

Loading thumbnail…

Face With D3

A yellow circle with black outlines forms a face, featuring two eyes, animated eyebrows, and a mouth drawn as an arc. The code uses d3-selection to append SVG shapes and d3-transition with chained 2000-millisecond transitions to move the eyebrows downward and back. The d3.arc() API generates the mouth path, while attribute manipulation handles positioning and styling.

Iikimes
92% match
Loading thumbnail…

Face with D3.js

A smiling face is drawn as a yellow SVG circle with white outlines, featuring two black eyes that animate by moving down and up via chained `transition().duration()` calls. Built with D3.js v5, the example demonstrates basic SVG shape creation using `d3.select` and attribute assignment for circles, with a commented-out arc-based mouth showing an alternative path approach. The eyes use transform translations over three-second intervals, creating a simple blinking effect without external data.

Aarontha
92% match
Loading thumbnail…

Face in D3.js

This example uses D3.js to draw a yellow face with black eyes, eyebrows, and a mouth on an SVG canvas. The face is centered using a group element with a transform, while the eyebrows gently move up and down via chained transitions that animate a translate attribute over two seconds each. The mouth is created with an arc shape, and the code imports select and arc from the D3 library.

CCaleb
92% match
Loading thumbnail…

Face with D3.js

A stylized face drawn with D3.js animates its features on a dark background. The SVG canvas shows a yellow circle for the face, two black ellipses for eyes that transition between positions, and a rectangular mouth that widens and moves downward via D3 transitions. Using `d3.select` to fetch the SVG element and the `transition().duration()` API, the code orchestrates sequential transformations on the ellipse and rect attributes. All shapes are appended directly to the SVG, with eye motion repeating through chained transitions, while the face remains static.

TTebid Quinsy
92% match
Loading thumbnail…

Face with D3.js

This example shows a simple, stylized face built from SVG shapes. A yellow circle forms the head, with red circles for eyes, black rectangles for eyebrows, and a black arc path for the mouth. The code uses the D3.js v5 `select` and `arc` APIs within a React framework, and animates the eyebrows using chained `transition()` calls with a two-second duration to shift them upward and then back down.

Ddivinebooger
92% match
Loading thumbnail…

D3 Face

This example uses D3 v5 to draw a stylized yellow face, including a circular head, two eyes, and eyebrows, within an SVG. The eyebrows are animated using a chained `transition` to move down and back up. The mouth is created using D3's `arc` generator, and all elements are positioned relative to the SVG's center using a `g` element and transformations. The code applies shapes like `circle` and `rect`.

Kkkwyoung
92% match
Loading thumbnail…

D3 Face

This example uses D3 v5 to draw a stylized yellow face, including a circular head, two eyes, and eyebrows, within an SVG. The eyebrows are animated using a chained `transition` to move down and back up. The mouth is created using D3's `arc` generator, and all elements are positioned relative to the SVG's center using a `g` element and transformations. The code applies shapes like `circle` and `rect`.

Kkkwyoung
92% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow circle face with black-outlined eyes, eyebrows, and an arc-shaped mouth is drawn in SVG using D3.js v5. The eyebrows animate upward and back down over two seconds via chained `transition()` calls with `duration(2000)`. The code uses `d3.select`, `d3.arc`, and attribute manipulation to construct the face, with coordinates centered on an SVG canvas.

SShawn Kearney
92% match