Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
Hhpies
Last edited Nov 21, 2019
Created on Nov 21, 2019

A yellow smiley face rendered in SVG is centered on a 960x500 canvas, with facial features constructed from D3.js geometric primitives: circles for the eyes, rectangles for the eyebrows, and a path using the `d3.arc` builder for the mouth. The eyebrows initiate a two-stage `transition` lasting 2000 milliseconds each, moving them upward and then back to their original position. The code employs `select` from D3 v5 and relies on attribute manipulation to position elements via `translate` transforms, demonstrating fundamental DOM creation and animation without external data.

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 yellow smiley face is drawn on an SVG canvas using D3.js, with two eyes, eyebrows, and a mouth created via basic shapes and an arc path. The entire face is centered with a group translation, and the eyebrows animate upward and back down over four seconds using chained `transition` calls. The code imports `select` and `arc` from D3 v5, sets circle, rectangle, and path attributes programmatically, and relies on SVG for rendering.

Ddbidwai
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face rendered in SVG uses D3.js v5 to demonstrate basic DOM manipulation and animation. The face is built by appending circles for the head and eyes, rectangles for eyebrows, and a path generated with the `d3.arc()` API for the mouth. The eyebrows animate upward and back down over two sequential 2000-millisecond transitions, showing how `selection.transition()` chains. The code uses `d3.select` to manipulate the SVG elements and sets coordinates with fixed pixel offsets for facial features.

DDaniel Hug
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with black outlines is drawn on an SVG canvas, centered in the viewport. Its eyes, eyebrows, and mouth are all composed of basic geometric shapes. Using D3.js v5, the code builds the face by appending circles, paths, and rectangles to SVG groups. An animation sequence uses chained `.transition()` calls to shift the eyebrows up and down, with each movement lasting two seconds. The mouth is created using the `arc()` API, while the overall structure demonstrates fundamental SVG DOM manipulation via D3 selection and attribute methods.

AAndrey Chergik
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn on an SVG canvas with D3.js, featuring eyes, eyebrows, and a mouth. The eyebrows transition up and down repeatedly over two-second intervals using D3's `transition()` and `attr()` methods. The face is built from basic SVG shapes—circles for the eyes and a path generated with `d3.arc()` for the mouth. All elements are positioned dynamically based on the SVG's width and height attributes.

MMathias Brem
97% 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
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG with D3.js, featuring two eyes, brown eyebrows, and a mouth created using the `d3.arc` path generator. The eyebrows, grouped with the eyes, animate downward over two seconds and then return to their original position, using chained `transition` calls on the group's `transform` attribute. The face is centered within an SVG canvas by translating a root group, with all shapes positioned relative to this group. The code demonstrates fundamental DOM manipulation, selection, and attribute handling in D3 version 6.

Yyycgrace
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG using D3.js, with circular eyes, rectangular eyebrows, and a mouth created via `d3.arc` for the half-circle path. The face is centered by translating a group element to the middle of the 960×500 SVG canvas. The eyebrows animate upward and back down over four seconds, using chained `transition().duration(2000)` calls that modify the group’s `transform` attribute. The example relies on D3 v5 selections and the `arc` generator to construct the facial features.

Ooabundes
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn with SVG circles, rectangles, and a path, centered on a 960-by-500 canvas. The face’s eyebrows animate upward and back down using chained `transition` calls with 2-second durations. The code demonstrates fundamental D3.js DOM manipulation by selecting the SVG, appending grouped elements, and using the `arc` generator to shape the mouth. D3 v5 is loaded via a CDN, with `select` and `arc` imported from the library.

Mmoonstorm86
97% match