d3.time.scale ignore time gaps between days

[Volodymyr Babak]

Hello,

I'm trying to implement live data chart with d3.js.

The problem is that each day data comes from 9AM to 9PM and I have really big gap between days as on interval from 9PM to 9AM I have no data.

I was searching through the forum for the answer and one of solutions is to use ordinal scale instead time scale.But it looks like that such approach doesn't work for me as data is not consistent and there could be situations that i have point at 9:00,10:00,11:20,12:45 etc and I need

to display  those points accordingly to exact time(not in equal interval as ordinal scale does).

Another issue is that on hover I need to display value for exact date but ordinal scale doesn't have invert as time scale does.

Also there is problem that data is aggregated and not all points are displayed,but on time axis ticks should be equally displayed according to aggregation(every hour,every 2 hours,every 30 minutes)

What I need to achieve is the chart for two days which displays data on time scale but ignores night time(9PM to 9AM)

Does any one has idea how to implement such functionality.Would be thankfull for any help.

[Curran]

Hello,

One idea is to use small multiples. Imagine something like this example - Small Multiples , where each chart is a different day and the scale domain excludes night. Each day would end up having its own separate axis.

Best regards,

Curran

[Volodymyr Babak]

Thanks for suggestion but I believe it will not work in my case.The reason is that it should behave as one chart,because I need to handle zoom and pan functionality.The best way to solve it is to force timeScale somehow ignore night time or to be able to merge axis right after second day started so I would not have that big time gap.

четвер, 6 жовтня 2016 р. 17:31:13 UTC+3 користувач Curran написав:

[Dustin Jackson]

Volodymyr did you ever find a solution for this problem?  I am facing the same issue.

[Volodymyr Babak]

Hello Dustin,

I used a workaround for this task as it appears that it is impossible to achieve such begaviour as DateTime axis is linear.

To achive such scenario I used following approach:

1.display First day data.

2.At the end of first day put vertical line separator(we can do this by setting X to last Time value of the day)

3.At the beggining of next day we calculate time shift between FirstDayLastTime and SecondDayFirstTime and set time for all Next day values => time - TimeShift.

With such behaviour we can achieve displaying data smoothly without any gaps.

Last thing is to find all values after DaySeparator and change their labels to represent actual Time values of second day.

 

вівторок, 4 квітня 2017 р. 15:09:52 UTC+3 користувач Dustin Jackson написав: