Demo: Periodic Table

[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!