大黄脸

100%

✓ Published4🌍 Public

Last edited Dec 20, 2020

Created on Dec 17, 2020

Forked from bar

A yellow face graphic centered in an SVG canvas animates its eyebrows in a quick upward blink. The face is built from basic shapes: a large yellow circle, two small eye circles, rectangular eyebrows, and a mouth drawn as an arc using `d3.arc`. The code uses `d3.select`, `d3.append`, and `transition.attr` for the animation, with `scaleLinear` and `scaleBand` imported but not used. Static styling is applied via CSS, and no external data file is loaded.

AI-generated description

A bare chart of d3js. HTML page demonstrating use of CSS and JavaScript

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

A yellow SVG face appears on a blank canvas, with its two rectangular eyebrows animating upward and then back down in a repeating loop. The facial features—head, eyes, and mouth—are constructed by appending basic shapes to a central group, with the mouth drawn as a semi-circular arc using D3’s `arc` generator. The animation is driven by chaining `transition().duration(2000)` calls on the eyebrow group, demonstrating fundamental DOM manipulation and a simple timeline with D3 v5.

Xxiaoma1002

87% match

Loading thumbnail…

face

A yellow smiley face is drawn as an SVG circle with black-stroked eyes and an arc-shaped mouth. Using D3.js v5, the code selects and appends SVG elements to a 960x500 canvas, centering the face via a translation. The eyebrows, rendered as rectangles, animate upward and downward through chained `transition` calls with a 2000-millisecond duration, demonstrating fundamental DOM manipulation and data-join-free animation.

Mmyoung1032

86% match

Loading thumbnail…

Making Face with D3.js

A cheerful yellow face is drawn with D3.js (v6) in an SVG, featuring a circle for the head, two outlined eyes, and an arc-based mouth. The right eyebrow animates upward and back down over four seconds using chained `transition().duration()` calls, while the left stays static. Shapes are built with `select`, `append`, and `arc` from the D3 API, centered via a translated group. The SVG background is LightYellow, and data is hardcoded as numeric constants for positioning.

MMei

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

86% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow circular face is built from SVG shapes, with two eyes, animated eyebrows, and a semi-circular mouth, all centered on a blank canvas. The code constructs the face using D3.js version 5 selection and arc methods, positioning elements via translations and attributes. Eyebrows transition between two vertical offsets over two seconds each, creating a repeated raising-and-lowering motion. The visualization demonstrates basic SVG drawing and transition animations without external data.

Ppcbt1125

86% match

Loading thumbnail…

Face With D3.js

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.

Wwusushi

86% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow circle face with black-outlined features is rendered in SVG, and its eyebrows animate upward and back down over four seconds. Built with D3 v5, the example uses `d3.select` to target the SVG, `d3.arc` to generate the mouth path, and chained `transition().duration()` calls to move the eyebrow group. The face is centered via a translated `g` element, with eye spacing, radius, and eyebrow dimensions defined as constants. No external data is loaded; all shapes are constructed programmatically from hard-coded values.

Ppcbt1125

85% match

Loading thumbnail…

make a face

A yellow circle forms a cartoon face with two eyes and a mouth, while the eyebrows animate upward and downward. The example uses D3.js to construct the SVG scene, including a mouth path built with the `arc` function. The animation relies on chained `transition().duration()` calls to move the eyebrow group between two translate positions. The code operates entirely within an SVG canvas and does not reference any external dataset.

Zzhangfa

85% match