Surendar Bar Chart

100%

Surendar Bar Chart

✓ Published0🌍 Public

Last edited Mar 31, 2022

Created on Mar 31, 2022

A D3.js v5 animation renders a yellow smiley face in SVG, centered within a 960x500 viewport. The face’s eyebrows, drawn as rectangles, move up and down via chained `transition()` calls over two seconds each, while the eyes and arc-based mouth remain static. The example demonstrates fundamental DOM manipulation with `d3.select` and `d3.arc` for constructing shapes and animating attributes.

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

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

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

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

84% match

Loading thumbnail…

Lets make a face with D3

This example demonstrates fundamental D3.js DOM manipulation by building a yellow smiley face whose eyebrows animate vertically. It uses SVG elements—circles for the face and eyes, rectangles for eyebrows, and a path with the `d3.arc` API for the mouth—all grouped and positioned within an SVG canvas. Eyebrow movement is driven by chained `transition().duration()` calls on the `<g>` container, shifting its `y` attribute back and forth. The code imports `select` and `arc` from D3 v5 to construct and manipulate the visualization dynamically.

SSurendar

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

83% match

Loading thumbnail…

Making a Bar Chart

This example draws a yellow smiley face using D3 v5, with a circle for the head, two smaller circles for eyes, and an arc for the mouth. The visualization is built with D3 selection methods like `append` and `attr`, and the mouth uses the `arc` generator with specified inner and outer radii and angle intervals. Though the title references bar charts, the actual code shows no data or axes, instead demonstrating basic SVG shape creation and coordinate positioning relative to the viewport dimensions.

EEugene

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

83% match