Bar Chart Race, Explained • Hacker News Board

Re: Bar Chart Race, Explained

#21

Post by kyberias » Thu, Nov 14, 2019, 6:43 PM UTC

mbostock wrote: post #17

rhplus wrote: post #16

One property of these charts is that the data is normalized so that the 'winner' takes up 100% of the width for any given time-sample. This is useful if you're trying to imply that the data is zero-sum, but not useful if you're interested in understanding the changes for any one participant relative to itself, or two participants relative to each other. I think in the example, Apple's growth would be far more dramati…

If you edit the line that sets the x.domain in the chart cell, you can see it run with a fixed scale: x.domain([0, d3.max(keyframes, ([, data]) => d3.max(data, d => d.value))])

Much better! Thank you.

Re: Bar Chart Race, Explained

#22

Post by mbostock » Thu, Nov 14, 2019, 6:51 PM UTC

uoaei wrote: post #20

For a really simple improvement to the visuals, smooth the data with smoothing splines before performing the race, then subsample/interpolate between your data points for a smoother feel. Every time I see the "ka-chunk" as yearly data is iterated through in lockstep fashion, especially on a certain corner of the internet where "data is (or should be) beautiful", I cringe.

This could be likely done by editing the keyframes cell and using d3.interpolateBasis instead of linear interpolation.

Re: Bar Chart Race, Explained

#23

Post by canada_dry » Thu, Nov 14, 2019, 9:18 PM UTC

mbostock wrote: 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…

Observable is an incredibly useful resource and deserves way more attention IMHO.

I'm currently using Observable/d3 to develop/test a time based graph of multiple analog channels being read in real-time from an IoT device (i.e. Arduino Mega).