World DataMaps with Tabular Information on mouse Hover

World DataMaps with Tabular Info on Hover, Popup

Created By: Debasis Das (25-Dec-2014)

In this article we will load a world map using D3 DataMaps

The list of countries as per datamaps.world.min.js is listed in the data parameter in the below code.

KStack_Datamap_World

<!DOCTYPE html>
<html>
<head>
<style>
</style>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="http://datamaps.github.io/scripts/datamaps.world.min.js"></script>


<body>
	<div class="panel-content" id="container" style="width:1024px; height: 650px; border:solid 1px; border-color:#aaaaaa">
	</div>
<script>
    var map = new Datamap({
    element: document.getElementById("container"),
    geographyConfig: {
    	highlightBorderColor: '#000000',
    	popupTemplate: function(geography, data) {
		    	if ( !data ) return; //IF no data is present, nothing will be displayed in the hover
				return '<div class="hoverinfo"><strong>' + '<table class="table-example" style="width:300px"><tr><td>Country:</td><td>'+ data.name +'</td></tr><tr><td>Capital:</td><td>'+ data.Capital +'</td></tr><tr><td>LargestCity:</td><td>'+ data.LargestCity +'</td></tr><tr><td>President:</td><td>'+ data.President +'</td></tr><tr><td>Area:</td><td>'+ data.Area +'</td></tr><tr><td>Population:</td><td>'+ data.Population +'</td></tr><tr><td>GDP:</td><td>'+ data.GDP +'</td></tr></table>'+'</div>'
    	},
    	borderColor:'#444444',
    	highlightBorderWidth: 2
    	},
		data: {	
		"USA":{
				"name":"United States of America",
				"id":"USA",
				"fillKey":"whiteColor",
				"Capital": "Washington DC",
				"LargestCity": "New York City",
				"President": "Barack Obama",
				"Area": "3,805,927 Square Miles",
				"Population":319309000,
				"GDP":"$16.768 trillion",
				"Others":"Others"
			   },
		"AFG":{"name":"Afghanistan","id":"AFG","fillKey":"neutralColor"},
		"AGO":{"name":"Angola","id":"AGO","fillKey":"neutralColor"},
		"ALB":{"name":"Albania","id":"ALB","fillKey":"neutralColor"},
		"ARE":{"name":"United Arab Emirates","id":"ARE","fillKey":"neutralColor"},
		"ARG":{"name":"Argentina","id":"ARG","fillKey":"neutralColor"},
		"ARM":{"name":"Armenia","id":"ARM","fillKey":"neutralColor"},
		"ATA":{"name":"Antarctica","id":"ATA","fillKey":"neutralColor"},
		"ATF":{"name":"French Southern and Antarctic Lands","id":"ATF","fillKey":"neutralColor"},
		"AUS":{"name":"Australia","id":"AUS","fillKey":"redColor"},
		"AUT":{"name":"Austria","id":"AUT","fillKey":"neutralColor"},
		"AZE":{"name":"Azerbaijan","id":"AZE","fillKey":"neutralColor"},
		"BDI":{"name":"Burundi","id":"BDI","fillKey":"neutralColor"},
		"BEL":{"name":"Belgium","id":"BEL","fillKey":"neutralColor"},
		"BEN":{"name":"Benin","id":"BEN","fillKey":"neutralColor"},
		"BFA":{"name":"Burkina Faso","id":"BFA","fillKey":"neutralColor"},
		"BGD":{"name":"Bangladesh","id":"BGD","fillKey":"neutralColor"},
		"BGR":{"name":"Bulgaria","id":"BGR","fillKey":"neutralColor"},
		"BHS":{"name":"The Bahamas","id":"BHS","fillKey":"neutralColor"},
		"BIH":{"name":"Bosnia and Herzegovina","id":"BIH","fillKey":"neutralColor"},
		"BLR":{"name":"Belarus","id":"BLR","fillKey":"neutralColor"},
		"BLZ":{"name":"Belize","id":"BLZ","fillKey":"neutralColor"},
		"BOL":{"name":"Bolivia","id":"BOL","fillKey":"neutralColor"},
		"BRA":{"name":"Brazil","id":"BRA","fillKey":"yellowColor"},
		"BRN":{"name":"Brunei","id":"BRN","fillKey":"neutralColor"},
		"BTN":{"name":"Bhutan","id":"BTN","fillKey":"neutralColor"},
		"BWA":{"name":"Botswana","id":"BWA","fillKey":"neutralColor"},
		"CAF":{"name":"Central African Republic","id":"CAF","fillKey":"neutralColor"},
		"CAN":{"name":"Canada","id":"CAN","fillKey":"pinkColor"},
		"CHE":{"name":"Switzerland","id":"CHE","fillKey":"yellowColor"},
		"CHL":{"name":"Chile","id":"CHL","fillKey":"pinkColor"},
		"CHN":{"name":"China","id":"CHN","fillKey":"whiteColor"},
		"CIV":{"name":"Ivory Coast","id":"CIV","fillKey":"neutralColor"},
		"CMR":{"name":"Cameroon","id":"CMR","fillKey":"neutralColor"},
		"COD":{"name":"Democratic Republic of the Congo","id":"COD","fillKey":"neutralColor"},
		"COG":{"name":"Republic of the Congo","id":"COG","fillKey":"neutralColor"},
		"COL":{"name":"Colombia","id":"COL","fillKey":"greenColor"},
		"CRI":{"name":"Costa Rica","id":"CRI","fillKey":"neutralColor"},
		"CUB":{"name":"Cuba","id":"CUB","fillKey":"neutralColor"},
		"-99":{"name":"Northern Cyprus","id":"-99","fillKey":"neutralColor"},
		"CYP":{"name":"Cyprus","id":"CYP","fillKey":"neutralColor"},
		"CZE":{"name":"Czech Republic","id":"CZE","fillKey":"pinkColor"},
		"DEU":{"name":"Germany","id":"DEU","fillKey":"neutralColor"},
		"DJI":{"name":"Djibouti","id":"DJI","fillKey":"neutralColor"},
		"DNK":{"name":"Denmark","id":"DNK","fillKey":"yellowColor"},
		"DOM":{"name":"Dominican Republic","id":"DOM","fillKey":"neutralColor"},
		"DZA":{"name":"Algeria","id":"DZA","fillKey":"neutralColor"},
		"ECU":{"name":"Ecuador","id":"ECU","fillKey":"neutralColor"},
		"EGY":{"name":"Egypt","id":"EGY","fillKey":"neutralColor"},
		"ERI":{"name":"Eritrea","id":"ERI","fillKey":"neutralColor"},
		"ESP":{"name":"Spain","id":"ESP","fillKey":"neutralColor"},
		"EST":{"name":"Estonia","id":"EST","fillKey":"neutralColor"},
		"ETH":{"name":"Ethiopia","id":"ETH","fillKey":"neutralColor"},
		"FIN":{"name":"Finland","id":"FIN","fillKey":"neutralColor"},
		"FJI":{"name":"Fiji","id":"FJI","fillKey":"neutralColor"},
		"FLK":{"name":"Falkland Islands","id":"FLK","fillKey":"neutralColor"},
		"FRA":{"name":"France","id":"FRA","fillKey":"neutralColor"},
		"GUF":{"name":"French Guiana","id":"GUF","fillKey":"neutralColor"},
		"GAB":{"name":"Gabon","id":"GAB","fillKey":"neutralColor"},
		"GBR":{"name":"United Kingdom","id":"GBR","fillKey":"yellowColor"},
		"GEO":{"name":"Georgia","id":"GEO","fillKey":"neutralColor"},
		"GHA":{"name":"Ghana","id":"GHA","fillKey":"neutralColor"},
		"GIN":{"name":"Guinea","id":"GIN","fillKey":"neutralColor"},
		"GMB":{"name":"Gambia","id":"GMB","fillKey":"neutralColor"},
		"GNB":{"name":"Guinea Bissau","id":"GNB","fillKey":"neutralColor"},
		"GNQ":{"name":"Equatorial Guinea","id":"GNQ","fillKey":"neutralColor"},
		"GRC":{"name":"Greece","id":"GRC","fillKey":"neutralColor"},
		"GRL":{"name":"Greenland","id":"GRL","fillKey":"neutralColor"},
		"GTM":{"name":"Guatemala","id":"GTM","fillKey":"neutralColor"},
		"GUY":{"name":"Guyana","id":"GUY","fillKey":"neutralColor"},
		"HND":{"name":"Honduras","id":"HND","fillKey":"neutralColor"},
		"HRV":{"name":"Croatia","id":"HRV","fillKey":"neutralColor"},
		"HTI":{"name":"Haiti","id":"HTI","fillKey":"neutralColor"},
		"HUN":{"name":"Hungary","id":"HUN","fillKey":"pinkColor"},
		"IDN":{"name":"Indonesia","id":"IDN","fillKey":"neutralColor"},
		"IND":{"name":"India","id":"IND","fillKey":"pinkColor"},
		"IRL":{"name":"Ireland","id":"IRL","fillKey":"neutralColor"},
		"IRN":{"name":"Iran","id":"IRN","fillKey":"neutralColor"},
		"IRQ":{"name":"Iraq","id":"IRQ","fillKey":"neutralColor"},
		"ISL":{"name":"Iceland","id":"ISL","fillKey":"neutralColor"},
		"ISR":{"name":"Israel","id":"ISR","fillKey":"neutralColor"},
		"ITA":{"name":"Italy","id":"ITA","fillKey":"neutralColor"},
		"JAM":{"name":"Jamaica","id":"JAM","fillKey":"neutralColor"},
		"JOR":{"name":"Jordan","id":"JOR","fillKey":"neutralColor"},
		"JPN":{"name":"Japan","id":"JPN","fillKey":"redColor"},
		"KAZ":{"name":"Kazakhstan","id":"KAZ","fillKey":"neutralColor"},
		"KEN":{"name":"Kenya","id":"KEN","fillKey":"neutralColor"},
		"KGZ":{"name":"Kyrgyzstan","id":"KGZ","fillKey":"neutralColor"},
		"KHM":{"name":"Cambodia","id":"KHM","fillKey":"neutralColor"},
		"KOR":{"name":"South Korea","id":"KOR","fillKey":"yellowColor"},
		"-99":{"name":"Kosovo","id":"-99","fillKey":"neutralColor"},
		"KWT":{"name":"Kuwait","id":"KWT","fillKey":"neutralColor"},
		"LAO":{"name":"Laos","id":"LAO","fillKey":"neutralColor"},
		"LBN":{"name":"Lebanon","id":"LBN","fillKey":"neutralColor"},
		"LBR":{"name":"Liberia","id":"LBR","fillKey":"neutralColor"},
		"LBY":{"name":"Libya","id":"LBY","fillKey":"neutralColor"},
		"LKA":{"name":"Sri Lanka","id":"LKA","fillKey":"neutralColor"},
		"LSO":{"name":"Lesotho","id":"LSO","fillKey":"neutralColor"},
		"LTU":{"name":"Lithuania","id":"LTU","fillKey":"neutralColor"},
		"LUX":{"name":"Luxembourg","id":"LUX","fillKey":"neutralColor"},
		"LVA":{"name":"Latvia","id":"LVA","fillKey":"neutralColor"},
		"MAR":{"name":"Morocco","id":"MAR","fillKey":"neutralColor"},
		"MDA":{"name":"Moldova","id":"MDA","fillKey":"neutralColor"},
		"MDG":{"name":"Madagascar","id":"MDG","fillKey":"neutralColor"},
		"MEX":{"name":"Mexico","id":"MEX","fillKey":"pinkColor"},
		"MKD":{"name":"Macedonia","id":"MKD","fillKey":"neutralColor"},
		"MLI":{"name":"Mali","id":"MLI","fillKey":"neutralColor"},
		"MMR":{"name":"Myanmar","id":"MMR","fillKey":"neutralColor"},
		"MNE":{"name":"Montenegro","id":"MNE","fillKey":"neutralColor"},
		"MNG":{"name":"Mongolia","id":"MNG","fillKey":"neutralColor"},
		"MOZ":{"name":"Mozambique","id":"MOZ","fillKey":"neutralColor"},
		"MRT":{"name":"Mauritania","id":"MRT","fillKey":"neutralColor"},
		"MWI":{"name":"Malawi","id":"MWI","fillKey":"neutralColor"},
		"MYS":{"name":"Malaysia","id":"MYS","fillKey":"neutralColor"},
		"NAM":{"name":"Namibia","id":"NAM","fillKey":"neutralColor"},
		"NCL":{"name":"New Caledonia","id":"NCL","fillKey":"neutralColor"},
		"NER":{"name":"Niger","id":"NER","fillKey":"neutralColor"},
		"NGA":{"name":"Nigeria","id":"NGA","fillKey":"neutralColor"},
		"NIC":{"name":"Nicaragua","id":"NIC","fillKey":"neutralColor"},
		"NLD":{"name":"Netherlands","id":"NLD","fillKey":"neutralColor"},
		"NOR":{"name":"Norway","id":"NOR","fillKey":"redColor"},
		"NPL":{"name":"Nepal","id":"NPL","fillKey":"neutralColor"},
		"NZL":{"name":"New Zealand","id":"NZL","fillKey":"pinkColor"},
		"OMN":{"name":"Oman","id":"OMN","fillKey":"neutralColor"},
		"PAK":{"name":"Pakistan","id":"PAK","fillKey":"neutralColor"},
		"PAN":{"name":"Panama","id":"PAN","fillKey":"neutralColor"},
		"PER":{"name":"Peru","id":"PER","fillKey":"neutralColor"},
		"PHL":{"name":"Philippines","id":"PHL","fillKey":"neutralColor"},
		"PNG":{"name":"Papua New Guinea","id":"PNG","fillKey":"neutralColor"},
		"POL":{"name":"Poland","id":"POL","fillKey":"pinkColor"},
		"PRI":{"name":"Puerto Rico","id":"PRI","fillKey":"neutralColor"},
		"PRK":{"name":"North Korea","id":"PRK","fillKey":"neutralColor"},
		"PRT":{"name":"Portugal","id":"PRT","fillKey":"neutralColor"},
		"PRY":{"name":"Paraguay","id":"PRY","fillKey":"neutralColor"},
		"QAT":{"name":"Qatar","id":"QAT","fillKey":"neutralColor"},
		"ROU":{"name":"Romania","id":"ROU","fillKey":"neutralColor"},
		"RUS":{"name":"Russia","id":"RUS","fillKey":"redColor"},
		"RWA":{"name":"Rwanda","id":"RWA","fillKey":"neutralColor"},
		"ESH":{"name":"Western Sahara","id":"ESH","fillKey":"neutralColor"},
		"SAU":{"name":"Saudi Arabia","id":"SAU","fillKey":"pinkColor"},
		"SDN":{"name":"Sudan","id":"SDN","fillKey":"neutralColor"},
		"SSD":{"name":"South Sudan","id":"SSD","fillKey":"neutralColor"},
		"SEN":{"name":"Senegal","id":"SEN","fillKey":"neutralColor"},
		"SLB":{"name":"Solomon Islands","id":"SLB","fillKey":"neutralColor"},
		"SLE":{"name":"Sierra Leone","id":"SLE","fillKey":"neutralColor"},
		"SLV":{"name":"El Salvador","id":"SLV","fillKey":"neutralColor"},
		"-99":{"name":"Somaliland","id":"-99","fillKey":"neutralColor"},
		"SOM":{"name":"Somalia","id":"SOM","fillKey":"neutralColor"},
		"SRB":{"name":"Republic of Serbia","id":"SRB","fillKey":"neutralColor"},
		"SUR":{"name":"Suriname","id":"SUR","fillKey":"neutralColor"},
		"SVK":{"name":"Slovakia","id":"SVK","fillKey":"neutralColor"},
		"SVN":{"name":"Slovenia","id":"SVN","fillKey":"neutralColor"},
		"SWE":{"name":"Sweden","id":"SWE","fillKey":"pinkColor"},
		"SWZ":{"name":"Swaziland","id":"SWZ","fillKey":"pinkColor"},
		"SYR":{"name":"Syria","id":"SYR","fillKey":"neutralColor"},
		"TCD":{"name":"Chad","id":"TCD","fillKey":"neutralColor"},
		"TGO":{"name":"Togo","id":"TGO","fillKey":"neutralColor"},
		"THA":{"name":"Thailand","id":"THA","fillKey":"neutralColor"},
		"TJK":{"name":"Tajikistan","id":"TJK","fillKey":"neutralColor"},
		"TKM":{"name":"Turkmenistan","id":"TKM","fillKey":"redColor"},
		"TLS":{"name":"East Timor","id":"TLS","fillKey":"neutralColor"},
		"TTO":{"name":"Trinidad and Tobago","id":"TTO","fillKey":"neutralColor"},
		"TUN":{"name":"Tunisia","id":"TUN","fillKey":"neutralColor"},
		"TUR":{"name":"Turkey","id":"TUR","fillKey":"neutralColor"},
		"TWN":{"name":"Taiwan","id":"TWN","fillKey":"whiteColor"},
		"TZA":{"name":"United Republic of Tanzania","id":"TZA","fillKey":"neutralColor"},
		"UGA":{"name":"Uganda","id":"UGA","fillKey":"neutralColor"},
		"UKR":{"name":"Ukraine","id":"UKR","fillKey":"neutralColor"},
		"URY":{"name":"Uruguay","id":"URY","fillKey":"neutralColor"},
		"UZB":{"name":"Uzbekistan","id":"UZB","fillKey":"neutralColor"},
		"VEN":{"name":"Venezuela","id":"VEN","fillKey":"neutralColor"},
		"VNM":{"name":"Vietnam","id":"VNM","fillKey":"neutralColor"},
		"VUT":{"name":"Vanuatu","id":"VUT","fillKey":"neutralColor"},
		"PSE":{"name":"West Bank","id":"PSE","fillKey":"neutralColor"},
		"YEM":{"name":"Yemen","id":"YEM","fillKey":"neutralColor"},
		"ZAF":{"name":"South Africa","id":"ZAF","fillKey":"neutralColor"},
		"ZMB":{"name":"Zambia","id":"ZMB","fillKey":"neutralColor"},
		"ZWE":{"name":"Zimbabwe","id":"ZWE","fillKey":"neutralColor"}
		},
  		fills: {
              'pinkColor': '#ff99ff',
              'orangeColor': '#ff6600',
              'redColor': '#ff0000',
              'greenColor': '#00cc00',
              'grayColor': '#cccccc',
              'yellowColor': '#ffcc00',
              'whiteColor': '#ffffff',
              'neutralColor': '#eeeeee',
              defaultFill: '#ffffff'
            }
    });
</script>
</body>
</html>

Loading the data from a JSON file

Include a line called as dataUrl, the default format is JSON. If you are using anything other than JSON, you should specify a Type field as well.

dataUrl: ‘worlddata.json’,     //This points to the data file on your server.
data: {},                                     // Keep this blank

Reference
http://datamaps.github.io/

Posted in CSS, Generic, HTML5, User Experience, Web Technology Tagged with: , , , , ,
2 comments on “World DataMaps with Tabular Information on mouse Hover
  1. Daniyal says:

    Really helpful example! Thanks Debasis!

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Recent Posts


Hit Counter provided by technology news