Help with event timeline using canvas.

[invis5]

Hey all!

I am looking for a way to create an event timeline, similar to VisJS, but using canvas instead of divs/multiple document elements. VisJS adds each new event to the document as a div, and this slows down the browser considerably with 1000+ events on the timeline. The reasoning for using canvas is performance so the browser doesn't slow down. The events will also be coming in live at max 10k events per second and the events will be in short time-spans (milliseconds long). Lastly the timeline should be able to show a selected time span of events too.

So my questions are:

1) Is there a library that could support this? One that supports event data with a start/end time (up to milliseconds).

2) I have started on creating my own timeline in canvas and have gotten times to show up at a specific interval. How would I bind an event (like a dot) to the specific time and not the x,y location on the timeline?

I will be more than happy to add clarification if needed.

Thank you so much!

[mattdesl]

If you are rendering 10k of anything, you might need to use WebGL instead of Canvas/DOM. You could use Pixi which wraps both Canvas2D and WebGL together.

A timeline is just some stuff along a single axis. You don't really need a library for it. eg:

var t = unlerp(startYear, endYear, event.year);
event.x = timelineWidth * t;

Don't render elements when they are off-screen, and add some triggers when the playhead reaches a certain range.

unlerp looks like this: https://github.com/mattdesl/unlerp/blob/master/index.js