Demo: Periodic Table

[Scott_Sauyet]

Ever since @TW_Tones and @Springer were fiddling with chemical element information in tiddlers in My only wish in tiddlywiki: is this possible? Where should I start from?, I’ve been playing around with how to write a periodic table of the elements with Tiddlywiki.

While it’s certainly not complete, it’s in good enough shape to share. It’s at Periodic Table. (It’s just barely useful in mobile, and only in landscape mode with the sidebar collapsed. More on that below.) Update: I will continue to add releases and notes below, and the current published version will be at https://crosseye.github.io/TW5-Chemistry/. Between publishes, especially if I’m asking for help, I may post to https://crosseye.github.io/TW5-Chemistry/latest/.

I started with the tiddlers that Tony used, but found a number of enhancements that were needed. and wrote a script to apply various fixes. If you’re interested, the Node.js script that I used is inside https://crosseye.github.io/TW5-demos/periodic/enhance.zip, along with the original data. It’s not code to be proud of. It grew by accretion as I found more parts that need to be fixed, and it shows in the script design. But it works. If you run node buildTiddlers (using Node.js 17.5+ – otherwise you’ll need to add an import for node-fetch), it creates three formats: a list of tiddler files suitable for a tiddlers folder, the file tiddlers.json (attached: tiddlers.json (141.4 KB)), which has all the new data tiddlers included, plus a somewhat different version of Tony’s Headers_Tiddlers, and the same thing as a plugin (which may or may not work now.) This content also includes a Wikipedia extract.

It looks like this:

and when you choose an element, you get something like this:

(This also demos why I raised the discussion How to float the output of a ViewTemplate next to other body content?. Thanks again, @EricShulman!)

There’s plenty still to do. The biggest thing is to make this fully scalable. As you can see in the image, it fits fine in the screen I was using, but it looks way too small on a larger one, and is too large on mobile, overflowing the sidebar. I’d love to get this to fill the width of the story river. If anyone has suggestions for how to do that, I would love to hear them. The current TODO list is on the page

I have no practical need for this, and except possibly for Chemistry students, I doubt anyone does. Nonetheless, I’ve had a lot of fun making it, and would love to hear suggestions for how to improve it.

[TW_Tones]

Lovely work @Scott_Sauyet

Shows the value of a shared test data because people can share solutions with substantial demo content. Perhaps share back your finished data set for inclusion on https://test-data.tiddlyhost.com/

@Scott_Sauyet

The biggest thing is to make this fully scalable. As you can see in the image, it fits fine in the screen I was using

What Image are you talking about? the whole table?

I notice you have a tile format in $:/_/my/macros/tile I think to address different screen sizes you may need to look at more “responsive” html/css such as flexbox etc…

• Currently opening the periodic Table tiddler in New Window then zoom is also practical (The font title is not scaling)
• Hiding the sidebar and zooming on desktop makes it larger
  • Using the full screen Page control can help
• For mobile what if you could open different blocks/sets of elements at a time eg by colour.

If I think of anything else I will share.

Post script, on a wiki dedicated to Elements, and their two character short names consider setting $:/config/Search/MinLength to two, helps with searching.

• There may be a way to make this more usable as well.

[Springer]

Scott, I felt the same inspiration to do exactly what you just did, BUT I forced myself to turn away. It is incompatible with my day job to jump down such rabbit-holes. But: FANTASTIC!
-Springer

[Springer]

And, turning toward the larger community: this is an AUTO-INCLUDE on any “showcase” roster of tiddlywiki projects.

@Mohammad: Aren’t you a chemist (or in some adjacent field)? Is this cool, or what?

[Scott_Sauyet]

@TW_Tones

Shows the value of a shared test data because people can share solutions with substantial demo content. Perhaps share back your finished data set for inclusion on https://test-data.tiddlyhost.com/

.
I will. I want to look at the data plugin format a little more closely. I didn’t do much damage to the format that I inherited, but I might have lost fields. I’ll try to do that tomorrow. You can see the current versions at Periodic-table-of-the-elements.json and Periodic-table-of-the-elements.json.meta and another format in tiddlers.json.

@TW_Tones

@Scott_Sauyet

The biggest thing is to make this fully scalable. As you can see in the image, it fits fine in the screen I was using

What Image are you talking about? the whole table?

Yes.

I would like to scale the tiles to just fit inside the story river. I am already scaling them down from the size they show at in the element tiddlers. But I am using a fixed scale. I probably need to calculate this from the story river width. I’m hoping someone here might have advice. But I haven’t really looked too deeply into it myself yet.

