Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
Mmaber77
Last edited Mar 23, 2020
Created on Mar 23, 2020

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.

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 fundamental DOM manipulation with D3.js by building a smiley face from SVG shapes: a yellow circle for the head, two black circles for eyes, and an arc-generated mouth. The code uses D3 selections, `svg.append`, and the `arc` generator from the d3-shape module to construct the face. The face is static, with no interactive behavior or animations, and the rendering approach relies on SVG elements within a 960-by-500 viewport.

烽烽火戏猪猴
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!

This example demonstrates fundamental DOM manipulation with D3.js by constructing a simple smiley face from basic SVG shapes. A yellow circle forms the face, centered within an SVG canvas using the `width` and `height` attributes. The code uses `d3.select` and `d3.append` to add the circle, setting its radius, position, fill, and stroke via `.attr()`. Though the README mentions moving eyebrows, the visible code only renders the static face. Data comes from hardcoded attribute values rather than an external dataset, showcasing D3’s core selection and chaining methods with d3.v6.

Ddanieldh206
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental D3.js DOM manipulation by constructing a smiley face from SVG shapes, with a gentle animation of its eyebrows. The code builds a yellow circle head, eyes, and a mouth using D3’s `select`, `attr`, and an `arc` generator for the path. The eyebrow rectangles transition vertically via chained `transition().duration(2000)` calls, moving them down and back up. It uses D3 v5, rendering to a static SVG canvas with no external data, focusing purely on programmatic element creation and animation.

Nnshedd
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example builds a smiley face from basic SVG shapes using D3.js, demonstrating core DOM manipulation and selection techniques. The code appends a yellow circle for the head, two eyes, rectangular eyebrows, and an arc-based mouth inside a centered group element. The eyebrows animate by chaining `transition` calls with a two-second duration, moving them upward and back down in an infinite loop. The implementation uses D3’s `select`, `append`, `attr`, and `arc` APIs to construct and position all elements.

LLinkous
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by constructing a yellow smiley face from SVG primitives, including animated eyebrows. The code uses D3 selections and the `arc` generator to draw the mouth, while `circle` and `rect` elements form the eyes and brows. The face is centered via a translated `<g>` group, and the eyebrows are positioned relative to the eye spacing. The visualization runs entirely in the browser with d3.v5, rendering static SVG without external data sources.

Mmirna981
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js v5 by constructing a smiley face out of basic SVG shapes. The code uses `d3.select`, `d3.append`, and chained `.attr()` calls to create a yellow circle, two eye circles, a mouth path drawn with `d3.arc()`, and a rectangular eyebrow that animates vertically via a pair of `transition().duration()` calls, moving down and back up repeatedly. No external data is used; the visualization relies purely on hardcoded geometry and SVG rendering.

Aaidanoconnor1
96% match