Skip to main content
SimilarExport ZIP
100%

EP02 | 學會 D3.js 製作圖表 - 製作笑臉

✓ Published0🌍 Public
CCeleste6666
Last edited Nov 5, 2021
Created on Nov 5, 2021

This example draws a smiling face as an SVG graphic using D3.js version 7. The yellow circle face, two eyes, arc path mouth, and rectangular eyebrows are all constructed with D3 shape and selection APIs, including `d3.arc` for the mouth’s curved path. A `transition` animates the eyebrows upward and back downward over two seconds each, demonstrating chained transitions on a transformed group element.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Learn D3.js

This visualization draws a smiling face using D3.js in an SVG canvas. A yellow circle forms the head, with black circles as eyes and a curved arc path as the mouth. The eyebrows, rendered as rectangles, animate upward and then back down using chained `transition().duration(2000)` calls. The code uses the `select`, `append`, and `arc` APIs from D3 v7 within a React framework, manipulating SVG attributes directly.

AApril Fangzhu Guo
86% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face is rendered as a yellow circle with black eyes, animated eyebrows, and a curved mouth built from an arc path. The code uses D3 v5 selections to append SVG shapes, and chains `transition().duration()` calls to move the rectangular eyebrows up and down. The mouth is generated with the `d3.arc()` helper, specifying inner and outer radii and angular extents. Static circle elements define the face and eyes, while the animation runs once on load in a React framework.

Llittlenanopichu
85% match
Loading thumbnail…

Let's make a face with D3.js

This example builds a yellow smiley face in an SVG canvas using D3.js v5 within a React framework. The face is constructed from primitive shapes: a circle for the head, two circles for the eyes, and an arc path for the mouth, all positioned relative to the center of the viewport. The code uses D3’s `select` and `append` to build the scene, and employs a `transition` on the eyebrows to animate them over ten seconds, rotating them via a CSS `transform`. The entire composition is rendered as static SVG, with the animation handled through D3’s transition system.

Mmarci640
85% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by constructing a cheerful yellow smiley face from SVG primitives and animating its eyebrows. The code uses `d3.select`, `d3.append`, and `d3.arc` to build the face's circles, rectangles, and mouth path within a centered group. A `transition` with a two-second duration moves the eyebrow group up and down, creating a looping eyebrow-raising effect. The rendering is entirely SVG-based, with coordinate calculations in plain JavaScript driving the layout.

Wwusuowei60
85% match
Loading thumbnail…

Let's make a face with D3.js!

This example draws a yellow smiley face with D3.js, showing how to build and animate SVG shapes through fundamental DOM manipulation. The face is composed of circles for the eyes and an arc-generated mouth, while the code uses `transition.attr` to move its rectangular eyebrows up and down over two-second intervals. It uses D3 v5’s `select`, `attr`, `append`, and `arc` API to construct the scene, with all elements centered via an SVG `<g>` transform. The animation repeats once, demonstrating chained transitions on SVG attributes.

Wwen787
85% match
Loading thumbnail…

Let's make a face with D3.js!

This example draws a yellow smiley face with D3.js, showing how to build and animate SVG shapes through fundamental DOM manipulation. The face is composed of circles for the eyes and an arc-generated mouth, while the code uses `transition.attr` to move its rectangular eyebrows up and down over two-second intervals. It uses D3 v5’s `select`, `attr`, `append`, and `arc` API to construct the scene, with all elements centered via an SVG `<g>` transform. The animation repeats once, demonstrating chained transitions on SVG attributes.

Wwen787
85% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face is drawn on a yellow circular head using SVG elements. The face’s eyebrows and mouth animate, moving up and down and scaling to create an expressive motion. The example uses d3.select to build the SVG structure and d3.arc to construct the mouth path. Eyebrow and mouth animations are driven by chained d3.transition calls with specified durations. The code uses a React setup and a bare HTML page, with all D3 functions applied directly to the SVG.

JJoachimSchaeffer
85% match
Loading thumbnail…

Let's make a face with D3.js!

This example draws a smiling yellow face out of SVG shapes using D3.js v5. It constructs a circle for the head, two circles for eyes, rectangles for eyebrows, and an arc path for the mouth, all centered on an SVG canvas. The eyebrows animate upward and back down over four seconds using chained `transition` calls with a two-second duration each. The code relies on D3’s `select` and `arc` functions to build the scene entirely from static attributes, with no external data source.

Fforcox43
85% match