Skip to main content
SimilarExport ZIP
100%

Lets make a face with D3.js

✓ Published0🌍 Public
NNita
Last edited Nov 9, 2018
Created on Aug 23, 2018
Forked from HTML Cars Report

This example uses D3.js v5 to assemble a cartoon face from primitive SVG shapes. A yellow circle forms the head, while black and pink circles, positioned by data-driven coordinates, create the eyes with a scaling animation triggered by chained `transition().delay()` calls. Eyebrows are drawn as rectangles from the same dataset, and an arc path, generated with `d3.arc()`, forms the mouth. The code demonstrates SVG manipulation and animation through D3’s selection and transition APIs, with the entire composition centered and scaled within a 960 by 500 viewport.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Lets make a face with D3.js

This example draws a cartoon face using SVG shapes composed with D3 v5. A yellow circle forms the head, while two smaller circles create the eyes and rectangles serve as eyebrows, all positioned relative to a centered group. The mouth is a path generated with the `d3.arc` helper, using specific inner and outer radii and angle values. The code relies on D3’s `select` and `attr` methods to build and style the static SVG elements, with no data binding.

VVarun Khanna
95% match
Loading thumbnail…

Lets make a face with D3.js

This example draws a cartoon face using SVG shapes composed with D3 v5. A yellow circle forms the head, while two smaller circles create the eyes and rectangles serve as eyebrows, all positioned relative to a centered group. The mouth is a path generated with the `d3.arc` helper, using specific inner and outer radii and angle values. The code relies on D3’s `select` and `attr` methods to build and style the static SVG elements, with no data binding.

VVarun Khanna
95% match
Loading thumbnail…

Lets make a face with D3.js

This example uses D3.js to draw a simple cartoon face with SVG shapes. A yellow circle forms the head, with two smaller circles for eyes and rectangles for eyebrows, all positioned relative to the center of the SVG canvas. A mouth is created using the `d3.arc` helper to generate a curved path. The eyebrows animate with `transition.duration`, moving down and back up over two seconds, demonstrating basic SVG rendering and animation capabilities in D3 v5.

TTikiWayne
95% match
Loading thumbnail…

Let's make a face with D3.js!

Using D3.js v5, this example builds a simple cartoon face from SVG shapes: a yellow circle head, two dark eyes, rectangular eyebrows, and an arc-based smile. The code employs D3 selections to append elements and `d3.arc` to generate the mouth path. Animated eyebrows move via chained `transition().duration()` calls, shifting vertically and returning, creating a blinking-like effect. The rendering uses SVG with a centered group transform, and all visual components are defined programmatically with fixed numeric constants for spacing and size.

Nnkohdatavis
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js to build a cartoon face from basic SVG shapes, including a yellow circle for the head, circles for eyes, rectangles for eyebrows, and an arc-based path for the mouth. The code relies on D3’s `select`, `arc`, and `transition` APIs to arrange elements around a central group, with eyebrow positions animated through chained `transition.attr` calls that raise and lower them over 2 and 1 seconds. The rendered output is an SVG canvas sized 960 by 500 pixels, with styling defined in a linked CSS file.

Kkartikaymanoj
95% match
Loading thumbnail…

Lets make a face with D3.js

This example draws a simple cartoon face with a yellow circular head, two eyes, animated eyebrows, and a curved mouth. The face is centered in an SVG canvas, and the eyebrows move up and down repeatedly using chained `transition` calls. The code uses D3 v5 selections to build the shapes, including `arc()` for the mouth path, and relies on SVG primitives like `circle` and `rect` for rendering.

Jjblaskovich
95% match
Loading thumbnail…

Let's make a face with D3.js

This example demonstrates how to build a cartoon face using D3.js v6, composed of basic SVG shapes: a yellow circle for the head, two small circles for eyes, rectangles for eyebrows, and an arc-based path for the mouth. The page centers the face within an SVG, and a transition animates the right eyebrow moving upward over two seconds. The code imports `select` and `arc` from the D3 library, uses `svg.append` to construct elements, and applies a transition with a 2000-millisecond duration. No external data is involved; it is purely a programmatic SVG rendering exercise.

++/+
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to construct a cartoon face from basic SVG shapes, including a yellow circle for the head, black circles for eyes, and an arc-based path for the mouth. The animation shows the eyebrows moving up and down repeatedly through chained `transition()` calls, each lasting 2000 milliseconds. The code uses D3's `select` and `arc` APIs, with coordinates centered via an SVG group transformation. The face is built programmatically in JavaScript, positioning shapes relative to the center of a 960 by 500 viewport.

Mmuxiaofan
94% match