Yes, and at some point I do want to add it. This was inspired by the work you and @TW_Tones did, but at first it was simply meant as a demo using the same data. Now it’s trying to grow into something more useful, and some version of the table view will be essential.
That’s a very good idea, and I’ll put it on the list.
Thank you very much for the suggestions.
Ciao Scott,
I’m not sure this is good news or bad news. But I wanted you to see the following …
#1 – On (my!) Chromebook I still get wrapping when the PT is expanded … 
#2 – On (my!) Chromebook if I adjust it’s settings all is right in the garden … 
Adjustment …
Result …
I dunno why this happens (you’d need a PhD in Not Getting Frustrated By Computers to figure it out, I guess).
When does your CSS rule, OK? 
.
Merely me, I wanted to mention how, in the end, I got it to present nicely.
Outcome: I’m not so sure now you should burden yourself too much solving this particular issue (for Chromebooks only??).
Though I love your dedication to get it as right-as-possible.
An appreciative comment, TT.
Right. But I don’t want to get too far off your topic.
But maybe I should mention that MCL has the ability (via tag) to make a Tiddler a “topper” that spans columns below it. That could be one approach?
AND, on wide-scenarios one could easily have the PT in Column One and the clicked element appear in Column Two etc. (All column widths are dynamically adjustable.)
(MCL is not as well documented yet as it needs be for optimal use, but it is coming. It is very layout flexy when you get-it. For interested readers: to look at and → GET MCL ← go there. Kudos @BurningTreeC)
Just a side-note
TT, x
Oh, that’s bad news, for sure. I didn’t even consider browser minimum- font-sizes; that may leave an insoluble problem.
This was on latest, yes? That used a fix from Eric that hasn’t been pushed out to a numbered version yet.
If you’re willing to do a small bit more testing, I would like to know if this can be fixed by shrinking the size a bit more. In $:/_/my/sytles/tile, around line 8 is this CSS rule:
div.element div.name {position: absolute; /* ... */ font-size: 14cqw;}
Could you try with font-size: 13cqw or font-size: 12cqw? I’m guessing that this won’t work, but it would be nice to know. To my eyes, the longest-looking names are for elements 59 and 104 with 110 and 111 running close behind. (Also, if you’d be willing to share the details of your Chromebook, I can see if there’s an online emulator I can use to try these things myself.)
I don’t expect this to fix the problem. If the browser is requiring a minimum font-size where these won’t fit, there’s not much I can think of to do, except to change the breakpoints where the name is visible. But I will play with it next time I’m working on layout. (I haven’t specified font-name anywhere, and it’s remotely possible that would help.)
I failed that course.
Failed miserably!
(And I’m a developer by profession!)
No worries. While I am working on this in various bits of spare time, I have only the vaguest of roadmaps so far, and am much more interested in hearing about potential paths than in following one particular one at the moment.
That makes sense, but I’m still not sure what I would use two columns for except for two things: This:
and the ability to do side-by-side comparisons… but even that would probably be better inside a single tiddler.
But this does lead me to think about a possible useful UI: a floating button (not that I don’t know how to do that, but I imagine it’s possible since the expand-sidebar button is similar) that when clicked brings up a popup with the clickable periodic table.
Hmm. all sorts of possibilities here…
Thank you very much for testing the Chromebook issue.
And thank you for the ideas. Food for thought is the most nourishing kind!
Small footnote.
One thought I had was that on-click an element opens in a near full-screen MODAL (with option to edit the Tiddler in that modal).
Just a footnote caro.
TT
I’ve just published a new version, 0.7.4. It adds an alternative view of the table with the ability to highlight any element type, group, or period.
The important thing to see is the new Annotated version of the table.
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. I don’t know if I’ll look for another implementation of this behavior or simply hope they catch up soon.
There was a lot of supporting work that went into this… with help from several threads here – thanks everyone! The biggest change is that the macro that generates the table now takes a number of additional macros as parameters, describing what goes into five separate empty blocks surrounding the table. Here we use the (10 x 3) north block for the colorful element types, the (2 x 2) southwest block for the groups, and the (2 x 2) southeast block for the periods. But there are are also a (1 x 1) northwest block and a (5 x 1) northeast block that can be used. I have several other views I want to make, using these. But you can see my throwaway Silly Table that I used to prove out the technique.
I originally had the type-key at top having a ragged top. But I had some problems making the exact behavior I wanted with that version, and the current rectangular version is what it looked like when I finally got that behavior. I prefer the ragged version. Do you as well? And if so, is it enough better that I really should put in the work to get the right behavior with that look? It looked like this:
Next up: a drag-and-drop Reactor showing some compounds you can make with a given group of elements.
This is gorgeous work, Scott - an excellent example of the kind of bespoke app that can be made with TiddlyWiki. And yes, Firefox support for :has really can’t come too soon.
For what it’s worth, I also like the look of the ragged-edge key, and I do think it minimizes the visual distraction of what is otherwise a big solid block of color. But I’m not sure it’s worth agonizing over if you have other features you’d rather be working on.
Thanks. I’m finding myself happy with the results. And I’m learning a lot doing it.
The power of this tool never stops amazing me. The funny thing is that so far I haven’t touched on the most central idea in TW, the easy ability to add your own content. That’s coming, either second or third in my current to-do list. It’s something I absolutely want, but I think I already know how to do most of it, so I don’t expect to learn very much in doing so: more of a chore right now than an interesting task. But I’ll get there.
Yes, I asked about this the other day on their 15-year-old (!!) bug report, and was told that
There’s work going in progress on this.
Not very encouraging!
I do think it looked nicer. Unless I get an overwhelming response of “No, the box is better”, I’m planning on revisiting it at some point. It’s probably low effort, but also low priority, the kind of thing to work on in a spare half hour (or during a boring meeting, but don’t tell my boss I said that! 
)
Utterly brilliant!
As an aside before I comment on the new filtered layout…
It is very interesting how the PT, obsequiously, records time developments of socio-political relevance … like Americium in 1944, proximate to when the USA became the World Leader. See your: Elements by year (1944).
Just a side comment
TT
I think it’s less a matter of obsequiousness and more one of where the hotbeds of discovery were in the days when the elements weren’t named by committee but by their discoverers. Note also Berkelium and Californium, all found by the same group at Berkely National Laboratory (in California) around the same time.
Lots of place names are included, obviously or more obscurely: Hafnia (the Latin name of Copenhagen) gives us hafnium, Holmium is for Stockholm, Lutetia (City of Light) means that lutetium is named for Paris, Strontian in Scotland gives us strontium, europium is obvious, and the mineral rich Swedish town of Ytterby gives us ytterbium. The funniest bit though is that gallium is probably not really named for France (Latin, Gallia), but was the self-titled debut element of Paul-Émile Lecoq de Boisbaudran (“gallus” is the Latin translation of “le coq”.) He denied this, but the story is far too good to die.
Much more appropriate to my mind are names like Curium, Einsteinium, Fermiun, Mendelevium, Nobelium, Rutherfordium, Bohrium, Copernicum, and the like,
The wonderful book, The Periodic Kingdom (recommended by @TW_Tones) has an entire chapter on the naming of the elements, and is my source for the above.
A tangent, but there are actually four elements named after Ytterby: yttrium (Y), terbium (Tb), erbium (Er), and ytterbium (Yb) !
That’s right. I’d forgotten that. The residents must be so proud!
One thing the author does in that book is viewing the periodic table as a landscape, @Scott_Sauyet’s interface to the data is making substantial inroads to the visualisation and understanding of the table.
Because of this book, I also dream of “surfing this dataset in a 3D landscape, with contours and colours and textures representing qualities”. The use of innate human faculties, to travel through the elemental landscape is a way to “develop an intimate understanding of the complexity of nature”.
Side fact
I wonder how many people know where “browser” comes from? “Browsers” are animals such as goats that eat things at eye level, up at head level, Grazers eat at ground level like cows and sheep. Perhaps a table top screen (a grazer) would allow us one day to Graze the periodical table as well?
I’ve dreamed of that sort of view as well … but that is far beyond where I’ll likely carry this. I don’t have the skills, and don’t think that I care to invest the time to learn them, but if there’s anyone with experience with 3-d rendering in the browser who would like to contribute, I’d love to hear about it!
Sorry, I did not want to imply you should or need to do so.
Perhaps one of our community members will see and respond, we do have some who specialise in this graphical area and have plugins that support it.
Have you a better data plugin to replace the one above at https://test-data.tiddlyhost.com?
Not at all. I didn’t think you were. That was my own musings. I would love to be able to do that as well, but I know that it’s one large learning curve beyond where I want to go.
Damn, I thought I’d mentioned that before. Yes, every version I publish has its own data plugin. Feel free to grab a version whenever you like and to slice and dice it however you want. The latest version should always be at $:/plugins/ScottSauyet/Chemistry/Elements. That has a little more than you had in your version: both some additional data on each element, tiddlers for the element types (Lanthanides, Nobel Gases, etc.) and a license and (so far empty 
) README file for the plugin. If you want just the elements info, you can export the results of [all[shadows]tag[Chemical Element]]. I can publish that alongside the wiki if you like. By that I mean that when I publish, say, version .../0.8.0/, I could also include .../0.8.0/elementTiddlers.json. It should only be a few minutes to add that to my process, so let me know if you want it. So far I’ve been keeping the plugin version synced with the app version, but it hasn’t changed in quite a while, and I may stop doing that.
My next chore will probably involve either creating a new plugin of Compounds data, listing a number of common compounds, their chemical formulae, and more, or adding this data to the current plugin. I haven’t decided which, and I’d love to hear your thoughts.
If you want the raw data I use before I convert to this format, there’s no reason to include it in the wiki. While I’m not publishing it alongside the wiki right now, I could easily do so if it makes your life easier. But you can always get the latest version on GitHub at raw.json. This is your CSV-imported data with a fairly large number of fixes applied. If you care to see it, the script that converts it to tiddlers is buildElement.js.
I’d also like to ask a quick favor of you. I will eventually take on the job of writing credits for this, and I’d like to know the origin of the CSV data that you started from. Do you recall where that was? I’ve done a lot of tweaking over time on it, but that is still the basis of most of this work.
This turned out to be quite easy to do, so version 0.7.5 is out with the ragged edge. (The hoverable area still extends over the entire hidden rectangle, but I think that’s fine.)
Some thoughts,
This could get very big so using the minimum number of bytes per compound may make sense, but it may be worth finding an open source resource and integrating with it, just as someone may integrate their movie reviews with WikiPedia and/or IMDB
1x2+8 or Hx2+O
https://www.google.com/search?q=about+oxygen try it about oxygen - Google Zoeken
Architecture
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.
I am yet to find a better version of this paraphrased quote (Still looking)
When designing a solution “don’t take hostages of the future”
Post Script.
You should add a group that astronomers use to separate metals and non-metals. Its almost a joke 
Astronomers refer to all elements other than hydrogen and helium as ‘metals’, despite the fact that elements such as oxygen and carbon are considered non-metals by chemists.
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.
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.
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 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.
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.
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!
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.
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.