Thursday, December 12, 2019

Published 9:58 PM by with 0 comment

How to Progressively Zoom Plotly Plots?

How do you set plotly's zoom level programmatically?
You'll sometimes see data visualizations that are animated and continually zoom in or out. You can do this pretty trivially with plotly. You simply set the axis range, update the plot, and repeat. Here is a sample script for doing this with a plot in a div called 'plot':

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
let data = {
  x: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l'],
  y: [0.9e0, 2.1e0, 0.79e1, 1.13e1, 0.83e2, 2.9e2, 1.1e3, 4.5e3, 0.79e4, 4.1e4, 0.92e5, 3.1e5],
  type: 'bar'
}

let x = 1.5;
let y = 10;
let factor = 40 //increase x by 1 every 40 iterations
let updateX = 1/factor;
let updateY = Math.pow(10, 1/(2*factor)); //increase y by a power of 10 every 80 iterations

//update plot repeatedly
let interval = setInterval(function() {
  let layout = {
    xaxis: {
      range: [0, x],
    },
    yaxis: {
      range: [0, y>5e5?5e5:y]
    }
  }
  Plotly.react('plot', [data], layout, { responsive: true });
  
  x += updateX;
  y *= updateY;
  
  //stop updating after showing all values
  if (x >= (data.x.length - 0.5)) {
    clearInterval(interval);
  }
}, 30);

It's really that simple. In that example, I wanted it to increase x by 1 every 40 iterations and increase y by a factor of 10 every 80 iterations. All I do is plot with xaxis and yaxis ranges set, update those ranges, and repeat every 30 ms until all values are displayed. Here's the output of that:



If you want to play with the code, it's here.


      edit

0 comments:

Post a Comment