Skip to content

Instantly share code, notes, and snippets.

@elizabethshell

elizabethshell/index.html

Created April 12, 2015 22:30
Show Gist options
  • Save elizabethshell/c69aa40812d3b08c76ab to your computer and use it in GitHub Desktop.
Save elizabethshell/c69aa40812d3b08c76ab to your computer and use it in GitHub Desktop.
Download ZIP
Mod4 project: Elizabeth Shell
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Where the money goes</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<style type="text/css">
body {
background-color: #262626;
font-family: Helvetica, Arial, sans-serif;
}
h1 {
font-size: 32px;
margin: 0;
color: white;
}
p {
font-size: 15px;
margin: 10px 0 0 0;
color: white;
}
a {
color: #63B9AC;
}
svg {
background-color: #262626;
}
rect:hover {
fill: white;
}
/** this creates the hover effect **/
.axis path,
.axis line {
fill: none;
stroke: white;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
color: white;
}
.y.axis path,
.y.axis line {
opacity: 0;
}
/** we apply a class of x or y to it -- this means we can use css to style the axes differently. The opacity at 0 makes the axis bars invisible. **/
</style>
</head>
<body>
<h1>How much money do migrants send back home?</h1>
<p>Remittances sent abroad in 2014, by country. Mouse over to see the breakdown. </p>
<p style="font-size: 10px;"><em>Data: <a href="http://data.worldbank.org/">World Bank</a></em></p>
<script type="text/javascript">
var w = 700;
var h = 1200;
var padding = [ 20, 10, 30, 130 ]; //Top, right, bottom, left
var widthScale = d3.scale.linear()
.range([ 0, w - padding[1] - padding[3] ]);
var heightScale = d3.scale.ordinal()
.rangeRoundBands([ padding[0], h - padding[2] ], 0.2);
var xAxis = d3.svg.axis()
.scale(widthScale)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(heightScale)
.orient("left");
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
d3.csv("remittances.csv", function(data) {
data.sort(function(a, b) {
return d3.descending(+a.estb, +b.estb);
});
widthScale.domain([ 0, d3.max(data, function(d) {
return +d.estb;
}) ]);
heightScale.domain(data.map(function(d) { return d.country; } ));
var rects = svg.selectAll("rect")
.data(data)
.enter()
.append("rect");
rects.attr("x", padding[3])
.attr("y", function(d) {
return heightScale(d.country);
})
.attr("width", function(d) {
return widthScale(d.estb);
})
.attr("height", heightScale.rangeBand())
.attr("fill", "#63B9AC")
.append("title")
.text(function(d) {
return "$" + d.estb + " billion in remittances were sent to " + d.country + " in 2014";
});
svg.append("g")
.attr("class", "x axis")
.attr("fill", "white")
.attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + padding[3] + ",0)")
.attr("fill", "white")
.call(yAxis);
});
</script>
<p style="font-size: 10px;">Figures are initial 2014 estimates, U.S. dollars. </p>
</body>
</html>
Raw
remittances.csv
country past recent est estb gdp gdp is of 2013
India 53480 69970 71000 71.0 0.037
China 52460 59491 64140 64.1 0.006
Philippines 21557 26700 28382 28.4 0.098
France 19462 23336 24732 24.7 0.009
Mexico 22080 23022 24231 24.2 0.018
Nigeria 19818 20890 21294 21.3 0.04
Egypt, Arab Rep. 12453 17833 18000 18.0 0.066
Pakistan 9690 14626 17058 17.1 0.062
Germany 12792 15204 15985 16.0 0.004
Bangladesh 11282 13857 15053 15.1 0.107
Belgium 10287 11105 11539 11.5 0.022
Vietnam 8260 11000 11403 11.4 0.064
Spain 9099 9584 9671 9.7 0.007
Ukraine 6535 9667 9000 9.0 0.054
Indonesia 6916 7615 8353 8.4 0.009
Italy 6351 7471 8215 8.2 0.004
Poland 7575 6984 7959 8.0 0.013
Lebanon 6914 7551 7674 7.7 0.17
Russian Federation 5250 6751 7326 7.3 0.003
Sri Lanka 4123 6422 7202 7.2 0.096
Morocco 6423 6882 6819 6.8 0.066
United States 5930 6623 6806 6.8 0
Uzbekistan 2845 6633 6633 6.6 0.117
Korea, Rep. 5836 6425 6559 6.6 0.005
Nepal 3469 5552 6229 6.2 0.288
Thailand 3580 5690 5935 5.9 0.015
Guatemala 4232 5371 5862 5.9 0.1
Dominican Republic 3887 4486 4650 4.7 0.074
Portugal 3545 4372 4638 4.6 0.02
El Salvador 3472 3971 4280 4.3 0.164
Colombia 4031 4119 4195 4.2 0.011
Jordan 3517 3643 3754 3.8 0.108
Romania 3879 3515 3633 3.6 0.019
Tajikistan 2306 3582 3582 3.6 0.421
Japan 1684 2364 3468 3.5 0
Switzerland 2829 3149 3359 3.4 0.005
Yemen, Rep. 1526 3343 3343 3.3 0.093
Honduras 2618 3136 3341 3.3 0.169
Austria 2529 2911 3330 3.3 0.007
Serbia 3349 3183 3254 3.3 0.075
Czech Republic 2016 2270 3099 3.1 0.011
Lithuania 1674 2060 2973 3.0 0.045
Peru 2534 2707 2736 2.7 0.013
Armenia 1669 2193 2708 2.7 0.21
Ecuador 2599 2438 2583 2.6 0.027
Brazil 2754 2537 2500 2.5 0.001
Hungary 2144 2268 2371 2.4 0.017
Kyrgyz Republic 1266 2278 2370 2.4 0.315
Tunisia 2063 2291 2362 2.4 0.049
Jamaica 2026 2161 2261 2.3 0.15
Australia 1587 2090 2255 2.3 0.001
Slovak Republic 1591 2072 2212 2.2 0.022
Georgia 1184 1945 2210 2.2 0.121
Algeria 2044 2000 2063 2.1 0.01
Luxembourg 1629 1818 1965 2.0 0.03
Moldova 1351 1976 1956 2.0 0.249
Haiti 1474 1781 1954 2.0 0.211
Bosnia and Herzegovina 1822 1893 1949 1.9 0.106
United Kingdom 1696 1712 1914 1.9 0.001
Azerbaijan 1410 1733 1862 1.9 0.024
New Zealand 1164 1521 1798 1.8 0.008
Senegal 1478 1614 1663 1.7 0.107
Bulgaria 1333 1667 1653 1.7 0.031
Malaysia 1103 1396 1590 1.6 0.004
Netherlands 1696 1565 1589 1.6 0.002
Croatia 1212 1497 1537 1.5 0.026
Denmark 1078 1457 1528 1.5 0.004
Kenya 686 1338 1480 1.5 0.03
Iran, Islamic Rep. 1181 1330 1380 1.4 0.004
Canada 1222 1199 1258 1.3 0.001
Sweden 762 1167 1234 1.2 0.002
Bolivia 960 1201 1201 1.2 0.039
Belarus 575 1150 1194 1.2 0.016
Nicaragua 825 1081 1150 1.2 0.096
Kosovo 997 1122 1133 1.1 0.161
Finland 848 1066 1106 1.1 0.004
South Africa 1070 971 1041 1.0 0.003
Albania 1156 804 1031 1.0 0.062
Israel 572 765 1011 1.0 0.003
Uganda 771 932 1001 1.0 0.043
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment