Over a million developers have joined DZone.

Two Periodic Tables: HTML5 of (Chemical) Elements, and Of HTML5 Elements

DZone's Guide to

Two Periodic Tables: HTML5 of (Chemical) Elements, and Of HTML5 Elements

· Web Dev Zone
Free Resource

Get deep insight into Node.js applications with real-time metrics, CPU profiling, and heap snapshots with N|Solid from NodeSource. Learn more.

Okay, so 'elements' here is a pun. Unless you see some analogy between interoperability and ionization potential, because what determines kind and degree of interaction is sort and strength of affinity, and..well, no, probably not.

But one thing these two tables do share is that people interested in HTML5 might be interested in both of them.

The first -- more practical and less technically impressive -- simply displays all elements in the latest HTML5 working draft (including elements previous to HTML5), grouped together:

You might also detect a joke or two -- table-related elements, for example, are located in the group corresponding to the noble gases, because, I guess, tables don't do anything, haha -- and <html> takes hydrogen's place, because, perhaps, <html> is the basis of everything else. Or maybe <html> fuels the stars(=web developers).

The second -- an actual periodic table of chemical elements -- is much more impressive, chiefly because it uses HTML5 as extensively and effectively as Flash. (And because it's an actual periodic table.)

All the facts are there, as they are in a dozen other websites, but this site adds: zoom to element on click, visual dynamic model of nucleus and electron shells, and really cool scrolling transitions between different kinds of information (general, physical, atomic, etc.):

The electrons rotate in different directions and at different speeds, by the way, depending on distance from the nucleus (in a 2d projection of Bohr's model), using JavaScript like this:

	for (var xi = 0; xi < this.electrons[i]; xi++)
	{ // Draw each electron on this shell
		angle += spacing;
		var x = Math.cos(angle * Math.PI / 180) * distanceFromCenter;
		var y = Math.sin(angle * Math.PI / 180) * distanceFromCenter;
		ctx.lineWidth = 1;
		ctx.fillStyle = '#333';
		ctx.arc(200 + x, 200 + y, 9, 0, Math.PI*2, true);
		// Draw the electron
		var radgrad = ctx.createRadialGradient(190 + x + 6, 190 + y + 6, 2, 190 + x + 10,  190 + y + 10, 9);
		radgrad.addColorStop(0, '#67a4d7');
		radgrad.addColorStop(0.9, '#183f9f');
		radgrad.addColorStop(1, 'rgba(0,0,0,0)');
		ctx.fillStyle = radgrad;
		ctx.fillRect(190 + x, 190 + y, 20, 20);
	this.angleStep += 1;

Check out the full site (and view the source) for more.


Node.js application metrics sent directly to any statsd-compliant system. Get N|Solid


Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}