Demo: Periodic Table

[Scott_Sauyet]

@TW_Tones

@Scott_Sauyet

I’d like to know the origin of the CSV data that you started from. Do you recall where that was?

• Not off the top of my head, but I am looking for it

Thanks. Don’t worry too much. All the information here is in the public domain. It’s interesting that I found a number of anomalies in the input data; that seems strange these days. At some point, I’m going to have to ask a chemist to look over the raw data, because I have to wonder if there are still problems lurking.

@TW_Tones

This could get very big so using the minimum number of bytes per compound may make sense,

I’m not planning on having too many. My starting point would be the ones mentioned in
Compounds.json (1.5 KB). It’s taken from the table of contents for The 100 Most Important Chemical Compounds: A Reference Guide (a book I ordered and received but have not yet cracked open.) I will probably enhance that with the list of reagents found on the back of a printed periodic table. But I think that will still leave fewer than 200 compounds. Of course users will be able to add more.

So for the moment at least, I’m not overly concerned by size. My current content adds about half a megabyte to the 2.6MB empty edition, and that includes two XKCD comic strips I threw in for fun.

@TW_Tones

Perhaps index data tiddlers and compounds constituent elements converted to shorter names eg the Nth element/shortname, eg H2O 1x2+8 or Hx2+O

Yes, I was planning on using the simple form such as “H2O” in a field, with a macro to turn that into “H₂O” for display. There are about a dozen different naming standards as I understand it. I will probably only support the simplest one.

@TW_Tones

• I think the trick is to use the content of the Periodic table to simplify and reduce the content size of the Compound plugin and visa versa, however if possible, maintain a degree of independence, that is relate to each other by a naming standard (tiddler titles), then perhaps later one could bring in or chop and change other plugins or data sources.
• For example if one plugin is available and not the other, eg compound but no periodic table, then you have a minimalist periodic table, perhaps data tiddler that you can put in its place.

I’m thinking a bit differently here, in a more layered approach. Everything depends on the Elements. but the baseline periodic table and the compounds are independent of one another. The Reactor is dependent upon both of these, and certain games are dependent upon the periodic table, and so forth.

@TW_Tones

I recall the term valence as it relates to columns and groups of elements and these of course can influence the way elements join into compounds.

Yes, my last chemistry class was 40 years ago, but I recall how valences are defined and used. I do know that Roman Numerals seem to have been abandoned by chemists here, though, in favor of the arabic numbers of the groups.

@TW_Tones

Perhaps your list in the “Gulf of periodicy” should be in valence order not alphabetic?

I’m not sure what you mean here. These types don’t exactly correlate with either the groups or the periods. There are 11 of these types (should that be “series” instead of “types”?), 7 periods, and 18 groups. And I wouldn’t be surprised if within the decade we push into period 8!

@TW_Tones

Basically make choices that multiply the future possibilities, not close them down.

I try to make that a mantra in my life as a developer/software architect! But it has to be balanced against avoiding premature abstraction. So for the moment, everything is focused on the single style of periodic table, and there is no way to create the 50-column wide version. But if we find we need it, I should be able to make the change in one place – the periodic-table macro, keeping the current behavior as default. So I’m thinking to the future, but leaving the work of that abstraction for later.

@TW_Tones

You should add a group that astronomers use to separate metals and non-metals. Its almost a joke

Funny that you should mention that. Yesterday I ran across two recent XKCD comic related to elements and to the periodic table. So I included them in the wiki. I don’t think I’ll keep them long-term, but the first one is a gem. And if I do keep them, I will definitely include the astronomers’ view of the table as well.

[Ste_W]

@Scott_Sauyet

Yes, I was planning on using the simple form such as “H2O” in a field, with a macro to turn that into “H2O” for display. There are about a dozen different naming standards as I understand it. I will probably only support the simplest one.

I’m sure you know, but just in case (I’d missed it for ages!) the official KaTeX plugin has chemical symbol notation baked in.

So $$\ce{SO2}$$ would render sulpher dioxide correctly!

[Scott_Sauyet]

@Ste_W

I’m sure you know, but just in case (I’d missed it for ages!) the official KaTeX plugin has chemical symbol notation baked in.

So $$\ce{SO2}$$ would render sulpher dioxide correctly!

