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

Have you seen our HERE Twitch channel to livestream our Developer Waypoints series?

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.


Developer Waypoints is a live coding series from HERE, which will teach you how to build with maps and location data.


Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}