Let's make a face witb D3.js!

100%

Let's make a face witb D3.js!

✓ Published1🌍 Public

Last edited Feb 2, 2020

Created on Feb 1, 2020

Forked from Let's make a face witb D3.js!

This example uses D3.js v5 to draw a simple, stylized face within an SVG canvas. It positions a yellow circle as the head, two black circles as eyes, and a curved path as the mouth, all centered via a translated group. The code constructs the mouth using D3’s `arc` generator with specified inner and outer radii and angular range, while other shapes are created with basic SVG primitives (`circle` and `path`). The layout relies on hardcoded pixel offsets for features, and the SVG is sized at 960 by 500 pixels.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js

This example draws a simple yellow face in an SVG canvas using D3.js v5. It centers a circle for the head, then positions two smaller circles for eyes and an arc-generated path for a mouth. The code uses D3's `select` to target the SVG element, `attr` for setting dimensions, and the `arc` API from D3's shape utilities to define the mouth path.

BBryan Liu

95% match

Loading thumbnail…

Lets Make a Face with D3.js!

This example uses D3.js to draw a simple, stylized face on an SVG canvas. It renders a yellow circle as the head, two black circles of differing sizes for the eyes, and a crescent-shaped mouth built from an arc path. The visualization is constructed by directly appending SVG shapes to a group element that is translated to the canvas’s center. The code leverages D3’s `select`, `attr`, and `append` methods, along with the `arc` generator to create the mouth’s curved path, with all coordinates and dimensions set statically.

GGPOAdmin

95% match

Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to build a simple cartoon face entirely with SVG shapes. It shows a yellow circle for the head, two black-outlined circles for eyes, and a curved mouth path, all centered within a 960×500 SVG canvas. The code exercises core D3 selections and the `arc` generator, computing eye spacing and mouth angles programmatically. Raw SVG attributes like `r`, `cx`, and `stroke-width` are set directly, while a group element translates all features to the canvas midpoint. The mouth’s path is produced by the `d3.arc` generator with specified inner and outer radii.

BBaxinho

94% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow circle face is drawn in SVG using D3.js v7, with two eyes, eyebrows, and an arc-based mouth centered in the viewport. The code builds the face by appending SVG elements—a circle for the head, circles for eyes, rectangles for eyebrows—and uses D3’s `arc` generator to create the mouth path. All shapes are positioned relative to a translated group, with the face filling the 960×500 canvas.

Ffkukcha

94% match

Loading thumbnail…

Let's make a face with D3.js

This example uses D3.js v5 to draw a simple cartoon face in an SVG canvas, assembling circles and an arc path with basic shape attributes. The face is constructed with a yellow head circle, black eye circles spaced symmetrically, and a mouth created using the `d3.arc` generator with specified inner and outer radii and angular bounds. The code imports `select` and `arc` from D3, sets dimensions dynamically from the SVG, and positions elements relative to the viewport center. The rendering approach is purely SVG-based, with static styling applied via attributes and a minimal CSS file.

Aadelgrosso

94% match

Loading thumbnail…

Lets make a face with d3.js

This example uses D3.js (v5) to construct a simple cartoon face directly in an SVG canvas. The code draws a yellow circle for the head, two black circles for eyes, and a path for the mouth, with the mouth generated using D3’s arc generator with specified inner and outer radii and angle ranges. All shapes are positioned relative to the SVG’s width and height, and the styles are defined in a separate CSS file. The example demonstrates basic SVG shape creation and attribute manipulation with D3’s selection and append methods.

Ddktaylor916

94% match

Loading thumbnail…

Let's make a face with D3.js

A face built from basic SVG shapes—a yellow circle for the head, circles for eyes, and an arc-generated path for the mouth—is centered on a 960×500 canvas. The code uses D3.js v5’s `select` and `arc` APIs to append and position elements, with `transition()` animating the eyebrows up and down over two-second intervals. The rendering is entirely SVG, with all coordinates computed relative to the svg’s center using its width and height attributes.

BBen Daniel

94% match

Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js to draw a simple, static cartoon face on an SVG canvas. It shows a yellow circular head, two colored eyes (dodger blue and tomato), and a black mouth created with an arc path. The code uses D3's `select` to target the SVG element, `append` with `circle` and `path`, and the `arc` generator to define the mouth’s geometry based on inner/outer radii and angle ranges. Positions are computed relative to the canvas center, and styling is applied via SVG attributes.

WWill Bainton

94% match