What would you use for making an Interactive Timeline?

Say a timeline of events in a legal case for a defense firm; something that’s a “one-pager” where you can get a macro level view of the timeline, but is also easy enough for anyone without any knowledge to operate.
Embedding of documents and images would be a critical component as well.
I can imagine whatever solution I come up with being used going forward, so an actual application might be the ultimate goal where you can start off with a baseline.

This is an interesting one :slight_smile:

How many items do you anticipate appearing at any point on a particular day in the timeline? My guess is that there will be moments when certain days will have LOTs of content that will need to be individually viewed.

Based on the timeline I have so far (photo of a the whiteboard), it’s one item per day, but I can imagine things could get more complex down the road, with about 10 attachments scattered throughout an approximately 1-year time frame.

I’ve used TimelineJS in the past, but I’m not the biggest fan of it (images and documents have to be embedded via URL) and that just further makes things cumbersome. I need to come up with a solution that can be packaged into a single file, ideally. PowerPoint is off the table, as I suggested that and was shot down, hahaha. And for obvious privacy reasons, I don’t want to just host this online and provide a URL.

This is so that way a physical whiteboard doesn’t have to be lugged around to the courthouse.

If there are 10 items on average over a year, is a timeline actually necessary then? Would a calendar where you filter by year, month, day be adequate?

I was imagining initially something like this before scaling back to something simpler:

Based on the feedback I got from the above example, that’s not quite what they’re looking for :frowning:

In this case, can you just ask them to sketch out what they are looking for? This may be one of those situations where they know what they want are looking to you to read their mind haha.

I wish, but getting someone to sit down with me and do just that is impossible! Here’s a close example of an existing tool: https://timeline.app/

But now imagine a “preview” section or something similar above to view photographs/documents, and then those documents open in a modal/prompt of some sort. I’d have no problem programming an app specific for this, if I had more time! This is due Monday, on top of everything else pertaining to this case that I’m working.

A proper timeline tool would probably do virtualization and other perf optimizations to ensure it works properly. For your case, I would just create a really basic one that looks approximately like that with just text elements and a really wide div. This div can be inside a parent element with a fixed with and the CSS overflow property set to show scrollbars.

For the contents, you can have the thumbnails be absolutely positioned in the right place on the timeline. Because they are HTML elements, you can have a click on them launch a modal or do anything else that you think would be needed.

Thoughts on that?

I think that would work as a proof of concept, for sure! Then turning it into an application that can be worked on by someone other than me for future cases.

1 Like