Thank you. Although someone had pointed that out before, I’d forgotten. I may or may not choose to use it for this. It’s probably overkill for the simplistic formulas I’m planning on using, but would likely be a blessing if I go more complex.

It’s now in my notes, so hopefully I won’t forget!

[Mohammad]

Hi @Scott_Sauyet
I played with latest version of Periodic Table. As I mentioned before, this is a real amazing app!
Well done and thank you for your efforts!

[Scott_Sauyet]

I have a new release of this periodic table demo. Version 0.8 is at Chemistry — periodic table and related tools.

The most interesting change is the inclusion of some common chemical compounds, and a tool that lets you see what compounds can be made with certain elements. You can see this in action at Periodic Table with Reactor. As always, there’s more to do. This part really won’t be right until the user is able to add new compounds at will, and I think my next step is to start to offer the user the ability to do certain customizations: adding notes to elements/compounds, for instance, and adding additional compounds. I also want to figure out the best mechanism for the user to add larger sets of compounds.

But first, I’d love feedback on the new tool. Does it seem reasonable? Do you understand how to use it just by what it says, or would more directions be useful? What else should be improved? Right now it’s drag-and-drop. Should I let users click/touch elements to add them as well as (or instead of) dragging?

And I must give a huge shout-out to @telumire, who suggested this, proved it out, and wrote several different versions of it. While the code has slowly drifted from the suggestion of six weeks ago, the fundamental design – and still a lot of the code – is entirely due to @telumire. Thank you very much!

[Mohammad]

This is great! Thank you Scott!
In the About there are some missing links like in this line: The primary author of this is Scott Sauyet. Eventually we will add a Credits page to celebrate the many people who have helped.

I would suggest for About tiddler:

1. add the link to source code on GitHub
2. add email for possible contact to developer
3. add link to license

The reason is potential users may not familiar with TiddlyWiki.

When you think it is the time for public announce please let me know and I would be happy to advertise it in our Chem Eng community, LinkedIn and ChEnected.

[Thomas_Chuffart]

Great job You certainly learned a lot doing this .

By the way, I just found via Wikipedia that hydrogen is Nonmetal type not Alkalimetal.

[Springer]

Scott, it’s such a blast to watch this project developing!

I see among your various inspiring “to-do” ideas, one thing that strikes me as a simple development doesn’t seem to be articulated:

Tiddler names for tags or other category-concepts in sidebar are click-magnets. So if the expandable TOC tab shows links for the header concepts themselves (Elements, Compounds, Element Types, etc.) then each of these “parent” tiddlers would be natural places to set up something like a mini sub-TOC, perhaps with a definition or explanation at top. (The “reactor” version of the periodic table might also happily reside at the Compounds tiddler.)

Of course, you could also try to remove the distracting affordance (clicking, but getting an apparently empty tiddler which serves only to house list fields, etc.) by simply making the TOC category / tag-name not clickable (or clickable only to expand/collapse the TOC details in the sidebar). But a blurb about the concept (what is an element? What is a compound? etc.) is, some links / navigation aids that make sense for that sub-TOC, could be satisfying to find as the content for each of these tiddlers.

Cheers!

[Scott_Sauyet]

@Mohammad

In the About there are some missing links like in this line: The primary author of this is Scott Sauyet. Eventually we will add a Credits page to celebrate the many people who have helped.

Right after I made the announcement, I realized that I hadn’t updated About or Ideas, and I went and did them and thought I republished. But I was sleepy and might have forgotten the final push call. I will look again this evening.

But that About page was meant to be a placeholder, something to really fill out when I get closer to complete and actually know what it’s all about. Honestly, you were the motivating reason for that; it was mostly just a place to host and show the version number, which you suggested after my previous release. But I figured I’d fill it out with a little bit of information to start. If you think it would be better without the incomplete parts (like links to Games, which are still coming but have moved down my list or a non-existent Credits page), let me know. I’m very flexible about this.

@Mohammad

I would suggest for About tiddler:

1. add the link to source code on GitHub
2. add email for possible contact to developer
3. add link to license

All good ideas. I will definitely have all three by v 1.0.

@Mohammad

When you think it is the time for public announce please let me know and I would be happy to advertise it in our Chem Eng community, LinkedIn and ChEnected.

Thank you very much. I’m still a ways from that, but I’m grateful to hear that you think it might be something these communities would care about.

@Springer

Tiddler names for tags or other category-concepts in sidebar are click-magnets. So if the expandable TOC tab shows links for the header concepts themselves (Elements, Compounds, Element Types, etc.) then each of these “parent” tiddlers would be natural places to set up something like a mini sub-TOC, perhaps with a definition or explanation at top. (The “reactor” version of the periodic table might also happily reside at the Compounds tiddler.)

Funny you should mention that. As I said above to Mohammad, I went and looked at About after sending my note yesterday, and clicked on one of the links to those parent tiddlers, which I thought I had already created! Oops. Nothing there, not even a list of links to its children. That was on the plan for this evening or for Sunday (tomorrow’s shot.) It will probably be fairly anemic at first, but a list of child links is a bare minimum for such pages, and I’ll probably include at least a single paragraph for now on each.

@Springer

Of course, you could also try to remove the distracting affordance (clicking, but getting an apparently empty tiddler which serves only to house list fields, etc.) by simply making the TOC category / tag-name not clickable (or clickable only to expand/collapse the TOC details in the sidebar).

While I don’t think I want to do that, as it’s the right home for some important information, now I need to go look up how to do it when I want to! I’ve never tried that.

[Springer]

@Scott_Sauyet

a list of child links is a bare minimum for such pages, and I’ll probably include at least a single paragraph for now on each.

Insofar as this resource may serve as a learning-tool for TiddlyWiki, you could include a ViewTemplate that automatically supplies an overview of any tag-children.

(The more nuanced approach I’ve taken lately: have a default overview of tag-children show up exactly whenever the text field is empty or – better yet – whenever there’s no <$list or <<table-dynamic to be found in the body of the tiddler – so that the automatic template shows up exactly until/unless I supply a more tailor-made view of tag-children. Something like this provisional structure is great for wikis under development, because it gets out of the way exactly as you fill in more careful details.)

[Scott_Sauyet]

@Thomas_Chuffart

You certainly learned a lot doing this .

… and continue to do do, thanks to the amazing community here.

@Thomas_Chuffart

By the way, I just found via Wikipedia that hydrogen is Nonmetal type not Alkalimetal.

Hydrogen is just weird (if I may say that about the substance that makes up 75% or normal matter.)

On various different version of the periodic table, you will see it associated with the Alkali Metals, the Nonmetals, and the Halogens. And you will often see it not associated with any of them, possibly even floating freely on or above the first period. At some point I will find actual chemists to ask such questions. But that’s for later, as the fix is trivial; just changing one field on one tiddler. It’s simply not clear to me where to go with this.

[Scott_Sauyet]

@Springer

Insofar as this resource may serve as a learning-tool for TiddlyWiki, you could include a ViewTemplate that automatically supplies an overview of any tag-children.

Possibly, but it might get pretty fiddly, because I’m already serving up the Compounds (which have no text fields) with a simple ViewTemplate, and the Elements (ditto) in a more nuanced manner using a cascade to choose the main template that then transcludes the main body template. That latter was just a way to include the element tile on the element page.

@Springer

have a default overview of tag-children show up exactly whenever the text field is empty or – better yet – whenever there’s no <$list or <<table-dynamic to be found in the body of the tiddler

That’s interesting. It’s a technique I wish I’d thought of when I was building a fairly complex documentation wiki for work. I did all sorts of things to bootstrap my way so that the things that still needed work didn’t just say “TODO” but exposed some useful contents.

For this one, I might do it differently. If the tiddler is also a tag, include such a list only in the case that there is not content, and use a quick macro that adds the footer if I want it explicitly.

Thank you very much for the immensely helpful feedback!

[Scott_Sauyet]

@Springer

Insofar as this resource may serve as a learning-tool for TiddlyWiki

I think of this project as a TiddlyWiki learning tool for me, but of the output as a Chemistry learning tool.

While this started as a look-what-you-can-do-with-TW demo, I’m not thinking of the ongoing project as something to serve that role.

[Scott_Sauyet]

I have a new minor version trying to take into account the suggestions made here by @Mohammad, @Springer, and @Thomas_Chuffart. You can see it at Chemistry — periodic table and related tools.

It’s still missing these suggestions, which I’ll get in soon:

@Mohammad

• add the link to source code on GitHub
• add email for possible contact to developer
• add link to license

It does update the group for Hydrogen, as the non-metals seems to be the most commonly assigned group.

As always, feedback would be much appreciated.

[TW_Tones]

Love your work @Scott_Sauyet

A few comments to make use of, no criticisms just potential enhancements, because this conversation is between friends not the full audience.

• Your annotated table could be the default as it hints at the sophistication in the wiki, rename the default to “simple view” or similar.
• Don’t waste the opportunity for a tooltip,
  • eg mouse over an element and display a piece of info not already visible, and of use.
• I see your compound formula are inside braces inside the caption;
  • A better design approach would be to store the formulae in a dedicated field and build a compound caption from its parts eg title + formulae. [Edited] I see you do.
  • Captions get wikified so you can use macros and transclusions including of other fields and/or text references.
  • This would make the formulae more reusable [Edited] already exists
• It would be nice to be able to click on the elements in a compounds formula to open them, or at least provide the full name on hover.
• I love the reactor, but using similar code you could allow each element to display all the compounds it is found in - then you can travel either way between atoms and compounds.
• It would not hurt having a start here tiddler outlining the overall functionality so people need not only discover it.

Wikipedia link

• In $:/_/my/templates/ElementType I see copper hardcoded for the wikilink.
• I suggest reforming the Wikipedia link into a html a tag, with a target of wikipedia so every link opens in the same tab/windoiw, r-click to open in new ta/window
  • Tiddlywikis standard is to add to the a tag rel="noopener noreferrer" see here

Advanced futures;

• The information is available in the database to enable a configured temperature in degrees C and/or Kelvin and list elements and compounds in Their different phases at that temprature. So for example if you learn venus’s surface temprature is 800°c then what is solid/liquid and gas (hmmm but pressure is involved as well)
• As I said before for the known 50 or so known compounds the emissions and absorption spectra would be interesting.
  • I have though of a electromagnetic spectrum data source for the test data.

[TW_Tones]

Could you provide a link at which the latest version was always available?

I would like to point to is as example of what people can do with test data;;

I understand this wonderful effort was in part inspired by the test data I collected and published here https://test-data.tiddlyhost.com/ as a result I would urge you all to contribute data to this resource, what other interesting outcomes could come from sharing a little effort.

• Aforementioned electromagnetic spectra
• Geological and archaeological epochs
• Historical events and periods
• Scientific events and periods

to name a few

[Scott_Sauyet]

@TW_Tones

A few comments to make use of, no criticisms just potential enhancements, because this conversation is between friends not the full audience.

Thank you for your time and for your thoughts. But criticisms are quite welcome too.

@TW_Tones

Your annotated table could be the default as it hints at the sophistication in the wiki, rename the default to “simple view” or similar.

I will definitely consider it. (I also want to add the blocks to the annotations; I just don’t yet have the data for it in the tiddlers. I’ll get to that at some point.) I’m still mostly focused on the parts, not the whole. I don’t have a strong sense of how I want to present this. But you’re right that the annotated table might be a better overview than the simple one.

@TW_Tones

• Don’t waste the opportunity for a tooltip,
  • eg mouse over an element and display a piece of info not already visible, and of use.

Yes, tooltips are on my Idea list

@TW_Tones

A better design approach would be to store the formulae in a dedicated field and build a compound caption from its parts eg title + formulae.

Is there a way to make this automatic, so that where I would use a caption (like in the TOC entry Contents > Compounds in the sidebar) such a combination would be automatically used? I would definitely prefer to do this if I could, but I haven’t seen the way.

The Compound tiddlers are built by a script from raw data with entries that look like this:

    {
        "chemical-name": "Acetic Acid",
        "compound-name": "Acetic Acid",
        "boiling-point": "118 to 119 °C; 244 to 246 °F; 391 to 392 K",
        "density": "1.049 g/cm³ (liquid); 1.27 g/cm³ (solid)",
        "formula": "CH3COOH",
        "melting-point": "16 to 17 °C; 61 to 62 °F; 289 to 290 K",
        "molar-mass": "60.052 g/mol"
    },

which are extracted from Wikipedia, with additions from various sites found with DuckDuckGo and Google. So I’m not really maintaining those existing captions directly, but generating them. Still, it’s a denormalization of the data that TW gets, and if I can avoid that, I’d like to.

@TW_Tones

• It would be nice to be able to click on the elements in a compounds formula to open them, or at least provide the full name on hover.

The next answer solves that, I think, for the Compound tiddlers, with a footer rather than a tooltip. Are you suggesting that this should also happen where we use the Caption, such as in the right sidebar, or other miscellaneous places? Or is what I’ve done enough? Also, if I do add them, are you thinking just the built-in browser solution or some more interactive custom tooltip?

@TW_Tones

• I love the reactor, but using similar code you could allow each element to display all the compounds it is found in - then you can travel either way between atoms and compounds.

I’ve already done half of that travel – the easy half, posted last night, but not yet in a published version. If you open Chlorophyll a, you can see a footer that lists:

Constituent Elements: Carbon, Hydrogen, Magnesium, Nitrogen, Oxygen

Now I have to do the other half, which lists the compounds that include a given element. This was earlier suggested by @Ste_W in a direct message. There is still a presentation issue for this: For something like Magnesium, it probably won’t be an issue, but Hydrogen, Carbon, and Oxygen, each appear in at least half the compounds listed. I don’t think a huge list of elements is particularly helpful. I’m thinking it will be something like

Oxygen is part of Acetic Acid, Acetone, Adipic Acid, Adrenaline, and ▸ 73 additional compounds

where that last link is a <$reveal...> to hide/show the remaining elements.

@TW_Tones

It would not hurt having a start here tiddler outlining the overall functionality so people need not only discover it.

Perhaps. But I will probably hold off on that until I have more of a sense of what’s actually available. There is a bit of that right now in the About tiddler. I’m not really sure where that information will eventually live.

@TW_Tones

• In $:/_/my/templates/ElementType I see copper hardcoded for the wikilink.

(First thing this morning, Scott wakes up, reads his messages, hurries to his laptop, fixes this issue and posts it to “latest”.) Oops. Thanks for catching that!

@TW_Tones

I suggest reforming the Wikipedia link into a html a tag, with a target of wikipedia so every link opens in the same tab/windoiw, r-click to open in new ta/window

Probably a good idea. I’ll put it on the list.

@TW_Tones

• Tiddlywikis standard is to add to the a tag rel="noopener noreferrer" see here

I don’t know if the TiddlyWiki standard should change. I think that advice is now out-of-date. Still, it probably won’t hurt.

@TW_Tones

The information is available in the database to enable a configured temperature in degrees C and/or Kelvin and list elements and compounds in Their different phases at that temprature. So for example if you learn venus’s surface temprature is 800°c then what is solid/liquid and gas (hmmm but pressure is involved as well)

My data for Compounds is not nearly complete enough for that. It might be achievable for Elements. But your remark about the relationship to pressure makes me think that it might take a lot more data to support it.

@TW_Tones

• As I said before for the known 50 or so known compounds the emissions and absorption spectra would be interesting.
  • I have though of a electromagnetic spectrum data source for the test data.

I’m starting to work on the editability features. Part of that will be adding additional compounds. I expect to use that data as a test of this feature. After that I will decide whether that is just included with the other compound data, supplied as an additional optional plugin, or something else.

Can you share the data source you’ve discovered?

@TW_Tones

Could you provide a link at which the latest version was always available?

The latest published version will be at https://crosseye.github.io/TW5-Chemistry/ as well as at a versioned url such as https://crosseye.github.io/TW5-Chemistry/0.8.1/. Stuff that I’m working on and have pushed to GitHub, but not necessarily published will be at https://crosseye.github.io/TW5-Chemistry/latest/.

At some point, I also updated the first post here with that information.

@TW_Tones

I understand this wonderful effort was in part inspired by the test data I collected and published here https://test-data.tiddlyhost.com/ as a result I would urge you all to contribute data to this resource, what other interesting outcomes could come from sharing a little effort.

I don’t see any mechanism that allows me to directly share there. Am I missing something? Or for now do I simply send things to you?

