Skip to content

Instantly share code, notes, and snippets.

@markmarkoh

markmarkoh/README.md

Last active October 13, 2015 02:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save markmarkoh/4127517 to your computer and use it in GitHub Desktop.
Save markmarkoh/4127517 to your computer and use it in GitHub Desktop.
Download ZIP
Choropleth, US states, Backbone style
Raw
README.md

This example shows how to create a choropleth map using datamaps.

The data object's keys should be the "id" of the geographical feature. For US states, it's the state initials ('AL' for Alabama, 'NY' for New York).

Each value of the data object should include a fillData key which corresponds to keys in the fills object of the map configuration.

All data passed in via data is passed into the popupTemplate function and all corresponding events.

Events emitted:

  • map-click
  • map-mouseover
  • map-mouseout
  • map-touchstart
Raw
choropleth.js
/* Backbone style execution */
var map = new Map({
scope: 'usa',
el: $('#container1'),
geography_config: {
highlightBorderColor: '#222',
highlightOnHover: true,
popupTemplate: _.template('<div class="hoverinfo"><strong><%= geography.properties.name %></strong> <% if (data.electoralVotes) { %><hr/> Electoral Votes: <%= data.electoralVotes %> <% } %></div>')
},
fills: {
'REP': '#CC4731',
'DEM': '#306596',
'HEAVY_DEM': '#667FAF',
'LIGHT_DEM': '#A9C0DE',
'HEAVY_REP': '#CA5E5B',
'LIGHT_REP': '#EAA9A8',
defaultFill: '#EDDC4E'
},
data: {
"AZ": {
"fillKey": "REP",
"electoralVotes": 5
},
"CO": {
"fillKey": "LIGHT_DEM",
"electoralVotes": 5
},
"DE": {
"fillKey": "DEM",
"electoralVotes": 32
},
"FL": {
"fillKey": "UNDECIDED",
"electoralVotes": 29
},
"GA": {
"fillKey": "REP",
"electoralVotes": 32
},
"HI": {
"fillKey": "DEM",
"electoralVotes": 32
},
"ID": {
"fillKey": "REP",
"electoralVotes": 32
},
"IL": {
"fillKey": "DEM",
"electoralVotes": 32
},
"IN": {
"fillKey": "REP",
"electoralVotes": 11
},
"IA": {
"fillKey": "LIGHT_DEM",
"electoralVotes": 11
},
"KS": {
"fillKey": "REP",
"electoralVotes": 32
},
"KY": {
"fillKey": "REP",
"electoralVotes": 32
},
"LA": {
"fillKey": "REP",
"electoralVotes": 32
},
"MD": {
"fillKey": "DEM",
"electoralVotes": 32
},
"ME": {
"fillKey": "DEM",
"electoralVotes": 32
},
"MA": {
"fillKey": "DEM",
"electoralVotes": 32
},
"MN": {
"fillKey": "DEM",
"electoralVotes": 32
},
"MI": {
"fillKey": "DEM",
"electoralVotes": 32
},
"MS": {
"fillKey": "REP",
"electoralVotes": 32
},
"MO": {
"fillKey": "REP",
"electoralVotes": 13
},
"MT": {
"fillKey": "REP",
"electoralVotes": 32
},
"NC": {
"fillKey": "LIGHT_REP",
"electoralVotes": 32
},
"NE": {
"fillKey": "REP",
"electoralVotes": 32
},
"NV": {
"fillKey": "HEAVY_DEM",
"electoralVotes": 32
},
"NH": {
"fillKey": "LIGHT_DEM",
"electoralVotes": 32
},
"NJ": {
"fillKey": "DEM",
"electoralVotes": 32
},
"NY": {
"fillKey": "DEM",
"electoralVotes": 32
},
"ND": {
"fillKey": "REP",
"electoralVotes": 32
},
"NM": {
"fillKey": "DEM",
"electoralVotes": 32
},
"OH": {
"fillKey": "UNDECIDED",
"electoralVotes": 32
},
"OK": {
"fillKey": "REP",
"electoralVotes": 32
},
"OR": {
"fillKey": "DEM",
"electoralVotes": 32
},
"PA": {
"fillKey": "DEM",
"electoralVotes": 32
},
"RI": {
"fillKey": "DEM",
"electoralVotes": 32
},
"SC": {
"fillKey": "REP",
"electoralVotes": 32
},
"SD": {
"fillKey": "REP",
"electoralVotes": 32
},
"TN": {
"fillKey": "REP",
"electoralVotes": 32
},
"TX": {
"fillKey": "REP",
"electoralVotes": 32
},
"UT": {
"fillKey": "REP",
"electoralVotes": 32
},
"WI": {
"fillKey": "DEM",
"electoralVotes": 32
},
"VA": {
"fillKey": "LIGHT_DEM",
"electoralVotes": 32
},
"VT": {
"fillKey": "DEM",
"electoralVotes": 32
},
"WA": {
"fillKey": "DEM",
"electoralVotes": 32
},
"WV": {
"fillKey": "REP",
"electoralVotes": 32
},
"WY": {
"fillKey": "REP",
"electoralVotes": 32
},
"CA": {
"fillKey": "DEM",
"electoralVotes": 32
},
"CT": {
"fillKey": "DEM",
"electoralVotes": 32
},
"AK": {
"fillKey": "REP",
"electoralVotes": 32
},
"AR": {
"fillKey": "REP",
"electoralVotes": 32
},
"AL": {
"fillKey": "REP",
"electoralVotes": 32
}
}
});
map.render();
Raw
index.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="container1" style="height: 500px; width: 960px"></div>
<!-- Datamaps Source -->
<script src="http://datamaps.github.com/scripts/datamaps-all.js"></script>
<!-- Specs -->
<!-- Map Generating Function -->
<script src="choropleth.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36315921-1']);
_gaq.push(['_setDomainName', 'bl.ocks.org']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment