smile.js!

100%

✓ Published0🌍 Public

Last edited Feb 23, 2023

Created on Feb 22, 2023

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

A smiley face with animated eyebrows demonstrates basic DOM manipulation and SVG rendering in D3.js v5. The visualization constructs a red circle with a blue stroke, two eyes, rectangular eyebrows, and an arc-based mouth using D3 selection and shape-generating functions. The eyebrows move up and down via chained `transition` calls over five-second durations, showcasing D3's ability to animate SVG attributes. The code directly selects the SVG element, appends groups, and applies transforms to position facial features.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

smiley face.js!

A yellow smiley face with animated eyebrows is drawn in an SVG using D3.js v5. The code selects the SVG element and appends groups and shapes (circles for eyes, rectangles for eyebrows, and a path for the mouth) using d3.select and d3.arc. Eyebrows move up and down via chained transition calls that alter their transform attribute. No external data is loaded; the visualization is purely code-generated.

Hhowlermonkeyar

92% match

Loading thumbnail…

Let's make a face with D3.js!

A smiley face with animated eyebrows demonstrates basic DOM manipulation with D3.js. The visualization renders SVG shapes—a yellow circle, eyes, rectangular eyebrows, and an arc-based mouth—centered on a 960×500 canvas. Using `d3.select` and `d3.arc`, the code constructs each facial feature programmatically. A chained `transition` with 2000-millisecond durations moves the eyebrow group upward and back, creating a blinking-like motion. The example showcases fundamental D3 v5 selections, attribute setting, and animation without external data, relying purely on geometric constants for positioning.

TThiago Ramos

92% match

Loading thumbnail…

Let's make a face with D3.js!

A smiley face drawn in SVG animates as its eyebrows bounce upward and settle back down. The example demonstrates fundamental D3.js DOM manipulation by constructing the face from appended shapes—circles for the eyes and head, rectangles for the eyebrows, and a path generated with the `arc` helper for the mouth. A chained `transition` with a two-second duration moves the eyebrow group twice, creating the animation. The code uses D3 v5 selections and attributes on a static SVG canvas.

Eevesshaw

92% match

Loading thumbnail…

Let's make a face with D3.js!

A smiley face rendered in SVG with D3.js v5 demonstrates fundamental DOM manipulation through animated eyebrow movement. The face, eyes, and eyebrows are drawn as SVG circles using d3.select and d3.append, with the eyebrow positions controlled by coordinate offsets. The face circle triggers a recursive animation via addEvents and transition.attr, moving the entire face group vertically over two seconds before reversing direction. The example uses D3's selection.transition with .duration and .on("end") callbacks to create a continuous bobbing motion, showing how to build and animate SVG elements without external data.

Jjulieducasse

91% match

Loading thumbnail…

Let's make a face with D3.js!

A smiley face rendered in SVG demonstrates basic D3.js DOM manipulation, with animated eyebrows that move to change the expression. The example uses D3 v5's `select` and `arc` functions to construct the facial features, building circles and arcs for the eyes, mouth, and brows within an SVG canvas. The code shows how D3 can directly create and update SVG elements through its data-binding and selection APIs, while the accompanying stylesheet hides page overflow for a clean, focused presentation.

MMarian

91% 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é

91% match

Loading thumbnail…

Let's make a face with D3.js!

An animated smiley face built with D3.js v5 demonstrates fundamental DOM manipulation through SVG rendering. The example uses `d3.select` to append shapes—circles for the eyes, rectangles for eyebrows, and an `arc()` path for the mouth—arranged with explicit X/Y coordinates and `attr` transforms. A two-stage `transition().duration(2000)` chain moves the entire eyebrow group up and then back down, creating a subtle raising-and-lowering animation. No external data is loaded; all geometry is hand-coded, and the interaction is purely visual.

Zzahrus

91% match

Loading thumbnail…

Let's make a face with D3.js!

A smiley face drawn in SVG animates as its eyebrows bounce up and down. Built with D3.js v5, the example constructs circles for the eyes and a path using the `arc` generator for the mouth, then applies chained `transition()` calls to shift the eyebrow group’s transform. The code demonstrates core DOM selection and manipulation via `d3.select`, plus attribute setting and SVG grouping, with no external data source.

BBrett Cunningham

91% match