Periodic Table

by Marc Malignan

HTML

<div id="table"></div>
<div id="table-lanthanoids"></div>
<div id="table-actinoids"></div>

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto:100,300,400);

body {
    margin: 0;
    padding: 40px 20px 20px;
    font-family: 'Roboto', sans-serif;
    background: #eee;
}
#table, 
#table-lanthanoids, 
#table-actinoids {
    margin: 0 auto;
    clear: both;
}
#table {
    width: 1260px;
    margin-bottom: 20px;
}
#table-lanthanoids, 
#table-actinoids {
    width: 1050px;
}

.element {
    position: relative;
    float: left;
    width: 70px;
    height: 70px;
    text-align: center;
    color: white;
    font-size: 11px;
    font-weight: 100;
    box-shadow: 5px 5px 0 rgba(0,0,0,.1);
    text-shadow: 1px 1px 2px rgba(0,0,0,.4);
    text-decoration: none;
    transition: all .2s ease-in-out;
}

.element .symbol {
    line-height: 70px;
    font-size: 240%;
    font-weight: 300;
}
.element .id,
.element .mass {
    position: absolute;
    opacity: .9;
}
.element .id {
    top: 2px; left: 2px;
}
.element .mass {
    bottom: 2px; left: 0; right: 0;
}

.element.noble 
{ background: -webkit-linear-gradient(top left, #7E57C2, #673AB7); }
.element.alkali 
{ background: -webkit-linear-gradient(top left, #EF5350, #F44336); }
.element.alkaline
{ background: -webkit-linear-gradient(top left, #FF7043, #FF5722); }
.element.transition
{ background: -webkit-linear-gradient(top left, #FF9800, #FB8C00); }
.element.poor
{ background: -webkit-linear-gradient(top left, #66BB6A, #4CAF50); }
.element.metalloid
{ background: -webkit-linear-gradient(top left, #26C6DA, #00BCD4); }
.element.nonmetal
{ background: -webkit-linear-gradient(top left, #42A5F5, #2196F3); }
.element.halogen
{ background: -webkit-linear-gradient(top left, #5C6BC0, #3F51B5); }
.element.lanthanoid
{ background: -webkit-linear-gradient(top left, #7E57C2, #673AB7); }
.element.actinoid
{ background: -webkit-linear-gradient(top left, #AB47BC, #9C27B0); }

#el2 { margin-left: 1120px; }
#el5, #el13 { margin-left: 700px; }

.clearfix { clear: both; }
.transp { opacity: .25; box-shadow: 0 0 0 rgba(0,0,0,.1); }

JavaScript

var selectedGroup = '';

// generate element block
function genEl(e, container) {
    
    var c = e.group.toLowerCase().split(' ');
    
    var html = $('<a class="element"></a>').addClass(c[0]);
    
    if(c[1] && c[1]!='innerborder') html.addClass(c[1]);
    if(e.number == 1) html.addClass('nonmetal');
    if(e.molar) html.attr('href', 'http://en.wikipedia.org/wiki/'+e.name).attr('target','_blank');
    
    if(e.molar) {
        html.attr('id', 'el'+e.number)
            .attr('title', e.name)
            .append('<span class="id">'+e.number+'</span>')
            .append('<span class="symbol">'+e.small+'</span>')
            .append('<span class="mass">'+parseFloat(e.molar).toFixed(0)+'</span>');
    }
    else {
        html.attr('id', 'el'+e.small)
            .append('<span class="id">'+e.small+'</span>');
    }
    
    container.append(html);
}

// add clearfix
function clearfix(container) {
    container.append('<div class="clearfix"></div>');
}

// on mouseenter > hide other groups
$('body').on('mouseenter', '.element', function() {
    
    var c = $(this).attr('class');
    
    if(c!=selectedGroup) {
        selectedGroup = c;
        
        $('body').find('.element').each(function() {
            if($(this).attr('class') != c) {
                $(this).addClass('transp');
            }
            else {
                console.log($(this).attr('class'), c);
            }
        });
    }
});

// on mouseleave > clear transparency
$('body').on('mouseleave', '.element', function(e) {
    
    var c = $(this).attr('class');
    
    if(c!=$(e.toElement).attr('class') || !$(e.toElement).hasClass('element')) {
        
        selectedGroup = '';
        
        $('.element')
            .removeClass('focus')
            .removeClass('transp');
    }
});

// get JSON data
$.getJSON('https://dl.dropboxusercontent.com/u/80418372/periodicTable.json', function(data) {
    
    console.log(data);
    
    // build main table
    for(var i=0;...