Making a bar chart

100%

Making a bar chart

✓ Published0🌍 Public

Last edited Sep 10, 2019

Created on Sep 10, 2019

Forked from Let's make a face with D3.js!

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.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

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

95% match

Loading thumbnail…

Making a bar chart

This example demonstrates fundamental DOM manipulation with D3.js by constructing a yellow smiley face whose eyebrows animate up and down. An SVG circle forms the face, with additional circles for eyes and a path created using the `d3.arc` function for the mouth. The eyebrows are rectangles that move via `transition.attr` to shift their vertical position over time. The code uses selections like `select` and `append` to build the SVG hierarchy, with a two-second duration for each eyebrow movement.

AAdam Usmani

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

92% match

Loading thumbnail…

Fork of Let's make a Bar Chart

This example uses D3.js v5 to build an animated smiley face entirely from SVG shapes. A yellow circle forms the face, with two smaller circles as eyes and an arc path for the mouth. The code demonstrates fundamental DOM manipulation by appending elements to a group and using `transition` to animate rectangular eyebrows up and down over two seconds. It showcases basic shape construction, attribute setting, and chained transitions through D3’s selection API, with no external data source, relying solely on hardcoded dimensions for layout.

Ppatrick-abdullahad

90% match

Loading thumbnail…

Let's make a face with D3.js!

A smiley face drawn in SVG animates as its eyebrows bounce upward and settle back down. The example demonstrates fundamental D3.js DOM manipulation by constructing the face from appended shapes—circles for the eyes and head, rectangles for the eyebrows, and a path generated with the `arc` helper for the mouth. A chained `transition` with a two-second duration moves the eyebrow group twice, creating the animation. The code uses D3 v5 selections and attributes on a static SVG canvas.

Eevesshaw

90% match

Loading thumbnail…

Let's make a face with D3.js!

A smiley face drawn with SVG shapes animates its eyebrows in a looping motion. The example demonstrates fundamental D3.js DOM manipulation by using `select` to target SVG elements and `append` to build circles, rectangles, and a path arc for the mouth. A chained `transition().duration()` sequence moves the eyebrow group up and down over two-second intervals. The face is centered on a 960-by-500 viewport, with all coordinates offset from the middle via a translation transform.

CCameron

89% match

Loading thumbnail…

Let's make a face with D3.js!

A smiley face built with SVG shapes animates its eyebrows in a looping vertical motion. The example demonstrates fundamental D3.js DOM manipulation by chaining `select`, `append`, and `attr` calls to construct circles, rectangles, and an arc-based mouth. Using `d3.arc` for the mouth and `transition().duration()` on a group element, the eyebrows shift up and down over two-second intervals. D3 v5 handles all rendering in an inline SVG, with no external data source.

GGray1011

89% match

Loading thumbnail…

Let's make a face with D3.js!

A smiley face rendered as SVG elements animates its eyebrows in a continuous loop. The example demonstrates fundamental D3.js DOM manipulation by selecting an SVG canvas, appending a centered group, and building the face from circles, rectangles, and an arc path. Eyebrows transition vertically using chained `transition().duration()` calls, moving down 50 pixels then returning. The code imports `select` and `arc` from D3 v5, constructing the mouth with the arc generator’s inner and outer radii and angle parameters.

MMunTatt Yap

89% match