add a drag behaviour on a cubism graph

Question

cubism.js is probably meant for realtime vizualizations, not really for interaction, yet I was trying to be able to visualize a large dataset (for example >> 1000points) on the page, without increasing the step or chunking the data

Example: http://jsfiddle.net/B2WJM/4/ (the first 500 points of a 4000 points dataset are drawn)

var context = cubism.context()
    .step(6e4)
    .size(500)
    .stop();

So the idea would be to drag, or zoom this graph using d3 https://github.com/mbostock/d3/wiki/Zoom-Behavior, hoping there's a nice solution possible by changing dynamically the start and stop attributes

score 0 · Answer 1 · answered Aug 10 '13 at 11:35

0

I wanted to show the stock data described here into 3 pieces. I split my graph into 3 and added a carousel-like left/right button to toggle between them.

I think that you can split your data into 5 pieces of 800 px each which you can then move using the left/right buttons.

answered Aug 10 '13 at 11:35

it's quite frustrating to not being able to zoom out and see all points, I would like a cubism.js in svg so much – Aug 10 '13 at 11:56
Yeah...I agree with you. – Aug 10 '13 at 12:00
I'm trying to make something based on a very large canvas, but it seems to not draw anything after 8000px, see http://jsfiddle.net/B2WJM/11/ it works with 8000px, not 8500 – Aug 10 '13 at 14:11
on the other hand I might just start from horizon in svg http://bl.ocks.org/mbostock/1483226 – Aug 10 '13 at 14:18
I didn't probably say it explicitely, but I'm waiting for a bit more than a suggestion. For example in a config with a step of 1 minute, and a range of 2 months, the canvas handles half a day, so it's 120 graphs to represent, in a carousel-like way as you suggest – Aug 11 '13 at 10:27

add a drag behaviour on a cubism graph

1 Answers1