CODEWITHSUNDEEP
d3.js
evfwcqcg
evfwcqcg

Reputation: 16365

Group time intervals by date (in d3.js)

For instance, there is an array of objects with start, end and duration (in hours) attributes.

[{start: new Date(2013, 2, 4, 0),
  end:   new Date(2013, 2, 4, 8),
  duration: 8},
 {start: new Date(2013, 2, 4, 22),
  end:   new Date(2013, 2, 5, 2),
  duration: 4},
 {start: new Date(2013, 2, 5, 5),
  end:   new Date(2013, 2, 7, 5),
  duration: 48}]

I'd like to visualize them into something like the following (y - hours, x - dates):

enter image description here

I'm thinking about creating additional objects to fill the empty spaces between events like this

[{start: new Date(2013, 2, 4, 0),
  end:   new Date(2013, 2, 4, 8),
  status: "busy"},

 {start: new Date(2013, 2, 4, 8, 0, 1),
  end:   new Date(2013, 2, 4, 21, 59, 59),
  status: "free"},

 {start: new Date(2013, 2, 4, 22),
  end:   new Date(2013, 2, 4, 23, 59, 59),
  status: "busy"},

 {start: new Date(2013, 2, 5, 0),
  end:   new Date(2013, 2, 5, 2),
  status: "busy"}]

And then map this to Stack Layout.

So my question is, how would be better to split and group the array, to make this visualization easier? Maybe there is some built-in D3.js features for this?

Upvotes: 1

Views: 1080

Answers (1)

elsherbini
elsherbini

Reputation: 1626

I would consider changing the data format to 

    [{start: new Date(2013, 2, 4, 0),
      end:   new Date(2013, 2, 4, 8)},
     {start: new Date(2013, 2, 4, 22),
      end:   new Date(2013, 2, 5, 2)},
     {start: new Date(2013, 2, 5, 5),
      end:   new Date(2013, 2, 7, 5)}]

Since you have the start and end date, you don't really need a duration. Alternatively you could have just the start date and a duration.

I'm not extremely familiar with the stacklayout, but it might be sufficent (and easier) for this project to simply append rect elements to the right position. I made an example here: http://tributary.io/inlet/5841372 which doesn't take into account the fact that you need to wrap events that start one day and end the next. This just displays all events in the same column, with the white space representing free time.

Upvotes: 3

Related Questions