This example is derived from the D3.JS VIX example, and adds these features:
years are rendered as a ‘strip’, i.e. next to one another
‘intelligent’ year text placement: the year blocks are placed as close together as possible, while leaving space for the year (text), which is placed taking the end-of-year break in the week into account
horizontal scrolling by mouse position: hover the mouse over the calendar strip: at left and right there’s a 150px sensitive area which triggers smooth scrolling the calendar strip.
accelated scroll: the closer you move your mouse to the left/right edge, the faster the strip will be scrolled.
I am wondering whether the .data().each() idiom used in here to access/use the data in a node is the smart thing to do. It is NOT a sure fire thing: when you go and edit this stuff and use selectAll() and friends in there, you may be surprised.
This isn’t the cleanest thing out there IMHO, but this is the current state of the experimental code for an art site I’m working on. If it works, that’s great. Can do nice & clean later when time permits.
since migrating from setInterval() to setTimeout(), one might argue that the stop_calendar_timer() function isn’t needed any more, since the fps would usually be faster than the user himself, or at least it would seem like that anyway. Nevertheless, I kept the method in there to at least have that part of the code adhere to strictest sensible coding SOPs.
if anything gives me the heebie-jeebies, it’s the ‘m’, ‘w’, ‘h’ and them other globals in there, but I’m puritan there. :-)