Skip to content

Instantly share code, notes, and snippets.

@junkwhinger

junkwhinger/index.html

Created July 18, 2015 12:38
Show Gist options
  • Save junkwhinger/392dd4830b1f762712c0 to your computer and use it in GitHub Desktop.
Save junkwhinger/392dd4830b1f762712c0 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<header>oecd_service_hc</header>
<style>
header {
display: none;
}
body {
background: #fcfcfa;
}
.stroke {
fill: none;
stroke: #000;
stroke-width: 3px;
}
.fill {
fill: #fff;
}
.graticule {
fill: none;
stroke: #777;
stroke-width: .5px;
stroke-opacity: .5;
}
.land {
fill: #222;
}
.country:hover {
opacity: 0.8;
}
.boundary {
fill: none;
stroke: #fff;
stroke-width: .5px;
}
.tooltip{ background-color:rgba(68,136,187,0.5);;
margin: 10px;
height: 50px;
width: 150px;
padding-left: 10px;
padding-top: 10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-geo-projection/0.2.9/d3.geo.projection.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>
<script>
var width = 940,
height = 580;
var color_group = {"Canada": {"color": "#d95f02", "same": ["Finland", "Sweden"]}, "Turkey": {"color": "#e7298a", "same": ["Germany", "Japan", "Luxembourg", "Netherlands", "Republic of Korea", "Switzerland", "Belgium", "Greece"]}, "Italy": {"color": "#e6ab02", "same": ["United States", "Slovakia", "Spain", "Poland", "Austria", "Portugal", "Estonia", "Czech Republic", "Hungary", "Slovenia"]}, "Czech Republic": {"color": "#e6ab02", "same": ["United States", "Slovakia", "Spain", "Italy", "Poland", "Austria", "Portugal", "Estonia", "Hungary", "Slovenia"]}, "Luxembourg": {"color": "#e7298a", "same": ["Germany", "Turkey", "Japan", "Netherlands", "Republic of Korea", "Switzerland", "Belgium", "Greece"]}, "France": {"color": "#66a61e", "same": ["Ireland", "Denmark", "United Kingdom"]}, "Slovakia": {"color": "#e6ab02", "same": ["United States", "Spain", "Italy", "Poland", "Austria", "Portugal", "Estonia", "Czech Republic", "Hungary", "Slovenia"]}, "Ireland": {"color": "#66a61e", "same": ["France", "Denmark", "United Kingdom"]}, "Norway": {"color": "#7570b3", "same": ["Israel", "Chile", "Australia", "Mexico", "New Zealand"]}, "Israel": {"color": "#7570b3", "same": ["Norway", "Chile", "Australia", "Mexico", "New Zealand"]}, "Australia": {"color": "#7570b3", "same": ["Israel", "Norway", "Chile", "Mexico", "New Zealand"]}, "Iceland": {"color": "#1b9e77", "same": ["none"]}, "Slovenia": {"color": "#e6ab02", "same": ["United States", "Slovakia", "Spain", "Italy", "Poland", "Austria", "Portugal", "Estonia", "Czech Republic", "Hungary"]}, "Germany": {"color": "#e7298a", "same": ["Turkey", "Japan", "Luxembourg", "Netherlands", "Republic of Korea", "Switzerland", "Belgium", "Greece"]}, "Chile": {"color": "#7570b3", "same": ["Israel", "Norway", "Australia", "Mexico", "New Zealand"]}, "Belgium": {"color": "#e7298a", "same": ["Germany", "Turkey", "Japan", "Luxembourg", "Netherlands", "Republic of Korea", "Switzerland", "Greece"]}, "Spain": {"color": "#e6ab02", "same": ["United States", "Slovakia", "Italy", "Poland", "Austria", "Portugal", "Estonia", "Czech Republic", "Hungary", "Slovenia"]}, "Netherlands": {"color": "#e7298a", "same": ["Germany", "Turkey", "Japan", "Luxembourg", "Republic of Korea", "Switzerland", "Belgium", "Greece"]}, "Denmark": {"color": "#66a61e", "same": ["France", "Ireland", "United Kingdom"]}, "Poland": {"color": "#e6ab02", "same": ["United States", "Slovakia", "Spain", "Italy", "Austria", "Portugal", "Estonia", "Czech Republic", "Hungary", "Slovenia"]}, "Finland": {"color": "#d95f02", "same": ["Canada", "Sweden"]}, "United States": {"color": "#e6ab02", "same": ["Slovakia", "Spain", "Italy", "Poland", "Austria", "Portugal", "Estonia", "Czech Republic", "Hungary", "Slovenia"]}, "Sweden": {"color": "#d95f02", "same": ["Canada", "Finland"]}, "Hungary": {"color": "#e6ab02", "same": ["United States", "Slovakia", "Spain", "Italy", "Poland", "Austria", "Portugal", "Estonia", "Czech Republic", "Slovenia"]}, "Switzerland": {"color": "#e7298a", "same": ["Germany", "Turkey", "Japan", "Luxembourg", "Netherlands", "Republic of Korea", "Belgium", "Greece"]}, "New Zealand": {"color": "#7570b3", "same": ["Israel", "Norway", "Chile", "Australia", "Mexico"]}, "Estonia": {"color": "#e6ab02", "same": ["United States", "Slovakia", "Spain", "Italy", "Poland", "Austria", "Portugal", "Czech Republic", "Hungary", "Slovenia"]}, "Portugal": {"color": "#e6ab02", "same": ["United States", "Slovakia", "Spain", "Italy", "Poland", "Austria", "Estonia", "Czech Republic", "Hungary", "Slovenia"]}, "Mexico": {"color": "#7570b3", "same": ["Israel", "Norway", "Chile", "Australia", "New Zealand"]}, "United Kingdom": {"color": "#66a61e", "same": ["France", "Ireland", "Denmark"]}, "Austria": {"color": "#e6ab02", "same": ["United States", "Slovakia", "Spain", "Italy", "Poland", "Portugal", "Estonia", "Czech Republic", "Hungary", "Slovenia"]}, "Republic of Korea": {"color": "#e7298a", "same": ["Germany", "Turkey", "Japan", "Luxembourg", "Netherlands", "Switzerland", "Belgium", "Greece"]}, "Greece": {"color": "#e7298a", "same": ["Germany", "Turkey", "Japan", "Luxembourg", "Netherlands", "Republic of Korea", "Switzerland", "Belgium"]}, "Japan": {"color": "#e7298a", "same": ["Germany", "Turkey", "Luxembourg", "Netherlands", "Republic of Korea", "Switzerland", "Belgium", "Greece"]}}
var color = d3.scale.category10();
var projection = d3.geo.mercator()
.scale(150)
.translate([width / 2, height / 2])
.precision(.1);
var path = d3.geo.path()
.projection(projection);
var graticule = d3.geo.graticule();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
svg.append("defs").append("path")
.datum({type: "Sphere"})
.attr("id", "sphere")
.attr("d", path);
svg.append("use")
.attr("class", "stroke")
.attr("xlink:href", "#sphere");
svg.append("use")
.attr("class", "fill")
.attr("xlink:href", "#sphere");
svg.append("path")
.datum(graticule)
.attr("class", "graticule")
.attr("d", path)
.attr("display", "none");
var tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("z-index", "10")
.style("visibility", "hidden");
svg.append("div")
.attr("class", "exp_div")
.attr("x", 100)
.attr("y", 100)
d3.json("world.json", function(error, world) {
if (error) throw error;
var countries = topojson.feature(world, world.objects.subunits).features;
svg.selectAll(".country")
.data(countries)
.enter().insert("path", ".graticule")
.attr("class", "country")
.attr("d", path)
.attr("id", function(d) {
return "id_" + d.id
})
.style("fill", function(d, i) {
if (d.id in color_group) {
return color_group[d.id]['color']
} else {
return "rgba(20,20,20,.2)"}
})
.on("mouseover", function(d,i){
tooltip.style("visibility", "visible");
same_group_list = color_group[d.id]["same"]
same_group_text = ""
for (country in color_group[d.id]["same"]) {
country_name = color_group[d.id]["same"][country]
if (country == same_group_list.length - 1) {
same_group_text = same_group_text + country_name + " in terms of Services Trade Restrictiveness (2015)."
} else {
same_group_text = same_group_text+ country_name + ", "
}
}
tooltip.html("<span><strong>"+d.id+"</strong> is in the same group as " + same_group_text +"</span>")
})
.on("mouseout", function(d,i){
tooltip.html(null);
});
svg.insert("path", ".graticule")
.datum(topojson.mesh(world, world.objects.subunits, function(a, b) { return a !== b; }))
.attr("class", "boundary")
.attr("d", path);
});
d3.select(self.frameElement).style("height", height + "px");
</script>
Display the source blob
Display the rendered blob
Raw
world.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