Levels Of Detail

Although the interactivity and high resolution you get from BeakerX’s charting library are great, creating DOM elements for every single data point is memory and CPU intensive. If implemented naively, your web browser would become sluggish or freeze if you tried to chart too much data. Fortunately, Beaker recognizes this situation and has a solution: Levels of Detail. If there are more than 1500 points, then instead of drawing them all, Beaker combines points into groups, and represents each group with its average, a box, or a river (min, max, and average).

And then, as you zoom into the data, it is resampled as appropriate for the current view, so the closer you look, the more there is to see, but you can still pull out and get the big picture while keeping the frame rate high.

Note that BeakerX’s Level of Detail feature can’t protect you if your dataset set itself is too large to fit in your web browser. In that case, you should use a plotting library that renders to a PNG image like matplotlib in Python, or do the resampling on the server manually.

In [ ]:
// generate a random walk
steps = 10000
random = new Random()
def walk(ssize) {
  def cur = 0.0
  def x = []
  def y = []
  for (i in 0..steps) {
    y[i] = cur
    x[i] = i
    cur += random.nextGaussian() * ssize
  }
  return [x:x, y:y]
}
// now x is time for the x-axis, and y is the random variable
beer = walk(10)
whiskey = walk(100)
In [ ]:
p = new TimePlot(title: "Drunken Sailor Walks", showLegend: true, lodThreshold: 2000)
p << new Line(x:beer.x, y:beer.y, displayName:"Beer Walk")
p << new Line(x:whiskey.x, y:whiskey.y, displayName:"Whiskey Walk")