Skip to content

Instantly share code, notes, and snippets.

@will-s-t

will-s-t/bitsofEU.json

Created November 18, 2015 13:37
Show Gist options
  • Save will-s-t/bb417ef34280da86a2e7 to your computer and use it in GitHub Desktop.
Save will-s-t/bb417ef34280da86a2e7 to your computer and use it in GitHub Desktop.
Download ZIP
Display the source blob
Display the rendered blob
Raw
bitsofEU.json
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
index.html
<!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("fill", "#EEE");
});
//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 = svg2.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>
Display the source blob
Display the rendered blob
Raw
ne_50m_ocean.json
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment