Instantly share code, notes, and snippets.

Embed
What would you like to do?
Sovereign debt denominated in foreign currency
license: mit
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {}
svg {
font: 14px serif;
}
.caption {
font-weight: bold;
}
.key path {
display: none;
}
.key line {
stroke: #000;
shape-rendering: crispEdges;
}
.stroke {
fill: none;
stroke: #000;
stroke-width: 3px;
}
.fill {
fill: #fff;
}
.graticule {
fill: none;
stroke: #ddd;
stroke-width: .5px;
stroke-opacity: .5;
}
.countries{
fill: #ddd;
}
.boundary {
fill: none;
stroke: #ccc;
stroke-width: .5px;
}
.label {
fill: #777;
}
.overlay {
fill: none;
pointer-events: all;
cursor: ew-resize;
}
aside {
font-size: small;
right: 0;
position: absolute;
width: 180px;
}
</style>
<body>
<script src="http://d3js.org/queue.v1.min.js"></script>
<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/d3.geo.projection.v0.min.js"></script>
<div id="map"></div>
<div>
</div>
<script>
var width = 960,
height = 600;
var color = d3.scale.threshold()
.domain([0, 20, 50, 90])
.range(["#ffffcc","#fcbba1","#fc9272","#ef3b2c","#a50f15"]);
var x = d3.scale.linear()
.domain([0, 100])
.range([0, 150]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickSize(13)
.tickValues(color.domain());
// Accessors for dimensions of the data
function key(d) { return d.id; }
var usageByCountryCode = d3.map();
var minYear = 2018;
var maxYear = 2018;
var projection = d3.geo.kavrayskiy7()
.scale(150)
.translate([width / 2 - 40, height / 2 + 30])
.rotate([-10,0])
.precision(.1);
var path = d3.geo.path()
.projection(projection);
var graticule = d3.geo.graticule();
var svg = d3.select("#map").append("svg")
.attr("width", width)
.attr("height", height);
var label = svg.append("text")
// Creates the scale
var g = svg.append("g")
.attr("class", "key")
.attr("transform", "translate(15,50)");
g.selectAll("rect")
.data(color.range().map(function(d, i) {
return {
x0: i ? x(color.domain()[i - 1]) : x.range()[0],
x1: isNaN(i) < color.domain().length ? x(color.domain()[i]) : x.range()[1],
z: d
};
}))
.enter().append("rect")
.attr("height", 12)
.attr("x", function(d) { return d.x0; })
.attr("width", function(d) { return d.x1 - d.x0; })
.style("fill", function(d) { return d.z; });
g.call(xAxis).append("text")
.attr("class", "caption")
.attr("y", -6)
.text("Foreign currency debt (% of GDP)");
var noD = g.append("rect")
.attr("height", 12)
.attr("x", 0)
.attr("y", 40)
.attr("width", 15)
.style("fill", "gray");
g.append("text")
.attr("class", "caption")
.attr("x", 20)
.attr("y", 50)
.text("no data");
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);
queue()
.defer(d3.json, "world-50m.json")
.defer(d3.csv, "sovdebt.csv", function(d) { usageByCountryCode.set(d["Country Code"], d); })
.await(ready);
function ready(error, world) {
var countries = topojson.feature(world, world.objects.countries).features,
neighbors = topojson.neighbors(world.objects.countries.geometries);
var state = svg.insert("g", ".graticule")
.attr("class", "countries");
state.selectAll(".country")
.data(countries)
.enter()
.append("path")
.attr("class", "country")
.attr("d", path)
.attr("fill", function(d) {
var code = usageByCountryCode.get(d.id);
if (typeof code == "undefined") console.log("name=" + d.properties.name + ", code=" + d.id);
return (typeof code != "undefined") ? color(code[minYear]) : "#ddd";
})
.append("title")
.text(function(d) {
var code = usageByCountryCode.get(d.id);
;
return d.properties.name + ((typeof code != "undefined") ? (isNaN(code[minYear]) ? "" : (": " + code[minYear] +"% of GDP")) : ""); })
svg.insert("path", ".graticule")
.datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
.attr("class", "boundary")
.attr("d", path);
};
d3.select(self.frameElement).style("height", height + "px");
</script>
Country Name Country Code 2018
Argentina ARG 32
Belarus BLR 74
Brazil BRA 25
Bulgaria BGR 70
Chile CHL 61
China CHN 9
Colombia COL 39
Croatia HRV 75
Czech Republic CZE 53
Hungary HUN 91
India IND 13
Indonesia IDN 28
Kazakhstan KAZ 99
South Korea KOR 20
Latvia LVA 31
Lithuania LTU 19
Macedonia, FYR MKD 82
Mexico MEX 29
Peru PER 33
Philippines PHL 23
Portugal PRT 47
Romania ROU 46
Russian Federation RUS 26
Slovakia SVK 4
South Africa ZAF 23
Sri Lanka LKA 0
Thailand THA 23
Turkey TUR 49
Ukraine UKR 109
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