The Periodic Tableau: How it was created

I was thinking up possible names for this new blog the other day, and paused for a while on the possibility of calling it The Periodic Tableau. Both a play on the periodic table, and an indication that updates abbout Tableau would be made periodically. It’s a name that I’m fond of. In the end, it didn’t stick. It wasn’t fun enough. Tableau Monkey won out.

But in coming up with the shortlisted name, I wondered whether it would be possible to go recreate the periodic table of elements using Tableau. And so I went to work. Here’s a link to the Viz; and below is a screenshot.

Periodic Tableau


First, the dataset. I cobbled the core attributes together in Excel from various internet sources: element names, symbols, element types, atomic numbers, atomic weights, melting and boiling points, electron configurations (whatever that may mean), even the year of discovery. There was one row for each element.

And I added some further data: a field for each of row and column number (based on the elements’ relative positioning on the table) and a link to the elements’ respective Wikipedia pages.

I also parsed the electron configuration into substrings, as some need to be presented as subscripts and some as regular text. So, for example, the element silver has an electron configuration of [Kr] 4d10 5s1. This I parsed into four fields:

  • Part 1: [Kr] 4d
  • Part 1 subscript: 10
  • Part 2: 5s
  • Part 2 subscript: 1

I also created some dummy records: a couple to create spacers between the logical elements of the table; and a bunch to create instructional text—the legend of types, an “example” entry near the top to indicate what each square contained and where, and the redirects to the lanthanide and actinide series of elements. All told, there were 136 data rows, 118 of which were the elements themselves.

I then used this as the data source in Tableau.

Once in Tableau, the core building blocks were pretty simple. My row field went in my Rows; column went in columns. I created a dummy field that I called “One”, which was merely the number 1 for all records. This I used to size the bar that appeared wherever a row/column combination was present. So each bar was equal in size, the size of the cell itself.

The type field defined the colour of the bars, and I upped their size to bring the rows closer together. I also manually changed the size of the rows and columns to make the viz look more like the periodic table we know and love.

The next step was to use the labels to put the relevant text into each of the bars. And it was this that took the most effort. I needed some artificial spacers in the header to separate the atomic numbers (top left) from the atomic weight (top right), while also keeping the atomic number locked for elements without an atomic weight. (It’s not possible to have a left-aligned element and a right-aligned element on the same row in labels or tooltips.)

Additional artistry and “fannying around” was needed to introduce a lower font size in the header of the “example” element than was used for the main elements, for reasons of space. It’s likely not something you’ll notice, but you’d have noticed it had I not done it.

And I went through a similar process in constructing the tooltips. And here’s where the parsed electron configuration fields were used. I strung them back together in the tooltip, but put the subscript fields in a lower font size—Tableau doesn’t yet allow for subscripts in tooltips.

There’s even a field that contains either an “n” or a blank” depending on whether the element type begins with a vowel to allow the tooltip to distinguish between a/an: an alkali metal; a transition metal.

Finally, I created a URL action (on menu) on the dashboard, allowing you to click through from the tooltip to the Wikipedia page about the element.

Here’s the link again to the viz on Tableau Public. Hope you like it.

Leave a Reply

Your email address will not be published. Required fields are marked *