2018: Smiley Face

100%

2018: Smiley Face

✓ Published1🌍 Public

Last edited Jul 25, 2020

Created on Jul 25, 2020

Forked from 2018: Smiley Face

A yellow smiley face with black eyes, eyebrows, and an arc-shaped mouth is drawn in the center of an SVG canvas. The eyebrows initially animate downward and then settle into a raised position, with the right eyebrow transitioning vertically via `transition()`. The mouth is created with `d3.arc()`, while circles and rectangles are positioned using centered coordinates. The code imports `select` and `arc` from D3 v5 and uses SVG attributes for rendering.

AI-generated description

2018 Data Vis Course - Smiley Face

MIT Licensed

Similar vizzes

Loading thumbnail…

2018: Smiley Face

A yellow smiley face with black eyes, eyebrows, and a curved mouth is drawn in the center of an SVG canvas. The eyebrows shift up and then back down through a two-stage D3 transition. The visualization uses d3.arc to create the mouth path, while circles and rectangles form the face and features, with all elements positioned relative to the canvas center.

SSam Jukes

94% match

Loading thumbnail…

Smiley face

A yellow smiley face with black eyes, eyebrows, and an arc-shaped mouth is drawn in the center of an SVG canvas using D3.js v6. The face is constructed with D3 selections and shape generators, including `d3.arc` for the mouth and appended SVG `circle` and `rect` elements. A brief animation occurs when the eyes transition their fill color to black after a one-second delay. The graphic is rendered as static SVG with a simple transition effect.

AArun

90% 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

89% match

Loading thumbnail…

smiley face

A yellow smiley face is drawn on an SVG canvas, with a circular head, two eyes, and a curved mouth created using D3’s `arc` path generator. The animation moves the eyebrows upward and back down over a four-second sequence using `transition.attrTween`. The scene is built with D3 v5 selections and transitions within a React framework, using hardcoded dimensions and offsets to position the facial features on a 960 by 500 viewport.

KKeerthipriyaBankuru

89% 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

89% match

Loading thumbnail…

Smiley Face

A yellow SVG smiley face with black eyes and eyebrows is drawn on a 960 by 500 canvas. Using D3 v6 selections and the `arc` generator, a mouth is created and shifted into place via a group transform. The eyebrows are rectangles that animate with chained `transition().duration(2000)` calls, moving downward then upward. The face’s features are positioned by computed width, height, and offset constants in a React-based D3 setup.

Ssravaniboggaram

89% match

Loading thumbnail…

smily

A yellow smiling face with eyes, eyebrows, and a mouth is drawn in SVG using D3 v7. The face is centered via a translated group, and the mouth is created with the `d3.arc` API. Eyebrows animate up and down using chained `transition` calls over two seconds each. The visualization loads D3 from UNPKG and imports `select` and `arc` from the `d3` module.

KkarthikGT

88% match

Loading thumbnail…

Smiley Face with D3.js

A yellow smiley face rendered in SVG appears, composed of circles for the head and eyes, rectangles for eyebrows, and an arc for the mouth. The eyebrows animate upward and downward using chained D3 transitions. Built with D3.js v5, it employs `select`, `arc`, and `transition`, drawing all shapes on a blank 900x500 canvas without an external dataset.

SSoUmItRoBoT

88% match