Right now there are plugins for Elements and Compounds. Feel free to include them in your project. Each contains basic data tiddlers plus a license tiddler (MIT for now; will consider others later) and a ReadMe tiddler. Elements also contains ElementTypes, but now that I’ve added a separate Compounds one, I will probably separate those also into their own plugin.

I don’t at the moment have other data to share. But as I come across it, I will try to share it in this manner.

[TW_Tones]

@Scott_Sauyet

@TW_Tones

• rel="noopener noreferrer" see here

I don’t know if the TiddlyWiki standard should change. I think that advice is now out-of-date. Still, it probably won’t hurt.

• In a set of links to Wikipedia perhaps don’t worry, but as understand it, for other “random links” this reduces the destination site from tracking the link origin. So I think it remains current. When constructing you own html links, rather than using external links I would just add it for consistence.

@Scott_Sauyet

It might be achievable for Elements. But your remark about the relationship to pressure makes me think that it might take a lot more data to support it.

• Actually yes, keep it simple for now, however I believe the current element data is passibly at room temperature and pressure already.

@Scott_Sauyet

I don’t see any mechanism that allows me to directly share there. Am I missing something? Or for now do I simply send things to you?

• Yes I mean send to me, but I will start a thread and link to it soon, and post on the site.
• No need to add your data until the end if you modify it further, or if its not substantially different to the original, and a link to your published result would be sufficient.

@Scott_Sauyet

Is there a way to make this automatic, so that where I would use a caption (like in the TOC entry Contents > Compounds in the sidebar) such a combination would be automatically used? I would definitely prefer to do this if I could, but I haven’t seen the way.

• I need to think about this a little more because the number in the formula field needs to be subscripted.

An example of computed captions is like this

\define compound-caption()
<$link/> {{!!formula}}
\end

Then the caption field in all compounds can be <<compound-caption>>. However it is insufficient to deal with subscripts.

• I wonder if I can just subscript any number?

[Scott_Sauyet]

@TW_Tones

[Regarding rel="noopener noreferrer" ]

In a set of links to Wikipedia perhaps don’t worry, but as understand it, for other “random links” this reduces the destination site from tracking the link origin.

In ES2019, the spec changed to require <a target=_blank> to use the noopener behavior. All major browsers have implemented this change. It certainly doesn’t hurt to use it, but we’re hitting the point where this is no longer necessary. But maybe if I used your suggestion about using a common named tab/window, this would still be necessary. I’ve rarely done that.

@TW_Tones

[Regarding https://test-data.tiddlyhost.com/ ]
No need to add your data until the end if you modify it further, or if its not substantially different to the original, and a link to your published result would be sufficient.

The data I’m using is substantially changed from the original. First of all, I’ve had to fix a number of discrepancies in the data. I’ve also added fields to it.

But I’m wondering if anyone has taken a stab at defining what makes for such a collection of test data. It would be useful to come up with a definition/description.

@TW_Tones

@Scott_Sauyet

Is there a way to make this automatic, so that where I would use a caption (like in the TOC entry Contents > Compounds in the sidebar) such a combination would be automatically used? I would definitely prefer to do this if I could, but I haven’t seen the way.

• I need to think about this a little more because the number in the formula field needs to be subscripted.

I have a macro to handle the subscripting.

@TW_Tones

An example of computed captions is like this

\define compound-caption()
<$link/> {{!!formula}}
\end

Then the caption field in all compounds can be <<compound-caption>>. However it is insufficient to deal with subscripts.

I think there’s a real problem with that from a data perspective. I’m trying to treat Elements and Compounds as test-data sets. They should be self-contained, reusable, data-only tiddlers. Making them depend on external macros would mean they are no longer easily shareable. While it could be bundled with them, it feels to me like it’s moving away from the fundamental design.

[Scott_Sauyet]

@Scott_Sauyet

Unfortunately, Firefox will not show this behavior. I don’t know when they’re going to support the CSS :has pseudo-selector; they claim to be working on it at the moment.

… and the answer is: Version 121, released on 2023-12-19!

The :has() selector is now supported. This allows authors to match an element that has, or “anchors”, at least one element matching its relative selector.

No mention in these release notes that this was nearly 16 years in the making!