Skip to main content
SimilarExport ZIP
100%

let's make a face with D3.js!

✓ Published1🌍 Public
YYongbobloomington
Last edited Dec 18, 2020
Created on Dec 18, 2020
Forked from HTML Cars Report

A smiling face built entirely from D3.js SVG shapes. The code draws a yellow circle for the head, adds two smaller circles for eyes, and uses the `d3.arc` API to create an arc-based mouth with specified inner and outer radii and angles. The example demonstrates basic SVG attribute manipulation with `select`, `append`, and `attr`, and positions elements using a centered `<g>` group with translate transforms. All geometry is hardcoded, with no external data source.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

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
94% 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
94% match
Loading thumbnail…

Let's make a face with D3.js!

A simple SVG face made with D3.js v5, drawn entirely from primitive shapes: yellow circle for the head, small black circles for eyes, rectangles for eyebrows, and an arc-generated mouth. The code uses `d3.select` and `d3.arc` to construct the geometry, with a fixed `innerRadius` and `outerRadius` for the smile. All elements are centered via a translated `<g>` group, and faces render directly on a 960×500 SVG canvas with no external data.

RRC
94% match
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js to draw a smiling face out of basic SVG shapes: a yellow circle for the head, two eyes, and a mouth created with the `arc` generator. Eyebrows animate by repeatedly shifting their vertical position via chained `transition().duration(2000)` calls on a group element. The code relies on D3 selections and `select`, with dimensions read from the SVG attributes. The simple, playful design demonstrates how D3 can drive both static shape construction and time-based transformations in an SVG scene.

Cchristoshanes
94% match
Loading thumbnail…

Let's make a face with D3

A smiling face is drawn entirely with SVG shapes, rendered as a yellow circle with a black stroke, two eyes, and an arc-based mouth. The code uses D3 v5 selections to append elements to an SVG canvas, importing `select` and `arc` from the D3 module. The `arc` generator creates the mouth with specified inner and outer radii and start/end angles. All shapes are centered using a group translation, with eye positions calculated from fixed offsets.

Hhairibung
94% match
Loading thumbnail…

Let's make a face with D3.js!

D3.js constructs a smiling face from SVG shapes, including a yellow circle for the head, two eyes, and an arc-based mouth using the `d3.arc()` generator. The eyebrows, rendered as rectangles, animate vertically through chained `transition().duration()` calls, moving up and down over two seconds each. The code uses D3 selections and attributes to position elements around a centered group, with all coordinates based on the SVG’s 960×500 dimensions.

Ddtdenver
94% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face is rendered in SVG using D3.js v5 within a React framework. The code constructs the face from a yellow circle for the head, two smaller circles for eyes, and an arc-generated mouth using `d3.arc`. The face is centered by translating a group element based on the SVG's width and height, with eye spacing and vertical offsets applied. The source code imports `select` and `arc` from D3 and manipulates SVG elements directly, with styling defined in an external CSS file.

Aariashary
93% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face built with D3.js demonstrates fundamental DOM manipulation through SVG shapes. The code appends a yellow circle for the head, two dark circles for eyes, and a semi-circular mouth created with the `arc` generator. Eyebrows are rectangles that animate vertically using chained `transition` calls with a 2000-millisecond duration, moving up and down repeatedly. The example relies on D3 v5’s selection methods like `append` and `attr`, with all elements centered via a translated group.

Lliunaiming
93% match