Live data from Hacker News

Bar Chart Race, Explained

observablehq.com

1–10 of 23 posts

Re: Bar Chart Race, Explained

#2
What's the advantage of an animated bar chart compared to an area chart? I personally think they're incredibly painful to look at but since I keep seeing them pop up on reddit I'm sure there must be advantages I haven't thought of, right?

Re: Bar Chart Race, Explained

#4
This tutorial was inspired by John Burn-Murdoch’s popular bar chart race from earlier this year. There have been a couple thousand transitive forks of John’s notebook!

Our hope with Observable is that reactive notebooks, as a form of literate programming designed for tinkering, make code easier to understand and reuse. Sharing code is already popular today, obviously, but we think helping people better understand that code will foster creativity and innovation.

Re: Bar Chart Race, Explained

#5
post #2

What's the advantage of an animated bar chart compared to an area chart? I personally think they're incredibly painful to look at but since I keep seeing them pop up on reddit I'm sure there must be advantages I haven't thought of, right?

They’re engaging, which can’t be excluded from their benefits. There was something visceral about watching Apple pull ahead in 2011-2015.

IMO bar charts are better at showing relative sizes of scalar numbers as opposed to 2d shapes. A circle with twice as much area as another just doesn’t look 2x as big to me.

Re: Bar Chart Race, Explained

#6
post #2

What's the advantage of an animated bar chart compared to an area chart? I personally think they're incredibly painful to look at but since I keep seeing them pop up on reddit I'm sure there must be advantages I haven't thought of, right?

The alternatives I’d consider are a line chart and a bump chart.

https://observablehq.com/@d3/multi-line-chart https://observablehq.com/@jonsadka/scatterplot

A bar chart race is in many ways “worse” than a static chart. The bar chart race forces you to wait for the animation to finish, whereas a static chart shows you everything simultaneously, and lets you look forward or backward in time by just moving your eyes. This can be generalized to say that a well-designed static chart is often better than an interactive or animated chart, since in the static chart, everything is visible up-front.

But in the same way that a good visual hierarchy directs the reader’s attention and simplifies a complex interface, bar chart races (and animations more generally) are effective at getting the viewer to watch the race as it originally played out, from start to finish. Time in the data is represented as real time, so you’re only able to see a single moment in time.

So bar chart races are probably worse for most perceptual tasks, but as a storytelling device, they are (seemingly) quite effective.

Re: Bar Chart Race, Explained

#7
post #6
post #2

What's the advantage of an animated bar chart compared to an area chart? I personally think they're incredibly painful to look at but since I keep seeing them pop up on reddit I'm sure there must be advantages I haven't thought of, right?

The alternatives I’d consider are a line chart and a bump chart. https://observablehq.com/@d3/multi-line-chart https://observablehq.com/@jonsadka/scatterplot A bar chart race is in many ways “worse” than a static chart. The bar chart race forces you to wait for the animation to finish, whereas a static chart shows you everything simultaneously, and lets you look forward or backward in time by just moving your eyes. T…

Good thoughts here and also good post, always enjoy reading through a nice notebook. Also have seen the race charts popping up recently and it's cool to get a bit of a deep dive on it. Honestly though my opinion is that they are flashy and because of the animation and novelty factor people are drawn to the chart.

Re: Bar Chart Race, Explained

#8
post #2

What's the advantage of an animated bar chart compared to an area chart? I personally think they're incredibly painful to look at but since I keep seeing them pop up on reddit I'm sure there must be advantages I haven't thought of, right?

They are terrible to see an overview of change over time, but the animation keeps people interested and watching the "race"

Re: Bar Chart Race, Explained

#9
post #2

What's the advantage of an animated bar chart compared to an area chart? I personally think they're incredibly painful to look at but since I keep seeing them pop up on reddit I'm sure there must be advantages I haven't thought of, right?

Line charts and area charts are not good when there are more than 5 series. The race chart can display 20 bars (more series can get in and out at any time), and you have a choice to focus on the top 5 bars, or one specific bar, or comparing two bars.

Re: Bar Chart Race, Explained

#10
post #4

This tutorial was inspired by John Burn-Murdoch’s popular bar chart race from earlier this year. There have been a couple thousand transitive forks of John’s notebook! Our hope with Observable is that reactive notebooks, as a form of literate programming designed for tinkering, make code easier to understand and reuse. Sharing code is already popular today, obviously, but we think helping people better understand tha…

Thanks, Mike. This is fantastic. I'm still just learning D3, but this type of content (and Observable in general) has been immensely useful.

Where do you get ideas for your novel visualizations? Is there academic literature on the psychology of presenting data like this, or are you just dreaming up new things and adding features to D3 so you can do it? How do you recommend making the jump from forking and adapting others' visualizations to writing entirely new things from scratch?

Post reply on HN