Over a million developers have joined DZone.

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

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

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.


Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.


The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}