Skip to main content
SimilarExport ZIP
100%

Making a Bar Chart!

✓ Published1🌍 Public
MMustafa Shaheer Hamid
Last edited Feb 28, 2021
Created on Feb 28, 2021

An animated SVG face with black skin, red eyes, eyebrows, and a red arc mouth sits centered on a dark background. D3 v6 and the `d3.arc` shape generator draw the mouth and arched eyebrows, while chained `transition` calls move each eyebrow upward and back down over two seconds for a blinking or surprised effect. The face’s eyes are simple circles positioned with fixed spacing, and all elements are grouped inside a centrally translated `<g>` element.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Making a bar chart

A yellow circle face with eyes, eyebrows, and a mouth is drawn in SVG, then the eyebrows animate upward and back down using chained `transition` calls in d3.v5. The face is centered in a 960x500 SVG, with features positioned via SVG transforms and an arc path for the mouth. The animation runs continuously in a loop, demonstrating how SVG shape attributes can be transitioned with D3’s `transition.attr` method.

Ssemopz
89% match
Loading thumbnail…

Bar Chart

Despite its title, this example shows a stylized face made from SVG shapes, not a traditional bar chart. A yellow circle forms the head, with two circular eyes, rectangular eyebrows, and an arc-based mouth. The eyebrows animate by transitioning their vertical position over two seconds, moving down and then back up. The visualization is built with D3 v5, using selections, the `arc` generator for the mouth, and chained `transition` calls for the animation.

Mmarm88
89% match
Loading thumbnail…

Making a bar chart

A smiley face rendered in SVG shows animated eyebrows that move up and down. The D3.js code uses `select` and `append` to build circles for the face and eyes, rectangles for eyebrows, and a path with an arc for the mouth. A `transition` with a 2000-millisecond duration animates the eyebrow group’s transform, shifting it vertically and back. The example demonstrates fundamental DOM manipulation with D3 v5, using static SVG attributes and chained transitions to create a simple looping animation.

FFakunle Mayowa Samuel
88% match
Loading thumbnail…

Making a bar chart

This example shows a smiley face drawn with D3.js, featuring yellow circular head, eyes, eyebrows, and a mouth arc. The eyebrows animate upward and downward over two seconds using chained transitions, demonstrating fundamental DOM manipulation and SVG rendering. The code uses `d3.select`, `svg.append`, `d3.arc` for the mouth path, and `transition.attr` to animate the eyebrow group’s transform. The visualization is purely programmatic, with no external data source, showcasing how D3 can create and animate shapes directly in the browser.

Llekanrasheed
87% match
Loading thumbnail…

Bar Chart!

This visualization displays a cheerful, cartoonish face rendered in SVG, with a yellow circular head, black eyes, and a curved mouth. The face is constructed entirely with D3 v5’s `select` and `arc` APIs, using static coordinates derived from the SVG’s width and height attributes. Shapes are appended directly to the SVG canvas, with the mouth drawn via the `arc` generator using explicit inner and outer radii and angle values. The example demonstrates basic geometric composition and D3’s shape generation without any data binding or interactivity.

Ddbidwai
87% match
Loading thumbnail…

Making a bar chart

A smiling face built from SVG shapes demonstrates D3’s arc generator and chained transition methods. The code draws a yellow circle for the face, two arc paths for closed, winking eyes, and a lower arc for the mouth, all centered within a 960×500 viewport. Using d3.arc with explicit inner and outer radii and start/end angles, the example shows how to construct curved paths without external data. The React starter wraps D3 v5 selections, while commented-out code hints at possible animated eye transitions via .transition().duration().

RRamandsb
87% match
Loading thumbnail…

Making a Barchart

A yellow circle with black eyes and eyebrows forms a simple animated face. The eyebrows smoothly move up and down using D3 transitions. The face is drawn with SVG shapes, including circles for the head and eyes, rectangles for the eyebrows, and a path for the mouth created with the d3.arc function. The code uses d3.select to target the SVG element and applies transforms to position facial features.

Hhberrong
87% match
Loading thumbnail…

Making a bar chart

Despite its title, this example does not render a bar chart. Instead, it demonstrates basic D3.js DOM manipulation by drawing a yellow smiley face with SVG shapes, including circles for the head and eyes, rectangles for eyebrows, and a path for the mouth. The code uses `d3.select` and `d3.arc` to build the shapes, then applies chained `transition().duration(2000)` calls on the eyebrows group to animate it moving down and back up over four seconds. The animation relies on D3's transition system to interpolate the `transform` attribute.

FfaRriaN
86% match