Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published1🌍 Public
CChooo4u
Last edited Sep 8, 2018
Created on Sep 8, 2018

A smiling face rendered in SVG uses D3.js v5 to demonstrate fundamental DOM manipulation and animation. The code draws a yellow circle with eyes, cheeks, pupils, eyebrows, and a mouth using `d3.select`, `d3.append`, and `d3.arc`. Transitions animate the pupils shifting side-to-side and the eyebrows moving up and down via `transition.attr`. The example relies on D3’s selection and transition APIs to update SVG attributes, with no external data source.

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 smiling face built with SVG demonstrates basic D3.js DOM manipulation and animation. Drawn with a yellow circle, two eyes, rectangular eyebrows, and an arc-based mouth, the face animates by moving the eyebrows upward and back down using chained `transition().duration()` calls. The example uses D3 v5’s `select`, `arc`, and `attr` methods to construct and style elements, with the eyebrow displacement triggered automatically on load.

RRoyCsuka
95% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face is drawn with D3.js, rendered as SVG shapes and animated with the transition API. The code uses D3 v5 to construct a yellow circle head with eyes and a path-based mouth, generated via the `arc` function with specified inner and outer radii. Eyebrows move up and down over two seconds using chained `transition` calls, showcasing animation of SVG attributes. The example relies on D3's `select` and `append` for DOM manipulation, with geometry defined by variables for spacing and offsets.

YYunLing
95% 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
95% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling yellow face rendered in SVG uses circles for the eyes and head, rectangles for animated eyebrows, and a path for the mouth. The eyebrows move via chained D3.js transitions, shifting their vertical position over two seconds and then snapping back. The example demonstrates fundamental DOM manipulation using D3.js v5’s `select` and `append` functions, with coordinates calculated from the SVG’s dimensions. The animation runs automatically on page load.

MMorten Kjølstad Dybo
95% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling yellow face rendered in SVG uses circles for the eyes and head, rectangles for animated eyebrows, and a path for the mouth. The eyebrows move via chained D3.js transitions, shifting their vertical position over two seconds and then snapping back. The example demonstrates fundamental DOM manipulation using D3.js v5’s `select` and `append` functions, with coordinates calculated from the SVG’s dimensions. The animation runs automatically on page load.

MMorten Kjølstad Dybo
95% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face rendered with SVG demonstrates D3.js DOM manipulation. The code uses `d3.select` to build circles for eyes and a face, a `d3.arc` path for the mouth, and `transition().attr()` to animate rectangular eyebrows moving up and down over two seconds. The example highlights chained transitions and attribute updates on a fixed SVG canvas.

Wwindwardpassage
95% 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
95% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face rendered as SVG is built entirely through D3.js v5 DOM manipulation, with a circular head, two eyes, and a mouth drawn using `d3.arc()`. The example demonstrates layered selections and chained transitions by animating the eyebrows upward and back down over two two-second intervals. The code uses D3's `select`, `append`, and `transition` methods to construct and update elements, while a constant eye spacing offsets left and right features around the face's center. No external data is used; geometry derives from hardcoded pixel dimensions on a 960×500 viewport.

AAngelii
95% match