テーブルの数値にヒートマップ効果を加える

Result

jQuery

$(document).ready(function() {
    // 配列内の最大値を取得する関数
    Array.max = function(array) {
        return Math.max.apply(Math, array);
    };
    // すべての値を取得
    var counts = $('#heat-map-3 tbody td').not('.stats-title').map(function() {
        return parseInt($(this).text());
    }).get();
    // 最大値を返す
    var max = Array.max(counts);
    // 色を指定する
    xr = 255;
    xg = 255;
    xb = 255;

    yr = 78;
    yg = 204;
    yb = 243;

    n = 100;
    // 各データポイントをループして、その％の値を計算する
    $('#heat-map-3 tbody td').not('.stats-title').each(function() {
        var val = parseInt($(this).text());
        var pos = parseInt((Math.round((val / max) * 100)).toFixed(0));
        red = parseInt((xr + ((pos * (yr - xr)) / (n - 1))).toFixed(0));
        green = parseInt((xg + ((pos * (yg - xg)) / (n - 1))).toFixed(0));
        blue = parseInt((xb + ((pos * (yb - xb)) / (n - 1))).toFixed(0));
        clr = 'rgb(' + red + ',' + green + ',' + blue + ')';
        $(this).css({
            backgroundColor: clr
        });
    });
});

css

#heat-map-3{margin-top:15px;}
.heat-map {
    border: 1px solid #ccc; 
    margin: 0 auto 20px auto; 
    width: 640px;
}

.heat-map tr th {
    padding: 5px 7px; 
    border-right: 1px solid #ccc; 
    border-bottom: 1px solid #ccc; 
    border-top: 1px solid #fff; 
    border-left: 1px solid #fff; 
    text-shadow: 0 1px 0 #fff; 
    font: bold 11px Arial, sans-serif; 
    text-transform: uppercase; 
    color: #000;
    background-color: #F1F1F1;
    background-image: -moz-linear-gradient(center top , #F9F9F9, #ECECEC);
}

.heat-map tr th.last {border-right: none;}

.heat-map tr th.first, 
.heat-map tr td.stats-title {
    border-left: none; 
    text-align: left;
}

.heat-map tr td {
    padding: 5px 7px; 
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    text-align right; 
    color: #000; 
    font-size: 11px;
}

tr.stats-row {text-align: right;}

.heat-map tr.stats-row td.stats-title {
    text-align: left; 
    color: #111; 
    font-size: 13px; 
    text-shadow: 0 1px 0 #fff; 
    background: #efefef; 
    border-top: 1px solid #fff; 
    border-bottom: 1px solid #ccc;  
    border-right: 1px solid #ccc;
}

.heat-map tr.stats-row td.stats-title.last {border-bottom: 1px solid #fff;}

html

<table cellpadding="0" cellspacing="0" border="0" class="heat-map" id="heat-map-3">
<thead>
<tr>
  <th class="first">都道府県</th><th>データ1</th><th>データ2</th><th>データ3</th><th>データ4</th><th>データ5</th><th class="last">データ6</th></tr>
</thead>
<tbody>
<tr class="stats-row">
    <td class="stats-title">東京</td><td>1</td><td>55</td><td>26</td><td>19</td><td>39</td><td>21</td>
</tr>
<tr class="stats-row">
    <td class="stats-title">大阪</td><td>50</td><td>27</td><td>13</td><td>4</td><td>38</td><td>22</td>
</tr>
<tr class="stats-row">
    <td class="stats-title">新潟</td><td>3</td><td>52</td><td>35</td><td>11</td><td>20</td><td>2</td>
</tr>
<tr class="stats-row">
    <td class="stats-title">千葉</td><td>31</td><td>34</td><td>15</td><td>25</td><td>14</td><td>21</td>
</tr>
<tr class="stats-row">
    <td class="stats-title">静岡</td><td>36</td><td>65</td><td>33</td><td>2</td><td>35</td><td>8</td>
</tr>
<tr class="stats-row">
    <td class="stats-title">京都</td><td>41</td><td>17</td><td>27</td><td>16</td><td>32</td><td>21</td>
</tr>
<tr class="stats-row">
    <td class="stats-title">石川</td><td>32</td><td>59</td><td>17</td><td>20</td><td>31</td><td>4</td>
</tr>
<tr class="stats-row">
    <td class="stats-title">和歌山</td><td>53</td><td>14</td><td>4</td><td>16</td><td>33</td><td>11</td>
</tr>
<tr class="stats-row">
    <td class="stats-title">鳥取</td><td>46</td><td>25</td><td>3</td><td>15</td><td>22</td><td>19</td>
</tr>
<tr class="stats-row">
    <td class="stats-title">青森</td><td>8</td><td>11</td><td>9</td><td>28</td><td>24</td><td>18</td>
</tr>
<tr class="stats-row">
    <td class="stats-title">富山</td><td>6</td><td>49</td><td>1</td><td>22</td><td>30</td><td>10</td>
</tr>
<tr class="stats-row">
    <td class="stats-title">福島</td><td>16</td><td>39</td><td>14</td><td>7</td><td>35</td><td>10</td>
</tr>
<tr class="stats-row">
    <td class="stats-title">栃木</td><td>30</td><td>58</td><td>44</td><td>11</td><td>19</td><td>2</td>
</tr>
    </tbody>
</table>

via

jQuery Tutorial – Create a Flexible Data Heat Map