Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
Kkiyimba5
Last edited Feb 28, 2021
Created on Feb 28, 2021

This fork of “Let’s make a face with D3.js!” draws a smiley face as static SVG shapes: a yellow circle, two black eyes, and an arc-based mouth. D3 selections and the `arc()` generator position the facial features relative to the SVG’s width and height. The code imports `select` and `arc` from d3.v5, sets attributes like `cx`, `cy`, and `r` manually, and leaves eyebrow paths incomplete, showing only the face’s base construction without animation or interaction.

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 fork of “Let's make a face with D3.js!” builds a yellow smiley face from SVG shapes, including eyes, eyebrows, a mouth, nose, ears, and hair. D3.js v5 selections append circles, rectangles, paths, and ellipses to an SVG canvas, while the `d3.arc` generator creates the curved mouth. A two-stage transition animates the eyebrow group’s vertical position, moving the eyebrows up and down over two seconds per cycle using `transition.attr`. The face is centered via a translated `<g>` element, and the code relies on D3’s `select` and `arc` imports.

Ssaiyogesh9911@gmail.com
94% match
Loading thumbnail…

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

This fork of “Let’s make a face with D3.js!” builds a yellow smiley face in an SVG canvas using D3 v5. It demonstrates fundamental DOM manipulation by selecting the `svg` element, appending a group, and composing circles and rectangles for eyes, a path-arc mouth, and rectangular eyebrows. The code uses `d3.select` and `d3.arc` to shape the smile, then animates the eyebrow group with `transition.attr` over two seconds, moving it up and down to create a lively facial expression.

HHuy Truong
93% match
Loading thumbnail…

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

This fork of “Let's make a face with D3.js!” displays a yellow smiley face with eyes, eyebrows, and a mouth drawn as SVG shapes. The eyebrows animate upward and then back down over four seconds using chained `transition` calls on a group element. The code constructs the face with D3 selections, `arc` for the mouth path, and transitions that modify the `transform` attribute of the eyebrow group.

SSadafNaseem
93% match
Loading thumbnail…

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

This fork of “Let's make a face with D3.js!” builds an SVG smiley face with animated eyebrows using fundamental DOM manipulation. The face includes yellow circular head, two eyes, a nose, and a mouth, all positioned via SVG attributes and transforms within a centered group. The code uses D3 v5’s `select` and `arc` functions to create the facial features, with eyebrows drawn as arc paths that can shift position. A YouTube tutorial in the README supports learning the underlying D3 concepts.

MMeghanaArepalli
92% match
Loading thumbnail…

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

A smiley face built with SVG and animated with D3.js demonstrates fundamental DOM manipulation. Yellow circular head, two eyes, rectangular eyebrows, and a curved mouth are created using D3 selections and the `d3.arc` path generator. The eyebrows repeatedly move up and down via chained `transition` calls, each lasting two seconds. The code uses D3 v5, imports `select` and `arc` from the library, and renders entirely in SVG without external data.

Vvram80
92% match
Loading thumbnail…

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

A yellow smiley face with moving eyebrows demonstrates basic SVG manipulation and animation with D3.js. The face is drawn using D3 selection methods to append circles for the eyes, rectangles for the eyebrows, and a path generated with the `d3.arc` function for the mouth. Eyebrow movement is created using chained `transition` calls that alternate the vertical translation of the eyebrow group over two-second intervals. The code imports specific functions like `select` and `arc` from the D3 v5 library and renders entirely as SVG within a fixed-size viewport.

Ddmpiq
92% match
Loading thumbnail…

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

A yellow smiley face with animated eyebrows demonstrates fundamental DOM manipulation in D3.js. The SVG-based visualization builds the face using `d3.select` and `d3.arc` for the mouth, while circles and rectangles form the eyes and eyebrows. The eyebrows move up and down via chained `transition.attr` calls over four seconds, shifting the group’s transform. Rendering is static except for this looping eyebrow animation, with all elements positioned around a centered translation of the SVG viewport.

Kkiyimba5
92% match
Loading thumbnail…

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

A static smiley face rendered as SVG via D3.js uses a yellow circle for the head, two circles for eyes, rectangular eyebrows, and an arc-based path for the mouth. The drawing is centered using group transformations and absolute pixel coordinates from the viewport. The code directly manipulates the DOM with `select`, `append`, and `attr` calls from D3 v5, while the mouth’s shape is generated with the `arc` generator. No interactivity or animation is present, despite the title’s mention of moving eyebrows.

AAbdouEnsaj
92% match