D3 Intro. Making a face.

100%

D3 Intro. Making a face.

✓ Published2🌍 Public

Last edited Oct 9, 2019

Created on Sep 24, 2019

This example builds a stylized face using D3.js’ DOM manipulation and SVG elements. It creates a yellow circle as the head, then adds eyes, eyebrows, and a mouth as separate SVG shapes—circles, rectangles, and a path generated with the `arc()` generator. All features are positioned relative to the SVG center using a `<g>` group with a translation transform. The code uses D3 v5 selections (`d3.select`, `append`, `attr`) to construct the scene entirely in code, with no external data source.

AI-generated description

Cars report

MIT Licensed

Similar vizzes

Loading thumbnail…

make a face with d3.js

A simple face built from SVG shapes using D3 v5. The code creates a yellow circle with a red stroke for the head, two eyes with white pupils, and a mouth drawn as an arc path. It uses `d3.select` and `d3.arc` to position elements at fixed coordinates on a 960×500 SVG canvas. The example demonstrates basic D3 shape generation and attribute manipulation without data binding.

DDominika Modzelewska

91% match

Loading thumbnail…

make a face with d3.js

DDominika Modzelewska

91% match

Loading thumbnail…

Intro to D3JS - Face

This example demonstrates a simple cartoon face built entirely with SVG shapes using D3.js v6, displaying a yellow circular head, black eyes, rectangular eyebrows, and a curved mouth. The code uses D3 selection methods to append and manipulate SVG elements, including `circle`, `rect`, and `path` nodes, within a centered group. The mouth is created using D3's `arc` generator with specified inner and outer radii and angles. Dimensions are read directly from the SVG attributes and converted to numbers for positioning the face components.

FFedor Sharygin

91% match

Loading thumbnail…

Lets make a face with d3

This example uses d3 v5 to construct a simple, stylized face entirely from SVG primitives. It draws a yellow circle for the head, two smaller circles for eyes with circular pupils, rectangular eyebrows, and a semi-circular mouth created with an arc path. The face is centered within an SVG canvas using a transform, with facial feature positions calculated relative to the center. The code relies on d3's `select` and `arc` functions, and demonstrates how to programmatically generate SVG shapes and coordinate them for a recognizable composition.

Ffaquora

90% match

Loading thumbnail…

Intro to D3.js (making a face)

This example demonstrates the foundational concepts of D3.js by constructing a simple cartoon face from SVG shapes. A single yellow circle forms the head, centered within an SVG canvas. While the code contains commented-out sections for adding eyes and a mouth using D3's arc generator, only the basic circle is rendered. The example uses D3 v6 selection methods like `select` and `append`, and sets SVG attributes such as `r`, `fill`, and `transform` to position and style the element. The full face construction remains inactive, showing only the initial building block.

NNishadAhsan

90% match

Loading thumbnail…

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.

Ssslee8778960

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

90% match

Loading thumbnail…

Let's make a face with D3.js

A yellow circle face with black-outlined eyes and eyebrows is drawn using D3.js v5, with the facial features positioned via SVG transforms. The code builds the face programmatically using `d3.select` and `d3.arc` for the mouth, then animates the eyebrows with chained `transition.attr` calls over two seconds each, moving them downward and back upward. The rendering uses SVG elements inside a centered `<g>` group, with dimensions taken directly from the SVG attributes. The example demonstrates basic SVG construction and animation sequencing without external data.

JJasonXQH

90% match