Skip to content

Instantly share code, notes, and snippets.

@csessig86

csessig86/us_heroin

Created January 21, 2012 22:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save csessig86/1654250 to your computer and use it in GitHub Desktop.
Save csessig86/1654250 to your computer and use it in GitHub Desktop.
Download ZIP
Map of heroin usage rates in the U.S. Online at: http://wcfcourier.com/app/special/us_heroin/
Raw
us_heroin
# Uses Albert Sun's polygon library - https://github.com/albertsun/gmap-features
<!doctype html>
<head>
<title>WCFCourier.com - Heroin in the U.S.</title>
<style type="text/css">
body { font-family: Arial, sans-serif; }
#map_canvas {
height: 600px;
width: 620px;
border: solid #595454 1px;
}
#legend {
width: 330px;
height: 150px;
font-family: arial, sans-serif;
}
.a_td {
width: 750px;
font-family: arial, sans-serif;
font-size:22px;
font-weight:bold;
}
.b_td {
width: 100px;
}
.c_td {
width: 330px;
}
.d_td {
width: 165px;
}
#legend h3 {font-size:15px; background: url("http://ajax.googleapis.com/ajax/static/modules/gviz/1.0/table/title-bg.gif") repeat-x scroll left bottom #FFFFFF; padding: 6px; text-align: center;}
#legend p {font-size:13px;}
#legend .colors {font-size:13px;}
#legend .colors span {height:20px; width:20px; display:block; float:left; clear:left; margin-right:5px; border: 1px solid #666666;}
#legend .foura {background-color: #F1EEF6;}
#legend .threea {background-color: #D4B9DA;}
#legend .twoa {background-color: #C994C7;}
#legend .onea {background-color: #DF65B0;}
#legend .classa {background-color: #DD1C77;}
#legend .eight {background-color: #980043;}
#chart {
width: 330px;
height: 350px;
}
#chart_text {
width: 330px;
height: 350px;
font-family: arial, sans-serif;
font-size:18px;
text-align: center;
}
#chart_text_small {
width: 330px;
height: 350px;
font-family: arial, sans-serif;
font-size:12px;
text-align: center;
}
#data_text {
font-family: arial, sans-serif;
font-size:14px;
}
.text {
font-size:13px;
font-family: arial, sans-serif;
}
</style>
</head>
<body>
<script type='text/javascript' src='http://stats.townnews.com/shared-content/stats/common/tracker.js'></script>
<script type='text/javascript'>
<!--
if (typeof(TNStats_Tracker) !== 'undefined' && typeof(TNTracker) === 'undefined') { TNTracker = new TNStats_Tracker('wcfcourier.com'); TNTracker.setTrackerDomain('stats.townnews.com'); TNTracker.trackPageView(); }
// -->
</script>
<table>
<tr>
<td class="a_td">Heroin usage in the United States broken down by state</td>
<td class="b_td"><a href="https://twitter.com/share" class="twitter-share-button">Tweet</a></td>
<td class="b_td">
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=148866255208434";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="http://wcfcourier.com/app/special/us_heroin/" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false"></div>
</td>
</tr>
</table>
<table>
<tr>
<td rowspan="2"><div id="map_canvas"></div></td>
<td>
<div id="legend">
<h3>A look at the numbers</h3>
<p class="text">The figures below represent the percentage of people in 2009 who were admitted to a substance abuse treatment center for heroin. Rollover a state for more information on the frequency of heroin cases.</p>
<table class="c_td">
<tr>
<td class="d_td">
<div class="colors">
<span class="foura"></span>0-8%<br/>
<span class="threea"></span>8-16%<br/>
<span class="twoa"></span>16-25%
</div>
</td>
<td class="d_td">
<div class="colors">
<span class="onea"></span>25-33%<br/>
<span class="classa"></span>33-42%<br/>
<span class="eight"></span>42-50%
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td><div id="chart">
<br />
<br />
<br />
<div id="chart_text">
Roll over a state to view statistics dating back to 2005.
<br />
<br />
<br />
<br />
<div id="chart_text_small">
Please wait a moment for the map to load...
</div>
</div>
</div></td>
</tr>
</table>
<div id="data_text">
<p>*Data provided by the <a href="http://www.icpsr.umich.edu/icpsrweb/SAMHDA/series/00056" target="_blank">Substance Abuse and Mental Health Services Administration</a></p>
<p><strong>Note to Internet Explorer users:</strong> The map loads better in other browsers.</p>
</div>
<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script src="js/gmap-features.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" id="script">
google.load('visualization', '1', {'packages':['table']});
function map1() {
var map, features;
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: new google.maps.LatLng(41.5, -456.9),
zoom: 4,
minZoom: 2,
maxZoom: 7,
mapTypeControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.TERRAIN
});
$.getJSON("data/heroin.json", function(data) {
var COLORS = ["#F1EEF6", "#D4B9DA", "#C994C7", "#DF65B0", "#DD1C77", "#980043"];
features = gmap.load_polygons({
map: map,
data: data,
data_type: "json",
getColor: function(data) {
var perc;
if (data.first_freq != 0) {
perc = Number(data.first_freq)/Number(data.first_total);
} else { perc = 0; }
return COLORS[(Math.floor(perc * 12)) % 12];
},
unselected_opts: {
"fillOpacity": .6
},
highlighted_opts: {
strokeWeight: 1.49,
"fillOpacity": 1,
strokeColor: "#8B0000"
},
selected_opts: {
"fillOpacity": .6,
strokeWeight: 1.49,
strokeColor: "#8B0000"
},
highlightCallback: function(e) {
var state_name = this.fields.state_name + "";
var first_freq = this.fields.first_freq + "";
var first_per = this.fields.first_per + "";
var first_total = this.fields.first_total + "";
var second_freq = this.fields.second_freq + "";
var second_per = this.fields.second_per + "";
var second_total = this.fields.second_total + "";
var third_freq = this.fields.third_freq + "";
var third_per = this.fields.third_per + "";
var third_total = this.fields.third_total + "";
var fourth_freq = this.fields.fourth_freq + "";
var fourth_per = this.fields.fourth_per + "";
var fourth_total = this.fields.fourth_total + "";
var fifth_freq = this.fields.fifth_freq + "";
var fifth_per = this.fields.fifth_per + "";
var fifth_total = this.fields.fifth_total + "";
selected_district(state_name, first_freq, first_per, first_total, second_freq, second_per, second_total, third_freq, third_per, third_total, fourth_freq, fourth_per, fourth_total, fifth_freq, fifth_per, fifth_total);
}
});
});
function selected_district(state_name, first_freq, first_per, first_total, second_freq, second_per, second_total, third_freq, third_per, third_total, fourth_freq, fourth_per, fourth_total, fifth_freq, fifth_per, fifth_total) {
var data = new google.visualization.DataTable();
data.addColumn('string', state_name);
data.addColumn('string', 'Figures');
data.addRows([
['2009 - Frequency of heroin cases', numberFormat(first_freq)],
['- Total drug cases', numberFormat(first_total)],
['- Percentage', first_per + '%'],
['2008 - Frequency of heroin cases', numberFormat(second_freq)],
['- Total drug cases', numberFormat(second_total)],
['- Percentage', second_per + '%'],
['2007 - Frequency of heroin cases', numberFormat(third_freq)],
['- Total drug cases', numberFormat(third_total)],
['- Percentage', third_per + '%'],
['2006 - Frequency of heroin cases', numberFormat(fourth_freq)],
['- Total drug cases', numberFormat(fourth_total)],
['- Percentage', fourth_per + '%'],
['2005 - Frequency of heroin cases', numberFormat(fifth_freq)],
['- Total drug cases', numberFormat(fifth_total)],
['- Percentage', fifth_per + '%']
]);
var chart = new google.visualization.Table(document.getElementById('chart'));
chart.draw(data);
}
}
function numberFormat(nStr){
nStr += '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1))
x1 = x1.replace(rgx, '$1' + ',' + '$2');
return x1 + x2;
}
function initialize() {
map1();
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment