kristw/d3kit-timeline

How to align a bunch of timelines on zero

Sigfried opened this issue · 5 comments

Sigfried commented

Maybe I'm being dense, but I'm having a hard time figuring out how to have linear scale/axes on multiple timelines line up with zero in the middle. The reason is because each timeline has an index date and I want all events to display relative to this date.

My approach is: for each timeline I set the domain option to [ - max(abs(ext[0])), max(abs(ext[1])) ]. So each timeline from zero to the margin on either the left or right, but might not fill up the other side.

I'm getting two problems, probably resulting from my own bugs, but since I'm not sure how to do it right, it makes it harder to find my own bugs.

  1. When I have multiple timelines they seem to all use the same domain even though I'm setting each timeline's domain, as far as I can tell, in its own scope. All the dots are getting squeezed very close to zero (which is in the right place in the middle of all the timelines.)

  2. In a context with only one timeline, d3kit-timeline seems to ignore the domain I'm setting and place the zero where it needs to to fill out the whole timeline.

I can put together a simplified example if needed.

kristw commented

An example on codepen, jsfiddle, etc. would be appreciated. It will be difficult for me to reproduce the exact same scenario. I am not sure how (1) happen because each component should have its own scope and use whatever domain you set to them.

kristw commented

Note: From an offline conversation, @Sigfried found his bug that caused (2).

Sigfried commented

Hi, I wasn't able to get a codepen or jsfiddle together (would have been easier if I could have pointed at cdns for d3kit-timeline and dependencies). I did solve my bugs.

I used chart5 in the dk3-timeline example, just changing a couple of the points to negative and changing the domain from [0,90] to [-90,90]. I noticed two problems:

  1. Just making that change caused the rightmost tick not to display.

  2. I modified the code a bit to set options after creating the chart. When I do it this way:

 var chart5 = new d3Kit.Timeline('#timeline5', opts);
 opts.domain = [-90,90];
 chart5.options(opts);
 chart5.data(chart5data);

it works fine. When I do it this way:

 var chart5 = new d3Kit.Timeline('#timeline5');
 opts.domain = [-90,90];
 chart5.options(opts);
 chart5.data(chart5data);

the chart gets all messed up. So, even if there's no data yet, when you create a chart with no options (it should just use default, right?) and set the options later, weird things happen.

kristw commented

FYI, you can point to a file on github using rawgit. D3 and Labella are also available on cdnjs.
https://cdnjs.com/libraries/d3
https://cdnjs.com/libraries/labella

kristw commented

Close as cannot reproduce. When I set the domain to [-90,90], it seems to work fine for me though. (See screenshot below.)

image