Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
DDuyun Tan
Last edited Feb 24, 2020
Created on Feb 24, 2020

A yellow smiley face is drawn with D3.js using SVG circles and a path for the mouth, generated with the `arc` helper. The face's eyebrows, rendered as rectangles, animate upward and back down via chained `transition` calls with a 2000-millisecond duration. The code demonstrates fundamental DOM manipulation through D3 selections, appending elements to an SVG group, and using attribute setters with numeric values derived from the viewport dimensions.

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!

A yellow smiley face is drawn in SVG with D3.js, using circles for the eyes and an arc-generated path for the mouth. The eyebrows are rectangles that animate upward and back down via chained `transition().duration()` calls. The example demonstrates fundamental DOM manipulation with `d3.select`, `d3.arc`, and SVG attribute binding, with all geometry positioned relative to the viewport center.

Ppxdu
98% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn using D3.js v5's `select` and `arc` APIs, with SVG circles for the eyes and a path for the mouth. The eyebrows, rendered as rectangles, animate upward and back downward over four seconds via chained `transition().duration(2000)` calls. The code demonstrates fundamental DOM manipulation by building the face from scratch in an SVG container, using hardcoded dimensions and positions.

GGray1011
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn using SVG circles and a path, with D3's `arc` generator creating the mouth. The face's eyebrows, rectangular SVG elements, animate upward and back down over two seconds using chained `transition` calls with `attr` updates. The example demonstrates fundamental D3.js v5 DOM manipulation, including `select`, `append`, and `attr`, to build and transform SVG elements within a fixed 960×500 viewport.

MMd Hugo Lidero
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn with SVG circles, rectangles, and a path, centered on a 960-by-500 canvas. The face’s eyebrows animate upward and back down using chained `transition` calls with 2-second durations. The code demonstrates fundamental D3.js DOM manipulation by selecting the SVG, appending grouped elements, and using the `arc` generator to shape the mouth. D3 v5 is loaded via a CDN, with `select` and `arc` imported from the library.

Mmoonstorm86
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn on an SVG canvas using D3.js v5, with its eyebrows and mouth animating through a series of transitions. The code builds the face by appending circles for the eyes and a path for the mouth, generated with the `d3.arc` helper, while rectangles form the eyebrows. A `transition` on the eyebrow group moves them up and down over two seconds, and the mouth path rotates 180 degrees. This demonstrates fundamental DOM manipulation, attribute updates, and chained transitions with D3 selections.

LLittledevil7
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn with SVG shapes: a circular head, two eyes, rectangular eyebrows, and an arc-based mouth. The code demonstrates fundamental D3.js DOM manipulation and selection, using `d3.select` to append elements and `d3.arc` for the mouth path. Animated eyebrows move up and down via chained `transition()` calls with `attr` tweening over two-second durations, showcasing D3’s built-in animation capabilities without external data.

Aagongwpi
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG with D3.js, featuring circular eyes, a mouth created using the `d3.arc` shape generator, and animated rectangular eyebrows. The eyebrows transition vertically over two seconds up and then back down using D3’s `.transition().duration()`. The code demonstrates basic DOM manipulation by selecting the SVG element, appending groups and shapes, and setting attributes like radius, position, and fill. All rendering is SVG-based, with no external data source.

DD0no
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG with D3.js, featuring two eyes, brown eyebrows, and a mouth created using the `d3.arc` path generator. The eyebrows, grouped with the eyes, animate downward over two seconds and then return to their original position, using chained `transition` calls on the group's `transform` attribute. The face is centered within an SVG canvas by translating a root group, with all shapes positioned relative to this group. The code demonstrates fundamental DOM manipulation, selection, and attribute handling in D3 version 6.

Yyycgrace
97% match