Skip to main content
SimilarExport ZIP
100%

Face visualization with D3

✓ Published0🌍 Public
PPavel Antoshkin
Last edited Aug 6, 2020
Created on Aug 5, 2020
Forked from HTML Starter

This example builds a smiling face using D3 v5, rendered as an animated SVG. It constructs the head, eyes, eyebrows, and mouth from primitive shapes, with the eyebrows performing a looping vertical bounce via chained `transition` calls. The code uses D3’s `select` and `arc` APIs directly, setting shape attributes like `r`, `cx`, and `cy` to position elements relative to the SVG’s center. The face’s layout is defined by constants for eye spacing and offsets, demonstrating a simple, reusable composition pattern.

AI-generated description

D3 Basics Smile visualization Lesson from course "Data visualization with D3" by Curran Kelleher https://www.youtube.com/watch?v=_8V5o2UHG0E

MIT Licensed

Similar vizzes

Loading thumbnail…

Face with d3.js!

This example composes a smiling face from primitive D3.js shapes, including circles for the face and eyes, rectangles for eyebrows, and an annular arc path for the mouth. It demonstrates D3’s `select` and `arc` APIs to build and position SVG elements. The face is centered using a translation transform, and a chained `.transition()` sequence animates the eyebrows up and down over two seconds, showcasing D3’s attribute-tweening capabilities for simple motion.

Ssalim.mir@outlook.com
92% match
Loading thumbnail…

Let's make a face with D3.js!

This example builds a smiley face in SVG using D3.js v5, constructing the head, eyes, eyebrows, and mouth from geometric primitives like `circle`, `rect`, and `d3.arc`. The face is centered via SVG transforms, with the eyebrows animated upward and back down using chained `transition().duration(2000)` calls on a group element. No external data is loaded; the visualization focuses on programmatic DOM manipulation and declarative animation within an SVG canvas.

SSun-XH
91% match
Loading thumbnail…

Face with D3.js!

A smiling face drawn with SVG shapes animates its eyebrows and mouth in a looping transition. The code builds the face using D3.js v5 selection and append methods to create circles, rectangles, lines, and an arc-based path, all positioned with hardcoded coordinates. The eyebrows shift upward and the mouth changes thickness through chained `transition().duration(3000)` calls, demonstrating basic DOM manipulation and attribute updating without data binding.

Nnikeshkv
91% match
Loading thumbnail…

Let's Make a Face with D3.js

This example animates a simple cartoon face built entirely with SVG shapes in D3.js. Shown head-on, the face consists of a circular head, two eyes, rectangular eyebrows, and an arc-based mouth, all centered within an SVG canvas. The eyebrows repeatedly bounce upward and downward using chained `transition` calls with a two-second duration each. The code leverages D3 v5’s `select`, `arc`, and `transition` APIs, constructing the face by appending circles, rectangles, and paths to a translated group element.

Tthespiraltree
91% match
Loading thumbnail…

Let's make a Face with D3!

This example demonstrates how to build a simple, smiling cartoon face using D3.js version 5. The face is composed of SVG shapes—a yellow circle for the head, two black circles for eyes, animated line eyebrows, and an arc-based mouth. The code uses `d3.select` and `d3.arc` to construct the path, with `transition().duration()` to animate the eyebrows up and down. The SVG is centered and scaled based on the viewport width and height, with all shapes positioned relative to a central group.

Wwinner106
91% match
Loading thumbnail…

Let's make a Face with D3!

This example demonstrates how to build a simple, smiling cartoon face using D3.js version 5. The face is composed of SVG shapes—a yellow circle for the head, two black circles for eyes, animated line eyebrows, and an arc-based mouth. The code uses `d3.select` and `d3.arc` to construct the path, with `transition().duration()` to animate the eyebrows up and down. The SVG is centered and scaled based on the viewport width and height, with all shapes positioned relative to a central group.

Wwinner106
91% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by building an animated smiley face out of SVG shapes. The code uses `d3.select` to append a circle for the head, two circles for eyes, rectangles for eyebrows, and an `d3.arc()` path for the mouth. D3 transitions animate the eyebrows upward and back over four seconds. The example uses D3 v5 and relies on simple attribute setters like `.attr()` to position each element.

Ssethips
91% match
Loading thumbnail…

Let's make a face with D3.js!

This D3.js v5 example demonstrates fundamental DOM manipulation by building a smiling face from SVG primitives, including yellow circles for the head and eyes, and rectangular eyebrows that animate upward and downward. The code constructs the face using `d3.select`, `svg.append`, and shape methods like `.attr`, while `d3.arc` generates the mouth as a path with specified inner and outer radii. A chained `transition().duration(2000)` sequence repeatedly moves the eyebrows up and down, creating a simple looping animation.

IIsabel
91% match