embr/index.html

## index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mobile Site Page View Fraction</title>
    <style type="text/css">
body, .ui-widget {
  font: 14px Helvetica Neue;
}

svg {
  width: 960px;
  height: 500px;
  border: solid 1px #ccc;
  background: #eee;
}

.frame {
  stroke: #000;
  fill: none;
  pointer-events: all;
}

line {
  stroke: brown;
  stroke-dasharray: 4,2;
}

path {
  fill: #ccc;
  stroke: #fff;
}

div {
  width: 960px;
}
    </style>
  </head>
  <body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="https://raw.github.com/mbostock/d3/master/lib/colorbrewer/colorbrewer.js"></script>
    <script type="text/javascript">

var margin = {top: 0, right: 0, bottom: 0, left: 0},
  width = 960 - margin.left - margin.right,
  height = 500 - margin.top - margin.bottom;

// projection fns
var projection = d3.geo.mercator()
  .scale(width)
  .translate([width / 2, height / 2]);

function move() {
  projection.translate(d3.event.translate).scale(d3.event.scale);
  feature.attr("d", path);
}

var zoom = d3.behavior.zoom()
        .translate(projection.translate())
        .scale(projection.scale())
        .scaleExtent([height, 8 * height])
        .on("zoom", move);

var path = d3.geo.path()
  .projection(projection);

var svg = d3.select("body").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .call(zoom);

var g = svg.append("g"),
    feature = g.selectAll(".feature");

//var color = d3.scale.quantize().range([d3.rgb(247,251,255), d3.rgb(222,235,247), d3.rgb(198,219,239), d3.rgb(158,202,225), d3.rgb(107,174,214), d3.rgb(66,146,198), d3.rgb(33,113,181), d3.rgb(8,81,156), d3.rgb(8,48,107)]).domain([0,1])
var color = d3.scale.quantize().range(colorbrewer.Reds[7]).domain([0,1])

var formatter = d3.format(',.2%');

d3.json('world-countries.json', function(loadedFeatures) {
  feature = feature
    .data(loadedFeatures.features)
    .enter().append("path")
       .attr("class", "feature")
       .attr("d", path);

  d3.json('page-view-frac.json', function(loadedData) {
    console.log('loaded data: ' + JSON.stringify(loadedData));
    data = loadedData;
    svg
      .selectAll(".feature")
      .style('fill', function(d) {
         console.log('data['+d.id+'] = ' + data[d.id]);
         return data[d.id] ? color(data[d.id]).toString() : '#000000'; })
      .append("title")
      .text(function(d) {
        console.log('d.id: '+d.id+', d.properties.name: ' + d.properties.name);
        return d.properties.name + ' : ' + (data[d.id] ? formatter(data[d.id]) : 'No Data Available');
      });
  });
});

  </script>
</body>

