SVG Year timeline in your daily note

[TanelTM]

The current day marker isn’t very visible on lighter colors, so if you want a red line instead, you can replace the last <g><circle ....></g> with:

  <g transform="translate({{date:DDD}}0,0)">
    <rect x="-10" width="10" height="25" fill="red" />
  </g>

[dugdun]

You can also play around with the stroke-width of the circle to make it stand out a little more on lighter colors:

<circle cx="280" cy="14" r="20" stroke="black" stroke-width="7" fill="white" />

Granted I get that not everyone will still be able to see that well, but that’s the beauty of having the code so it can be played around with.

I’ve made mine gray scale so it better fits in with my dark theme

Thanks to @TanelTM for sharing this with us.

[cabin.mooring]

For anybody that uses templater, it’s the same moment.js formatting so just replace the {{date:....}} with

<%tp.date.now("YYYY")%> and <%tp.date.now("DDDD")%>0

[dugdun]

So I played around with this a little more and came up with the following:

• The height of the bar is a little bit bigger which is good for higher resolution screens, old eyes, or a combination of both.
• I have gotten rid of the individual month boxes so they run together.
• The timeline color is now a pure gradient from black to white and back to black

Here is the code for anyone wanting to tweak for their own use:

<svg viewBox="0 0 3760 150">
	<title>Timeline 2022</title>
	  <defs>
      	<linearGradient id="Gradient3" x1="0" x2="1" y1="0" y2="0">
        	<stop offset="0%" stop-color="black"/>
        	<stop offset="50%" stop-color="white"/>
        	<stop offset="100%" stop-color="black"/>
      </linearGradient>
	</defs>
	<g class="bars">
		<rect fill="url(#Gradient3)" x="0" y="20" width="3760" height="45"></rect>
	</g>
	<g class="labels" style="font-size:50px;" text-anchor="middle">
		<text fill="#AAAAAA" x="0" y="120" text-anchor="start">January</text>
		<text fill="#AAAAAA" x="320" y="120" text-anchor="start">February</text>
		<text fill="#AAAAAA" x="610" y="120" text-anchor="start">March</text>
		<text fill="#AAAAAA" x="930" y="120" text-anchor="start">April</text>
		<text fill="#AAAAAA" x="1240" y="120" text-anchor="start">May</text>
		<text fill="#AAAAAA" x="1560" y="120" text-anchor="start">June</text>
		<text fill="#AAAAAA" x="1870" y="120" text-anchor="start">July</text>
		<text fill="#AAAAAA" x="2190" y="120" text-anchor="start">August</text>
		<text fill="#AAAAAA" x="2510" y="120" text-anchor="start">September</text>
		<text fill="#AAAAAA" x="2820" y="120" text-anchor="start">October</text>
		<text fill="#AAAAAA" x="3140" y="120" text-anchor="start">November</text>
		<text fill="#AAAAAA" x="3450" y="120" text-anchor="start">December</text>
	</g>
	<g>
		<circle cx="{{date:DDD}}0" cy="44" r="30" stroke="black" stroke-width="7" fill="white" />
	</g>
</svg>

[htmljenn]

Very nice! I love it! i’ll probably fiddle with the colors a bit more, but I’m partial to your original multicolored option. Thanks for sharing this!

[ottovanluchene]

Cool visual addition to my daily note

[ScottKillen]

I love the gradient!

For some reason, it displays great perfectly in Live Preview mode, but the gradient does not render in Reading mode on my computer…

[dugdun]

That’s interesting. I don’t use Live Preview, but the gradient bar displays without issue for me in reading mode.

How is the bar showing up in reading mode for you?

[ScottKillen]

@dugdun

How is the bar showing up in reading mode for you?

Live Preview

Preview

[ScottKillen]

I posted a bug report

SVG gradient rendered differently in Live Preview vs Preview - Bug reports - Obsidian Forum

[dugdun]

Ah, I use the legacy editor where the gradient bar shows for me in reading mode. Sorry for misunderstanding. This definitely seems like a bug.

I was able to replicate this in the Obsidian Help vault, so something to do with Live Preview editor.

[andveg38]

Can you share your full code for this? I can’t tell if I need to replace that with both year and date or just one or the other?

[TanelTM]

When using the Daily note plugin’s template, the line responsible for drawing the current day marker circle on the timeline is this one:

<circle cx="{{date:DDD}}0" cy="44" r="30" stroke="black" stroke-width="7" fill="white" />

When using the Templater plugin, you would change that line to:

<circle cx="<% tp.date.now("DDD") %>0" cy="44" r="30" stroke="black" stroke-width="7" fill="white" />

Both “DDD” and the “DDDD” format suggested by @cabin.mooring would work (tested). But “DDDD” would create a leading 0 for the cx value, which isn’t necessary.

[cabin.mooring]

All instances

<title>Timeline <%tp.date.now("YYYY")%></title>
and

<circle cx="<%tp.date.now("DDDD")%>0" cy="14" r="15" stroke="black" fill="white" />

[Kitju]

This looks fantastic!
Do you have any idea how you could display tasks due dates in this form?
I love Obsidian but am not a big coder myself

[Denna]

I’m wondering how I could put a date manually like 2022-02-15 into the timeline. I tried several things, but nothing works.

[dugdun]

If you are looking for a result similar to this

You can start off with the following code:

<svg viewBox="0 0 3760 150">
  <title>Timeline 2022</title>
  <defs>
    <linearGradient id="Gradient13" x1="0" x2="1" y1="0" y2="0">
      <stop offset="0%" stop-color="black"/>
      <stop offset="50%" stop-color="white"/>
      <stop offset="100%" stop-color="black"/>
    </linearGradient>
  </defs>
  <g class="bars">
    <rect fill="url(#Gradient13)" x="0" y="20" width="3760" height="45"></rect>
  </g>
  <g class="labels" style="font-size:75px;" text-anchor="middle">
    <text fill="#AAAAAA" x="{{date:DDD}}0" y="150" text-anchor="middle">{{date:YYYY-MM-DD}}</text>
  </g>
  <g>
    <circle cx="{{date:DDD}}0" cy="44" r="30" stroke="black" stroke-width="7" fill="white" />
  </g>
</svg>

This will need some work to show the dates at the beginning/end of the year as the original code was not set up to handle displaying the date in this way, but hopefully it will give you an idea of what you can do. I might be able to tweak things later this week if you need help.

You could also do something where the day of the month replaces the circle easily enough by making some tweaks to the above code. Something like this:

Although at the size of the current SVG, the value is hard to read

[Denna]

Thank you, this looks impressive, but I’m afraid, I wasn’t understood here. What I actually meant was to replace

"{{date:DDD}}0"

by a date manually - or even better with the current system date. I don’t use Daily Notes, but wanted to use the timeline in my Index note.

[dugdun]

{{date:DDD}} returns a number that represents the day of the year. Today, 15 Feb, is the 46th day of the year. You then place a 0 after that, so today’s date would be placed at an X position of 460.

Hopefully that makes sense.

[Denna]

Yes, it makes sense to me now. Thank you.