Blog : Heatmap jQuery plugin
Heatmap jQuery plugin
Heatmap jQuery plugin
Purpose
Simple jQuery plugin to display the visualization of proportion data corresponding to geometry locations.
Demonstration
Average income
Area Amount
Los Angles 2.5
Georgia 1.5
New York 3.2
Washington 2.2
Colorado 1.2
Dallas 2.1
How to use
Add jQuery library into <head> section:
?
1
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
Add heatmap plugin into <head> section:
?
1
<script type="text/javascript" src="heatmap.js"></script>
Define your source data table:
<table id="source">
<caption>Average income</caption>
<thead>
<tr>
<th>Area</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<th class="source">Los Angles</td>
<td class="value">2.5</td>
</tr>
<tr>
<th class="source">Georgia</td>
<td class="value">1.5</td>
</tr>
<tr>
<th class="source">New York</td>
<td class="value">3.2</td>
</tr>
<tr>
<th class="source">Washington</td>
<td class="value">2.2</td>
</tr>
<tr>
<th class="source">Colorado</td>
<td class="value">1.2</td>
</tr>
<tr>
<th class="source">Dallas</td>
<td class="value">2.1</td>
</tr>
</tbody>
</table>
Geometry location must be defined in <th> or <td> with css class source.Data must be defined in <th> or <td> with css class value.
Define your target <div> for rendering:
<div id="target" style="width: 600px; height: 400px;">
</div>
Add following code:
?
<script type="text/javascript">
$(function() {
$('#source').heatmap('target', 15);
});
</script>
the second argument (15) is the multiplier used for scaling the heat display on the map.
Source code
https://github.com/hnvcam/heatmap
