Simile Timeline scalability.

[Lutz Biedinger]

We are using the timeline to display publish dates of books etc.
loaded in via JSON. The list of dates can potentially contain 300,000+
items although more likeley to be around 25k. The line is laid out
with two bars one for centuries and one for years. To load all these
dates into the timeline at once pretty much kills the browser. At the
moment ~4000 items seem to just about be okay even if very slow.

is there a way to load the descriptions asynchronously via AJAX as the
events are displayed? Ideally we'd still be loading in all the dates
(visible) on the century line as this would be needed for navigation,
but the details are only loaded when the particular event is shown on
the year bar.

Does anyone have any idea if this is possible, or how much improvement
in relation to the number of items/events that can be loaded we could
expect if something like this was implemented?

Cheers,
Lutz

[Michael Nosal]

Yes, dynamically loading of events via AJAX is possible. I've used this technique often, and it works extremely well. Here's what I did:

On load of the timeline, I only load today's events, since the timeline is initially centered on the current time. The user sees all the events for the day. As the user starts scrolling, a scrollhandler fires and checks to see if a new date is coming into view. If so, it sends an ajax request to the server for the events for that day. It adds them to the eventSource and repaints the timeline. If the user scrolls back another day, the same thing happens, adding new events. If the user jumps back in time, using a calendar widget, the timeline jumps to display that date. This causes the scroll handler to fire, loading the events just for that day.

If the user scrolls the timeline manually often enough, then eventually the number of events in the eventSource will get very large as the Ajax keeps fetching and adding more events. It would be a simple matter to purge out events to reduce memory use, and refetch them when they are needed again. However, my user audience tends to spend most of their time looking at today's events plus/minus a day or two, so the total number of events loaded remains manageable.

You can further restrict the number of events shown by using filters on the events, for example initially showing just fiction books, or books in a specific genre. When the user selects a different category or genre, you can fire off the Ajax request to fetch those events.

For your century/overview band, remember that there is a minimum time interval per pixel to be shown. If you are showing a timespan of 100 years, using 100px, then each pixel represents 1 year of time. Thus, if 1 book or 100 books were published during that year, it won't matter as there will be a tick shown for that year (pixel). You can load a smaller set of events to be used as the eventSource for your overview band. If your server code supports it, you could exclude the description, etc for this dataset, reducing the server load and the time to send and process those events as well.

If you need further pointers, let me know.

--Mike

> --
> You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group.
> To post to this group, send email to simile-...@googlegroups.com.
> To unsubscribe from this group, send email to simile-widget...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
>

[Lutz Biedinger]

Hey Mike,
Thanks for the reply, it's much appreciated. We ended up not using the timeline in the end. Because we realized we had too many items(events) happening at the same time for it to be usefull information to display on a timeline. We're just displaying a more general less detailed graph now instead. Hopefully your information may be of use to somebody else though.

Thanks again,
Lutz