How to deal with data visualization bigger than the size of the sketch?

fedpep

I'm working on a project for a data visualization. I'm retrieving all the data dynamically from an API so, sometimes, the amout of data I'm displaying is bigger than the actual size of the sketch window (even if I put displayWidth & displayHeight).

Is there a way to use the mouse to zoom in/out or scroll through the data?

Beside the visualization on a screen... How do I deal with the same problem if I want to export the project on PDF?

Thanks

koogs

i've used peasycam in the past for navigating through datasets. it does zoom in and out and panning left and right and, perhaps unfortunately, 3d rotation, but i think this is probably disableable.

otherwise keep a record of the topmost, bottommost, rightmost and leftmost item in the data and scale and redraw your graph so that the new values fit.

less easy to redraw a pdf. in that case i think you're going to have to store all (a snapshot of) the data and generate it offline afterwards.

fedpep

I thought about setting the size the sketch and redraw the data viz but I'm worried that the text won't be readable because it'd be too small in some cases.

Ater

If you don't want to resize your drawing, maybe you could organize scrolling? You can draw offscreen and use translate() to move all your drawing. Not sure however with PDF export in this case, maybe you can split your drawing into pages and organize navigation?

blindfish

If you're outputting vector data to a PDF then this should be zoomable - via the user's PDF viewing software - with no loss of detail.

fedpep

I came up with this simple code but I can't figure out how to stop scrolling when I reach the top and the bottom of the window:

float scroll;

void setup() {
  size(500, 3000);

}

void draw() {
  background(0);
  translate(0, scroll);
  for(int i = 100; i < height; i += 100) {
    stroke(255);
    line(150, i, 300, i);
    text(i, 350, i);
  }
}

void mouseWheel(MouseEvent e) {
  scroll += e.getAmount();
}

Ater

I suppose, like this, only to change scroll if it is higher then your min value and less then your max value.

void mouseWheel(MouseEvent e) {
if (scroll > 0 && scroll<3000){
  scroll += e.getAmount();
  }
}

fedpep

@Ater: I already tried something like that but unfortunately that doesn't work because e.getAmount() gives positive values when you're scrolling up and negative when scrolling down.

Ater

Oh, that's right, however, if the direction does not make difference for you you can just change + to -. To think, it may be better to use constrain to keep scroll within needed range.