Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
DDiavek
Last edited Oct 11, 2019
Created on Oct 11, 2019

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face from basic SVG shapes. The code selects the SVG element and appends a circle with a radius of 200 pixels, while the accompanying stylesheet hides body margins and overflow. Using D3 v5’s `select` and `append` methods, the visualization shows how to programmatically create and style SVG elements, with related video content explaining animated eyebrow movement.

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 primitives. A single circle is appended to the SVG canvas and positioned at the center with a radius of 225 pixels, though its fill is left undefined. The code uses the D3 v5 selection and append methods (`select`, `append`) to build the shape step-by-step, revealing how D3’s API interacts with SVG elements. The static face serves as a starting point for interactive features shown in an accompanying video.

FFred Kellner
96% match
Loading thumbnail…

Let's make a face with D3.js!

A D3.js tutorial demonstrates fundamental DOM manipulation by building a smiley face with animated eyebrows in an SVG canvas. Using D3's `select` and `append` methods, the code creates and styles SVG circles and other elements dynamically. The example relies on D3 v5's modular imports and shows how to set attributes like radius and position through chained method calls. The accompanying video explains the step-by-step process, while the working code is rendered directly in the browser using standard SVG elements within a 960×500 viewport.

HHonza Cahlík
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a smiley face built from SVG shapes, with eyebrows that animate in response to the viewer’s actions. The code demonstrates fundamental DOM manipulation with D3.js v5, using `d3.select` and `d3.append` to create the face’s elements. It relies on the `d3.arc` generator for the mouth and applies simple transitions to move the eyebrows. The page reads the client’s viewport dimensions to size the SVG canvas, and styling is handled via an external stylesheet.

DDifan Gu
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by building an animated smiley face out of SVG shapes. The code uses `d3.select` to append a circle for the head, two circles for eyes, rectangles for eyebrows, and an `d3.arc()` path for the mouth. D3 transitions animate the eyebrows upward and back over four seconds. The example uses D3 v5 and relies on simple attribute setters like `.attr()` to position each element.

Ssethips
95% 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 in an SVG canvas. The code selects the `<svg>` element, retrieves its width and height attributes, and positions a circle at the center using those dimensions. It uses D3’s `select` method and chained attribute setters like `attr(‘r’)`, `attr(‘cx’)`, and `attr(‘cy’)` to control the face’s radius and coordinates. The rendering relies on D3 v5 with SVG output, and the accompanying video highlights interactive eyebrow movement.

Mmerha-g-selassie
95% match
Loading thumbnail…

Let's make a face with D3.js!

A smiley face rendered in SVG demonstrates basic D3.js DOM manipulation, with animated eyebrows that move to change the expression. The example uses D3 v5's `select` and `arc` functions to construct the facial features, building circles and arcs for the eyes, mouth, and brows within an SVG canvas. The code shows how D3 can directly create and update SVG elements through its data-binding and selection APIs, while the accompanying stylesheet hides page overflow for a clean, focused presentation.

MMarian
95% match
Loading thumbnail…

Let's make a face with D3 (following the video)

A smiley face drawn with SVG circles demonstrates fundamental D3.js DOM manipulation, with animated eyebrows that move via selection and attribute updates. The example uses D3 v5’s `select` and `append` methods to build the SVG structure, starting with a fixed-radius circle on a 960×500 canvas. It follows a tutorial video, showing how to create and style basic shapes programmatically, while the accompanying CSS hides page margins and overflow. No data source is involved; the focus is purely on interactive, code-driven drawing.

Ddmcgown3
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js to build a smiley face whose eyebrows animate. The code selects an SVG element, sizes it to the full browser window, and appends a rounded rectangle as the background. It demonstrates fundamental DOM manipulation by chaining D3 methods like `select` and `append` to create the face’s parts, with the eyebrow movement driven by simple data-driven updates in the same SVG structure. The project relies on D3 v5 and renders entirely as SVG.

Ggcappadaniel
95% match