Skip to main content
SimilarExport ZIP
100%

Lets make a face with D3.js

✓ Published0🌍 Public
Oosaka004
Last edited Mar 24, 2020
Created on Mar 24, 2020

This example draws a smiling face using SVG primitives and D3.js. A yellow circle forms the head, while two black circles create the eyes, and a mouth is generated with the `d3.arc` function, which defines a path with specified inner and outer radii and angle ranges. The code uses D3’s selection and attribute methods to position elements relative to the SVG’s center.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js to draw a simple, smiling face entirely from SVG primitives. A yellow circle forms the head, two smaller black circles serve as eyes, and two rectangles act as eyebrows. The mouth is created using D3's `arc` generator, which defines a path with a specified inner and outer radius and angular range. The code positions all elements relative to a central `g` group, using D3’s `select` and `append` methods to build the SVG structure.

Hhrvoje26
95% match
Loading thumbnail…

Lets make a face with D3

This example uses D3 v5 to draw a simple smiling face entirely in SVG. It appends a yellow circle for the head, two black circles for eyes, and a mouth path created with the `d3.arc` generator, using inner and outer radii with specified start and end angles. The `select` function targets the SVG element, and attribute values like height and width are read directly from the markup. No external data is loaded; all shapes are positioned based on the SVG’s dimensions and fixed pixel offsets.

Rrpadron8
95% match
Loading thumbnail…

Lets make a face with D3.js

This example draws a smiling face in SVG using D3.js, composing a yellow circle for the head, two black circles for eyes, rectangles for eyebrows, and an arc-based path for a mouth. The rendering approach relies on D3 selections and the `arc` generator from D3’s shape module. The right eyebrow animates upward and returns to its original position using chained `transition().duration()` calls over two seconds each, while all other elements remain static. The face is centered at (480,250) on a 960×500 SVG canvas.

Llamiyaa
94% match
Loading thumbnail…

Let's make a face with D3.js!

This example draws a simple smiling face using SVG shapes. It uses D3.js to create a yellow circle for the head and two black circles for the eyes, all with hard-coded positions. The code selects the existing SVG element, calculates width and height from its attributes, and appends circles using selections and the `circle` element API from D3 v5.

Kkevin0903
94% match
Loading thumbnail…

Let's make a face with D3.js

This example creates a simple smiling face entirely with D3.js vector shapes. It draws a yellow circle for the head, two black circles for the eyes, and a path for the mouth using an arc generator. The SVG canvas is centered, and all elements are positioned relative to a central group. The code uses D3 v5's `select` and `arc` APIs, with the arc defined by inner and outer radii and specified start and end angles.

YYash G
94% match
Loading thumbnail…

Lets make a face with with D3.JS

This example shows how to draw a simple smiley face using D3.js and SVG. It renders a yellow circular head with two black eyes and a curved mouth, all positioned within an SVG canvas that is 960 pixels wide and 500 pixels tall. The code uses D3 selections and the `arc` generator from `d3` to create the mouth shape, while other elements are drawn with basic SVG `circle` primitives. The example demonstrates coordinate manipulation with hardcoded offsets and demonstrates D3’s ability to generate complex paths with relative ease.

MMthandazo Ndhlovu
94% match
Loading thumbnail…

Let's make a face with D3.js

This example uses D3.js v5 to draw a simple smiling face entirely with SVG shapes. It centers a yellow circle on a 960-by-500 canvas, adds two black eye circles, and creates a smile with a curved arc using the `d3.arc` path generator. All elements are positioned relative to the center via a translated group, with coordinates hardcoded in the JavaScript. The styling is minimal, relying on a CSS file for full-screen display without margins or scrollbars.

AAlessan123
94% 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
94% match