Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
SShuai Shao
Last edited Mar 20, 2020
Created on Mar 20, 2020

This example shows a yellow smiley face built with SVG shapes, including a face circle, two eyes, and animated eyebrows that move continuously. It demonstrates fundamental D3.js DOM manipulation using method chaining with `d3.select` and `svg.append`, setting attributes like `r`, `cx`, `cy`, `fill`, and `stroke` on circle elements. The code uses D3 v5 from the `d3` module, importing `select` and `arc` (though `arc` is not used in the visible code). The face is rendered in a fixed 960x500 SVG canvas, with eye positions calculated from the width and height.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face rendered in SVG, with its eyebrows moving up and down in a looping animation. The face is built entirely through D3.js v5 selections, using `append` to create circle, rectangle, and path elements, and `arc()` to generate the mouth shape. Eye spacing, eyebrow dimensions, and positions are defined as constants, while the eyebrow motion is driven by chained `transition().duration()` calls that shift the group’s `transform` attribute. The code runs in a standalone HTML page with a 960x500 SVG canvas.

SShengjie-Sun
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by building a smiley face from SVG shapes: a yellow circle for the head, two black circles for eyes, and an arc-generated mouth. The code uses D3 selections, `svg.append`, and the `arc` generator from the d3-shape module to construct the face. The face is static, with no interactive behavior or animations, and the rendering approach relies on SVG elements within a 960-by-500 viewport.

烽烽火戏猪猴
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example builds a simple smiley face in an SVG canvas using D3.js v5, with a yellow circle for the head, two eyes, and an arc-based mouth. The code demonstrates basic DOM selection and manipulation via `d3.select` and `append`, alongside geometric positioning with `attr`. A notable feature is the animated eyebrows, which move up and down repeatedly using chained `transition().duration()` calls that alternate the group’s `transform` attribute. The example uses D3’s `arc` generator to draw the mouth and relies on plain SVG elements, showing how to combine static shapes with simple programmatic animation.

Cchenyucook
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how to build a smiley face using fundamental D3.js DOM manipulation, with a yellow circle for the head, black circles for the eyes, and an arc path for the mouth. The code uses D3’s `select` and `arc` APIs to append SVG elements to an `svg` container, positioning them based on the SVG’s width and height attributes. It renders entirely as SVG in the browser, importing D3 v5 from a CDN. The example highlights basic shape creation and attribute setting without data binding or interaction.

RRadhika Ganapathy
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example builds a smiley face from basic SVG shapes using D3.js, demonstrating core DOM manipulation and selection techniques. The code appends a yellow circle for the head, two eyes, rectangular eyebrows, and an arc-based mouth inside a centered group element. The eyebrows animate by chaining `transition` calls with a two-second duration, moving them upward and back down in an infinite loop. The implementation uses D3’s `select`, `append`, `attr`, and `arc` APIs to construct and position all elements.

LLinkous
95% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face rendered in SVG demonstrates fundamental D3.js DOM manipulation. The face uses D3 v5's `select` and `arc` to append a circle, eyes, and a mouth, with the mouth created via the `arc()` generator. Eyebrows, drawn as rectangles, animate upward and downward through chained `transition().duration()` calls, while the mouth also shifts position over two seconds. All elements are positioned within a centered `<g>` group, showing basic SVG construction and data-driven updates.

AAniket
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face built with SVG shapes whose eyebrows animate upward and downward in a looping motion. The code demonstrates fundamental D3.js DOM manipulation by selecting the SVG canvas, appending groups for positioning, and constructing circles, rectangles, and an arc-based mouth using `d3.select`, `d3.arc`, and chained `transition().duration()` calls. The face is centered via a translated group, with all coordinates calculated relative to the viewport dimensions.

Ggcappadaniel
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to construct a smiley face entirely through SVG elements in the DOM. It draws a yellow circle for the face, black circles for the eyes, and a path generated with the `d3.arc` function to form the mouth. The code demonstrates fundamental selections, attribute setting, and shape generation using APIs like `select` and `arc`. The resulting static face is rendered in an SVG container.

烽烽火戏猪猴
95% match