Last active
December 10, 2015 16:08
-
-
Save embr/4458705 to your computer and use it in GitHub Desktop.
Mobile Page View Fraction
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"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 | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment