A visualisation of the 118 known chemical elements, based on the number of electrons per shell.
_='G=Ma,I!widJ!h_w!¥`218,:01~2@B,B424211<2=1?1@<B1C1E1F1G aP,T322221382956A<B1D1E1F AP,fF2239278@1A7B,?213918".split("t=[],j;7>j;je,k=,i;8>i;it||(t=[]i==k&&%=`k+=t.push(+1e,w=wdow){fWid$H_,I,fJ$h=G.m(f$)/16}(k,Zi){"#000Rect(0,0,a[I],a[J]tQAlign!centertQBasele!middle"#FFF"E LUMUN T Z "+%1f/4$/2"NU "+.jo(" / "f/4*3$/2n=%k)/t*8,i;i<;iVk+=.025,1<k&&(--k,e+=7==e?-e:1requestAnimationFrame(Z)},Yi,o,a,s){l=m=2XPI/,m*=n;var A=~A<+~Ap=m+l*A,q=r=h+h*i,q=qXs(p)+f/`r=rXcos(p)+g/`globalAlpha=s?1:.05,s?A,^):(o||V+i,^begPa(moveTo(^leTo(o,a()s||V,1,1,1)},Z(21314151617w[j].charCodeAt(efill=function(31:),a.setAttribute(11 1H2I1K1L1M1N1O1:~1<1Style=TQ(,w.onresizefor(t[e]c.[i]=b.client",in819++))-48.lengstroke=00=1>1?1th!="$,g%(e+QextU E VY(iX*G.^q,r_eight`2,~1;);';for(Y in $='~`_^XVUQ%$! ')with(_.split($[Y]))_=join(pop());eval(_)
Xz0nEEc9TWEfLEkhd2lkHxVKIWhfFXchCMKlYDIdMQHCnTgsOjAxBX4yHkDCikIsQh00Mgg0MjEFMTwyPTE/MUA8QjFDMUUxRjFHCWFQLFQdMzIyCDIyCB0xATM4Mjk1FzYXC0E8QjFEMUUxRglBUCxmHUYyMgUzOTIXNzgLQDFBN0IswoYdPzIxMzkBMTgiLnNwbGl0KBUiBnQ9W10sahw7Nz5qO2oYEGUcLGs9AhksaRw7CDg+aTtpGHQTfHwodBM9W10GaT09ayYmJT1gays9AhkGdBMucHVzaCgCKzEZf2UcLHc9dxZkb3cPBCl7ZhRXaWQfJBRIXywHSSxmBgdKJAZoPUcubRYoZiQpLzE2fQ8oBmscLFoEaSl7EAMMIiMwMDAVA1JlY3QoMCwwLGFbSV0sYVtKXQYSdFFBbGlnbiFjZW50ZXIVEnRRQmFzZWwWZSFtaWRkbGUVGwwDDCIjRkZGFQ4iRSBMVU1VTiBUICAgWiAgICIrJTEGZi80JC8yBg4iTlUgICIrES5qbxYoIiAvICIGZi80KjMkLzIGbj0laykvdBoqCDgsaRw7aTwRGjtpGFZ/ays9LjAyNSwxPGsmJigtLWssZSs9CDc9PWU/LWU6MQZyZXF1ZXN0QW5pbWF0aW9uRnJhbWUoWil9LFkEaSxvLGEscyl7bD1tPTJYUEkvERMsbSo9bjsQdmFyIEE9fkE8ERMrfkEYcD1tK2wqQSxxPXI9aCtoKmkscT1xWHMWKHApK2YvYHI9clhjb3MocCkrZy9gEmdsb2JhbEFscGhhPXM/MTouMDUscz8OQSxeKToob3x8VitpLF4GEmJlZxZQYR8oBhJtb3ZlVG8oXgYSbBZlVG8obyxhBhsoKX9zfHxWLDEsMSwxKX0sWih/ATIxMzE0MTUxNjE3Andbal0uY2hhckNvZGVBdChlAxJmaWxsBD1mdW5jdGlvbigFCAEzFzE6BiksB2Euc2V0QXR0cmlidXRlKAgxMQkxSDJJMUsxTDFNMU4xTwsxOn4xPDEeDFN0eWxlPQ4DVFEoDyx3Lm9ucmVzaXplEGZvcigRdFtlXRJjLhNbaV0UPWIuY2xpZW50FSIsFmluFzgxORgrKykZKS00OBoubGVuZx8bEnN0cm9rZRw9MB0wCB49MT4xPzEfdGghPSIkLGclKGUrUWV4dFUgRSBWWShpWCpHLl5xLHJfZWlnaHRgMix+MTt/KTsnO2ZvcihZIGluICQ9J39+YF9eWFZVUSUkIR8eHRwbGhkYFxYVFBMSERAPDgwLCQgHBgUEAwIBJyl3aXRoKF8uc3BsaXQoJFtZXSkpXz1qb2luKHBvcCgpKTtldmFsKF8p
/*oo
oOOOOOOOOOOOOOOOOOOo
oOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOo oOo
OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOooo oooOOOOOOo
oOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOo
OOOOOOOOOOOOOOOOOOOOOOO° °OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOo
oOOOOOOOOOOOOOOOOO° °OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOo
OOOOOOOOOOOOOOO °OOOOOOOOOOOOOOOOOOOO°
OOOOOOOOOOOOOO °°OO°°
OOOOOOOOOOOOO
oOOOOOOOOOOOO
OOOOOOOOOOOO
OOOOOOOOOOOO
OOOOOOOOOOOO oooooooooooo
OOOOOOOOOOOO OOOOOOOOOOOO
°OOOOOOOOOOOo OOOOOOOOOOOO°
OOOOOOOOOOOOO OOOOOOOOOOOOO
OOOOOOOOOOOOOo oOOOOOOOOOOOOO
OOOOOOOOOOOOOOo oOOOOOOOOOOOOOO
°OOOOOOOOOOOOOOOOo oOOOOOOOOOOOOOOOO°
°OOOOOOOOOOOOOOOOOOOOOOo oOOOOOOOOOOOOOOOOOOOOOO°
°OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO°
°OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO°
°OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO°
°OOOOOOOOOOOOOOOOOO°
°°
* FOR MORE STUFF LIKE THIS, CHECK
http://www.standardabweichung.de
STANDARDABWEICHUNG SUPERNOVA 1K
MADE FOR JS1K 2016 LETS GET ELEMENTAL
A visualisation of the 118 known chemical elements, based on the number of electrons per shell.
Visuals (c) 2016 by Daniel Kuhnlein, http://www.kuhnlein.me
*/
////////////////
/// RAW DATA ///
////////////////
//BASED ON THE TABLE FOUND ON THIS PAGE https://en.wikipedia.org/wiki/Electron_shell
var data = [[1], [2], [2, 1], [2, 2], [2, 3], [2, 4], [2, 5], [2, 6], [2, 7], [2, 8], [2, 8, 1], [2, 8, 2], [2, 8, 3], [2, 8, 4], [2, 8, 5], [2, 8, 6], [2, 8, 7], [2, 8, 8], [2, 8, 8, 1], [2, 8, 8, 2], [2, 8, 9, 2], [2, 8, 10, 2], [2, 8, 11, 2], [2, 8, 13, 1], [2, 8, 13, 2], [2, 8, 14, 2], [2, 8, 15, 2], [2, 8, 16, 2], [2, 8, 18, 1], [2, 8, 18, 2], [2, 8, 18, 3], [2, 8, 18, 4], [2, 8, 18, 5], [2, 8, 18, 6], [2, 8, 18, 7], [2, 8, 18, 8], [2, 8, 18, 8, 1], [2, 8, 18, 8, 2], [2, 8, 18, 9, 2], [2, 8, 18, 10, 2], [2, 8, 18, 12, 1], [2, 8, 18, 13, 1], [2, 8, 18, 13, 2], [2, 8, 18, 15, 1], [2, 8, 18, 16, 1], [2, 8, 18, 18], [2, 8, 18, 18, 1], [2, 8, 18, 18, 2], [2, 8, 18, 18, 3], [2, 8, 18, 18, 4], [2, 8, 18, 18, 5], [2, 8, 18, 18, 6], [2, 8, 18, 18, 7], [2, 8, 18, 18, 8], [2, 8, 18, 18, 8, 1], [2, 8, 18, 18, 8, 2], [2, 8, 18, 18, 9, 2], [2, 8, 18, 19, 9, 2], [2, 8, 18, 21, 8, 2], [2, 8, 18, 22, 8, 2], [2, 8, 18, 23, 8, 2], [2, 8, 18, 24, 8, 2], [2, 8, 18, 25, 8, 2], [2, 8, 18, 25, 9, 2], [2, 8, 18, 27, 8, 2], [2, 8, 18, 28, 8, 2], [2, 8, 18, 29, 8, 2], [2, 8, 18, 30, 8, 2], [2, 8, 18, 31, 8, 2], [2, 8, 18, 32, 8, 2], [2, 8, 18, 32, 9, 2], [2, 8, 18, 32, 10, 2], [2, 8, 18, 32, 11, 2], [2, 8, 18, 32, 12, 2], [2, 8, 18, 32, 13, 2], [2, 8, 18, 32, 14, 2], [2, 8, 18, 32, 15, 2], [2, 8, 18, 32, 17, 1], [2, 8, 18, 32, 18, 1], [2, 8, 18, 32, 18, 2], [2, 8, 18, 32, 18, 3], [2, 8, 18, 32, 18, 4], [2, 8, 18, 32, 18, 5], [2, 8, 18, 32, 18, 6], [2, 8, 18, 32, 18, 7], [2, 8, 18, 32, 18, 8], [2, 8, 18, 32, 18, 8, 1], [2, 8, 18, 32, 18, 8, 2], [2, 8, 18, 32, 18, 9, 2], [2, 8, 18, 32, 18, 10, 2], [2, 8, 18, 32, 20, 9, 2], [2, 8, 18, 32, 21, 9, 2], [2, 8, 18, 32, 22, 9, 2], [2, 8, 18, 32, 24, 8, 2], [2, 8, 18, 32, 25, 8, 2], [2, 8, 18, 32, 25, 9, 2], [2, 8, 18, 32, 27, 8, 2], [2, 8, 18, 32, 28, 8, 2], [2, 8, 18, 32, 29, 8, 2], [2, 8, 18, 32, 30, 8, 2], [2, 8, 18, 32, 31, 8, 2], [2, 8, 18, 32, 32, 8, 2], [2, 8, 18, 32, 32, 8, 3], [2, 8, 18, 32, 32, 10, 2], [2, 8, 18, 32, 32, 11, 2], [2, 8, 18, 32, 32, 12, 2], [2, 8, 18, 32, 32, 13, 2], [2, 8, 18, 32, 32, 14, 2], [2, 8, 18, 32, 32, 15, 2], [2, 8, 18, 32, 32, 16, 2], [2, 8, 18, 32, 32, 17, 2], [2, 8, 18, 32, 32, 18, 2], [2, 8, 18, 32, 32, 18, 3], [2, 8, 18, 32, 32, 18, 4], [2, 8, 18, 32, 32, 18, 5], [2, 8, 18, 32, 32, 18, 6], [2, 8, 18, 32, 32, 18, 7], [2, 8, 18, 32, 32, 18, 8]];
////////////////
/// COMPRESS ///
////////////////
var compressed = [];
//CHECK SUBARRAY MAX LENGTH
var sub_max = 0;
for (var i = 0; i < data.length; i++) {
sub_max = Math.max(sub_max, data[i].length);
}
//FILL WITH ZEROS
var sub_length;
for (var i = 0; i < data.length; i++) {
sub_length = data[i].length;
for (var j = 0; j < (sub_max - sub_length); j++) {
data[i].push(0);
}
}
//AGGREGATE POSITIONS
for (var j = 0; j < sub_max; j++) {
var aggregated = '';
var count = 1;
for (var i = 1; i < data.length; i++) {
if (data[i - 1][j] != data[i][j]) {
aggregated += count + ',' + data[i - 1][j] + ',';
count = 1;
} else {
count++;
}
}
aggregated += count + ',' + data[i - 1][j];
count = 1;
compressed.push(aggregated);
}
// RESULTING ARRAY
var compressed = [[1, 1, 117, 2],
[2, 0, 1, 1, 1, 2, 1, 3, 1, 4, 1, 5, 1, 6, 1, 7, 109, 8],
[10, 0, 1, 1, 1, 2, 1, 3, 1, 4, 1, 5, 1, 6, 1, 7, 3, 8, 1, 9, 1, 10, 1, 11, 2, 13, 1, 14, 1, 15, 1, 16, 90, 18],
[18, 0, 1, 1, 4, 2, 1, 1, 4, 2, 1, 1, 1, 2, 1, 3, 1, 4, 1, 5, 1, 6, 1, 7, 3, 8, 1, 9, 1, 10, 1, 12, 2, 13, 1, 15, 1, 16, 12, 18, 1, 19, 1, 21, 1, 22, 1, 23, 1, 24, 2, 25, 1, 27, 1, 28, 1, 29, 1, 30, 1, 31, 49, 32],
[36, 0, 1, 1, 3, 2, 2, 1, 1, 2, 2, 1, 1, 0, 1, 1, 1, 2, 1, 3, 1, 4, 1, 5, 1, 6, 1, 7, 3, 8, 2, 9, 5, 8, 1, 9, 6, 8, 1, 9, 1, 10, 1, 11, 1, 12, 1, 13, 1, 14, 1, 15, 1, 17, 12, 18, 1, 20, 1, 21, 1, 22, 1, 24, 2, 25, 1, 27, 1, 28, 1, 29, 1, 30, 1, 31, 17, 32],
[54, 0, 1, 1, 22, 2, 2, 1, 1, 2, 1, 3, 1, 4, 1, 5, 1, 6, 1, 7, 3, 8, 1, 9, 1, 10, 3, 9, 2, 8, 1, 9, 7, 8, 1, 10, 1, 11, 1, 12, 1, 13, 1, 14, 1, 15, 1, 16, 1, 17, 7, 18],
[86, 0, 1, 1, 15, 2, 1, 3, 9, 2, 1, 3, 1, 4, 1, 5, 1, 6, 1, 7, 1, 8]];
// CONVERT TO CHARCODES
var charcodes = '';
for (var i = 0; i < compressed.length; i++) {
for (var j = 0; j < compressed[i].length; j++) {
charcodes += String.fromCharCode(compressed[i][j] + 48);
}
charcodes += ',';
}
// RESULTING STRING
var compressed = '11¥2,20111213141516178,:01112131415161738191:1;2=1>1?1XB,B0114211421112131415161738191:1<2 =1?1X<B1C1E1F1G1H2I1K1L1M1N1OaP,T0113221122110111213141516173829581968191:1;1<1=1>1?1A<B1D1E1F1H2I1K1L1M1N1OAP,f011F22112131415161738191:392819781:1;1<1=1>1?1X1A7B,011?21392131415161718'.split(',');
//////////////////
/// UNCOMPRESS ///
//////////////////
var uncompressed = [];
var pos;
var posLimit;
for (var j = 0; j < 7; j++) {
pos = 0;
posLimit = compressed[j].charCodeAt(pos)-48;
for (var i = 0; i < 118; i++) {
if (!uncompressed[i]) {
uncompressed[i] = [];
}
if (i == posLimit) {
pos += 2;
posLimit += compressed[j].charCodeAt(pos) - 48;
}
uncompressed[i].push(compressed[j].charCodeAt(pos+1)-48);
}
}
//////////////
/// SOURCE ///
//////////////
ts = compressed;
t = [];
for (var j = 0; j < 7; j++) {
pos = 0;
posLimit = ts[j].charCodeAt(pos) - 48;
for (var i = 0; i < 118; i++) {
if (!t[i]) {
t[i] = [];
}
if (i == posLimit) {
pos += 2;
posLimit += ts[j].charCodeAt(pos) - 48;
}
t[i].push(ts[j].charCodeAt(pos + 1) - 48);
}
}
pos = 0;
//WINDOW RESIZE
w = window;
w.onresize = function () {
width = b.clientWidth;
height = b.clientHeight;
a.setAttribute('width', width);
a.setAttribute('height', height);
space = Math.min(width, height) / 16;
};
w.onresize();
renderRatio = 0;
render = function () {
c.fillStyle = '#000';
c.fillRect(0, 0, a.width, a.height);
c.textAlign = 'center';
c.textBaseline = 'middle';
c.strokeStyle = c.fillStyle = '#FFF';
c.fillText('E L E M E N T Z ' + (pos + 1), width / 4, height / 2);
c.fillText('N E ' + t[pos].join(' / '), width / 4 * 3, height / 2);
elementsRatio = (pos + renderRatio) / t.length * 118;
for (var i = 0; i < t[pos].length; i++) {
drawLines(i);
}
renderRatio += 0.025;
if (renderRatio > 1) {
renderRatio -= 1;
pos += pos == t.length - 1 ? -pos : 1;
}
requestAnimationFrame(render);
};
drawLines = function (i, pcx, pcy, text) {
segment = rotate = Math.PI * 2 / t[pos][i];
rotate *= elementsRatio;
radius = space + space * i;
for (var j = 1; j < t[pos][i] + 1; j++) {
mv = rotate + segment * j;
cx = radius * Math.sin(mv) + width / 2;
cy = radius * Math.cos(mv) + height / 2;
c.globalAlpha = text ? 1 : .05;
if (text) {
c.fillText(j, cx, cy);
} else {
if (!pcx) drawLines(i + i, cx, cy);
c.beginPath();
c.moveTo(cx, cy);
c.lineTo(pcx, pcy);
c.stroke();
}
}
if (!text) drawLines(i, true, true, true);
};
render();