Timeline: The powerful idea of temporal representation in obsidian

I would like to help, but I am not a developer.

I am closely following the news and progress. Thank you for working on it.

1 Like

It’s not difficult, but it feels unnecessary.
If you want,from zero, you can do this in just three days, js+html+css+react,

Markwhen looks all well and fine, but is it really necessary to build a timeline from scratch every time you need one (and learn another coding language to be able to do this)?
Wouldn’t it be much more helpful (and cooler), if this could be done using a simple search command (like a dataview query)? I posted a feature request for this here, but don’t have much faith that this will be done any time soon.
As a writer I often struggle with creating timelines, but I imagine that there are lots of other use cases (historians, journalists, all types of sciences that include time-related subjects), and even the pure wish to create a timeline of your notes, or some notes with a certain tag could be an interesting application.
For the pure creation of a timeline I found an app a few weeks ago (I described it HERE ). That app does not include an export to markdown, but you can the timeline to an svg-file, which can the be altered and linked to all necessary notes via the Excalidraw plugin.
This might be helpful for a limited time, but needs much extra work any time there is need for a display of time related events, periods or epochs. What is actually needed, is a way to create a timeline of data that already exists: as Metadata in any note (as creation-date, modification-date, or a date that is in a metadata-field (which I would presume is required anyway in the before mentioned disciplines).
So why create another markdown note with a special syntax when all relevant date already exists?

I would like to propose the following idea:
Use the markwhen tool as a “display-engine”, whose input can be provided by a “dataview-like” query, based on tags or folders and metadata already existing (or declarable) in obsidian notes.

Sorry, long post. Thanks for your patience.

P.S. @redcod : Sorry to say so, but its nice If you can do this and have the time to spend 3 days on this. But I would fathom that most of the users of obsidian use the app for working in their field of expertise, not for learning 4 programming languages and programming with them. Let alone having the time. I certainly don’t. But if it is that easy, why don’t you take on the task and share it with us?
No offense!

5 Likes

I think the timeline functionality Markwhen provides and the timeline functionality you’re describing are for different use cases.

It seems like you would like something similar to Zotero’s Timeline feature but for notes in Obsidian. Is that accurate?

1 Like

I don’t think so. They are just different applications of the same process. The difference is just about which metadata field is being used.
In the terminology of dataview: you may use implicit fields (like “creation-date” (can be queried in different ways)) or an explicit field (like “date-of-birth” (which might be queried e.g. via “this.date-of-birth”).
From the perspective of dataview these are both datapoints, which are either to be displayed or used as criteria.
The problem lies mostly in the way, these datapoints are being displayed. As of today there seems to be a plugin (oz-calendar) that offers the functionality of Zotero, though not in a gantt-chart, but a calendar view. That is not helpful for the overview-functionality one would want for a proper timeline-view.
What I am proposing is a more generalized approach, as described in the post under link No. 1 above (which I won’t replicate here, but encourage you to read).
The only condition needed for something like that to work would be some metadata fields in the notes that are subject of the query. Those are:

  1. start-date
  2. end-date
  3. duration (in case there is no definite end-date)
  4. grouping-field(s) (which are optional e.g. for different time-threads)

My argument is this: If there is a strictly defined markdown-language in markwhen to describe every event that should be displayed, this code can also be produced by the plugin itself, based on the metadata in the implicit or explicit fields.

This way the user is enabled to produce any timeline, based on his notes and their content. In a way, its just a mode of display of the results of a dataview-query.

1 Like

I think @redcod was responding to the original poster saying they’re weren’t sure how easy or hard it would be for someone who knows how to make plugins to make a plugin like this. I don’t think they were saying, “You want it, you build it.”

You can make a post like this easier on people by using paragraph breaks (like you did in the last part).

Been searching for something similar for a long time, with nothing fitting the bill. My 2c:

  1. Learning yet another markup language just for timelines will certainly veer into silly territory AFAIC.

  2. Obsidian is a note-taking system made for notes (hence the “Readable line length” preference). If a timeline plugin is to be made, devs should at least consider making the default orientation vertical. I’m probably biased in my use case because I mainly need this for historical research, not project planning, and scrolling “up” rather than “left” into the past seems very natural, but it might apply to other folks’ needs as well.

  3. I’ve achieved a very useful historical view, although with no fancy period lines or anything, by using dataview, using conditional emoji icons, conditional CSS etc. Filtering events by type, category, time span etc is very easy to do. IMHO this shouldn’t be over-engineered, since dataview is already extremely powerful.

1 Like

I would think that horizontal and vertical timelines should both be possible. Just depending on the prefences of the user. I personally prefer something like horizontal charts (similar to gantt charts) since it gives you more the sense of parallel developments, but I can very well imagine cases in which vertical orientation would be preferable.

It would be great to have a description of your system in the Share & Showcase category! (No pressure, tho. :slightly_smiling_face:)

There you go :slight_smile:

3 Likes

In my case, that’s almost all I need.

Just missing the graphic part (with gantt chart style) and a more affordable function to show and sort easily according to the selected tags.

All others shiny features are not really neccessary

Thanks.

This would indeed be an interesting plugin. Have somebody taken a look at the free timelines that kightlab (Northwestern University) has developed? Here is the tool. Something like that would allow us to create timelines as slideshows.

1 Like

Hey all, I’m a developer and interested in helping the community by making a timeline view. I’m very interested in the space of visual organization of notes and I thought this would be an interesting project to take on.

I’m curious, what specifically would a visual timeline improve on over the dataview query shared by @Altostratus? It seems like having physical space to denote time, overlapping blocks, and overall easier UX would be benefits, but wanted to get some more thoughts here.

1 Like

Hello @wkevwang, good to hear, that you would like to solve this problem. And sorry, if I am repeating myself here.

There has been a discussion of creating a support for the markwhen-App/Library here. This could be a good entry point for you.
It’s unfortunate that there is this duplication of subjects …

Unfortunately the creator of markwhen insisted in this discussion on retaining his markwhen files and their .mw extension in Obsidian.

I don’t see that this would work. It certainly did not in case of Excalidraw, which (imho) looks like a similar case of integration of an “external” library (correct me, if I’m wrong). That’s why I pulled out of that discussion. But maybe you can find a way around that.

I would be very happy if you succeed, and if you were interested in any ideas, contact me (but beware: I NOT a developer :wink: )

Hello, thanks @wkevwang for your interest

Markwhen should simply remain an alternative. @Altostratus showed that it was possible to make a functional timeline, just missing the visual part to navigate horizontally over time.

I see the visual aspect of this timeline with a dedicated page in the same way as the GraphView, all notes with a “start date” and/or an “end date” appear in this timeline. Then, a selection of the event type is made by a filter panel, selecting the tags we want to display.

But I imagine that some people will prefer to create several dedicated timeline. That would be independent and defined by a subject

1 Like

Hello @wkevwang , I just found another possibly even more helpful and suitable (because: open source & locally usable) library for creatins Timelines, called: TimelineJS. It works with javascript and could therefore be easily adaptable for Obsidian.

Maybe you take a look!

2 Likes

I found this post while looking into if anyone had implemented timelinejs in Obsidian before. It shouldn’t be too complicated - meanwhile, o e can also use their online tool to make timelines and embed the html in Obsidian notes/canvas.

I found three or more community plugins for timelines. However, it would be really nice if something like timelines could render based on dataview.

Timelines based on dataview, would make syntax much more universal.
Require a dataview query to assemble a table with a column for each attribute

    ```dataview
    TABLE class, data-date  data-title, data-class, data-img, data-type, data-end
    FROM #timeline/seriesA
    ```

Also debugging would become easy

  • Create the table in dataview
  • Replace the ```dataview with ```timeline
2 Likes

Mermaid has Timeline which Obsidian supports, just leaving this for posterity! I think the support for more diagrams came at the same time as the properties update.

2 Likes

And you can actually render a mermaid timeline from dataviewjs

```dataviewjs
const content=`\`\`\`mermaid
timeline
    title History of Social Media Platform
    2002 : LinkedIn
    2004 : Facebook
         : Google
    2005 : Youtube
    2006 : Twitter
\`\`\``

dv.span(content)
```
6 Likes