Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
MMouad Et-tali
Last edited Oct 27, 2022
Created on Oct 27, 2022

This example builds a smiley face in SVG using D3.js v5, demonstrating fundamental DOM manipulation. It uses `d3.select` to append SVG elements and `d3.arc` to generate the mouth path, while circles and rectangles form the eyes and eyebrows. The face is centered on a 960×500 canvas via a transformed `<g>` group, with static features positioned by absolute coordinates. The code shows how D3 creates and styles shapes directly, though the eyebrows remain fixed rather than animating.

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!

This example demonstrates how to build a smiley face using D3.js, with the ability to animate its eyebrows. It uses basic SVG elements—circles for the face and eyes, and a path generated by the `d3.arc` function for the mouth. The code sets up an SVG canvas and positions elements using translation and coordinate attributes. It relies on D3 v5’s selection and arc APIs to create the static face, which serves as a foundation for adding interactive or animated features.

Ggopiganta
95% match
Loading thumbnail…

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

This interactive D3.js example builds a stylized smiley face entirely from SVG shapes, including circular eyes, a path-based mouth, and rectangular teeth. An animated sequence moves the eyebrows up and down by chaining two `transition().duration(2000)` calls, demonstrating how to create simple motion via DOM attribute transforms. The code uses `d3.select` and `d3.arc` from the D3 v5 API to construct the face's components, with all geometry centered through a single transformed group. The result shows how D3's declarative SVG manipulation can produce playful, character-driven visualizations.

BBrian Gilmore
95% match
Loading thumbnail…

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

This example demonstrates how to build a static smiley face using D3.js v3, combining basic SVG shapes to construct the head, eyes, ears, mustache, and mouth. It shows fundamental DOM manipulation by appending and styling SVG elements like circles, ellipses, lines, and polygons through D3’s selection methods. The code explicitly uses `d3.select`, `d3.append`, and `d3.arc` from the `d3` and `d3-shape` libraries, with the face centered in an SVG canvas via a translation transform. The rendering approach is purely SVG-based, with all geometry defined manually in the JavaScript source rather than loaded from external data.

Rranjithkmr598@gmail.com
95% match
Loading thumbnail…

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

This example creates a smiley face in an SVG canvas, with animated eyebrows that move to express different emotions. It demonstrates fundamental DOM manipulation and data binding using D3.js v5, specifically leveraging the `select` method to target SVG elements and update their attributes. The face is constructed entirely in code rather than from external data, and the animation is achieved by repeatedly setting position attributes on the eyebrow shapes.

Ggabcee
95% match
Loading thumbnail…

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

An animated smiley face rendered in SVG demonstrates core DOM manipulation with D3.js v5. The face, built from circles, rectangles, and a path, features eyebrows that animate by chaining `transition().duration()` calls to shift their vertical position over time. The code constructs the facial features using D3’s `select` and `append` methods, with the mouth drawn via the `arc` function to generate a curved path. The example highlights basic D3 transitions and coordinate transformations within a fixed 960×500 SVG canvas.

Mmomopng
95% match
Loading thumbnail…

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

This example uses D3.js to build a smiley face directly in SVG, with animated eyebrows that move up and down in a repeated cycle. It demonstrates basic DOM manipulation by creating circles for the eyes and face, rectangles for the eyebrows, and an arc path for the mouth using D3’s `arc()` helper. The animation relies on chained `transition().duration()` calls to shift the eyebrows’ vertical position. The code explicitly imports `select` and `arc` from D3 and renders everything within a 960x500 SVG canvas.

Mmarcob896
95% match
Loading thumbnail…

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

This example builds a smiley face with D3.js v5, animating its eyebrows in a repeating up-and-down motion. The face is constructed entirely from SVG primitives—circles for the eyes, rectangles for the eyebrows, and a path generated with the `d3.arc()` API for the mouth—all grouped and positioned via `transform` attributes. The animation uses chained `transition().duration()` calls on the eyebrow group, while static styling is applied directly to attributes like `fill` and `stroke`. The code imports `select` and `arc` from D3 and renders to a fixed 960×500 SVG canvas.

Mmanjushayarreddu
95% match
Loading thumbnail…

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

A smiley face drawn with D3.js animates its eyebrows in a repeated rise-and-fall motion. The example demonstrates fundamental DOM manipulation by building the face from SVG elements—circles for the eyes, rectangles for the eyebrows, and a path generated with the `d3.arc` helper for the mouth. Eyebrow movement uses chained `transition().duration()` calls to shift the group’s `transform` attribute, alternating between raised and lowered positions. The code imports `select` and `arc` from D3 v5 and renders entirely in SVG on a 960×500 canvas.

Ppavakpatel
94% match