@TW_Tones

I notice you have a tile format in $:/_/my/macros/tile I think to address different screen sizes you may need to look at more “responsive” html/css such as flexbox etc…

Well, the HTML is generated by $:/_/my/macros/tile. The styling is in $:/_/my/styles/tile. I am in fact using flex-box. I think what I’ll need to do is use one of the viewport-based sizes and scale everything including fonts from there. I’ve never had a need for that before, but I can investigate that. I’m reasonably competent with CSS.

@TW_Tones

Post script, on a wiki dedicated to Elements, and their two character short names consider setting $:/config/Search/MinLength to two, helps with searching.

While it’s nice to know that this is available, I don’t know that I would want to do that. Searching for every instance of “In” or “Ra” seems a bit much. And there are a dozen or so single-letter abbreviations. I think if something like that turned out to be important, I would add an alphabetic list of abbreviations linking to the full element tiddlers.

@TW_Tones

There may be a way to make this more usable as well.

Please, tell me more!

---

One thing to note: this is almost all driven by the data. The only additional file is an important one to actually place the elements on the grid: $:/_/my/table The data can do this for us using period and group, but it’s ugly without something to tell us where to place the last two rows, which don’t have the group. I don’t actually know much chemistry – high school was a long time ago! – but I imagine we can figure this out. I’d love to get to that point.

[Scott_Sauyet]

@Springer

@Mohammad: Aren’t you a chemist (or in some adjacent field)? Is this cool, or what?

If so, perhaps you could offer a suggestion for this:

@Scott_Sauyet

One thing to note: this is almost all driven by the data. The only additional file is an important one to actually place the elements on the grid: $:/_/my/table The data can do this for us using period and group, but it’s ugly without something to tell us where to place the last two rows, which don’t have the group. I don’t actually know much chemistry – high school was a long time ago! – but I imagine we can figure this out. I’d love to get to that point.

Is there some obvious well-known attribute that we could add to the Lanthanide and Actinide tiddlers that would let us calculate the positions in the grid? I could use the atomic number, the type and some arithmetic, but that feels fraught. These are not part of groups 1 - 18, but do they have an equivalent notion?

So far my data is generated by a small script running against Tony’s original data. But I think at this point that it’s the more consistent and usable set, and I would have no problem starting to think about it as the baseline.

[Mohammad]

This is a great job. It is a valuable tool for students in the field of engineering and natural science.
I know it is a lot of work to get this TW periodic table better than rivals out there, but once it is completed it will get a lot of attention.

[telumire]

A start to make the table more responsive on PC (sorry it’s very quick and dirty) :

<style>
table.periodic{
transform:unset;
display:grid;
grid-template-columns: repeat(18, 1fr);
gap:1ch;
}

table.periodic :is(:not(td, td *)){
display:contents;
}

table.periodic :is(* , div.element){
margin:unset;
padding:unset;
}

table.periodic td{
min-width: 0;
}

table.periodic .element{
width:unset;
}

</style>

Result: the sidebar doesnt need to be folded, the table wont overflow

Still not perfect, if the width become too small it will be squished

I’m unable to focus properly these last few weeks, I’ll submit an improved version once I get better

[Scott_Sauyet]

@telumire

A start to make the table more responsive on PC

That’s fantastic! I hadn’t really started on this yet – more focused on the data – but I expected this to be a lot harder. You make it look so simple. I obviously haven’t kept up with CSS changes as well as I thought. I’d never seen :is or unset. Both look extremely useful.

@telumire

(sorry it’s very quick and dirty)

Don’t be absurd! This is amazingly helpful. If this is your quick and dirty, I expect to be blown away by your focused effort.

Thank you very much!

[Scott_Sauyet]

@Mohammad

This is a great job. It is a valuable tool for students in the field of engineering and natural science.

I think you’re giving it more credit than it deserves. This is little more than a minor gloss on the information equally available elsewhere. It’s never going to be the go-to source of chemical information.

I think of it much more as a hopefully-useful demo of something you can do with Tiddlywiki. And especially of what useful presentation can be collected from our data. You might notice for instance that the colors of each tile is determined by its element type. (Plus of course some CSS.)

This is the reason I would like to find a way to get rid of the hard-coded table. If we could add some chemical or pseudo-chemical information (and not just row and column) to the element tiddlers, we’d move further in this direction.

@Mohammad

I know it is a lot of work to get this TW periodic table better than rivals out there, but once it is completed it will get a lot of attention.

After I do some UI cleanup, I would like to start adding some more data-driven presentation, perhaps some grouping and sorting by properties such as valence, for instance. But I won’t think of it as competing with rivals. I hope it’s sophisticated and useful, but it is meant strictly as a demo. The only audience I have in mind is the TW community. If it ends up being helpful to someone else, that’s just a touch of grace.

[Mohammad]

Well yes, there are some PT out there, some are very powerful. I use a portable version
It is called Periodic Table Explorer 1.8.1 by Paul A Freshney published 2013.

But I have not seen. Periodic table notebook like yours.
TW version of Periodic Table allows user to simply add notes comments to element and compose new things all in a single html file. So, I believe yours can get more attention by learners and practitioners

[Scott_Sauyet]

@Mohammad

But I have not seen. Periodic table notebook like yours.
TW version of Periodic Table allows user to simply add notes comments to element and compose new things all in a single html file. So, I believe yours can get more attention by learners and practitioners

I suppose that’s true. That could make it useful. Users could add whatever they want: results of their own scientific work, study notes, etc. I’ve been so focused (in general, not just here) on using TW for display of information that I can easily lose it’s main purpose as a user-edited wiki.

I’m curious whether there are any report-generation tools laid over TW for more casual users. I can see the possibilities for one, and that could work well in conjunction with the sort of thing Tony is talking about at https://test-data.tiddlyhost.com/. Obviously power users would just work directly in TW, but I can see the possibility of having something like a BI tool.

[Scott_Sauyet]

@Springer

It is incompatible with my day job to jump down such rabbit-holes.

It probably should be with mine too. I’ve been spending too much of my evenings on things like this, and staying up far too late, just to scratch random itches. But it’s fun!. And I’m learning a lot – mostly TW, but even some chemistry – in doing so.

@Springer

But: FANTASTIC!

Thank you. There’s still a lot to do before I’m satisfied, but it does feel like a good start, and this evening I’ll try @telumire’s fixes, which look like they may solve my largest dissatisfaction.

[Ste_W]

So so so good! I will be stealing this.

[nevarmaor]

I had to sign up just to say this is amazing. Well done, and gives me ideas for my own private TW use.

[Scott_Sauyet]

@nevarmaor

I had to sign up just to say this is amazing.

Thank you. I’m touched.

@nevarmaor

Well done, and gives me ideas for my own private TW use.

Great. Please share those parts of it you can!

[TiddlyTweeter]

@Scott_Sauyet

Bingo!

Brilliant application that will bring trainee chemists to heaven! IF they could know.

HOW would we get them involved to look?

I see the format issues for multi-device usage (breaks down on smaller).

I have not seen anyone yet solve that fully for a rigorous cross-display type scenario of a full Periodic with note access.

But I think YOU are close.

IMO, great use of TW for a practical purpose.

Best wishes, TT

[TiddlyTweeter]

@Scott_Sauyet

If only …

… Thulium …

… were TWulium (69A 168, 935 Tw) … you’d be set

TT

[Scott_Sauyet]

@TiddlyTweeter

Brilliant application that will bring trainee chemists to heaven! IF they could know.

Man, you’re getting way ahead of me. I’m hearing enough about how potentially useful this could be that I may try to move it in that direction. First of all, I want it to be as good a demo of TiddlyWiki as I can, though.

@TiddlyTweeter

HOW would we get them involved to look?

“If you build it, they will come” ?? I have no clue.

@TiddlyTweeter

I see the format issues for multi-device usage (breaks down on smaller).

I have not seen anyone yet solve that fully for a rigorous cross-display type scenario of a full Periodic with note access.

I have some ideas, involving CSS container queries, but have had little time to work on this in the past few days. Hopefully over the weekend.

@TiddlyTweeter

If only … Thulium … were TWulium (69A 168, 935 Tw) … you’d be set

Perhaps we can make a special edition wtih TWulium or, even better, TiddlyWikium.

[pmario]

@Scott_Sauyet

Man, you’re getting way ahead of me. I’m hearing enough about how potentially useful this could be that I may try to move it in that direction. First of all, I want it to be as good a demo of TiddlyWiki as I can, though.

As I wrote at your other thread, I think it’s needed that you make a plugin out of the periodic table and all the content tiddlers.

I personally would like to see the elements in the Recent tab. … It seems you removed the created and modified fields from the element tiddlers, to remove them from Recent… right?

I would like to add a “Discovered” tab that lists the elements in reverse order of their discovery year. … Just a “nice to have”