timelines-chart icon indicating copy to clipboard operation
timelines-chart copied to clipboard

Custom time scale confusion

Open unphased opened this issue 4 years ago • 2 comments

Hi, I'm trying to use this via

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
<script src="//unpkg.com/timelines-chart"></script>

and I have a hunch that this could already explain why setting a custom .zColorScale(d3.scaleLinear().domain([0, 1000]).range(["blue", "red"])) is not working. But I think that it should just work. But, it does not produce any change to the colors or legend to use this compared to leaving out the zColorScale call.

My use case is that my timing is in units of nanoseconds (I am using this tool to display GPU profiling output), I am already using .xTickFormat(n => +n).timeFormat('%Q') which helps a bit for sanity because my time units are not in epoch ms, but rather in ns since system boot (or something like this).

The main things I'm trying to improve right now are:

  • coming up with a way to specify the z scale
  • coming up with a way to specify tick format so it can display nanoseconds when i zoom all the way in but display us and ms and s when zoomed back out
  • deal with the max zoom level which seems to be based on 1 unit = 1ms (time unit) leading to a time duration of 200ns already pixel thin and really hard to pick, need more zoom!
  • z legend always has a range 0 and 1, with red to blue, which is useless as everything becomes blue because everything takes longer than 1 ns. This seems like it should be controlled by zColorScale as well, but it's here in case this is done separately.

I'm a d3 newbie here too :(

unphased avatar May 28 '20 19:05 unphased

I stumbled upon the fix by actually removing the call to .zQualitative(false). This made the color scale take.

unphased avatar May 29 '20 15:05 unphased

@unphased, yes for your use case you should be using the continuous mode, that you can set with .zQualitative(false).

As for the time axis in nanoseconds, have you seen this example: http://vasturiano.github.io/timelines-chart/example/custom-time-format/

vasturiano avatar May 30 '20 07:05 vasturiano