6 ms·

Periodic Table of the HTML Elements

105 points by cdl 13y ago

jloughry 13y ago
The author put some thought into arranging elements according to their relationships, something too often overlooked in 'periodic table of $x$' mash-ups. The more I look, the more I find. I am impressed.
- cdl 13y ago
  Ditto, the arrangement and group colors make this a very navigable space.
TheBiv 13y ago
As a biology and genetics grad, I can safely say that I never memorized the periodic table, but this looks like something I can commit to memory! Awesome, awesome work!
- aroch 13y ago
  I memorized it (well, ~85% of it) in 6th grade for an extra credit quiz. As a bonus, if we got all of it right, we got to be the ones to drop the matches into our experimental gases (H2O2 to make Hydrogen, Helium from balloons, etc). Needless to say, 6th grade me was more than willing to memorize things for the chance to use fire. I still have most of the table memorized, which has been useful through various biology and OChem courses and my research
jneal 13y ago
I've seen periodic tables like this in the past that were just, blah...But I still reluctantly clicked through and was amazed. This is beautiful and organized very well. I find myself clicking through various newer HTML5 elements I've never used.
jloughry 13y ago
It gives you something like a heat map of any web page. Cool! I keep finding little surprises hidden here.
dnautics 13y ago
what's periodic about it? Isn't it just a table?
- hga 13y ago
  http://en.wikipedia.org/wiki/Periodic_table http://en.wikipedia.org/wiki/Periodic_table The original is very useful in chemistry. E.g. going right from carbon, which can make 4 bonds, nitrogen can make 3, oxygen 2, florine 1. Going down from oxygen, sulfur is a heavy oxygen that can make many of the same compounds, with we understand to be different from its weight and greater number of electrons.
- jloughry 13y ago
  In the periodic table of (chemistry) elements, there are all sorts of patterns. Metals all cluster together. The noble gases (elements that don't react with much of anything) all live over on the right hand side in one column. Corrosive things like oxygen, chlorine, fluorine, etc. appear vertically above one another. The element right below a given place in the table most often has properties very similar to the one above it (but probably more so). The number of columns in the table has a specific meaning. Most significantly for chemistry, when the structure of the table was first figured out, it was full of obvious empty slots. Those predicted the existence of previously unknown elements, all of which were subsequently discovered. We are still filling in the bottom row...Element 115 just this week, in fact. Are there more rows in the periodic table? Maybe---if the proposed "island of stability" exists: http://en.wikipedia.org/wiki/Island_of_stability http://en.wikipedia.org/wiki/Island_of_stability
- phaedryx 13y ago
  I had the same question. (Also, I realize that you're asking about the linked HTML periodic table, not the periodic table of elements.)
  - dnautics 13y ago
    Thanks =) I guess I should be a bit more careful with dangling pronoun references.
stared 13y ago
Please, don't use periodic table to visualize anything by elements. For elements it works great and is one of the most beautiful and useful visualization ever created (as it's form is related to fundamental relation between elements). For everything else (unless having a similar structure to elements), it's awful, misleading and pointless. If I see such I am always wondering, is it: a tasteless designer, wannabe data scientist who know no other visualizations, or a science ignorant having no clue why Mendeleev's table is structured in that particular way, or a salesman wanting to give it extra legit and make it sound more fundamental. Just please, don't. Hint: just group things, in their own structure.
- mden 13y ago
  It's just a way to visualize information. I find this interesting to look at and also well organized (personally love the color coding and the asymmetry). In either case, no reason to be negative. If you don't like it, don't use it. If you are commenting to critique, no reason to be a jerk.
  - stared 13y ago
    Color code is nice here. I appreciate the gathered information. But I am criticising visualizing using things such as periodic tables (were columns, rows and gaps have a particular meaning) for visualization for which they don't fit. Since it is not the first time I see such. May point is not to use this particular visualization or not, but to make people thinking for a few seconds before starting visualizing: "Does the structure of this visualization fit the purpose? Or is it more like hammering nails with an iPhone?" (you can != you should).
  - paxswill 13y ago
    The periodic table isn't just a nice layout of information, the position of each element in the table provides further information about it. For example, we know gold (Au) is pretty a pretty good conductor of electricity. By looking at the other elements in its group (the column), we can guess that copper (Cu) and silver (Ag) are also good electrical conductors (in fact, some of the best). Beyond that simple case, there are loads of other bits of information encoded in the position. The image on the Wikipedia article gives a good overview of some of the trends. http://en.wikipedia.org/wiki/Periodic_table#Periodic_trends http://en.wikipedia.org/wiki/Periodic_table#Periodic_trends
pessimizer 13y ago
I can't figure out what relationships this is supposed to be showing me, other than the color labeling a particular type of element according to the key on the bottom. Why is it 18 columns wide? Why the asymmetry? What does it mean for an element to be on top of another? I'm clicking around and I'm not seeing it.
- deleted 13y ago
  [deleted]
tantalor 13y ago
The arrangement could be improved in a few places, 1. i and em, and b and strong, should be related. They should appear in two column? e.g., i over em, b over strong 2. The most common form elements (input, select, textarea, button) should be near the top. select should be directly over option.
mistercow 13y ago
That's pretty cute. I was kind of hoping that singletons would be over on the far right in the "noble gases" column, as an analogy to reactivity, or perhaps some other analogy about nesting relationships.
pattle 13y ago
I get "Error establishing a database connection" in big letters when I try to visit your blog

105 points by cdl 13y ago

The author put some thought into arranging elements according to their relationships, something too often overlooked in 'periodic table of $x$' mash-ups. The more I look, the more I find. I am impressed.

cdl 13y ago
Ditto, the arrangement and group colors make this a very navigable space.

TheBiv 13y ago

As a biology and genetics grad, I can safely say that I never memorized the periodic table, but this looks like something I can commit to memory! Awesome, awesome work!

aroch 13y ago
I memorized it (well, ~85% of it) in 6th grade for an extra credit quiz. As a bonus, if we got all of it right, we got to be the ones to drop the matches into our experimental gases (H2O2 to make Hydrogen, Helium from balloons, etc). Needless to say, 6th grade me was more than willing to memorize things for the chance to use fire. I still have most of the table memorized, which has been useful through various biology and OChem courses and my research

jneal 13y ago

I've seen periodic tables like this in the past that were just, blah...But I still reluctantly clicked through and was amazed. This is beautiful and organized very well. I find myself clicking through various newer HTML5 elements I've never used.

jloughry 13y ago

It gives you something like a heat map of any web page. Cool! I keep finding little surprises hidden here.

dnautics 13y ago

what's periodic about it? Isn't it just a table?

hga 13y ago
http://en.wikipedia.org/wiki/Periodic_table http://en.wikipedia.org/wiki/Periodic_table The original is very useful in chemistry. E.g. going right from carbon, which can make 4 bonds, nitrogen can make 3, oxygen 2, florine 1. Going down from oxygen, sulfur is a heavy oxygen that can make many of the same compounds, with we understand to be different from its weight and greater number of electrons.
jloughry 13y ago
In the periodic table of (chemistry) elements, there are all sorts of patterns. Metals all cluster together. The noble gases (elements that don't react with much of anything) all live over on the right hand side in one column. Corrosive things like oxygen, chlorine, fluorine, etc. appear vertically above one another. The element right below a given place in the table most often has properties very similar to the one above it (but probably more so). The number of columns in the table has a specific meaning. Most significantly for chemistry, when the structure of the table was first figured out, it was full of obvious empty slots. Those predicted the existence of previously unknown elements, all of which were subsequently discovered. We are still filling in the bottom row...Element 115 just this week, in fact. Are there more rows in the periodic table? Maybe---if the proposed "island of stability" exists: http://en.wikipedia.org/wiki/Island_of_stability http://en.wikipedia.org/wiki/Island_of_stability
phaedryx 13y ago
I had the same question. (Also, I realize that you're asking about the linked HTML periodic table, not the periodic table of elements.)
- dnautics 13y ago
  Thanks =) I guess I should be a bit more careful with dangling pronoun references.

stared 13y ago

Please, don't use periodic table to visualize anything by elements. For elements it works great and is one of the most beautiful and useful visualization ever created (as it's form is related to fundamental relation between elements). For everything else (unless having a similar structure to elements), it's awful, misleading and pointless. If I see such I am always wondering, is it: a tasteless designer, wannabe data scientist who know no other visualizations, or a science ignorant having no clue why Mendeleev's table is structured in that particular way, or a salesman wanting to give it extra legit and make it sound more fundamental. Just please, don't. Hint: just group things, in their own structure.

mden 13y ago
It's just a way to visualize information. I find this interesting to look at and also well organized (personally love the color coding and the asymmetry). In either case, no reason to be negative. If you don't like it, don't use it. If you are commenting to critique, no reason to be a jerk.
- stared 13y ago
  Color code is nice here. I appreciate the gathered information. But I am criticising visualizing using things such as periodic tables (were columns, rows and gaps have a particular meaning) for visualization for which they don't fit. Since it is not the first time I see such. May point is not to use this particular visualization or not, but to make people thinking for a few seconds before starting visualizing: "Does the structure of this visualization fit the purpose? Or is it more like hammering nails with an iPhone?" (you can != you should).
- paxswill 13y ago
  The periodic table isn't just a nice layout of information, the position of each element in the table provides further information about it. For example, we know gold (Au) is pretty a pretty good conductor of electricity. By looking at the other elements in its group (the column), we can guess that copper (Cu) and silver (Ag) are also good electrical conductors (in fact, some of the best). Beyond that simple case, there are loads of other bits of information encoded in the position. The image on the Wikipedia article gives a good overview of some of the trends. http://en.wikipedia.org/wiki/Periodic_table#Periodic_trends http://en.wikipedia.org/wiki/Periodic_table#Periodic_trends

pessimizer 13y ago

I can't figure out what relationships this is supposed to be showing me, other than the color labeling a particular type of element according to the key on the bottom. Why is it 18 columns wide? Why the asymmetry? What does it mean for an element to be on top of another? I'm clicking around and I'm not seeing it.

deleted 13y ago
[deleted]

tantalor 13y ago

The arrangement could be improved in a few places, 1. i and em, and b and strong, should be related. They should appear in two column? e.g., i over em, b over strong 2. The most common form elements (input, select, textarea, button) should be near the top. select should be directly over option.

mistercow 13y ago

That's pretty cute. I was kind of hoping that singletons would be over on the far right in the "noble gases" column, as an analogy to reactivity, or perhaps some other analogy about nesting relationships.

pattle 13y ago

I get "Error establishing a database connection" in big letters when I try to visit your blog