Incorrect plot

[paulirish]

Hiya. I love babar, but found a problem with it..

 console.log(babar([ [ 0, 0 ],
  [ 796.6869999170303, 93.34886665361937 ],
  [ 2985.1589999198914, 99.99999999999999 ] ]))

generates

whereas it really looks like

[stephan83]

Hi!

It has very limited accuracy when few points are given. It is also very dumb. In fact it renders a histogram, not really a chart. Because your data has three points, it decides to draw only three bars (of the same size). Then it averages values within each bar's range, which results in a pretty inaccurate chart.

I tried adding an options to manually specify the number of buckets (https://github.com/stephan83/babar/pull/3), but the results are still not ideal.

console.log(babar([ [ 0, 0 ],
  [ 796.6869999170303, 93.34886665361937 ],
  [ 2985.1589999198914, 99.99999999999999 ] ], {
      buckets: 8,
      color: 'ascii'
  }))

100                                                                         
 92                   XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
 85                   XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
 77                   XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
 69                   XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
 62                   XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
 54                   XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
 46                   XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
 38                   XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
 31                   XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
 23                   XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
 15                   XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
  8                   XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
  0                   XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
    0        426      853      1279     1706     2132     2559     2985 

To be honest this script was hacked together a long time ago, to get accurate results I would have to rewrite it properly (which I might do if I ever find the time). But to address this case I think it would have to be a chart renderer, not a histogram renderer.

[stephan83]

By the way I've done my share of SVG chart rendering in the past years, so maybe I'll find the motivation to create a better renderer :)

[utix]

@paulirish not really a fix, more a work around, I add value for each 50 ms till the next rounded second I will add it into speedline

function prettifyData(progress, duration) {
        let data = [];
        let i = 0;
        let lastValue = progress[0][1];
        for (let frameId = 0; frameId < progress.length; frameId++) {
                while (i <= progress[frameId][0]) {
                        data.push([i, lastValue]);
                        i += 50;
                }
                lastValue = progress[frameId][1];
        }
        for (;i < duration || i % 1000 != 0; i+= 50) {
                data.push([i, lastValue]);
        }
        data.push([i, lastValue]);
        return data;
}

With your data

First with prettyfier, second without, this allows to catch more steps

[ [ 0, 0 ],
  [ 12.620000004768372, 0 ],
  [ 1432.4920000135899, 44.669014453834855 ],
  [ 1584.5960000157356, 30.471606550592053 ],
  [ 2427.2540000081062, 45.408092525252194 ],
  [ 5917.1110000014305, 55.591679672873674 ],
  [ 5980.305999994278, 54.32852388846608 ],
  [ 7421.578999996185, 100 ] ]