complex array slicing and sorting in javascript

Require robust array slicing and sorting in javascript


I need to generate the sequence of timeline frames based on the array of data. The data is in random order. The data needs to be sorted to arrange in timeline fashion. Bascially I want to stich group of images as frames to generate a video for x number of seconds. Output should look like below example . Each frame should be arranged with the overlapping frame in a sequence. so Array should be generated with the group of overlapping frames.

Example : start and end times are in seconds.

var data = [
{ start: 0, end: 30, frame: 1 },
{ start: 15, end: 45, frame: 2 },
{ start: 12, end: 35, frame: 3 },
{ start: 46, end: 50, frame: 4 },
{ start: 50, end: 60, frame: 5 },
{ start: 12, end: 20, frame: 6 }
];



OUTPUT

var dataOutput= [
{start: 0, end: 12, frame: 1},
{start: 12, end: 15, frame: 1},
{start: 12, end: 15, frame: 6},
{start: 12, end: 15, frame: 3},
{start: 15, end: 20, frame: 3},
{start: 15, end: 20, frame: 6},
{ start:15, end: 20, frame: 1},
{start: 15, end: 20, frame: 2},
{start: 20, end: 30, frame: 2},
{ start: 20, end: 30, frame: 1},
{start: 20, end: 30, frame: 3},
{start: 30, end: 35, frame: 3},
{start: 30, end: 35, frame: 2},
{start: 35, end: 45, frame: 2},
{start: 46, end: 50, frame: 4},
{start: 50, end: 60, frame: 5},
]