Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
KKevinw97
Last edited Jan 17, 2020
Created on Jan 17, 2020

A D3.js example demonstrates fundamental DOM manipulation by constructing a yellow smiley face with black eyes and a curved mouth within an SVG canvas. The eyebrows are not present; instead, the code uses `d3.select` to append and position circles and a `path` element with an arc generator for the mouth. It relies on D3 v5's `arc()` API and inline attributes to render the face geometry at the viewport center.

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!

A yellow smiley face with black eyes and a curved mouth is drawn on an SVG canvas using D3.js. The example demonstrates fundamental DOM manipulation with methods like `select`, `append`, and `attr` to create circles, rectangles, and a path generated with the `arc` function. Animated eyebrows, rendered as rectangles, move up and down via chained `transition` calls with a 2000-millisecond duration, showcasing basic animation in D3 v6.

Bbbak92
95% 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 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.

PPierre_T
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by building a yellow smiley face from SVG shapes, including eyes, eyebrows, and an arc-based mouth. The code uses `d3.select`, `d3.arc`, and `transition.attr` to animate the eyebrows moving up and down over a two-second cycle. Rendered in an SVG canvas, it highlights how D3 v5 binds data and updates attributes directly, with all elements positioned relative to a centered group.

Aabreudude
95% match
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 primitives: a yellow circle, two eyes, a mouth drawn with `d3.arc`, and rectangular eyebrows. The face is centered in an SVG canvas via a `g` element and coordinate transforms. The eyebrows animate using chained `transition().duration()` calls, moving up and down over two-second intervals. The code relies on D3 v5 selection, attribute setting, and transition APIs to mutate SVG elements directly.

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

Let's make a face with D3.js!

This example uses D3.js version 5 to construct a yellow smiley face with eyes, eyebrows, and a mouth directly in an SVG. It demonstrates fundamental DOM manipulation by selecting elements, appending shapes, and applying attributes. The code uses `d3.select` and `d3.arc` to generate the mouth path, while a two-stage `transition()` chain animates the eyebrows upward and then back to their original position over 4 seconds.

Eevesshaw
95% match