Skip to main content
SimilarExport ZIP
100%

Starting Viz - Smiley Face

✓ Published2🌍 Public
JJohn Hamilton Bradford
Last edited Oct 23, 2018
Created on Oct 23, 2018
Forked from Hello VizHub

A yellow smiley face is drawn in the center of an SVG canvas, featuring a circular head, two eyes, animated eyebrows, and a curved mouth created with a D3 arc path. The code uses d3.select, d3.arc, and SVG circle, rect, and path elements, with transitions that move the eyebrow group vertically over two seconds. No external data is used; the visualization is constructed purely from hardcoded attributes within an index.js file, and an ES6 module exports a message variable.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Hello VizHub

A cheerful yellow smiley face is drawn in an SVG canvas using D3 v5, with black outlined eyes and a mouth. The example demonstrates basic SVG shape creation and manipulation through D3’s `select` and `append` methods. Two rectangular eyebrows animate vertically using `transition().duration()`, moving up and then back down over two seconds each. The code also utilizes D3’s `arc` path generator to construct the mouth, showing fundamental drawing and animation capabilities on a static 900x600 canvas.

Ffahmijaafar
89% match
Loading thumbnail…

Hello VizHub

This visualization renders a cheerful, static smiley face using D3.js v5 SVG primitives, composed of a yellow circle, two black eyes, and an arc-based mouth. The code demonstrates animated eyebrow rectangles that transition upward over two seconds via `transition.attr`, while the overall composition uses basic shape attributes and positioning. D3 selection and arc API generate the mouth path, with the SVG canvas sized at 960 by 500 pixels.

Aasimplesinger
89% 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
88% match
Loading thumbnail…

Hello VizHub

A yellow smiley face rendered in SVG demonstrates basic D3 shapes and transitions. The code uses d3.select and d3.arc from D3 v5 to draw the head, eyes, eyebrows, and mouth, with d3.transition animating the eyebrows downward and back upward. The SVG canvas is 960 by 480 pixels, and all elements are positioned programmatically via translation transforms. A static dataset is not present; instead, hardcoded dimensions and angles define the geometry.

Hhxc20060903
88% match
Loading thumbnail…

Hello VizHub

A yellow smiley face rendered in SVG demonstrates basic D3 shapes and transitions. The code uses d3.select and d3.arc from D3 v5 to draw the head, eyes, eyebrows, and mouth, with d3.transition animating the eyebrows downward and back upward. The SVG canvas is 960 by 480 pixels, and all elements are positioned programmatically via translation transforms. A static dataset is not present; instead, hardcoded dimensions and angles define the geometry.

Hhxc20060903
88% match
Loading thumbnail…

Hello VizHub

A bright yellow smiley face rendered in SVG with D3.js v5. The visualization uses D3's `select`, `append`, and `attr` methods to construct circles for the face and eyes within a centered group. A D3 `arc` generates the mouth path, while the SVG canvas is sized from the markup. The styling relies on an external Google Fonts import via CSS.

VVijay
88% match
Loading thumbnail…

.

A yellow smiley face is rendered as an SVG, with black-outlined eyes, eyebrows, and a mouth. The example demonstrates basic D3.js drawing and animation within a VizHub template. It uses D3's `select` and `arc` functions, and the D3 transition API to translate the eyebrow group up and down over two seconds. The scene is drawn on an SVG canvas using simple geometric shapes.

Jjayanth1242
87% match
Loading thumbnail…

d3 Starter smiley face

This example shows a simple animated smiley face built with D3.js v5 and rendered as SVG. The face consists of a yellow circle with eyes, eyebrows, and a mouth drawn using SVG shapes and an arc path. The eyebrows animate up and down via chained `transition().duration()` calls, creating a winking or expressive effect. The code uses D3's `select` and `arc` APIs, along with SVG attributes and transforms, to position and style each element relative to the center of the canvas.

GgitSushi
87% match