Skip to main content
SimilarExport ZIP
100%

Making a smiley face!

✓ Published1🌍 Public
KKevin Bolger
Last edited Feb 22, 2020
Created on Feb 22, 2020
Forked from HTML Starter

A smiley face is rendered as a yellow circle with black outlines, featuring animated eyebrows that raise and lower via chained D3 transitions. The visualization constructs the face using SVG primitives: a circle for the head, circles for eyes, rectangles for eyebrows, and a D3 arc path for the mouth. The eyebrow groups translate vertically over two 2000-millisecond transitions, creating a continuous up-and-down motion. Data from char-data.csv defines peril values, though the current code does not use this file in the visible implementation.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Making a smiley face!

A smiley face is rendered as a yellow circle with black outlines, featuring animated eyebrows that raise and lower via chained D3 transitions. The visualization constructs the face using SVG primitives: a circle for the head, circles for eyes, rectangles for eyebrows, and a D3 arc path for the mouth. The eyebrow groups translate vertically over two 2000-millisecond transitions, creating a continuous up-and-down motion. Data from char-data.csv defines peril values, though the current code does not use this file in the visible implementation.

KKevin Bolger
100% match
Loading thumbnail…

smiley face

A yellow circle with black outlines forms a smiley face, complete with eyes, eyebrows, and a smiling mouth. The eyebrows animate by moving upward and then returning to their original position over four seconds. Built with React and D3.js v5, the visualization uses SVG shapes like circles and rectangles, with the mouth drawn via the `arc` function. The animation is achieved through chained `transition` calls that modify the eyebrow group's transform attribute.

MMichael Milano
92% match
Loading thumbnail…

Smiley Face

A yellow circle with a black outline forms the face, featuring two solid black eyes and rectangular eyebrows. The eyebrows animate by moving downward and then returning to their original position over a sequence of transitions. The mouth is drawn using the D3 `arc` function to create a curved path. The visualization is built with React and D3 v4, rendering all shapes as SVG elements within a centered group, with animated transitions applied via `transition().duration()`.

NNicholas Stebbings
91% match
Loading thumbnail…

smile face

A yellow smiley face is drawn in SVG, with black eyes, eyebrows, and a semi-circular mouth. The eyebrows animate by shifting their vertical position using chained D3 transitions. The face is constructed with D3 selections, using `circle` and `rect` elements for the features, and a `path` created with the `d3.arc` generator for the mouth. The entire group is centered and scaled, with the animation triggered on page load.

YY-oringe
91% match
Loading thumbnail…

Let's make a face with D3.js!

A smiley face, drawn with yellow circles and a black smile, animates by shifting its eyebrows upward and back down. The entire face is constructed in an SVG canvas using D3.js version 5, with the D3 selection and append API building the DOM elements. The eyebrows move through a chained sequence of D3 transitions, each lasting two seconds, which change the transform attribute of a group containing two rectangles. The mouth is generated using D3’s arc shape helper to create a path with specified inner and outer radii and angular range.

Ssara17585
90% match
Loading thumbnail…

Making a smily face

A yellow smiley face is drawn on an SVG canvas with two eyes, a smile, and animated eyebrows. The face is centered using a D3 selection with the `translate` transform, and the mouth is created with the `d3.arc` path generator. The eyebrows use `transition().duration()` to move up and down over two seconds each, demonstrating chained D3 transitions. The code relies on `d3.select`, `d3.arc`, and SVG elements like `circle` and `rect`, all rendered with d3.v5.

Kketuckychix
90% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn with D3.js, featuring two eyes, a curved mouth, and animated eyebrows that move up and down in a looping transition. The visualization demonstrates fundamental DOM manipulation by appending and transforming SVG shapes (`circle`, `rect`, `path`) within grouped elements (`g`), using D3 v5’s selection and transition APIs. The face is centered via a translated group, and the mouth is generated with D3’s `arc` shape helper, while the eyebrow motion relies on chained `.transition().duration()` calls.

Ccollv004
89% match
Loading thumbnail…

Making a smiling face

A yellow circle with black outlines forms a smiling face, featuring two eyes, curved eyebrows drawn as arc paths, and a wide, open smile created with a D3 arc generator. The entire composition is centered within an SVG using a group transform. The eyebrows animate via chained `transition().duration(2000)` calls, shifting their vertical position up and down in a continuous loop. The visualization uses D3 v5 selections and the `arc()` shape generator, rendering static SVG elements with JavaScript-driven animation.

Mmagua
89% match