Make a face with d3.js

100%

Make a face with d3.js

✓ Published0🌍 Public

Last edited Feb 2, 2021

Created on Feb 2, 2021

This example uses d3.js to draw a smiling face directly in SVG. A yellow circle forms the head, with two smaller black circles for eyes and an arc-generated path for the mouth. The code positions elements by translating to the center of an SVG canvas and uses d3’s `select` and `arc` API to create shapes, all rendered with fixed pixel coordinates.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Make a face with D3

A smiling cartoon face rendered in SVG uses D3.js to draw a yellow circle for the head, two black circles for eyes, and an arc-based path for the mouth. The code imports `select` and `arc` from the D3 library, appends SVG shapes directly, and positions them using hardcoded coordinates and spacing values. The example demonstrates basic SVG shape creation and path generation with D3’s arc generator.

NNigel Quinlan

94% match

Loading thumbnail…

Lets make a face with D3.js

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.

Oosaka004

93% match

Loading thumbnail…

Make a face with D3.js

A smiley face is rendered in an SVG canvas using D3.js v7, with a yellow circle for the head and two black circles for the eyes. The code appends each circle to the selected `svg` element, setting its radius and horizontal/vertical position via `attr` in relation to the SVG’s `width` and `height`. The styling is handled by an external CSS file that removes page margins. This example demonstrates basic D3 shape creation and attribute manipulation for static visual output.

Aavirathtib

93% match

Loading thumbnail…

Make a face with D3.js

A yellow smiley face is centered in an SVG canvas, with two eyes and a curved mouth built from basic SVG shapes. D3.js v7 selections and the `arc` generator draw the mouth path, while `circle` elements create the head and eyes. The body is rendered entirely in SVG, with the face assembled from primitives positioned relative to the canvas center.

AAustin0524

93% match

Loading thumbnail…

Make face ith D3

This example uses D3.js v7 to render a simple smiling face in an SVG. It draws a yellow circle for the head with a black stroke, then positions two black circles for the eyes based on calculated offsets from the center. A mouth is created using the `arc` function with specified inner and outer radii and angular ranges. The code demonstrates basic D3 selection, attribute setting, and path generation for geometric shapes.

TTusar

93% 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

93% match

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

93% match

Loading thumbnail…

let's make face with d3.js

This example draws a smiling face on an SVG canvas using D3.js version 7. The code creates a yellow circle for the head, two circles for eyes, rectangles for eyebrows, and a path arc for the mouth, all positioned using absolute coordinates within a 960×500 viewport. It uses D3’s `select`, `append`, and `attr` methods to build and style the SVG elements, and the `arc` generator to define the mouth’s curved shape. The rendering is entirely vector-based, with no external data source.

JJoora Song

93% match