Weekly distribution in block styled visualization.

index.html

<!--
House Hunter By Day, Not So Much After Midnight - Trulia TrendsTrulia Trends
http://www.trulia.com/trends/2011/09/house-hunter-by-day-not-so-much-after-midnight/

House Hunting All Day, Every Day - Trulia Insights
http://www.trulia.com/vis/tru247/
-->
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<div id="legend">
    <ul>
        <li class="c1"></li>
        <li class="c2"></li>
        <li class="c3"></li>
        <li class="c4"></li>
        <li class="c5"></li>
        <li class="c6"></li>
        <li class="c7"></li>
        <li class="c8"></li>
        <li class="c9"></li>
        <li class="c10"></li>
        <li class="c11"></li>
    </ul>
    <p class="more">more traffic</p>
    <p class="less">less traffic</p>
</div>

<div id="vis"></div>

<style type="text/css">
.c1 {
    background-color: #5E4FA2;
}
.c2 {
    background-color: #3288BD;
}
.c3 {
    background-color: #66C2A5;
}
.c4 {
    background-color: #ABDDA4;
}
.c5 {
    background-color: #E6F598;
}
.c6 {
    background-color: #FFFFBF;
}
.c7 {
    background-color: #FEE08B;
}
.c8 {
    background-color: #FDAE61;
}
.c9 {
    background-color: #F46D43;
}
.c10 {
    background-color: #D53E4F;
}
.c11 {
    background-color: #9E0142;
}
#vis {
    clear: all;
    margin-bottom: 20px;
    height: 370px;
    height: 285px;
}
#tiles {
    font-size: 12px;
    clear: both;
}
#tiles th {
    vertical-align: top;
    padding: 3px;
    color: #ccc;
}
th.h7,
th.h8,
th.h9,
th.h10,
th.h11,
th.h12,
th.h13,
th.h14,
th.h15,
th.h16,
th.h17,
th.h18,
th.h19 {
    color: #444 !important;
}
#tiles tr th {
    padding-top: 12px;
}
#tiles tr:first-child th {
    padding-top: 3px;
}
#tiles td {
    -webkit-perspective: 1000;
}
#tiles .tile {
    width: 38px;
    height: 38px;
    position: relative;
    border-radius: 4px;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: 0.7s;
}
#legend {
    clear: left;
    margin-left: 24px;
    width: 165px;
    color: #777;
    margin-top: 10px;
    background: #f3f3f3;
    border: 1px solid #f0f0f0;
    overflow: hidden;
    padding: 5px 7px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    font-size: 11px;
    line-height: 11px;
    margin-bottom: 10px;
    margin-right: 24px;
}
#legend ul {
    list-style-type: none;
    overflow: hidden;
    padding: 0;
    clear: both;
}
#legend li {
    float: left;
    margin-right: 1px;
    width: 14px;
    height: 14px;
}
#legend p {
    margin-top: 3px;
}
#legend p.more {
    float: right;
}
#legend p.less {
    float: left;
}
</style>
<script type="text/javascript">
var buckets = ['c1', 'c2', 'c3', 'c4', 'c5', 'c6', 'c7', 'c8', 'c9', 'c10', 'c11'],
    days = [{
        name: 'Monday',
        abbr: 'Mo'
    }, {
        name: 'Tuesday',
        abbr: 'Tu'
    }, {
        name: 'Wednesday',
        abbr: 'We'
    }, {
        name: 'Thursday',
        abbr: 'Th'
    }, {
        name: 'Friday',
        abbr: 'Fr'
    }, {
        name: 'Saturday',
        abbr: 'Sa'
    }, {
        name: 'Sunday',
        abbr: 'Su'
    }],
    types = {
        all: 'All',
        T: 'Trailer',
        L: 'Large',
        S: 'Small',
        M: 'Motorcycle'
    },
    // hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a', '7a', '8a', '9a', '10a', '11a', '12p', '1p', '2p', '3p', '4p', '5p', '6p', '7p', '8p', '9p', '10p', '11p'];
    hours = ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'];

function createTiles() {

    var html = '<table id="tiles" class="front">';

    // Headers
    html += '<tr><th><div>&nbsp;</div></th>';
    for (var h = 0; h < hours.length; h++) {
        html += '<th class="h' + h + '">' + hours[h] + '</th>';
    }
    html += '</tr>';

    // Hourly data
    for (var d = 0; d < days.length; d++) {
        html += '<tr class="d' + d + '">';
        html += '<th>' + days[d].abbr + '</th>';
        for (var h = 0; h < hours.length; h++) {
            html += '<td id="d' + d + 'h' + h + '" class="d' + d + ' h' + h + '"><div class="tile"></div></td>';
        }
        html += '</tr>';
    }

    html += '</table>';
    d3.select('#vis').html(html);
}

createTiles();

// generate random numbers in 2D array 7*24
var data = [];
for (d = 0; d < days.length; d++) {
    data[d] = [];
    for (h = 0; h < hours.length; h++) {
        data[d][h] = Math.ceil(Math.random() * 11) - 1;
    }
}

// add class change color
for (d = 0; d < days.length; d++) {
    for (h = 0; h < hours.length; h++) {
        $("#d" + d + "h" + h + ">.tile").addClass(buckets[data[d][h]]);
    }
}
</script>