Built with blockbuilder.org
Last active
November 15, 2018 16:21
-
-
Save patiencehaggin/207590d6a16d463a52329366e8395dfa to your computer and use it in GitHub Desktop.
Sovereign debt in progress
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment