| 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
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| background: #fcfcfa; | |
| } | |
| svg { | |
| font: 14px sans-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; | |
| } | |
| .year.label { | |
| font: 500 120px "Helvetica Neue"; | |
| fill: #ddd; | |
| } | |
| .year.label.active { | |
| fill: #aaa; | |
| } | |
| .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()); | |
| // Various accessors that specify the four dimensions of data to visualize. | |
| function key(d) { return d.id; } | |
| var usageByCountryCode = d3.map(); | |
| var minYear = 2011; | |
| var maxYear = 2011; | |
| 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); | |
| // Add the year label; the value is set on transition. | |
| var label = svg.append("text") | |
| //.attr("class", "year label") | |
| //.attr("text-anchor", "end") | |
| //.attr("y", 88) | |
| //.attr("x", width / 2 + 85) | |
| //.text(minYear); | |
| // ******** 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: 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", "black"); | |
| g.append("text") | |
| .attr("class", "caption") | |
| // .attr("text-anchor", "end") | |
| .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, "internetusage.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); | |
| // *********** Add an overlay for the year label. | |
| var box = label.node().getBBox(); | |
| var overlay = svg.append("rect") | |
| .attr("class", "overlay") | |
| .attr("x", box.x) | |
| .attr("y", box.y) | |
| .attr("width", box.width) | |
| .attr("height", box.height) | |
| .on("mouseover", enableInteraction); | |
| // ************************** | |
| 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") ? "" : (code[minYear] + "% of GDP")) ; }) | |
| */ | |
| ; | |
| return d.properties.name + ((typeof code != "undefined") ? (": " + code[minYear] +"% of GDP") : ""); }) | |
| // call(usage); | |
| svg.insert("path", ".graticule") | |
| .datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; })) | |
| .attr("class", "boundary") | |
| .attr("d", path); | |
| // Start a transition that interpolates the data based on year. | |
| svg.transition() | |
| .duration(30000) | |
| .ease("linear") | |
| .tween("year", tweenYear) | |
| .each("end", enableInteraction); | |
| // After the transition finishes, you can mouseover to change the year. | |
| function enableInteraction() { | |
| var yearScale = d3.scale.linear() | |
| .domain([minYear, maxYear]) | |
| .range([box.x + 10, box.x + box.width - 10]) | |
| .clamp(true); | |
| // Cancel the current transition, if any. | |
| svg.transition().duration(0); | |
| overlay | |
| .on("mouseover", mouseover) | |
| .on("mouseout", mouseout) | |
| .on("mousemove", mousemove) | |
| .on("touchmove", mousemove); | |
| function mouseover() { | |
| label.classed("active", true); | |
| } | |
| function mouseout() { | |
| label.classed("active", false); | |
| } | |
| function mousemove() { | |
| displayYear(yearScale.invert(d3.mouse(this)[0])); | |
| } | |
| } | |
| // Tweens the entire chart by first tweening the year, and then the data. | |
| // For the interpolated data, the dots and label are redrawn. | |
| function tweenYear() { | |
| var year = d3.interpolateNumber(minYear, maxYear); | |
| return function(t) { displayYear(year(t)); }; | |
| } | |
| // Updates the display to show the specified year. | |
| function displayYear(year) { | |
| var yr = Math.round(year); | |
| svg.selectAll(".country") | |
| .style("fill", function(d) { | |
| var code = usageByCountryCode.get(d.id); | |
| return (typeof code != "undefined") ? color(code[yr]) : "gray"; | |
| }) | |
| label.text(yr); | |
| } | |
| }; | |
| d3.select(self.frameElement).style("height", height + "px"); | |
| </script> |
| Country Name | Country Code | 2011 | |
|---|---|---|---|
| Arab World | ARB | 29.9122495 | |
| Caribbean small states | CSS | 41.455971 | |
| East Asia & Pacific (all income levels) | EAS | 38.5114324 | |
| East Asia & Pacific (developing only) | EAP | 33.5290359 | |
| Euro area | EMU | 73.372773 | |
| Europe & Central Asia (all income levels) | ECS | 59.7337356 | |
| Europe & Central Asia (developing only) | ECA | 38.576705 | |
| European Union | EUU | 72.3575315 | |
| Heavily indebted poor countries (HIPC) | HPC | 6.67010469 | |
| High income | HIC | 72.5855705 | |
| High income: nonOECD | NOC | 54.8981833 | |
| High income: OECD | OEC | 76.7548719 | |
| Latin America & Caribbean (all income levels) | LCN | 39.3778714 | |
| Latin America & Caribbean (developing only) | LAC | 38.7144599 | |
| Least developed countries: UN classification | LDC | 6.02681645 | |
| Low & middle income | LMY | 23.6047489 | |
| Low income | LIC | 5.96502397 | |
| Lower middle income | LMC | 16.2823738 | |
| Middle East & North Africa (all income levels) | MEA | 31.2539515 | |
| Middle East & North Africa (developing only) | MNA | 26.9157088 | |
| Middle income | MIC | 26.3938282 | |
| North America | NAC | 78.3727606 | |
| Not classified | INX | ||
| OECD members | OED | 70.8023584 | |
| Other small states | OSS | 12.5645128 | |
| Pacific island small states | PSS | 19.2822021 | |
| Small states | SST | 19.8007136 | |
| South Asia | SAS | 9.44756111 | |
| Sub-Saharan Africa (all income levels) | SSF | 12.6564475 | |
| Sub-Saharan Africa (developing only) | SSA | 12.6564475 | |
| Upper middle income | UMC | 37.0318758 | |
| World | WLD | 32.7203579 | |
| Afghanistan | AFG | ||
| Albania | ALB | ||
| Algeria | DZA | ||
| American Samoa | ASM | ||
| Andorra | AND | ||
| Angola | AGO | ||
| Antigua and Barbuda | ATG | ||
| Argentina | ARG | 32 | |
| Armenia | ARM | ||
| Aruba | ABW | ||
| Australia | AUS | ||
| Austria | AUT | ||
| Azerbaijan | AZE | ||
| Bahamas, The | BHS | ||
| Bahrain | BHR | ||
| Bangladesh | BGD | ||
| Barbados | BRB | ||
| Belarus | BLR | 74 | |
| Belgium | BEL | ||
| Belize | BLZ | ||
| Benin | BEN | ||
| Bermuda | BMU | ||
| Bhutan | BTN | ||
| Bolivia | BOL | ||
| Bosnia and Herzegovina | BIH | ||
| Botswana | BWA | ||
| Brazil | BRA | 25 | |
| Brunei Darussalam | BRN | ||
| Bulgaria | BGR | 70 | |
| Burkina Faso | BFA | ||
| Burundi | BDI | ||
| Cambodia | KHM | ||
| Cameroon | CMR | ||
| Canada | CAN | ||
| Cape Verde | CPV | ||
| Cayman Islands | CYM | ||
| Central African Republic | CAF | ||
| Chad | TCD | ||
| Channel Islands | CHI | ||
| Chile | CHL | 61 | |
| China | CHN | 9 | |
| Colombia | COL | 39 | |
| Comoros | COM | ||
| Congo, Dem. Rep. | COD | ||
| Congo, Rep. | COG | ||
| Costa Rica | CRI | ||
| Cote d'Ivoire | CIV | ||
| Croatia | HRV | 75 | |
| Cuba | CUB | ||
| Curacao | CUW | ||
| Cyprus | CYP | ||
| Czech Republic | CZE | 53 | |
| Denmark | DNK | ||
| Djibouti | DJI | ||
| Dominica | DMA | ||
| Dominican Republic | DOM | ||
| Ecuador | ECU | ||
| Egypt, Arab Rep. | EGY | ||
| El Salvador | SLV | ||
| Equatorial Guinea | GNQ | ||
| Eritrea | ERI | ||
| Estonia | EST | ||
| Ethiopia | ETH | ||
| Faeroe Islands | FRO | ||
| Fiji | FJI | ||
| Finland | FIN | ||
| France | FRA | ||
| French Polynesia | PYF | ||
| Gabon | GAB | ||
| Gambia, The | GMB | ||
| Georgia | GEO | ||
| Germany | DEU | ||
| Ghana | GHA | ||
| Greece | GRC | ||
| Greenland | GRL | ||
| Grenada | GRD | ||
| Guam | GUM | ||
| Guatemala | GTM | ||
| Guinea | GIN | ||
| Guinea-Bissau | GNB | ||
| Guyana | GUY | ||
| Haiti | HTI | ||
| Honduras | HND | ||
| Hong Kong SAR, China | HKG | ||
| Hungary | HUN | 91 | |
| Iceland | ISL | ||
| India | IND | 13 | |
| Indonesia | IDN | 28 | |
| Iran, Islamic Rep. | IRN | ||
| Iraq | IRQ | ||
| Ireland | IRL | ||
| Isle of Man | IMN | ||
| Israel | ISR | ||
| Italy | ITA | ||
| Jamaica | JAM | ||
| Japan | JPN | ||
| Jordan | JOR | ||
| Kazakhstan | KAZ | 99 | |
| Kenya | KEN | ||
| Kiribati | KIR | ||
| Korea, Dem. Rep. | PRK | ||
| South Korea | KOR | 20 | |
| Kosovo | KSV | ||
| Kuwait | KWT | ||
| Kyrgyz Republic | KGZ | ||
| Lao PDR | LAO | ||
| Latvia | LVA | 31 | |
| Lebanon | LBN | ||
| Lesotho | LSO | ||
| Liberia | LBR | ||
| Libya | LBY | ||
| Liechtenstein | LIE | ||
| Lithuania | LTU | 19 | |
| Luxembourg | LUX | ||
| Macao SAR, China | MAC | ||
| Macedonia, FYR | MKD | 82 | |
| Madagascar | MDG | ||
| Malawi | MWI | ||
| Malaysia | MYS | ||
| Maldives | MDV | ||
| Mali | MLI | ||
| Malta | MLT | ||
| Marshall Islands | MHL | ||
| Mauritania | MRT | ||
| Mauritius | MUS | ||
| Mexico | MEX | 29 | |
| Micronesia, Fed. Sts. | FSM | ||
| Moldova | MDA | ||
| Monaco | MCO | ||
| Mongolia | MNG | ||
| Montenegro | MNE | ||
| Morocco | MAR | ||
| Mozambique | MOZ | ||
| Myanmar | MMR | ||
| Namibia | NAM | ||
| Nepal | NPL | ||
| Netherlands | NLD | ||
| New Caledonia | NCL | ||
| New Zealand | NZL | ||
| Nicaragua | NIC | ||
| Niger | NER | ||
| Nigeria | NGA | ||
| Northern Mariana Islands | MNP | ||
| Norway | NOR | ||
| Oman | OMN | ||
| Pakistan | PAK | ||
| Palau | PLW | ||
| Panama | PAN | ||
| Papua New Guinea | PNG | ||
| Paraguay | PRY | ||
| Peru | PER | 33 | |
| Philippines | PHL | 23 | |
| Poland | POL | ||
| Portugal | PRT | 47 | |
| Puerto Rico | PRI | ||
| Qatar | QAT | ||
| Romania | ROU | 46 | |
| Russian Federation | RUS | 26 | |
| Rwanda | RWA | ||
| Samoa | WSM | ||
| San Marino | SMR | ||
| Sao Tome and Principe | STP | ||
| Saudi Arabia | SAU | ||
| Senegal | SEN | ||
| Serbia | SRB | ||
| Seychelles | SYC | ||
| Sierra Leone | SLE | ||
| Singapore | SGP | ||
| Sint Maarten (Dutch part) | SXM | ||
| Slovakia | SVK | 4 | |
| Slovenia | SVN | ||
| Solomon Islands | SLB | ||
| Somalia | SOM | ||
| South Africa | ZAF | 23 | |
| South Sudan | SSD | ||
| Spain | ESP | ||
| Sri Lanka | LKA | 0 | |
| St. Kitts and Nevis | KNA | ||
| St. Lucia | LCA | ||
| St. Martin (French part) | MAF | ||
| St. Vincent and the Grenadines | VCT | ||
| Sudan | SDN | ||
| Suriname | SUR | ||
| Swaziland | SWZ | ||
| Sweden | SWE | ||
| Switzerland | CHE | ||
| Syrian Arab Republic | SYR | ||
| Tajikistan | TJK | ||
| Tanzania | TZA | ||
| Thailand | THA | 23 | |
| Timor-Leste | TLS | ||
| Togo | TGO | ||
| Tonga | TON | ||
| Trinidad and Tobago | TTO | ||
| Tunisia | TUN | ||
| Turkey | TUR | 49 | |
| Turkmenistan | TKM | ||
| Turks and Caicos Islands | TCA | ||
| Tuvalu | TUV | ||
| Uganda | UGA | ||
| Ukraine | UKR | 109 | |
| United Arab Emirates | ARE | ||
| United Kingdom | GBR | ||
| United States | USA | ||
| Uruguay | URY | ||
| Uzbekistan | UZB | ||
| Vanuatu | VUT | ||
| Venezuela, RB | VEN | ||
| Vietnam | VNM | ||
| Virgin Islands (U.S.) | VIR | ||
| West Bank and Gaza | PSE | ||
| Yemen, Rep. | YEM | ||
| Zambia | ZMB | ||
| Zimbabwe | ZWE |