D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
owendall
Full window
Github gist
State Heap Map - All States - Using GeoChart API (SVG Rendered) Version
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="https://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="https://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>
Modified
http://www.google.com/jsapi
to a secure url
https://www.google.com/jsapi