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

100%

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

✓ Published0🌍 Public

Last edited Feb 24, 2023

Created on Feb 24, 2023

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

A yellow smiley face with animated eyebrows demonstrates DOM manipulation with D3.js v5. The face is built using SVG primitives: a circle for the head, two circles for eyes, rectangles for brows, and a path generated with the `d3.arc` function for the mouth. Eyebrows move up and down through chained `transition().duration()` calls that change the group's transform attribute. The code imports `select` and `arc` from D3, sets coordinates dynamically from SVG dimensions, and runs entirely in the browser at 960x500 resolution.

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 D3.js example builds a yellow smiley face with animated eyebrows using fundamental DOM manipulation. The face is drawn with SVG circles for the eyes and a path created via the `d3.arc()` generator for the mouth. Eyebrow rectangles transition vertically upward and back down over two 2-second intervals using chained `transition()` calls. The code selects the SVG element, applies transforms to center the face, and uses static data attributes like `eyeSpacing` and `eyeRadius` to position features, rendering entirely in the browser with d3.v5.

NNiharikapabbathi08

95% match

Loading thumbnail…

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

A yellow smiley face with animated eyebrows demonstrates basic DOM manipulation in D3.js v5. The face is built using SVG shapes—circles for the head and eyes, rectangles for eyebrows, and an arc-generated path for the mouth. Eyebrows move up and down repeatedly via chained `transition()` calls with 2000-millisecond durations. The code imports `select` and `arc` directly from the d3 module, and centers all elements using SVG group transforms.

SSANEEM MOHAMMAD

94% match

Loading thumbnail…

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

A yellow smiley face with animated eyebrows demonstrates fundamental DOM manipulation with D3.js. The face is drawn using SVG elements, including circles for the head and eyes, rectangles for eyebrows, and an arc-based path for the mouth. Eyebrows animate upward and downward through chained `transition()` calls with a two-second duration each. The code uses D3 v5 and imports `select` and `arc` directly. All elements are centered within an SVG via a translate transform.

PPriya Tiwari

94% match

Loading thumbnail…

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

A yellow smiley face with animated eyebrows demonstrates fundamental DOM manipulation and transitions with D3.js. The face is built using SVG shapes including circles for the eyes, a path created with `d3.arc` for the mouth, and rectangles for the eyebrows. A chained `transition().duration(2000)` sequence moves the eyebrow group up and down repeatedly, while the static face elements remain centered via a translated `<g>` element. The code imports `select` and `arc` from the D3 v5 library and renders entirely in SVG within a 960×500 viewport.

MManideepChakilam

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

94% match

Loading thumbnail…

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

A yellow smiley face with animated eyebrows demonstrates basic DOM manipulation and transitions in D3.js. The code builds the face using SVG shapes—circles for the eyes and head, rectangles for the eyebrows, and a path created with d3.arc for the mouth. Eyebrows move up and down through chained transition.attr calls, each lasting two seconds. The example uses d3.select and d3.arc from D3 v5, with the entire scene rendered as static SVG elements on a 960×500 canvas.

Rradhadevarapu

94% match

Loading thumbnail…

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

A yellow smiley face with animated eyebrows is drawn in an SVG canvas. D3.js v5 is used for DOM selection and manipulation, creating the face from primitive shapes: a circle for the head, smaller circles for eyes, rectangles for eyebrows, and a curved path for the mouth. The eyebrows animate via chained `transition()` calls over two seconds each, moving them up and down repeatedly. The code uses `select()`, `append()`, and `attr()` from D3 to build the static elements, while the `arc()` generator defines the mouth's shape.

NNavaneeth-Ragi

94% match

Loading thumbnail…

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

A yellow smiley face with animated eyebrows demonstrates fundamental D3.js DOM manipulation. The SVG face is built using circles for the eyes and an arc path for the mouth, centered via a group transform. Using `d3.transition` with a 2000-millisecond duration, the eyebrows—rendered as rectangles—move up and down in a looping sequence, showcasing sequential transition chaining in D3 v5. The code imports `select` and `arc` from the D3 module to construct and animate the static face.

Mmanishcheruku

94% match