Making a Bar Chart

100%

Making a Bar Chart

✓ Published3🌍 Public

Last edited Feb 10, 2020

Created on Feb 6, 2020

This example uses the D3.js v5 join pattern to animate a collection of fruit as circles. An initial bowl of five apples shrinks as they are eaten, and one apple transitions into a yellow lemon, demonstrating data joins with `selection.enter`, `selection.merge`, and `selection.exit`. The circles use a `scaleOrdinal` for color and radius, and each transition applies a 1-second duration to position, size, and removal. The bar chart title references the United Nations population data, but the code itself focuses on the fruit-bowl animation.

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…

动画

A D3.js animation demonstrates how bar charts update when data changes. Using SVG elements and the `fruitBowl` module, fruits are rendered as circles with ordinal color and radius scales, positioned via `attr("transform")`. The example transitions through three stages: removing the last fruit, changing the third fruit’s type from apple to lemon, and filtering out the second fruit, using `setTimeout` calls. It shows the enter, update, and exit pattern with `selectAll` and `data` joins, though transitions are commented out. Data comes from a static CSV containing country populations.

HHillKinsh

84% match

Loading thumbnail…

Making a Bar Chart

Five fruit circles render in an SVG using React components, with apples styled red and lemons yellow via d3-scaleOrdinal color and radius scales. Clicking a fruit toggles a black stroke around it, updating state through React’s useState hook. The example demonstrates how to combine React’s declarative component model with d3 scales for mapping data to visual properties, producing an interactive selection interface.

AAnton Vasilev

83% match

Loading thumbnail…

A bowl of fruit

A bowl of fruit demonstrates animated updates to an SVG circle chart using D3.js v5. Five circles representing apples enter with a scaling radius transition, then shrink and vanish as fruit is consumed, swap from apple to lemon with a color change, and filter out one item. The example uses D3’s `scaleOrdinal` for color and radius mappings, `selection.enter()`, `.merge()`, and `.exit()` with `transition().duration(1000)` to animate circle properties. The data source is a random set of fruit objects generated in the script, rendered as SVG circles with a fixed vertical position and horizontal spacing.

MMatthiasVanCampen

83% match

Loading thumbnail…

Making a bowl of fruit

Five apples appear in a row, then one exits and another becomes a lemon. This D3.js example demonstrates the general update pattern through chained `selection.join` methods without using `join`, instead applying `enter`, `merge`, and `exit` to handle data changes. It uses `scaleOrdinal` for fruit colors and radii, and `setTimeout` to trigger pop and type-change mutations. The SVG circles are positioned with fixed `cx` values and a static `cy`, with the exiting fruit turning black before removal.

NNoWizards

83% match

Loading thumbnail…

bowl of fruit

A bowl of fruit demonstrates data joins in D3.js v5 by rendering five circles as apples, then updating the visualization over time as one apple is removed and another becomes a lemon. The SVG circles are bound to an array of fruit objects using `selection.selectAll`, `data`, `enter`, `merge`, and `exit`. D3 scales, `scaleOrdinal`, map fruit types to fill colors and radii, while `setTimeout` triggers re-renders to show enter, update, and exit transitions.

Jjlspangl

83% match

Loading thumbnail…

Data join and Transition

This example demonstrates the data join pattern with animated transitions in D3 v5, showing how circles representing fruit enter, update, and exit. Starting with five apples, the visualization removes a fruit after one second, changes the third fruit's type to lemon at two seconds, and filters out another item at three seconds. Each change triggers a smooth 1-second transition where new circles grow from radius zero, existing circles adjust their color, size, and position, and removed circles shrink away. The code uses `selection.data()`, `selection.enter()`, `selection.merge()`, and `selection.exit()` with `transition().duration()` for the animations, along with `scaleOrdinal` for color and radius mapping.

JJenny

83% match

Loading thumbnail…

Let's make a face with D3.js!

Five fruit circles animate in and out of an SVG bowl as apples are eaten and one apple transforms into a lemon. The example demonstrates D3.js v6 data joins with enter, update, and exit selections, using `scaleOrdinal` for color and radius, and `transition().duration(1000)` to smoothly resize and remove circles. `setTimeout` triggers sequential state changes, showing how reusable chart functions like `fruitBowl` respond to changing data arrays.

LLidiamir

82% match

Loading thumbnail…

About fruits

This example shows how a data join animates changes to a fruit bowl. Five apples are initially rendered as circles, then one is removed, another transforms into a lemon, and a third is eaten, all with smooth transitions. Using D3's `select`, `range`, and `scaleOrdinal`, the `fruitBowl` function manages circle enter, update, and exit states via `.transition().duration(1000)`, animating radius and position. The SVG output is updated dynamically as JavaScript timeouts trigger the re-rendering.

WWhitney Hung

82% match