## page-view-frac.json
{
    "AGO": 0.31990371051912514,
    "DZA": 0.03534880765793669,
    "EGY": 0.07527709646081537,
    "BGD": 0.3616895265956838,
    "NER": 0.5777476842749038,
    "QAT": 0.1468911984666763,
    "SOM": 0.5042116004829608,
    "NAM": 0.22002654688107598,
    "BGR": 0.05164207233524729,
    "BOL": 0.0723637986463806,
    "GHA": 0.5673385332304617,
    "PAK": 0.18741814096505918,
    "CPV": 0.07945883625841939,
    "JOR": 0.15363816092682409,
    "LBR": 0.5914419423101417,
    "LBY": 0.22611545513483375,
    "MYS": 0.14153396495557616,
    "PRI": 0.21381071502649032,
    "MYT": 0.09783651608998377,
    "PRK": 0.014455000197216919,
    "TZA": 0.5166453015768303,
    "BWA": 0.21409653318259383,
    "KHM": 0.30699954080242564,
    "PRY": 0.16406931379876102,
    "HKG": 0.1497636501519115,
    "SAU": 0.2733068352389299,
    "LBN": 0.24026405160272957,
    "SVN": 0.05283132580198714,
    "BFA": 0.2729463422299037,
    "SVK": 0.05534826375334275,
    "MRT": 0.20882198935487417,
    "HRV": 0.09767551889376462,
    "CHL": 0.11576067845763777,
    "CHN": 0.05254941485877572,
    "KNA": 0.05337195422920724,
    "MAR": 0.10688059003887991,
    "GIB": 0.11631415382237022,
    "DJI": 0.1134905019051413,
    "GIN": 0.29504528102289607,
    "FIN": 0.11140259090517943,
    "URY": 0.04428688861557987,
    "THA": 0.1319738794871658,
    "SYC": 0.18003642969588066,
    "NPL": 0.2547399826042039,
    "LAO": 0.35629616311833723,
    "YEM": 0.1970995010943143,
    "PHL": 0.08967946340078385,
    "ZAF": 0.2657171248096303,
    "KIR": 0.1208601761439944,
    "MNE": 0.07667854497716682,
    "VIR": 0.2293332536276456,
    "SYR": 0.2338287929540173,
    "MAC": 0.13260045870693565,
    "LIE": 0.10759637543202193,
    "NIC": 0.08814374888672248,
    "KAZ": 0.17357097395545848,
    "COK": 0.1332696592264987,
    "MNG": 0.0869240453215074,
    "PYF": 0.06454719037935125,
    "NIU": 0.2272559433840968,
    "IRL": 0.241929094515458,
    "DMA": 0.034113222455343525,
    "BEN": 0.17336808679487184,
    "NGA": 0.8560505873529338,
    "BEL": 0.06720539701262007,
    "DEU": 0.10866669481884181,
    "GUM": 0.2298463873350421,
    "LKA": 0.19719375192687258,
    "FLK": 0.17877821969325686,
    "GBR": 0.2755001466747094,
    "MWI": 0.7460150256441834,
    "CRI": 0.24149809649400353,
    "CMR": 0.4854789874721806,
    "MNP": 0.0730031487447111,
    "LSO": 0.518999271925934,
    "UGA": 0.38988948953490377,
    "TKM": 0.7054885158157974,
    "TTO": 0.07016501515016837,
    "WLF": 0.05849203354621562,
    "BMU": 0.10201990873673732,
    "TCD": 0.9962723865260507,
    "GEO": 0.025874347141703606,
    "ROU": 0.0849116824393092,
    "TCA": 0.05242862783883706,
    "MHL": 0.14960394943309058,
    "MLI": 0.4837366430151487,
    "BLZ": 0.1139933094580864,
    "MMR": 0.2698286648874819,
    "AFG": 0.1460089530875667,
    "BDI": 0.27018966572269776,
    "VGB": 0.11721010333433304,
    "BLR": 0.13721632642735196,
    "GRD": 0.05202660684568408,
    "GRC": 0.07105178521028672,
    "GRL": 0.11172194687551931,
    "AND": 0.07842421430962415,
    "MOZ": 0.5381503977676534,
    "TJK": 0.4517101973981451,
    "HTI": 0.2333524823983355,
    "PSE": 0.051046910995861894,
    "LCA": 0.062465675189302024,
    "IND": 0.27633861696999484,
    "VCT": 0.0360156964227254,
    "BTN": 0.11876559896098514,
    "VNM": 0.15551768190669785,
    "NOR": 0.12319921000004394,
    "CZE": 0.05696326675382287,
    "ATG": 0.05551565157380319,
    "FJI": 0.0788646834178272,
    "HND": 0.11194007074961167,
    "MUS": 0.11250111851673864,
    "DOM": 0.08569118290234097,
    "LUX": 0.19811616802658563,
    "ISR": 0.21806697479882794,
    "SMR": 0.02483914099852203,
    "PER": 0.05572737825835482,
    "REU": 0.11557389710973012,
    "IDN": 0.2354415934297907,
    "VUT": 0.12346015438072479,
    "GNQ": 0.523057393340809,
    "SUR": 0.11590187114267661,
    "ISL": 0.04085886179406253,
    "GLP": 0.18679947208604386,
    "GAB": 0.17304095606428063,
    "ETH": 0.510255428491163,
    "COM": 0.03070661070145856,
    "COL": 0.056043774131996536,
    "PRT": 0.056742652436331004,
    "MDA": 0.060515025835310564,
    "GGY": 0.2480037105372919,
    "MDG": 0.08478566970689713,
    "ECU": 0.06368780974435855,
    "SEN": 0.11489203497815734,
    "MDV": 0.15595981308530465,
    "ASM": 0.24912283943352564,
    "SPM": 0.016759939057415785,
    "TLS": 0.11551130994992802,
    "FRA": 0.1324163391109602,
    "LTU": 0.059385378312204834,
    "RWA": 0.2644830414437473,
    "ZMB": 0.5511208495347993,
    "GMB": 0.3924229112027364,
    "JEY": 0.15927412216853176,
    "FRO": 0.10468323126851155,
    "GTM": 0.11962057304126004,
    "DNK": 0.1739870948009487,
    "ZWE": 0.6935046586202062,
    "NLD": 0.14686940183577418,
    "AUS": 0.23636636207546222,
    "AUT": 0.16785893553501358,
    "VEN": 0.07888277633522356,
    "KEN": 0.6671715015465352,
    "WSM": 0.051658877588872665,
    "TUR": 0.11472123853783067,
    "JPN": 0.3854969465352786,
    "ALB": 0.09940695759124897,
    "OMN": 0.2524737381923289,
    "ALA": 0.0917390991088347,
    "BRN": 0.3722466137943835,
    "TUN": 0.08376619282935975,
    "RUS": 0.11365766706102852,
    "MEX": 0.1359598893920845,
    "BRA": 0.07999835416738237,
    "CIV": 0.18633321958929047,
    "SRB": 0.05880364491879991,
    "MKD": 0.05156269280089382,
    "USA": 0.25246770531250023,
    "IRN": 0.11684563762158838,
    "SWE": 0.1766357027523776,
    "UKR": 0.10471640333341309,
    "SWZ": 0.20224561000699812,
    "TON": 0.02237352845100984,
    "CAN": 0.2063146068527355,
    "KOR": 0.25123629162584693,
    "AIA": 0.05374622423463555,
    "GUY": 0.023944657038829732,
    "CHE": 0.17181310485282728,
    "CYP": 0.09113013249478728,
    "BIH": 0.0392089015048571,
    "SGP": 0.2800653004441388,
    "TWN": 0.0687071737106828,
    "AZE": 0.14077497008575487,
    "UZB": 0.4469674353703475,
    "CAF": 0.020428926947114224,
    "POL": 0.0586846201397514,
    "KWT": 0.3920529664984092,
    "NCL": 0.0511846477775417,
    "TGO": 0.08671674766799636,
    "CYM": 0.07750665310762346,
    "EST": 0.058794872013663055,
    "ESP": 0.1671834190759781,
    "IRQ": 0.11737780720886695,
    "SLV": 0.08416435507449344,
    "MTQ": 0.10275260939129752,
    "LVA": 0.06460791011724411,
    "MLT": 0.08048317554531921,
    "ABW": 0.13547099531688517,
    "SLE": 0.8974245222951439,
    "IMN": 0.1798350477514305,
    "PAN": 0.12313188940741729,
    "SDN": 0.5847597359991742,
    "SLB": 0.42417032054381,
    "NZL": 0.14253741069604786,
    "MCO": 0.15363498930350056,
    "ITA": 0.16460998162115595,
    "COD": 0.2802749168125049,
    "BRB": 0.10468462005330453,
    "KGZ": 0.4901986074838058,
    "ARM": 0.05173018879970276,
    "JAM": 0.08189269507866274,
    "FSM": 0.049290331061124036,
    "ARE": 0.1405569677966266,
    "ARG": 0.06758094812579436,
    "BHS": 0.12363205381289022,
    "BHR": 0.22662291557782688,
    "HUN": 0.0743689397605422,
    "PNG": 0.6287070808701777,
    "CUB": 0.0
}

