Hover over select countries to view their debt denominated in foreign currency, as a percentage of their GDP.
Foreign-currency debt is a risk factor for sovereign debt defaults, though far from the only factor.
Debt data from Council on Foreign Relations. Geographical data from Natural Earth.
Built with blockbuilder.org
forked from patiencehaggin's block: Sovereign debt denominated in foreign currency, as % of GDP
xxxxxxxxxx
<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="https://d3js.org/queue.v1.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://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>
Modified http://d3js.org/queue.v1.min.js to a secure url
Modified http://d3js.org/d3.v3.min.js to a secure url
Modified http://d3js.org/topojson.v1.min.js to a secure url
Modified http://d3js.org/d3.geo.projection.v0.min.js to a secure url
https://d3js.org/queue.v1.min.js
https://d3js.org/d3.v3.min.js
https://d3js.org/topojson.v1.min.js
https://d3js.org/d3.geo.projection.v0.min.js