Making a Bar Chart

100%

Making a Bar Chart

✓ Published0🌍 Public

Last edited Feb 10, 2020

Created on Feb 10, 2020

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.

AI-generated description

A program that shows the top 10 most populous countries as a pathetic bar chart with no axes.

Data: United Nations World Population Prospects 2019.

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

92% 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…

Making a BarChart

This example shows a simple yellow circle with two black eyes and a curved mouth, resembling a smiley face rendered as SVG. The drawing uses D3 version 6 API functions, including `select` to reference the SVG element, `append` to create circles and a path, and `arc` to generate the mouth’s curved shape based on specified radii and angles. The chart uses a fixed 960×500 coordinate space with no external data, instead relying on manual positioning and styling through attribute assignments.

Sswathi24288

92% match

Loading thumbnail…

Bar Chart!

This example draws a yellow circle with black facial features on an SVG canvas, creating a simple smiley face. It uses d3-selection to append and style the circle, eyes, and mouth, with the mouth path generated via the d3-shape `arc()` API. The layout is fixed relative to the SVG dimensions, and the rendering is entirely SVG-based with no external data loaded from data.csv.

Rrandom-program

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

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

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

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

87% match