Heat map layout

CSS

.heat-map {
    height: 250px;
    width: 420px;
    position: relative;
}

.heat-map-item {
    position: absolute;
}

.heat-map-item a {
    color: white; font: 10pt/10pt "Lucida Grande", "Lucida Sans Unicode";
    text-decoration: none;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 1px;
    bottom: 1px;
    text-align: center;
    background: blue;
    overflow: hidden;
    white-space: nowrap;
}

.heat-map-item a:after {
    content: attr(title);
    position: absolute;
    left: 10px;
    right: 10px;
    top: 50%;
    margin-top: -5pt;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
}

.heat-map-item a:hover:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: 5px solid black;
    box-sizing: border-box;

    border-style: solid;
    border-width: 7px 5px;
    border-color: #009 #ccf #ccf #009;
    border-color: rgba(0,0,0,0.25) rgba(255,255,255,0.5) 
                    rgba(255,255,255,0.5) rgba(0,0,0,0.25);
}

.heat-map-item:nth-child(1) a { background: hsl(000,100%,95%); }
.heat-map-item:nth-child(2) a { background: hsl(000,100%,50%); }
.heat-map-item:nth-child(3) a { background: hsl(000,100%,10%); }
.heat-map-item:nth-child(4) a { background: hsl(000,100%,3%); }
.heat-map-item:nth-child(5) a { background: hsl(230,100%,50%); }
.heat-map-item:nth-child(6) a { background: hsl(230,100%,70%); }
.heat-map-item:nth-child(7) a { background: hsl(230,100%,90%); }
.heat-map-item:nth-child(8) a { background: hsl(230,100%,50%); }
.heat-map-item:nth-child(9) a { background: hsl(230,100%,70%); }
.heat-map-item:nth-child(10) a{ background: hsl(230,100%,90%); }

JavaScript

var data = [
    [0,0,168.86597938144328,250.00000000000003],
    [168.86597938144328,0,270.6185567010309,127.6595744680851],
    [168.86597938144328,127.6595744680851,270.6185567010309,250],
    [270.6185567010309,0,420,76.08695652173911],
    [270.6185567010309,76.08695652173911,420,148.55072463768113],
    [270.6185567010309,148.55072463768113,323.96907216494844,250],
    [323.96907216494844,148.55072463768113,378.84388807069223,227.4557165861513],
    [378.84388807069223,148.55072463768113,420.00000000000006,227.4557165861513],
    [323.96907216494844,227.4557165861513,371.9845360824741,250],
    [371.9845360824741,227.4557165861513,419.9999999999998,250]
];

var marketNames = [
    'Royal Bank of Scotland Group Plc',
    'RIO TINTO PLC',
    'Lloyds Banking Group Plc',
    'Barr (A.G.) Plc',
    'Marston\'s Plc',
    'Royal Bank of Scotland Group Plc',
    'RIO TINTO PLC',
    'Lloyds Banking Group Plc',
    'Barr (A.G.) Plc',
    'Marston\'s Plc'
];

var jHeatMap = jQuery('<div class="heat-map" />');
jQuery.each(data, function(index, node) {
    var left = Math.floor(node[0]),
        width = Math.floor(node[2]) - left,
        top = Math.floor(node[1]),
        height = Math.floor(node[3]) - top;
    
    if(Math.abs(width + left - 420) <= 1) {
        width = 420 - left;
    }
    
    var jItem = jQuery('<div class="heat-map-item"></div>')
                .css('left',     left)
                .css('top',      top)
                .css('width',    width)
                .css('height',   height)
                .html(jQuery('<a href="#" />').attr('title', marketNames[index]))             
                .appendTo(jHeatMap);

});

jHeatMap.appendTo('body');