Greenface_PY

100%

✓ Published0🌍 Public

Last edited Jun 18, 2022

Created on Jun 18, 2022

Forked from Fork of Let's make a face with

Greenface_PY is an animated SVG smiley face built with D3.js v7. It shows a green circular head with blue stroke, two eyes, a curved mouth, and rectangular eyebrows that animate up and down. The example demonstrates fundamental D3 DOM manipulation and SVG rendering, using `select`, `append`, and `attr` methods to construct the face programmatically rather than relying on static markup. The eyebrow animation is achieved through chained `transition` calls with a duration of 2000 milliseconds, moving the eyebrow group vertically. The underlying data is hardcoded via dimension constants like `eyeSpacing`, `eyeRadius`, and `eyebrowWidth`.

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 smiley face rendered as SVG shapes uses green for the head, yellow strokes, and animated eyebrows that move up and down. The example demonstrates fundamental DOM manipulation with D3.js v5, building the face from circles, rectangles, and an arc-generated mouth while applying transitions to shift the eyebrow group. Code uses `d3.select`, `attr`, `transition`, and the `arc` generator, with a blue background set on the SVG.

YYujin Chung

82% match

Loading thumbnail…

A Face with D3.js!

A smiley face drawn with D3.js features animated eyebrows that move up and down. The example demonstrates fundamental DOM manipulation by building the face from SVG primitives: circles for eyes, a rectangle for the nose, a path from `d3.arc` for the mouth, and rectangles for eyebrows. The animation uses chained `transition().duration(2000)` calls to shift the entire eyebrow group's `transform`, showing how D3 manipulates SVG attributes over time. The SVG canvas is set to 960×500 with an orange background.

YYoung Song

82% match

Loading thumbnail…

Let's make a face with D3.js!

A smiley face drawn with SVG shapes animates its eyebrows upward and back down in a looping transition. The example demonstrates fundamental D3.js DOM manipulation by building a green circle, white eyes, rectangular eyebrows, and an arc-based mouth using `d3.select` and `d3.arc`. Animated with chained `transition.duration` calls, the eyebrows shift via `attr` transforms. Rendered in an SVG container sized 960 by 500, the code uses D3 v5 and imports `select` and `arc` directly from the library.

SSyed Azeem Akhter

81% match

Loading thumbnail…

MakeFace

A yellow smiley face with animated eyebrows demonstrates fundamental D3.js DOM manipulation. The face is assembled from SVG shapes—circles for the eyes, rectangles for the eyebrows, and a path drawn with the d3.arc generator for the mouth—all centered using a group transform. Two chained `.transition().duration(2000)` calls repeatedly move the entire eyebrow group up and down, creating a bobbing effect. The example uses d3.v5's `select`, `arc`, and transition methods to build and animate the composition directly in the browser.

BBolarinwa Omoware

81% match

Loading thumbnail…

Let's make a face with D3.js!

A smiley face built with D3.js demonstrates basic DOM manipulation. The SVG face has blue circular head, green eyes, and an arc-based mouth, with rectangular eyebrows that animate up and down using chained `transition` calls. The code uses d3.select to target the SVG, d3.arc to generate the mouth path, and attribute methods like `.attr` to position elements. Eyebrow movement is achieved through sequential `.transition().duration()` operations that translate the eyebrow group vertically.

DDaniel Piqué

81% match

Loading thumbnail…

Let's make a face with D3.js!

A smiley face drawn with D3.js demonstrates declarative DOM manipulation through basic SVG shapes, while animated eyebrows show how transitions update attributes over time. The code explicitly builds the face using `select`, `append`, and `attr` for circles, rectangles, and a mouth path via the `arc()` generator. Two chained `transition().duration(2000)` calls move the eyebrow group up and then back down, creating a repeated motion loop. The face is centered with a `g` transform, and all styling relies on inline attributes with yellow and black fills.

GGosroPoorheydar

81% match

Loading thumbnail…

face

A yellow smiley face with black-outlined eyes and a curved mouth is rendered as an SVG. The example demonstrates fundamental D3.js DOM manipulation and animation by moving the face's rectangular eyebrows up and down. Using `d3.select`, `svg.append`, and chained `transition().duration()`, the code updates the `transform` attribute of a group element to create the repeated eyebrow motion, with all geometry defined as static attributes.

JJyotirmayi-max

81% match

Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face built with SVG shapes, where the eyebrows animate upward and then back down in a looping motion. The face is centered using a translated `<g>` group, with circles for the eyes and a D3 arc path for the mouth. It demonstrates fundamental DOM manipulation with D3 v5, using `select`, `attr`, and chained `transition().duration()` calls to move the eyebrow group. The animation runs continuously, shifting the eyebrows vertically by 50 pixels before returning to their original position.

PPiotrekW2

81% match