sample

100%

✓ Published0🌍 Public

Last edited Sep 22, 2023

Created on Sep 22, 2023

Forked from Let's make a face with D3.js!

A smiling face is drawn with D3.js, featuring yellow circular head, eyes, and eyebrows, rendered as SVG elements. The animation demonstrates DOM manipulation by moving the rectangular eyebrows up and down over two seconds using chained transitions. The code uses D3's select, append, attr, and transition APIs to build and animate the static shapes, with an arc-generated path for the mouth.

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 from SVG shapes animates as its eyebrows lift and lower repeatedly. The yellow circle head, eyes, and mouth are drawn using D3 selections with attributes like radius and position, while an arc path forms the smile. The eyebrows use D3's `transition().duration()` to shift vertically in a looping sequence. All shapes are centered via a translated group, with the example rendered entirely in SVG using d3.v5.

Jjmarcrum3

89% match

Loading thumbnail…

Let's make a face with D3.js!

A smiling face composed of SVG shapes animates on a yellow circular head, with eyebrows that raise and lower repeatedly. The example demonstrates D3.js v5 selections and transitions, using `append`, `attr`, and chained `transition().duration()` calls to animate rectangles. It builds the face with primitive shapes: a circle for the head, ellipses for eyes, a path generated by the `d3.arc` function for the mouth, and animated rects for eyebrows.

Hhritiksingh580

88% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face rendered in SVG demonstrates core D3.js DOM manipulation and transitions. The code builds the face from basic shapes—circles for the eyes and head, a rectangular eyebrow, and an arc-generated mouth—anchored within a centered group. Using d3-selection and d3-transition, the eyebrows animate upward and back down over two sequential two-second intervals. The example shows how D3’s select, append, attr, and transition methods compose to create dynamic, interactive-style visuals without external data, relying purely on hardcoded geometry and SVG coordinates.

DDy-Diana

88% match

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by building an animated smiley face from SVG shapes. A yellow circle forms the head, with eyes, eyebrows, and a mouth added as separate elements. The code uses d3.select and append to construct the face, then applies chained transitions to move the eyebrows up and down repeatedly. The mouth is drawn using d3.arc with specified inner and outer radii and angles. All shapes are positioned relative to a centered group, with animation running for two seconds per eyebrow movement cycle.

Wwhyamn

88% match

Loading thumbnail…

Let's make a face with D3.js!

A smiling face built with SVG shapes animates as its rectangular eyebrows rise and fall in a looping two-second cycle. The example demonstrates core D3.js v5 DOM manipulation, using d3-selection methods like `select`, `append`, and `attr` to construct the face, and `transition` with a duration to move the eyebrow group. Rendered at 960 by 500 pixels, the face centers itself and draws a yellow circle, eyes, and an arc-based mouth using d3-shape's `arc`.

Ssunilkrishnav

88% 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

88% match

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

88% match

Loading thumbnail…

Let's make a face with D3.js!

A static smiling face drawn with D3.js displays a yellow circle for the head, two circular eyes, and a mouth created from a D3 arc path. The animation moves the eyebrows upward and back down over two seconds using D3 transitions that modify the transform attribute. The SVG elements are built programmatically with D3 selection, appending, and attribute methods, positioned via translate transformations on grouped containers.

AAjay Patel

88% match