Skip to main content
SimilarExport ZIP
100%

04 - let's make a face - dataviz 2018

✓ Published11🌍 Public
Zzach b.
Last edited Nov 20, 2021
Created on Nov 12, 2021

A smiley face built with SVG and animation shows a yellow circle with two eyes, a grin, and rectangular eyebrows that repeatedly raise and lower. The face is centered in a 960 by 500 viewport, with features positioned via explicit coordinates in the D3 v7 selection and arc API. The eyebrows use chained `transition.attrTween` calls on the `eyeBrows` group to loop between two transforms, while the mouth is drawn with `d3.arc()` using inner and outer radii and angle offsets.

AI-generated description

datraviz 2018 #4 - smiley w/ d3.js

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of 04 - let's make a face - dataviz 2018

A yellow smiley face with black eyes and eyebrows is drawn centered in an SVG canvas using D3 v7. The face consists of a filled circle for the head, two circles for eyes, and an arc path for a smile. The eyebrows are rectangular shapes that continuously animate up and down using chained `transition` calls with `duration` values. The code builds the visualization with D3 selections, the `arc` generator for the mouth, and explicit SVG attribute assignments for positions and dimensions.

KKiran3295
90% match
Loading thumbnail…

03_Let's make a face with D3.js!

A yellow smiley face is drawn on an SVG canvas using D3.js, with circles for the eyes, a mouth formed by the `d3.arc` generator, and rectangular eyebrows that animate upward and back down via chained `transition` calls over two seconds each. The code selects the SVG element, positions a group at its center, and uses D3's modular imports (`select`, `arc`) to construct and manipulate shapes. The eyebrows' movement demonstrates basic DOM updates through D3's data-join-free attribute transitions.

LLuiz Domingues
90% match
Loading thumbnail…

Lets make a face

A simple yellow smiley face is drawn in an SVG, composed of a large circle, two eyes, and a curved mouth. The face’s eyebrows animate upward and then back down in a repeating sequence using D3 v6 transitions. The visualization is built with D3 selections and the `arc` generator for the mouth, while all geometric properties are defined as constants in the code.

Kkhuton
90% match
Loading thumbnail…

Let's make a face

A smiley face, drawn with SVG circles and an arc path, animates its eyebrows in a looping sequence in a D3.js visualization. The code builds the face by manipulating SVG groups and shapes, using D3's `select` and `append`. A `transition` with a 2000-millisecond duration shifts the eyebrow group up and down, creating the expression change. The face's construction relies on explicit pixel coordinates and D3's `arc` generator for the mouth, with a yellow circle serving as the head.

Mmoha0902
90% match
Loading thumbnail…

Let's Make a Face Part I

A simple animated smiley face is constructed using D3.js, with a yellow circular head, two eyes, eyebrows, and a partial arc mouth. The eyebrows animate upward and downward in a repeating cycle, adding a subtle expressive motion to the otherwise static face. The visualization is built entirely with SVG primitives—`circle`, `rect`, and `path` elements—and relies on D3's `transition` API to animate the eyebrow transform over two-second intervals. The arc for the mouth is generated using D3's `arc` function, which produces a path for the specified inner and outer radii and angle range.

JJustin Gieselbach
90% match
Loading thumbnail…

Let's Make a Face with D3.js!

A yellow smiley face is rendered in SVG, with the head as a circle, two eyes, and a mouth drawn using d3.arc. Animated eyebrows repeatedly move up and down via d3 transitions, changing their transform attribute over two seconds. The face is centered using D3 selections and attribute manipulation, with all shapes positioned relative to the SVG’s center. The visualization uses d3.select, d3.arc, and transition calls, with no external data source.

JJordan Arnold
89% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn as an SVG circle with animated eyebrows made of rectangles. The eyebrows transition upward and then return to their original position over two seconds each using D3's `transition()`. The face is built with D3 selections, appending elements like `circle`, `rect`, and `path`, while the mouth uses the `arc()` generator. Data is hardcoded in `index.js`, and the visualization runs entirely in the browser with D3 v5.

Ccodexmon
89% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG using D3.js, with circular eyes, rectangular eyebrows, and a mouth created via `d3.arc` for the half-circle path. The face is centered by translating a group element to the middle of the 960×500 SVG canvas. The eyebrows animate upward and back down over four seconds, using chained `transition().duration(2000)` calls that modify the group’s `transform` attribute. The example relies on D3 v5 selections and the `arc` generator to construct the facial features.

Ooabundes
89% match