Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
PPierre_T
Last edited May 31, 2020
Created on May 31, 2020

This example demonstrates fundamental DOM manipulation with D3.js by constructing a yellow smiley face from SVG shapes, including a fixed circular head, eyes, and an arc-based mouth. The face’s eyebrows are not animated, but the code shows how to position elements using SVG transforms and attributes. It uses d3.select to bind the SVG element, d3.arc for the mouth path, and imports select and arc from the D3 v5 library. The visual output is a static, centered face rendered entirely in SVG, with dimensions taken directly from the HTML attributes.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face from SVG shapes: a yellow circle for the head, two black circles for eyes, and a mouth drawn as a path. The code uses d3.select, d3.arc, and SVG attribute setters like .attr() to position elements on a 960x500 canvas. Static in this version, it serves as an introduction to D3’s data-driven approach, laying groundwork for an animated version where eyebrows move (per the README). The project runs on D3 v5 with SVG rendering.

RRiley Jamel Green
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how to build a smiley face with D3.js, using SVG elements for rendering. It shows a yellow circle with eyes, eyebrows, and a mouth, where the eyebrows are positioned as rectangles. The code uses `d3.select`, `d3.append`, and `d3.arc` to construct the shapes, with attributes set manually for placement. The face is centered via a translation on a group element, and the mouth is drawn as an arc path. The example highlights fundamental DOM manipulation and SVG shape creation in D3.

Mminimartzz
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental D3.js DOM manipulation by building a smiley face with a yellow head, black eyes, and an arc-shaped mouth. The face is centered using an SVG group with a translate transform, with eye positions defined by fixed spacing offsets. The code uses D3 selections like `select` and `append`, plus the `d3.arc` API to generate the mouth path. All elements are rendered as static SVG shapes without animations or interactivity.

Aaristidesnakos
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with movable eyebrows demonstrates fundamental DOM manipulation with D3.js. The SVG face is rendered using D3 selections, with circles for eyes and an arc-generated mouth, all positioned via transforms. Eyebrows are drawn as rectangles, and the code imports `select` and `arc` from the D3 library to build the static composition. The example relies on d3.v5 and shows how to append and style SVG elements programmatically without data binding or interaction.

Vviolet-chaeyoonkim
95% match
Loading thumbnail…

Let's make a face with D3.js!

The example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face out of SVG shapes, including a yellow circle for the head and animated eyebrows that move up and down. It uses D3’s `select`, `append`, and `attr` methods to build and style the face elements directly within the SVG canvas. The rendering relies on D3 v5’s core API, with the face drawn entirely through programmatic SVG element creation rather than data mapping.

Ttonestar
95% match
Loading thumbnail…

Let's make a face with D3.js!

A smiley face constructed entirely with D3.js demonstrates fundamental SVG DOM manipulation. The static yellow circle, eyes, and arc-based mouth are created using d3.select, d3.append, and the d3.arc shape generator. The eyebrows, rendered as rectangles within a translated group, animate upward and back down over two seconds using chained transition().duration() calls. The example highlights basic data-binding-free element creation and attribute setting within an SVG canvas.

RRoyCsuka
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates basic DOM manipulation with D3.js by building a static smiley face from SVG shapes. It draws a yellow circle for the head, two black circles for the eyes, and an arc-generated mouth using the `d3.arc` API with specified inner and outer radii. The code highlights fundamental selection and attribute-setting patterns, such as `select`, `append`, and `.attr`. Although the title suggests eyebrows that move, the provided code only renders the face without any animated or interactive behavior.

Mmaber77
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a smiley face built with basic SVG shapes in D3.js, including a yellow circle for the head, two eyes, and an arc-based mouth. The eyebrows animate vertically in a looping transition using `transition()` and `attr()` to move a rectangle group, demonstrating fundamental DOM manipulation with `d3.select` and `d3.arc`. The code uses D3 v5 and renders entirely in SVG, with the face centered using SVG transform attributes.

Nnvelden
95% match