## world-countries.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              world-countries.json
            
          
        Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	<!DOCTYPE html>
	<html lang="en" dir="ltr">
	<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Mobile Site Page View Fraction</title>
	<style type="text/css">
	body, .ui-widget {
	font: 14px Helvetica Neue;
	}

	svg {
	width: 960px;
	height: 500px;
	border: solid 1px #ccc;
	background: #eee;
	}

	.frame {
	stroke: #000;
	fill: none;
	pointer-events: all;
	}

	line {
	stroke: brown;
	stroke-dasharray: 4,2;
	}

	path {
	fill: #ccc;
	stroke: #fff;
	}

	div {
	width: 960px;
	}
	</style>
	</head>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="https://raw.github.com/mbostock/d3/master/lib/colorbrewer/colorbrewer.js"></script>
	<script type="text/javascript">

	var margin = {top: 0, right: 0, bottom: 0, left: 0},
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	// projection fns
	var projection = d3.geo.mercator()
	.scale(width)
	.translate([width / 2, height / 2]);

	function move() {
	projection.translate(d3.event.translate).scale(d3.event.scale);
	feature.attr("d", path);
	}

	var zoom = d3.behavior.zoom()
	.translate(projection.translate())
	.scale(projection.scale())
	.scaleExtent([height, 8 * height])
	.on("zoom", move);

	var path = d3.geo.path()
	.projection(projection);

	var svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.call(zoom);

	var g = svg.append("g"),
	feature = g.selectAll(".feature");

	//var color = d3.scale.quantize().range([d3.rgb(247,251,255), d3.rgb(222,235,247), d3.rgb(198,219,239), d3.rgb(158,202,225), d3.rgb(107,174,214), d3.rgb(66,146,198), d3.rgb(33,113,181), d3.rgb(8,81,156), d3.rgb(8,48,107)]).domain([0,1])
	var color = d3.scale.quantize().range(colorbrewer.Reds[7]).domain([0,1])

	var formatter = d3.format(',.2%');

	d3.json('world-countries.json', function(loadedFeatures) {
	feature = feature
	.data(loadedFeatures.features)
	.enter().append("path")
	.attr("class", "feature")
	.attr("d", path);

	d3.json('page-view-frac.json', function(loadedData) {
	console.log('loaded data: ' + JSON.stringify(loadedData));
	data = loadedData;
	svg
	.selectAll(".feature")
	.style('fill', function(d) {
	console.log('data['+d.id+'] = ' + data[d.id]);
	return data[d.id] ? color(data[d.id]).toString() : '#000000'; })
	.append("title")
	.text(function(d) {
	console.log('d.id: '+d.id+', d.properties.name: ' + d.properties.name);
	return d.properties.name + ' : ' + (data[d.id] ? formatter(data[d.id]) : 'No Data Available');
	});
	});
	});

	</script>
	</body>
	{
	"AGO": 0.31990371051912514,
	"DZA": 0.03534880765793669,
	"EGY": 0.07527709646081537,
	"BGD": 0.3616895265956838,
	"NER": 0.5777476842749038,
	"QAT": 0.1468911984666763,
	"SOM": 0.5042116004829608,
	"NAM": 0.22002654688107598,
	"BGR": 0.05164207233524729,
	"BOL": 0.0723637986463806,
	"GHA": 0.5673385332304617,
	"PAK": 0.18741814096505918,
	"CPV": 0.07945883625841939,
	"JOR": 0.15363816092682409,
	"LBR": 0.5914419423101417,
	"LBY": 0.22611545513483375,
	"MYS": 0.14153396495557616,
	"PRI": 0.21381071502649032,
	"MYT": 0.09783651608998377,
	"PRK": 0.014455000197216919,
	"TZA": 0.5166453015768303,
	"BWA": 0.21409653318259383,
	"KHM": 0.30699954080242564,
	"PRY": 0.16406931379876102,
	"HKG": 0.1497636501519115,
	"SAU": 0.2733068352389299,
	"LBN": 0.24026405160272957,
	"SVN": 0.05283132580198714,
	"BFA": 0.2729463422299037,
	"SVK": 0.05534826375334275,
	"MRT": 0.20882198935487417,
	"HRV": 0.09767551889376462,
	"CHL": 0.11576067845763777,
	"CHN": 0.05254941485877572,
	"KNA": 0.05337195422920724,
	"MAR": 0.10688059003887991,
	"GIB": 0.11631415382237022,
	"DJI": 0.1134905019051413,
	"GIN": 0.29504528102289607,
	"FIN": 0.11140259090517943,
	"URY": 0.04428688861557987,
	"THA": 0.1319738794871658,
	"SYC": 0.18003642969588066,
	"NPL": 0.2547399826042039,
	"LAO": 0.35629616311833723,
	"YEM": 0.1970995010943143,
	"PHL": 0.08967946340078385,
	"ZAF": 0.2657171248096303,
	"KIR": 0.1208601761439944,
	"MNE": 0.07667854497716682,
	"VIR": 0.2293332536276456,
	"SYR": 0.2338287929540173,
	"MAC": 0.13260045870693565,
	"LIE": 0.10759637543202193,
	"NIC": 0.08814374888672248,
	"KAZ": 0.17357097395545848,
	"COK": 0.1332696592264987,
	"MNG": 0.0869240453215074,
	"PYF": 0.06454719037935125,
	"NIU": 0.2272559433840968,
	"IRL": 0.241929094515458,
	"DMA": 0.034113222455343525,
	"BEN": 0.17336808679487184,
	"NGA": 0.8560505873529338,
	"BEL": 0.06720539701262007,
	"DEU": 0.10866669481884181,
	"GUM": 0.2298463873350421,
	"LKA": 0.19719375192687258,
	"FLK": 0.17877821969325686,
	"GBR": 0.2755001466747094,
	"MWI": 0.7460150256441834,
	"CRI": 0.24149809649400353,
	"CMR": 0.4854789874721806,
	"MNP": 0.0730031487447111,
	"LSO": 0.518999271925934,
	"UGA": 0.38988948953490377,
	"TKM": 0.7054885158157974,
	"TTO": 0.07016501515016837,
	"WLF": 0.05849203354621562,
	"BMU": 0.10201990873673732,
	"TCD": 0.9962723865260507,
	"GEO": 0.025874347141703606,
	"ROU": 0.0849116824393092,
	"TCA": 0.05242862783883706,
	"MHL": 0.14960394943309058,
	"MLI": 0.4837366430151487,
	"BLZ": 0.1139933094580864,
	"MMR": 0.2698286648874819,
	"AFG": 0.1460089530875667,
	"BDI": 0.27018966572269776,
	"VGB": 0.11721010333433304,
	"BLR": 0.13721632642735196,
	"GRD": 0.05202660684568408,
	"GRC": 0.07105178521028672,
	"GRL": 0.11172194687551931,
	"AND": 0.07842421430962415,
	"MOZ": 0.5381503977676534,
	"TJK": 0.4517101973981451,
	"HTI": 0.2333524823983355,
	"PSE": 0.051046910995861894,
	"LCA": 0.062465675189302024,
	"IND": 0.27633861696999484,
	"VCT": 0.0360156964227254,
	"BTN": 0.11876559896098514,
	"VNM": 0.15551768190669785,
	"NOR": 0.12319921000004394,
	"CZE": 0.05696326675382287,
	"ATG": 0.05551565157380319,
	"FJI": 0.0788646834178272,
	"HND": 0.11194007074961167,
	"MUS": 0.11250111851673864,
	"DOM": 0.08569118290234097,
	"LUX": 0.19811616802658563,
	"ISR": 0.21806697479882794,
	"SMR": 0.02483914099852203,
	"PER": 0.05572737825835482,
	"REU": 0.11557389710973012,
	"IDN": 0.2354415934297907,
	"VUT": 0.12346015438072479,
	"GNQ": 0.523057393340809,
	"SUR": 0.11590187114267661,
	"ISL": 0.04085886179406253,
	"GLP": 0.18679947208604386,
	"GAB": 0.17304095606428063,
	"ETH": 0.510255428491163,
	"COM": 0.03070661070145856,
	"COL": 0.056043774131996536,
	"PRT": 0.056742652436331004,
	"MDA": 0.060515025835310564,
	"GGY": 0.2480037105372919,
	"MDG": 0.08478566970689713,
	"ECU": 0.06368780974435855,
	"SEN": 0.11489203497815734,
	"MDV": 0.15595981308530465,
	"ASM": 0.24912283943352564,
	"SPM": 0.016759939057415785,
	"TLS": 0.11551130994992802,
	"FRA": 0.1324163391109602,
	"LTU": 0.059385378312204834,
	"RWA": 0.2644830414437473,
	"ZMB": 0.5511208495347993,
	"GMB": 0.3924229112027364,
	"JEY": 0.15927412216853176,
	"FRO": 0.10468323126851155,
	"GTM": 0.11962057304126004,
	"DNK": 0.1739870948009487,
	"ZWE": 0.6935046586202062,
	"NLD": 0.14686940183577418,
	"AUS": 0.23636636207546222,
	"AUT": 0.16785893553501358,
	"VEN": 0.07888277633522356,
	"KEN": 0.6671715015465352,
	"WSM": 0.051658877588872665,
	"TUR": 0.11472123853783067,
	"JPN": 0.3854969465352786,
	"ALB": 0.09940695759124897,
	"OMN": 0.2524737381923289,
	"ALA": 0.0917390991088347,
	"BRN": 0.3722466137943835,
	"TUN": 0.08376619282935975,
	"RUS": 0.11365766706102852,
	"MEX": 0.1359598893920845,
	"BRA": 0.07999835416738237,
	"CIV": 0.18633321958929047,
	"SRB": 0.05880364491879991,
	"MKD": 0.05156269280089382,
	"USA": 0.25246770531250023,
	"IRN": 0.11684563762158838,
	"SWE": 0.1766357027523776,
	"UKR": 0.10471640333341309,
	"SWZ": 0.20224561000699812,
	"TON": 0.02237352845100984,
	"CAN": 0.2063146068527355,
	"KOR": 0.25123629162584693,
	"AIA": 0.05374622423463555,
	"GUY": 0.023944657038829732,
	"CHE": 0.17181310485282728,
	"CYP": 0.09113013249478728,
	"BIH": 0.0392089015048571,
	"SGP": 0.2800653004441388,
	"TWN": 0.0687071737106828,
	"AZE": 0.14077497008575487,
	"UZB": 0.4469674353703475,
	"CAF": 0.020428926947114224,
	"POL": 0.0586846201397514,
	"KWT": 0.3920529664984092,
	"NCL": 0.0511846477775417,
	"TGO": 0.08671674766799636,
	"CYM": 0.07750665310762346,
	"EST": 0.058794872013663055,
	"ESP": 0.1671834190759781,
	"IRQ": 0.11737780720886695,
	"SLV": 0.08416435507449344,
	"MTQ": 0.10275260939129752,
	"LVA": 0.06460791011724411,
	"MLT": 0.08048317554531921,
	"ABW": 0.13547099531688517,
	"SLE": 0.8974245222951439,
	"IMN": 0.1798350477514305,
	"PAN": 0.12313188940741729,
	"SDN": 0.5847597359991742,
	"SLB": 0.42417032054381,
	"NZL": 0.14253741069604786,
	"MCO": 0.15363498930350056,
	"ITA": 0.16460998162115595,
	"COD": 0.2802749168125049,
	"BRB": 0.10468462005330453,
	"KGZ": 0.4901986074838058,
	"ARM": 0.05173018879970276,
	"JAM": 0.08189269507866274,
	"FSM": 0.049290331061124036,
	"ARE": 0.1405569677966266,
	"ARG": 0.06758094812579436,
	"BHS": 0.12363205381289022,
	"BHR": 0.22662291557782688,
	"HUN": 0.0743689397605422,
	"PNG": 0.6287070808701777,
	"CUB": 0.0
	}