Creating a Periodic Table of Elements with Linked Notes

[sola]

I’ve Googled and searched this forum as well as all over Reddit to find something that may work for this, but so far I’ve had no luck.

I’m a homeschool mom, and we use Obsidian for almost all parts of our schooling. My son is about to start a Chemistry course that starts off with learning some of the elements, I would like for him to have a visual representation of the periodic table with clickable links to notes about each element (as he learns them). Does anyone know of either a plugin or some way for me to do this?

[alltagsverstand]

Have a look here

Markdown version:

You can convert the table in markdown via this link.

You can link the single elements, but don’t forget to comment out the | - instead of [[Hydrogen|Hydrogen]] use [[Hydrogen\|Hydrogen]]. Otherwise the table will not be rendered properly (as the | will be recognized as a new table cell).

[webinspect]

What a cool idea! I plan on homeschooling my kids once they’re old enough, using Obsidian to facilitate that seems like a fantastic idea.

You can embed SVG images into Obsidian, and that allows for some level of interactivity. Unfortunately it’s a little clunky to get the links to work, but it is possible.

Here is an SVG version of the periodic table that I tweaked to work well in Obsidian. If you copy the code out of the “HTML” box at that link and paste it into Obsidian it should look something like this:

(I tweaked it to take up the full width of your editor, so this might not look so good on smaller screens)

Now you can add links to this, but it’s a little cumbersome. I added a link to the Hydrogen cell, and the code looks like this:

<text y="32">1<tspan x="0" dy="11.5"><a href="obsidian://open?file=Hydrogen.md">H</a></tspan></text>

The part I added says <a href="obsidian://open?file=Hydrogen.md">. You could add those to any of the cells and it should work, you should be able to click on the cell to open the relevant note.

I had to use the obsidian:// uri because that seems to be the only style of internal link that works in HTML. It works, but not as nicely as the wiki-style links.

Honestly it might be easier to just embed an image of the table at the top of your note, and add an unordered list (or table, as suggested above) of the elements underneath it. But I thought the SVG angle was worth a mention, since it’s fully functional, it would just be a bit of work to get set up right.

[sola]

This is exactly what I was looking for!
Thank you so much!

@webinspect

What a cool idea! I plan on homeschooling my kids once they’re old enough, using Obsidian to facilitate that seems like a fantastic idea.

I’ve gone through so many different ways to make schooling simple for both my kids and me. Obsidian has made the workflow almost effortless.
I’ll try to post something showing how I’ve got it set up currently (if I can figure out which board something like that belongs on.).

[webinspect]

Glad to hear it! If you have any trouble getting the SVG to work, let me know. Happy to help debug.

@sola

I’ll try to post something showing how I’ve got it set up currently (if I can figure out which board something like that belongs on.).

That would be fantastic! I’d love to see it. I feel like Obsidian perfectly aligns with how I want to teach my kids: more of a gardening method, cultivating the ideas that interest them, rather than rote memorization and forgotten tests.