Creating a timeline of my tweets in Obsidian

Obsidian+PR Cookbook - 𝕏 - YouTube - Official Obsidian Docs

I like to plan the things that I am going to tweet on twitter in an Obsidian note. That way I can avoid either spamming people too much or note saying anything at all. Whenever I have something I want to share with the world I open an Obsidian note and then note it down. Then at a later time I add a timestamp of when I want to send it and send it.

I felt a little nerdy and decided I wanted a timeline of the tweets I had sent so decided to hack up a timeline for this. Obsidian has a couple of tools for timelines but they weren’t quite what what I wanted. Obsidian has native support for timelines with a the diagramming domain specific language mermaid - but the boxes on this were a bit too big and the timeline didn’t have a continue time axis. There is a plugin for it - but the plugins wanted to read dates from notes whereas I had lines labelled with times.

So as I was already using a little JavaScript code in Plugin REPL to get out the times of all my tweets I decided to use the JavaScript library vis. Plugin REPL has features to import JavaScript libraries, so I used that to pull in vis after installing it.

vis = replRequire('vis')

Then I have the horrible following expression to parse out dates.

var lines = bufferString().split("\n").filter((x) => return  x.startsWith("~~202") ).map((x) => [x.split(" ")[0].replace(/~/g, ""), x.split(" ").slice(1).join(" ").replace(/~/g, "")]).sort()

I should probably split this up. But it basically gets all the struck through lines that start with a date and then gets rid of the striking and splits the date from the rest of line .

Then I used the following Plugin REPL code block

```plugin-repl
var data = lines.map(([x, y]) => ({start: x, content: ".", id: x}))
var lineById = Object.fromEntries(lines)

dataset = new vis.DataSet(data)
timeline = new vis.Timeline(el, dataset, {})

var currentItem
timeline.on('mouseOver', function (properties) { 
if (properties.item === null) {
	return
}

if (properties.item != currentItem)
	message(lineById[properties.item]);  

currentItem = properties.item
});

zoom = document.createElement("button")
zoom.appendText("zoom")
zoom.onclick = (() => timeline.zoomIn(1))

unzoom = document.createElement("button")
unzoom.appendText("zoom out")
unzoom.onclick = (() => timeline.zoomOut(1))

el.appendChild(zoom)
el.appendChild(unzoom)
```

To draw the graph, the el variable is an html element that gets drawn after the code runs. I tell vis to render into this element and then add a couple of buttons with appendChild to zoom in and out. I use message to display a tweet’s text when I mouse over it in the timeline.

I can then see when I should post tweets to avoid spamming people too much and look at what I am posting about to avoid changing the topic too much.

One interesting plugin that was drawn to my attention after writing this was the chronos plugin. The documentation for this suggests generating a chronos code block from a a (dataview) code block in order to produce dynamic timelines.

---

This is part of my Obsidian and Plugin REPL Cookbook where I give examples of how to make Obsidian do various useful things. I am generally interested in making tools for Obsidian and particularly targetting tools for reading. If you are interested you can subscribe on substack or X.

I am not affiliated with Obsidian. I am the author of Plugin REPL