Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Support interactive framerates on large heatmaps

See original GitHub issue

Spectrograms are a useful tool for visualizing realtime signals, particularly audio data. It would be great if Vega were fast enough to support interactive frame rates on streaming spectrogram data. Here is an example of the kind of functionality I’m talking about. It seems that fundamentally, using rect marks to represent each point is going to be really slow.

Below is a quick test case using Vega-Lite. It generates a 512x100 element heatmap with random values that attempts to update at 50 Hz. On my browser, it slows to a couple of frames per second once the plot fills up. A javascript profile suggests it spends ~200 ms transforming the data and ~300 ms on rendering.

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Vega-Lite Test</title>
    <meta charset="utf-8" />

    <script src="https://cdn.jsdelivr.net/npm/vega@5.3.5/build/vega.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-lite@3.2.1/build/vega-lite.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-embed@4.0.0/build/vega-embed.js"></script>

    <style media="screen">
      /* Add space between Vega-Embed links  */
      .vega-actions a {
        margin-right: 5px;
      }
    </style>
  </head>
<body>
  <div id="chart"></div>
  FPS: <span id="FPS"></span>
  <script>

var vlSpec = {
  $schema: 'https://vega.github.io/schema/vega-lite/v3.json',
  data: {name: 'table'},
  width: 400,
  height: 400,
  mark: 'rect',
  config: {
    view: {
        strokeWidth: 0
    },
    scale: {
        rangeStep: 13
    },
    axis: {
        domain: false
    }
},
  encoding: {
      x: {
          field: "x",
          type: "ordinal",
          axis: null
      },
      y: {
          field: "y",
          type: "ordinal",
          axis: null
      },
      color: {
          field: "val",
          type: "quantitative",
          legend: {
              title: null
          }
      }
  }
};


vegaEmbed('#chart', vlSpec).then(function(res) {
  /**
   * Generates a new tuple with random walk.
   */
   var ys = [...Array(512).keys()];
  function newGenerator() {
    var counter = -1;
    return function() {
      counter++;
      var newVals = ys.map(function(v, c) {
        return {
          x: counter,
          y: v,
          val: Math.random()*10,
        };
      });

      return newVals;
    };
  }

  var valueGenerator = newGenerator();
  var minimumX = -100;
  var num_frames = 0
  var last_time = 0;
  window.setInterval(function() {
    minimumX++;
    num_frames++;
    var changeSet = vega
      .changeset()
      .insert(valueGenerator())
      .remove(function(t) {
        return t.x < minimumX;
      });
    res.view.change('table', changeSet).run();
  }, 20);


  window.setInterval(function() {
    var current_time = new Date().getTime();
    var elapsed_time = current_time - last_time;
    last_time = current_time;
    document.getElementById("FPS").innerHTML=(num_frames*1000/elapsed_time);
    num_frames = 0;
  }, 100);
});
</script>
</body>
</html>

Issue Analytics

State:
Created 4 years ago
Reactions:4
Comments:11 (4 by maintainers)

Top GitHub Comments

1reaction

ewhitmirecommented, Jun 25, 2019

@yuqianma I’ve made the paper publicly accessible and will look into moving the source into a public repo.

1reaction

domoritzcommented, Jun 11, 2019

@ewhitmire found that scrolling performance of a double buffered canvas is exceptionally good. I wonder what it would take for Vega’s renderer to support decoupling the render area from the axes/legends so that they can move independently. Pure translation of the data can then be handled by only moving a canvas rather than redrawing.