Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published1🌍 Public
AAkarsh Jain
Last edited Jun 14, 2020
Created on Jun 14, 2020

A yellow smiley face built with D3.js demonstrates basic DOM manipulation and animation. The code uses `d3.select` to target the SVG, appends circles and rectangles for the eyes and eyebrows, and constructs the mouth with the `d3.arc` generator. A chained `transition().duration(2000)` moves the eyebrow group up and down repeatedly, creating a bouncing effect. All shapes are drawn with SVG attributes like `cx`, `r`, and `x` without any external data source.

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 is drawn as an SVG using D3.js v5, with circular eyes, a path-based mouth built via the `d3.arc` API, and rectangular eyebrows. The eyebrows animate upward and back down using chained `transition` and `attr` calls over two 2-second intervals. The code demonstrates fundamental DOM manipulation by selecting the SVG, appending groups and shapes, and setting attributes with transforms, all in an empty HTML body.

AAnkit
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn with SVG shapes: a circular head, two eyes, rectangular eyebrows, and an arc-based mouth. The code demonstrates fundamental D3.js DOM manipulation and selection, using `d3.select` to append elements and `d3.arc` for the mouth path. Animated eyebrows move up and down via chained `transition()` calls with `attr` tweening over two-second durations, showcasing D3’s built-in animation capabilities without external data.

Aagongwpi
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG using D3.js, with circles for eyes and a mouth created via the d3.arc path generator. The face’s eyebrows, rendered as rectangles, animate upward and back down over four seconds using chained transition calls. The code builds the entire face through direct DOM selection and manipulation with d3.select and d3.append, positioning elements via SVG transform attributes.

AAkshada Pradhan
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG with D3.js, featuring circular eyes, a mouth created using the `d3.arc` shape generator, and animated rectangular eyebrows. The eyebrows transition vertically over two seconds up and then back down using D3’s `.transition().duration()`. The code demonstrates basic DOM manipulation by selecting the SVG element, appending groups and shapes, and setting attributes like radius, position, and fill. All rendering is SVG-based, with no external data source.

DD0no
96% match
Loading thumbnail…

Let's make a face with D3.js!

A smiley face built from basic SVG shapes—a yellow circle, two eyes, and a mouth—demonstrates D3.js DOM manipulation. The code uses `d3.select` and `d3.append` to construct elements, while `d3.arc` defines the mouth path. A continuous `transition` animates the eyebrows upward and downward over two-second intervals, showing chained movement. The example relies on D3 v5, rendering in SVG, with dimensions taken directly from the `<svg>` attributes.

AAravind Subramaniam
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face built with SVG shapes, whose eyebrows animate upward and downward in a repeating bounce. The code uses D3 v5’s `select` and `arc` to construct the head, eyes, and mouth, with `transition().duration(2000)` driving the eyebrow movement. A centered `<g>` group positions all facial features relative to the SVG’s midpoint, while hardcoded offsets define eye spacing and eyebrow placement. The rendering relies entirely on SVG elements—circles, rectangles, and a path—with no external data source.

Aakanksha maheshwari
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG, with animated eyebrows that move up and down in a looping transition. The example demonstrates fundamental DOM manipulation by using D3 selections to create and position circles, rectangles, and an arc-based mouth via the `d3.arc` API. Built with D3 v5, it chains `.transition().duration(2000)` calls to animate the eyebrow group's transform attribute. The source code imports `select` and `arc` from D3, and renders everything within a fixed 960×500 SVG canvas.

Mmmustafau
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn and animated entirely in SVG using D3.js v5. The code selects the svg element and appends a group, then positions circles for the eyes, rectangles for the eyebrows, and an arc-based path for the mouth. The eyebrows animate upward and back via chained `transition().duration(2000)` calls on the group’s `transform` attribute. The example demonstrates basic DOM manipulation, shape creation, and transition sequencing with d3-selection and d3-shape’s `arc` generator.

Ggcappadaniel
96% match