| license: mit |
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="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 |