Skip to content

Instantly share code, notes, and snippets.

@giuslaur
Last active August 12, 2017 02:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save giuslaur/6d6f61db55912cd168cc76da6826ba1b to your computer and use it in GitHub Desktop.
Save giuslaur/6d6f61db55912cd168cc76da6826ba1b to your computer and use it in GitHub Desktop.
D3 Map of Europe by regions with data on tourism 2013-2016
<div class='embed'>
</div>
<style>
.border {
stroke: #000;
fill: none;
}
.graticule {
fill: none;
stroke: #777;
stroke-width: .5px;
stroke-opacity: .5;
}
div.tooltip {
position: absolute;
text-align: center;
width: 84px;
height: 64px;
padding: 2px;
font: 12px sans-serif;
background: lightgrey;
border: 0px;
border-radius: 8px;
pointer-events: none;
}
</style>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="http://d3js.org/colorbrewer.v1.min.js"></script>
<script src="https://cdn.rawgit.com/rveciana/d3-composite-projections/v0.2.0/composite-projections.min.js"></script>
<script>
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
var width = 600,
height = 500;
var projection = d3.geo.conicConformalEurope();
var graticule = d3.geo.graticule();
var path = d3.geo.path()
.projection(projection);
var scale = d3.scale.quantize().domain([1,40]).range(colorbrewer.OrRd[9]);
var svg = d3.select(".embed").append("svg")
.attr("width", width)
.attr("height", height);
svg.append("path")
.datum(graticule)
.attr("class", "graticule")
.attr("d", path);
d3.json("https://cdn.rawgit.com/giuslaur/tourism/master/nuts2.json", function(error, europe) {
d3.csv("https://cdn.rawgit.com/giuslaur/tourism/master/tourism_delta_nuts_2013-2016.csv", function(error, povrate) {
var land = topojson.feature(europe, europe.objects.nuts2);
data = {};
povrate.forEach(function(d) {
data[d.GEO] = d['AVG'];
});
loc = {};
povrate.forEach(function(d) {
loc[d.GEO] = d['NIGHTS'];
});
console.info(data);
svg.selectAll("path")
.data(land.features)
.enter()
.append("path")
.attr("d", path)
.style("stroke","#000")
.style("stroke-width",".5px")
.style("fill",function(d){
var value = data[d.id];
if (isNaN(value)){
value = data[d.id.substring(0,2)];
}
if (isNaN(value)){
return "#fff";
}
return scale(value);
})
.on("mouseover", function(d,i) {
var value = data[d.id];
var loc_units = parseInt(loc[d.id]).toLocaleString('en-US');
if (isNaN(value)){
value = data[d.id.substring(0,2)];
}
div.transition()
.duration(200)
.style("opacity", 0.9);
if (isNaN(value)){
div.html("<b>"+d.properties.name+"</b>")
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
}else{
div.html("<b>"+d.properties.name+"</b><br/>" + value + "% ("+loc_units+")")
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
}
})
.on("mouseout", function(d,i) {
div.transition()
.duration(500)
.style("opacity", 0);
});
svg
.append("path")
.style("fill","none")
.style("stroke","#000")
.attr("d", projection.getCompositionBorders());
});
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment