Let's make a face with D3.js!

100%

Let's make a face with D3.js!

✓ Published0🌍 Public

Last edited Aug 7, 2019

Created on Aug 7, 2019

This example uses Vue.js and D3.js v5 to draw a smiling face composed of basic SVG shapes. The face consists of a dark orange circle for the head, black circles for the eyes, and a mouth created with the `d3.arc` path generator. SVG groups with `translate` transformations position the eyes relative to the face center, while the arc’s `innerRadius` and `outerRadius` define the smile’s thickness. The code demonstrates integrating D3 selections with Vue’s reactive data model to manage dimensions and shape attributes.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

This example creates a smiling face using basic SVG shapes—two circles for the eyes, a larger circle for the head, and an arc for the mouth—all positioned with fixed coordinates. The code uses D3.js v5 selection methods like `svg.append` and `.attr` to build the elements, alongside the `d3.arc` generator to define the mouth’s path based on inner and outer radii and start/end angles. The SVG canvas is 960 by 500 pixels, with styling applied via an external stylesheet.

TTiff

90% match

Loading thumbnail…

Lets Make a Face With D3.js

This example uses D3.js v5 to draw a simple face composed of SVG shapes. It renders an orange circle for the head, two black circles for eyes, and an arc-shaped mouth created with the `d3.arc` helper, positioned via an SVG group transform. The code imports `select` and `arc` from D3, sets dimensions from the SVG attributes, and explicitly places each element using calculated coordinates and hardcoded offsets, with no external data source.

Kkevgammer689

89% match

Loading thumbnail…

Let's make a face with D3.js!

A smiling face built from basic SVG shapes shows how D3.js v5 can assemble a figure from primitives. The code uses `d3.select` to append a yellow circle for the head, black circles for eyes, and a mouth drawn with the `d3.arc` path generator using specified inner and outer radii plus start and end angles. Positioning relies on the SVG width and height attributes read from the DOM, with the mouth placed inside a transformed `<g>` group. The example demonstrates simple attribute chaining and coordinate math for a playful default output.

Ddbidwai

89% match

Loading thumbnail…

Let's make a face with D3.js!

This example shows a smiley face built with basic SVG shapes in D3.js, including a yellow circle for the head, two eyes, and an arc-based mouth. The eyebrows animate vertically in a looping transition using `transition()` and `attr()` to move a rectangle group, demonstrating fundamental DOM manipulation with `d3.select` and `d3.arc`. The code uses D3 v5 and renders entirely in SVG, with the face centered using SVG transform attributes.

Nnvelden

89% match

Loading thumbnail…

Let's make a face with D3.js!

This example builds a simple orange smiley face using D3.js v5 and SVG primitives, including circles, rectangles, and a path created with the `d3.arc` generator for the mouth. The face is centered via a group transform, with eyebrows animated upward and back down using chained `transition.attr` calls over two seconds each. The code explicitly sets dimensions from the SVG attributes and uses fixed pixel offsets for eye spacing and eyebrow placement, demonstrating basic SVG rendering and animation without external data.

Wwsupko

89% match

Loading thumbnail…

Let's make a face with D3.js!

A smiley face composed of SVG shapes appears centered in the viewport. Its rectangular eyebrows animate upward and back down in a looping motion, while a curved mouth path follows the same transformation. The code uses D3.js v5 functions like `select`, `arc`, and chained `transition` calls to move elements. The example demonstrates fundamental DOM manipulation with SVG primitives, including circles for the head and eyes, rectangles for brows, and a path built from an arc generator.

LLaurentVuillon

89% match

Loading thumbnail…

Let's make a face with D3.js!

This example shows a smiley face built from SVG shapes, with eyebrows that animate in response to the viewer’s actions. The code demonstrates fundamental DOM manipulation with D3.js v5, using `d3.select` and `d3.append` to create the face’s elements. It relies on the `d3.arc` generator for the mouth and applies simple transitions to move the eyebrows. The page reads the client’s viewport dimensions to size the SVG canvas, and styling is handled via an external stylesheet.

DDifan Gu

89% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in an SVG using D3.js v5, with eyes, eyebrows, and a mouth created via `circle`, `rect`, and `path` elements. The face is centered using a translated group, and the mouth is generated with the `d3.arc` helper. Eyebrows are positioned as rectangles, while the code demonstrates fundamental DOM manipulation through selections and attribute chaining. The example relies on static shapes without interaction, showcasing basic SVG rendering with D3’s `select` and `append` methods.

Vviolet-chaeyoonkim

89% match