History slider for adview (d3)

[dhowe]

Add a time range slider that would allow to extend or contract the time table (it would also be cool to scrub back in time through the ads as they pack) I’m thinking something like this:

http://jquery-plugins.net/tag/range-slider

or something like this: http://jsfiddle.net/vM844/1019/ with styling

[dhowe]

MUSHON: if we go with something like this we can also visualize and highlight banner accumulation per day:

[dhowe]

would be great if you can create a static html page for this feature

[dhowe]

Implementation plan (from chat):

1) static page, with our current adview (and dummy data) that includes a (non-working) slider and any other interfaces elements [M]

2) static page, with our current adview (and dummy data) that includes a working slider (via local JS hooked up to the dummy data) [M+D]

3) full-functionality, working slider hooked up to users real ads [D]

[Note: this depends on #76 ]

[dhowe]

Mushon:

[dhowe]

Looks quite nice. Questions: a) how to handle time-unit? (I assume 22.5 is hours, but could be minutes or days... How does this change over time (minutes/hours/days/weeks/months/etc)? b) feels as if the 'now' should be on the left, rather than the right (as seems standard for 'timelines') ? c) what happens to ads that are not part of the selected time-window; do they disappear completely, or turn gray, or... (and does this trigger repacking)?

[mushon]

A) This could be dynamic based on the scope of the data but I was thinking days. B) true, I'll switch it. C) I thought they would disappear and that it would indeed trigger repacking which would make playing with this much more visually satisfying.

(D) @dhowe, I need your help with implementing the range slider. For some reason the rangeslider simply doesn't slide. It could be something having to do with the rest of the stage being draggable but I really don't know. I feel this has passed beyond my scope of js expertise and would love for you to play with it a bit.

[dhowe]

@mushon do we have a static (html/js) version with the d3 implementation?

[mushon]

Slider with a visualization element, to be implemented in d3.js:

[dhowe]

Check-in test json file

[mushon]

@mushon will pull this code into the static page. @dhowe will tie it with the data and then @mushon will finish the job.

[dhowe]

@mushon please check the css for the slider that I've just committed (you don't need to launch the addon, just navigate to adview.html)

[dhowe]

I just did this, please check & restyle if you like -- I need it for testing...

@mushon would be great if you could add a mouseover/tooltip for the dates in the brush slider (so that one can see the date of the element hovered over)