Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
Jjunge870214
Last edited Jan 21, 2019
Created on Jan 21, 2019

A yellow smiley face is drawn using SVG shapes with D3.js v5, including two eyes, a mouth created via the `d3.arc` generator, and rectangular eyebrows. The eyebrows animate upward and back down over two sequential two-second `transition` calls on their containing group’s `transform` attribute. The code demonstrates fundamental DOM manipulation by selecting the root `svg` element, appending groups, and positioning shapes with absolute coordinates 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, 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
98% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG using D3.js v5, with a circular head, two eyes, rectangular eyebrows, and a curved mouth created via the `d3.arc` path generator. The code demonstrates fundamental DOM manipulation by selecting an `<svg>` element and appending grouped shapes to it. The eyebrows animate upward and downward using chained `transition().duration()` calls on a group element, while the face’s geometry is positioned relative to the SVG’s center.

MMarian
98% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG using D3.js v5, with a circular head, two eyes, rectangular eyebrows, and a curved mouth created via the `d3.arc` path generator. The code demonstrates fundamental DOM manipulation by selecting an `<svg>` element and appending grouped shapes to it. The eyebrows animate upward and downward using chained `transition().duration()` calls on a group element, while the face’s geometry is positioned relative to the SVG’s center.

MMarian
98% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn as an SVG using D3.js v5, with circular eyes, a path-based mouth built via the `d3.arc` API, and rectangular eyebrows. The eyebrows animate upward and back down using chained `transition` and `attr` calls over two 2-second intervals. The code demonstrates fundamental DOM manipulation by selecting the SVG, appending groups and shapes, and setting attributes with transforms, all in an empty HTML body.

AAnkit
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 with animated eyebrows is drawn entirely in SVG using D3.js v5. The code demonstrates fundamental DOM manipulation by selecting the SVG element, appending groups, and building the face from basic shapes like circles and rectangles. D3 transitions move a shared eyebrow group up and down over two one-second intervals, while a mouth path is created using the `d3.arc` generator with specified inner and outer radii and smile angles.

Mmoha0902
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn and animated entirely in SVG using D3.js v5. The code selects the svg element and appends a group, then positions circles for the eyes, rectangles for the eyebrows, and an arc-based path for the mouth. The eyebrows animate upward and back via chained `transition().duration(2000)` calls on the group’s `transform` attribute. The example demonstrates basic DOM manipulation, shape creation, and transition sequencing with d3-selection and d3-shape’s `arc` generator.

Ggcappadaniel
97% match
Loading thumbnail…

Let's make a face with D3.js!

This example draws a yellow smiley face with D3.js, including eyes, a mouth, and animated eyebrows. The code demonstrates basic DOM manipulation by selecting an SVG element and appending shapes like circles, rectangles, and an arc-based mouth path. D3 v5’s `transition()` method moves the eyebrows up and down over repeated two-second intervals. The face is centered using an SVG group with a translated transform, and all geometry is defined by explicit pixel constants.

Vvoiletymr
97% match