Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
EEvanEzell
Last edited Jun 19, 2020
Created on Jun 19, 2020

This example demonstrates how to build a smiley face using D3.js v5, with interactive eyebrows that move. It uses basic SVG shapes and DOM manipulation through D3’s selection methods, appending circles and paths to a scalable vector graphic. The chart also incorporates a Sankey diagram layout, using d3.sankey to generate nodes and links, with gradient-colored edges and labels. The code relies on d3.create and d3.selectAll with data joins to dynamically render the visual elements.

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

Let's make a face with D3.js!

This example demonstrates how to build an interactive smiley face using D3.js, with eyebrows that animate based on user interaction. The visualization uses SVG elements created and manipulated through D3’s core DOM selection and data-binding methods. The code relies on D3 v5, loaded via a CDN, and includes a video tutorial explaining the process. Rendering occurs entirely in SVG, with styles defined in a separate CSS file. No external data source is used; the face is constructed programmatically.

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

Let's make a face with D3.js!

This example uses D3.js v5 to construct a smiley face from scratch, with interactive eyebrows that move. It demonstrates fundamental DOM manipulation by selecting an SVG element and appending shapes such as circles and paths via D3’s `select`, `append`, and attribute-setting methods. The code relies on the `d3.min.js` library loaded from a CDN and renders entirely in SVG. Simple CSS sets the page margin and hides overflow, while a bundled JavaScript file drives the facial features’ static and animated properties.

DDavid Sjoberg
93% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how to build an interactive smiley face using D3.js v5, starting with a red SVG background and progressively adding facial features. The code uses d3.select to manipulate the SVG canvas, setting the background color and preparing the structure for additional elements. Though the primary implementation is incomplete, the accompanying README and video tutorial show how to create moving eyebrows through DOM manipulation with D3's data-binding and selection methods. The example is rendered entirely as inline SVG elements within a 960x500 viewport.

Ccharliemok
93% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a smiley face drawn with SVG circles, rectangles, and an arc for the mouth. Its eyebrows bounce up and down repeatedly in an animated loop. The code demonstrates fundamental DOM manipulation with D3.js v5, using `select`, `append`, and chained `transition().duration()` calls to animate the eyebrow group’s transform. The face uses hardcoded dimensions, no external data, and renders entirely through SVG primitives within a 960x500 canvas.

Ttsinghkhalsa
93% 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 circles, with animated eyebrows that move. The code uses D3 v5’s `select`, `range`, and data joins to bind an array of five fruit objects to circles, setting position and fill attributes. The rendering is pure SVG, created through `.enter().append('circle')` on an empty selection. The eyebrows are implied through the data structure, though the visible output focuses on the static face layout.

Aa-ydobon
93% match