Sovereign debt denominated in foreign currency

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

<!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="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);

</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