Skip to content

Instantly share code, notes, and snippets.

@owendall

owendall/index.html

Created May 12, 2012 19:19
Show Gist options
  • Save owendall/2668330 to your computer and use it in GitHub Desktop.
Save owendall/2668330 to your computer and use it in GitHub Desktop.
Download ZIP
State Heap Map - All States - Using GeoChart API (SVG Rendered) Version
Raw
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Google Visualization API Sample</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['geochart']});
/** 2012-05-12: Data are draft and not for publication **/
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'State');
data.addColumn('number', 'Dollars');
data.addRow(['US-AL',0]);
data.addRow(['US-AK',0]);
data.addRow(['US-AZ',0]);
data.addRow(['US-AR',449993]);
data.addRow(['US-CA',5713277]);
data.addRow(['US-CO',3071108]);
data.addRow(['US-CT',0]);
data.addRow(['US-DE',0]);
data.addRow(['US-DC',0]);
data.addRow(['US-FL',2786576]);
data.addRow(['US-GA',2136936]);
data.addRow(['US-HI',0]);
data.addRow(['US-ID',7815523]);
data.addRow(['US-IL',2800000]);
data.addRow(['US-IN',0]);
data.addRow(['US-IA',0]);
data.addRow(['US-KS',690000]);
data.addRow(['US-KY',999964]);
data.addRow(['US-LA',791866]);
data.addRow(['US-ME',6597251]);
data.addRow(['US-MD',0]);
data.addRow(['US-MA',0]);
data.addRow(['US-MI',376616]);
data.addRow(['US-MN',10463387]);
data.addRow(['US-MS',1409011]);
data.addRow(['US-MO',0]);
data.addRow(['US-MT',990500]);
data.addRow(['US-NE',2041969.81]);
data.addRow(['US-NV',0]);
data.addRow(['US-NH',1861488]);
data.addRow(['US-NJ',971799]);
data.addRow(['US-NM',1286768]);
data.addRow(['US-NY',3466933]);
data.addRow(['US-NC',5168873]);
data.addRow(['US-ND',0]);
data.addRow(['US-OH',6160677]);
data.addRow(['US-OK',4883011]);
data.addRow(['US-OR',254274]);
data.addRow(['US-PA',2502642]);
data.addRow(['US-RI',0]);
data.addRow(['US-SC',894203]);
data.addRow(['US-SD',0]);
data.addRow(['US-TN',1801169]);
data.addRow(['US-TX',1316388]);
data.addRow(['US-UT',761386]);
data.addRow(['US-VT',746913]);
data.addRow(['US-VA',656526]);
data.addRow(['US-WA',1839909]);
data.addRow(['US-WV',0]);
data.addRow(['US-WI',2000000]);
data.addRow(['US-WY',0]);
data.addRow(['US-AS',0]);
data.addRow(['US-GU',0]);
data.addRow(['US-MP',0]);
data.addRow(['US-PR',0]);
data.addRow(['US-VI',0]);
var formatter = new google.visualization.NumberFormat({prefix: '$', fractionDigits: 0});
formatter.format(data, 1); // Apply formatter to second column
var stateHeatMap = new google.visualization.GeoChart(document.getElementById('visualization'));
stateHeatMap.draw(data, {width: 960, height: 500, region: 'US', resolution: 'provinces', legend: {numberFormat: '$,###', textStyle: {color: 'blue', fontSize: 16}} });
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization"></div>
</body>
</html>
@scottstr89
Copy link

Do you know if there is a way to display 2 regions? I need to display Canada.
Also do you know is it possible to get ride of the legend on the bottom?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment