Skip to content

Instantly share code, notes, and snippets.

@ramnathv
Last active June 19, 2017 19:28
Show Gist options
  • Save ramnathv/8936426 to your computer and use it in GitHub Desktop.
Save ramnathv/8936426 to your computer and use it in GitHub Desktop.
Customizing Popup in DataMaps

This is a short demo on how to customize the popup on hover in DataMaps using rMaps (v > 0.1.1)

Let us start by creating a simple choropleth map of crime rates

library(rMaps)
crime2010 = subset(violent_crime, Year == 2010)
choro = ichoropleth(Crime ~ State, data = crime2010)

You can customize the popup using the popupTemplate option in DataMaps. The popupTemplate accepts a function with two arguments. The geography argument pertains to the topojon map file, while the data argument refers to the dataset that has been passed to DataMaps. This function returns a string. In the example below, I have customized the popupTemplate to display the state name using geography.properties.name and the crime rate using data.Crime.

choro$set(geographyConfig = list(
  popupTemplate = "#! function(geography, data){
    return '<div class=hoverinfo><strong>' + geography.properties.name + 
      ': ' + data.Crime + '</strong></div>';
  } !#" 
))

You can also create the popup in R if you are more comfortable doing that.

crime2010 = transform(crime2010, 
  popup = sprintf("<strong>State:</strong> %s <br/><strong>Crime:</strong> %s", 
    State, Crime
  ) 
)

You can now pass this on to popupTemplate.

choro$set(geographyConfig = list(
  popupTemplate = "#! function(geography, data){
    return '<div class=hoverinfo>' + data.popup + '</div>';
  } !#" 
))
choro

I plan to make it simpler to handle popups in the next version of rMaps, so that you will be able to pass a mustache template and not have to bother with javascript.

<!doctype HTML>
<meta charset = 'utf-8'>
<html>
<head>
<script src='http://d3js.org/d3.v3.min.js' type='text/javascript'></script>
<script src='http://d3js.org/topojson.v1.min.js' type='text/javascript'></script>
<script src='http://datamaps.github.io/scripts/datamaps.all.min.js' type='text/javascript'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.min.js' type='text/javascript'></script>
<style>
.rChart {
display: block;
margin-left: auto;
margin-right: auto;
width: 800px;
height: 400px;
}
#disqus_thread{
padding-top: 100px;
}
</style>
</head>
<body >
<div id = 'chartb9fd59e2efd0' class = 'rChart datamaps'></div>
<script id='popup-template' type='text/x-handlebars-template'>
</script>
<script>
var chartParams = {
"dom": "chartb9fd59e2efd0",
"width": 800,
"height": 400,
"scope": "usa",
"fills": {
"(122,247]": "#EFF3FF",
"(247,297]": "#BDD7E7",
"(297,384]": "#6BAED6",
"(384,493]": "#3182BD",
"(493,661]": "#08519C"
},
"legend": true,
"labels": true,
"data": {
"AK": {
"Year": 2010,
"State": "AK",
"Crime": 638.8,
"fillKey": "(493,661]"
},
"AL": {
"Year": 2010,
"State": "AL",
"Crime": 377.8,
"fillKey": "(297,384]"
},
"AR": {
"Year": 2010,
"State": "AR",
"Crime": 505.3,
"fillKey": "(493,661]"
},
"AZ": {
"Year": 2010,
"State": "AZ",
"Crime": 408.1,
"fillKey": "(384,493]"
},
"CA": {
"Year": 2010,
"State": "CA",
"Crime": 440.6,
"fillKey": "(384,493]"
},
"CO": {
"Year": 2010,
"State": "CO",
"Crime": 320.8,
"fillKey": "(297,384]"
},
"CT": {
"Year": 2010,
"State": "CT",
"Crime": 281.4,
"fillKey": "(247,297]"
},
"DE": {
"Year": 2010,
"State": "DE",
"Crime": 620.9,
"fillKey": "(493,661]"
},
"FL": {
"Year": 2010,
"State": "FL",
"Crime": 542.4,
"fillKey": "(493,661]"
},
"GA": {
"Year": 2010,
"State": "GA",
"Crime": 403.3,
"fillKey": "(384,493]"
},
"HI": {
"Year": 2010,
"State": "HI",
"Crime": 262.7,
"fillKey": "(247,297]"
},
"IA": {
"Year": 2010,
"State": "IA",
"Crime": 273.5,
"fillKey": "(247,297]"
},
"ID": {
"Year": 2010,
"State": "ID",
"Crime": 221,
"fillKey": "(122,247]"
},
"IL": {
"Year": 2010,
"State": "IL",
"Crime": 435.2,
"fillKey": "(384,493]"
},
"IN": {
"Year": 2010,
"State": "IN",
"Crime": 314.5,
"fillKey": "(297,384]"
},
"KS": {
"Year": 2010,
"State": "KS",
"Crime": 369.1,
"fillKey": "(297,384]"
},
"KY": {
"Year": 2010,
"State": "KY",
"Crime": 242.6,
"fillKey": "(122,247]"
},
"LA": {
"Year": 2010,
"State": "LA",
"Crime": 549,
"fillKey": "(493,661]"
},
"MA": {
"Year": 2010,
"State": "MA",
"Crime": 466.6,
"fillKey": "(384,493]"
},
"MD": {
"Year": 2010,
"State": "MD",
"Crime": 547.7,
"fillKey": "(493,661]"
},
"ME": {
"Year": 2010,
"State": "ME",
"Crime": 122,
"fillKey": null
},
"MI": {
"Year": 2010,
"State": "MI",
"Crime": 490.3,
"fillKey": "(384,493]"
},
"MN": {
"Year": 2010,
"State": "MN",
"Crime": 236,
"fillKey": "(122,247]"
},
"MO": {
"Year": 2010,
"State": "MO",
"Crime": 455,
"fillKey": "(384,493]"
},
"MS": {
"Year": 2010,
"State": "MS",
"Crime": 269.7,
"fillKey": "(247,297]"
},
"MT": {
"Year": 2010,
"State": "MT",
"Crime": 272.2,
"fillKey": "(247,297]"
},
"NC": {
"Year": 2010,
"State": "NC",
"Crime": 363.4,
"fillKey": "(297,384]"
},
"ND": {
"Year": 2010,
"State": "ND",
"Crime": 225,
"fillKey": "(122,247]"
},
"NE": {
"Year": 2010,
"State": "NE",
"Crime": 279.5,
"fillKey": "(247,297]"
},
"NH": {
"Year": 2010,
"State": "NH",
"Crime": 167,
"fillKey": "(122,247]"
},
"NJ": {
"Year": 2010,
"State": "NJ",
"Crime": 307.7,
"fillKey": "(297,384]"
},
"NM": {
"Year": 2010,
"State": "NM",
"Crime": 588.9,
"fillKey": "(493,661]"
},
"NV": {
"Year": 2010,
"State": "NV",
"Crime": 660.6,
"fillKey": "(493,661]"
},
"NY": {
"Year": 2010,
"State": "NY",
"Crime": 392.1,
"fillKey": "(384,493]"
},
"OH": {
"Year": 2010,
"State": "OH",
"Crime": 315.2,
"fillKey": "(297,384]"
},
"OK": {
"Year": 2010,
"State": "OK",
"Crime": 479.5,
"fillKey": "(384,493]"
},
"OR": {
"Year": 2010,
"State": "OR",
"Crime": 252,
"fillKey": "(247,297]"
},
"PA": {
"Year": 2010,
"State": "PA",
"Crime": 366.2,
"fillKey": "(297,384]"
},
"RI": {
"Year": 2010,
"State": "RI",
"Crime": 256.6,
"fillKey": "(247,297]"
},
"SC": {
"Year": 2010,
"State": "SC",
"Crime": 597.7,
"fillKey": "(493,661]"
},
"SD": {
"Year": 2010,
"State": "SD",
"Crime": 268.5,
"fillKey": "(247,297]"
},
"TN": {
"Year": 2010,
"State": "TN",
"Crime": 613.3,
"fillKey": "(493,661]"
},
"TX": {
"Year": 2010,
"State": "TX",
"Crime": 450.3,
"fillKey": "(384,493]"
},
"UT": {
"Year": 2010,
"State": "UT",
"Crime": 212.7,
"fillKey": "(122,247]"
},
"VA": {
"Year": 2010,
"State": "VA",
"Crime": 213.6,
"fillKey": "(122,247]"
},
"VT": {
"Year": 2010,
"State": "VT",
"Crime": 130.2,
"fillKey": "(122,247]"
},
"WA": {
"Year": 2010,
"State": "WA",
"Crime": 313.8,
"fillKey": "(297,384]"
},
"WI": {
"Year": 2010,
"State": "WI",
"Crime": 248.7,
"fillKey": "(247,297]"
},
"WV": {
"Year": 2010,
"State": "WV",
"Crime": 314.6,
"fillKey": "(297,384]"
},
"WY": {
"Year": 2010,
"State": "WY",
"Crime": 195.9,
"fillKey": "(122,247]"
}
},
"geographyConfig": {
"popupTemplate": function(geography, data){
return '<div class=hoverinfo><strong>' + geography.properties.name +
': ' + data.Crime + '</strong></div>';
}
},
"id": "chartb9fd59e2efd0"
}
chartParams.element = document.getElementById('chartb9fd59e2efd0')
var mapchartb9fd59e2efd0 = new Datamap(chartParams);
// draw a bubble map if specified
if (chartParams.bubbles) {
var bubbles = chartParams.bubbles
mapchartb9fd59e2efd0.bubbles(bubbles)
}
if (chartParams.labels){
mapchartb9fd59e2efd0.labels()
}
if (chartParams.legend){
mapchartb9fd59e2efd0.legend()
}
setProjection = function( element, options ) {
var projection, path;
projection = d3.geo.albersUsa()
.scale(element.offsetWidth)
.translate([element.offsetWidth / 2, element.offsetHeight / 2]);
path = d3.geo.path()
.projection( projection );
return {path: path, projection: projection};
}
</script>
<style>
.datamaps {
position: relative;
}
</style>
<script></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment