Skip to main content
SimilarExport ZIP
100%

Fork of Let's make a face with D3.js!

✓ Published0🌍 Public
EEeshwarReddy
Last edited Feb 25, 2023
Created on Feb 25, 2023

A yellow smiley face with animated eyebrows is rendered in SVG, with the face constructed from D3.js v5 primitives including `select`, `append`, `arc`, and attribute setters. The eyes and mouth are drawn as circles and an arc path, while the eyebrows are rectangles that move up and down using chained `transition().duration()` calls. The code demonstrates fundamental DOM manipulation by building the figure from scratch and applying a two-second animated transform to the eyebrow group.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Let's make a face with D3.js!

A yellow smiley face with animated eyebrows is rendered in SVG, with the face constructed from D3.js v5 primitives including `select`, `append`, `arc`, and attribute setters. The eyes and mouth are drawn as circles and an arc path, while the eyebrows are rectangles that move up and down using chained `transition().duration()` calls. The code demonstrates fundamental DOM manipulation by building the figure from scratch and applying a two-second animated transform to the eyebrow group.

EEeshwarReddy
100% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

A yellow smiley face with animated eyebrows is rendered in an SVG. The face is composed of D3.js shapes: a circle for the head, two circles for the eyes, and an arc for the mouth. The eyes' rect eyebrows repeatedly move up and down using chained D3 `transition` calls with a 2-second duration each. The code uses D3 v5's `select`, `append`, and `attr` functions to build the SVG DOM directly.

CCorey-PT
97% match
Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

A yellow smiley face with animated eyebrows is rendered in SVG using D3.js v5. The code uses `d3.select` and `d3.append` to build circles for the eyes, rectangles for the eyebrows, and a path generated with `d3.arc` for the mouth. Eyebrow movement is achieved through chained `transition().duration()` calls that shift the group’s transform. The example demonstrates fundamental DOM manipulation and transition sequencing with D3.

Ssugunagar
97% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

A yellow smiley face with blinking eyebrows is rendered as an SVG using D3.js v5. The face is centered via a group transform, with circles for eyes, rectangles for brows, and a path built with the `arc` generator for the mouth. Two chained `transition` calls on the eyebrow group animate its vertical position, moving the brows up and down over two-second intervals. This demonstrates fundamental DOM manipulation and chained transitions in D3.

VVis Ivaturi
97% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

A yellow smiley face with animated eyebrows demonstrates basic D3.js DOM manipulation. The face is built using SVG circles for the eyes and mouth, with the mouth created via the d3.arc() path generator. Eyebrow rectangles transition vertically over two seconds using the .transition() method, then return to their original position. The code explicitly imports select and arc from the D3 v5 library, manipulates SVG attributes directly, and renders entirely in the browser without external data.

AAudioSutta
97% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

A yellow smiley face with animated eyebrows is rendered in SVG using D3 v5. The code builds the face from primitive shapes—circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth—all positioned relative to a centered group. D3's `transition()` and `duration()` methods repeatedly shift the eyebrow group up and down over two-second intervals, creating a continuous bobbing motion. The example demonstrates core D3 selections and DOM manipulation without external data, relying solely on hardcoded dimensions and the `arc()` helper for the mouth shape.

SSnapika
97% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

A yellow smiley face with animated eyebrows is rendered as an SVG. The face is built from D3.js selections, including circles for the eyes and an arc path for the mouth. Both eyebrows, drawn as rectangles, move upward and then return to their original position using chained `transition().duration()` calls. The example demonstrates fundamental DOM manipulation with d3.select and d3.arc.

Sswapan-datahawklab
97% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

A yellow smiley face with animated eyebrows demonstrates fundamental D3.js DOM manipulation. The face is built entirely with SVG shapes: circles for the eyes and head, rectangles for the eyebrows, and a path generated with the `d3.arc` function for the mouth. Eyebrows move up and down via chained `transition().duration()` calls that repeatedly shift the group's `transform` attribute. The example uses D3 v5, importing `select` and `arc` from the library, and renders entirely in an SVG container sized 760 by 500 pixels.

Sstiti75
97% match