Created
November 18, 2015 13:43
-
-
Save will-s-t/5dcac8d1ec00eb8ca115 to your computer and use it in GitHub Desktop.
This file contains 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"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>Talking allowed</title> | |
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
<script src="https://use.typekit.net/hjr3yei.js"></script> | |
<script>try{Typekit.load({ async: true });}catch(e){}</script> | |
<style type="text/css"> | |
body { | |
margin: 0; | |
background-color: white; | |
font-family: "interface",sans-serif; | |
} | |
#infographic { | |
width: 100%; | |
max-width: 750px; | |
margin-left: auto; | |
margin-right: auto; | |
background-color: #FFF; | |
margin-top: 0px; | |
/*box-shadow: 3px 3px 5px 6px #bbb;*/ | |
} | |
h2 { | |
text-align: center; | |
font-size: 20px; | |
font-weight: bold; | |
padding-top: 0px; | |
} | |
h3 { | |
font-size: 18px; | |
margin-bottom: 15px; | |
} | |
#keyFull { | |
width: 90px; | |
/*background-color: #CCC;*/ | |
float:left; | |
text-align: center; | |
font-size: 14px; | |
padding: 5px; | |
} | |
.key { | |
width: 90px; | |
height: 70px; | |
/*background-color: #CCC;*/ | |
float:left; | |
text-align: center; | |
font-size: 14px; | |
padding: 5px; | |
} | |
.colorKey { | |
color: #FFF; | |
margin-bottom: 0px; | |
padding: 3px; | |
} | |
.colorKeyText { | |
margin-top: 2px; | |
font-size: 12px; | |
} | |
p { | |
margin-top: 5px; | |
} | |
.subtitle { | |
max-width: 500px; | |
text-align: center; | |
margin-left: auto; | |
margin-right: auto; | |
} | |
#mapping{ | |
float: left; | |
} | |
} | |
</style> | |
</head> | |
<body> | |
<div id="infographic"> | |
<h2>Talking allowed</h2> | |
<p class="subtitle">Which countries allow sponsorship of healthcare professionals to attend conferences organised by device manufacturers?</p> | |
<div id="keyFull"> | |
<p class="colorKey" style="background-color: #CD202C;">Category 1</p> | |
<p class="colorKeyText" style="color: #ACADAE;">Sponsorship forbidden</p> | |
<p class="colorKey" style="background-color: #E37222;">Category 2</p> | |
<p class="colorKeyText" style="color: #ACADAE;">Sponsorship requires approval and is limited</p> | |
<p class="colorKey" style="background-color: #F0AB00;">Category 3</p> | |
<p class="colorKeyText" style="color: #ACADAE;">Sponsorship requires approval</p> | |
<p class="colorKey" style="background-color: #FFD212;">Category 4</p> | |
<p class="colorKeyText" style="color: #ACADAE;">Sponsorship limited</p> | |
<p class="colorKey" style="background-color: #ACADAE;">Category 5</p> | |
<p class="colorKeyText" style="color: #ACADAE;">Not regulated</p> | |
</div> | |
<section id="mapping"></section> | |
<div id="keySplit" style="display:none;"> | |
<div class="key"> | |
<!-- <h3>Key</h3> --> | |
<p class="colorKey" style="background-color: #CD202C;">Category 1</p> | |
<p class="colorKeyText" style="color: #ACADAE;">Sponsorship forbidden</p> | |
</div> | |
<div class="key"> | |
<p class="colorKey" style="background-color: #E37222;">Category 2</p> | |
<p class="colorKeyText" style="color: #ACADAE;">Sponsorship requires approval and is limited</p> | |
</div> | |
<div class="key"> | |
<p class="colorKey" style="background-color: #F0AB00;">Category 3</p> | |
<p class="colorKeyText" style="color: #ACADAE;">Sponsorship requires approval</p> | |
</div> | |
<div class="key"> | |
<p class="colorKey" style="background-color: #FFD212;">Category 4</p> | |
<p class="colorKeyText" style="color: #ACADAE;">Sponsorship limited</p> | |
</div> | |
<div class="key"> | |
<p class="colorKey" style="background-color: #ACADAE;">Category 5</p> | |
<p class="colorKeyText" style="color: #ACADAE;">Not regulated</p> | |
</div> | |
</div> | |
</div> | |
<script type="text/javascript"> | |
//Width and height | |
var w = 650; | |
var h = 500; | |
//make map smaller if window is smaller than 750px | |
if (typeof window.innerWidth != 'undefined' && window.innerWidth < 750 && window.innerWidth > 500) { | |
w = window.innerWidth-100; | |
} else if(typeof window.innerWidth != 'undefined' && window.innerWidth < 750) { | |
w = window.innerWidth; | |
var keyVar = document.getElementById("keyFull"); | |
keyVar.style.display = "none"; | |
keyVar = document.getElementById("keySplit"); | |
keyVar.style.display = null; | |
} else { | |
w = 650; | |
} | |
window.onresize = function(){ window.location.href = location.href;} | |
var h = w/3*2; | |
//Define map projection | |
var projection = d3.geo.azimuthalEqualArea() | |
.center([ 15, 50 ]) | |
.translate([ w/2, h/2 ]) | |
.scale([ w*1.4 ]); | |
//Array for colours | |
var colour = [ "#ACADAE", "#CD202C", "#F0AB00" , "#FFD212", "#E37222", ]; | |
var hilight = [ "#BCBDBE", "#DD303C", "#F0BB10" ,"#FFE222", "#F38232", ]; | |
//Define path generator | |
var path = d3.geo.path() | |
.projection(projection); | |
//Create SVG | |
var svg = d3.select("#mapping") | |
.append("svg") | |
.attr("width", w) | |
.attr("height", h) | |
.attr("style", "position: absolute;"); | |
//Load in ocean GeoJSON data | |
d3.json("ne_50m_ocean.json", function(json) { | |
svg.selectAll("path") | |
.data(json.features) | |
.enter() | |
.append("path") | |
.attr("d", path) | |
.attr("stroke", "#999") | |
.attr("stroke-width", "0.5") | |
.attr("fill", "white"); | |
}); | |
//Create 2nd SVG | |
var svg2 = d3.select("#mapping") | |
.append("svg") | |
.attr("width", w) | |
.attr("height", h) | |
.attr("style", "position: absolute;"); | |
//Load in country GeoJSON data | |
d3.json("bitsofEU.json", function(json) { | |
//Bind data and create one path per GeoJSON feature | |
svg2.selectAll("path") | |
.data(json.features) | |
.enter() | |
.insert("path") | |
.attr("d", path) | |
.attr("stroke", "white") | |
.attr("stroke-width", "0.5") | |
.attr("fill", function(d) { | |
return colour[d.properties.coi_cat]; | |
}) | |
.on("mouseover", function(d) { | |
tooltip.style("display", null); | |
d3.select(this) | |
.attr("fill", function(d) { | |
return hilight[d.properties.coi_cat]; | |
}); | |
}) | |
.on("mouseout", function(d) { | |
d3.select(this) | |
.attr("fill", function(d) { | |
return colour[d.properties.coi_cat]; | |
}); | |
tooltip.style("display", "none"); | |
}) | |
.on("mousemove", function(d, i) { | |
var xPosition = d3.mouse(this)[0] - 125; | |
var yPosition = d3.mouse(this)[1] - 50; | |
tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")"); | |
tooltip.select("text").text(d.properties.name_long); | |
tooltip.select(".categoryText").text( function(data) { | |
if(d.properties.coi_cat == 0) { | |
return "Not regulated"; | |
} else if(d.properties.coi_cat == 1) { | |
return "Sponsorship forbidden"; | |
} else if(d.properties.coi_cat == 2) { | |
return "Sponsorship requires approval"; | |
} else if(d.properties.coi_cat == 3) { | |
return "Sponsorship limited"; | |
} else if(d.properties.coi_cat == 4) { | |
return "Sponsorship requires approval and is limited"; | |
} | |
}); | |
}); | |
// Create tooltip, initial display is hidden | |
var tooltip = svg.append("g") | |
.attr("class", "tooltip") | |
.style("display", "none"); | |
tooltip.append("rect") | |
.attr("width", 250) | |
.attr("height", 40) | |
.attr("fill", "white") | |
.style("opacity", 0.5); | |
tooltip.append("text") | |
.attr("x", 125) | |
.attr("dy", "1.2em") | |
.style("text-anchor", "middle") | |
.attr("font-size", "12px") | |
.attr("font-weight", "bold"); | |
tooltip.append("text") | |
.attr("x", 125) | |
.attr("dy", "2.5em") | |
.style("text-anchor", "middle") | |
.attr("font-size", "12px") | |
.attr("font-weight", "regular") | |
.attr("class", "categoryText"); | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment