Slopegraph of Latin America per capita gross national income statistics from 1980-2010 implemented in D3.js
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 | 1980 | 2010 | |
---|---|---|---|
Argentina | 4820 | 11730 | |
Belize | 1620 | 7090 | |
Bolivia | 1820 | 4470 | |
Brazil | 3530 | 10890 | |
Chile | 2240 | 17360 | |
Colombia | 2540 | 8910 | |
Costa Rica | 2940 | 11270 | |
Ecuador | 2920 | 8330 | |
Guatemala | 1870 | 4600 | |
Guyana | 920 | 2970 | |
Honduras | 1290 | 3730 | |
Mexico | 3660 | 14600 | |
Nicaragua | 1620 | 3480 | |
Panama | 2770 | 13930 | |
Peru | 2790 | 8690 | |
El Salvador | 2060 | 6380 | |
Suriname | 3120 | 7760 | |
Uruguay | 3630 | 13290 | |
Venezuela | 5600 | 11790 |
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
<title>Latin America Economic Growth Trend</title> | |
<style> | |
.left-labels, | |
.labels { | |
font-family: sans-serif; | |
font-size: 8px; | |
} | |
.chart-title { | |
font-family:sans-serif; | |
font-size: 16px; | |
text-anchor: middle; | |
font-weight: bold; | |
} | |
.footer { | |
font-family:sans-serif; | |
} | |
</style> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
<body> | |
<div id="graph-container"></div> | |
<div class="footer"> | |
<p>Data sourced from the World Bank: <a href="http://data.worldbank.org/indicator/NY.GNP.PCAP.PP.CD">http://data.worldbank.org/indicator/NY.GNP.PCAP.PP.CD.</a> | |
<p>Most recent year available for Argentina is 2006.</p> | |
<script> | |
var width = 700; | |
var height = 600; | |
var margin = {top: 20, bottom: 20, left: 100, right:100}; | |
var leftScale = d3.scale.linear() | |
.domain([0.0, 18000.0]) | |
.range([height - margin.top, margin.bottom]); | |
var rightScale = d3.scale.linear() | |
.domain([0.0, 18000.0]) | |
.range([height - margin.top, margin.bottom]); | |
var currencyFormatter = d3.format("0,.0f"); | |
var svg = d3.select("#graph-container") | |
.append("svg") | |
.attr("width", width) | |
.attr("height", height); | |
d3.csv('gni_ppp.csv', function(d) { | |
data = d; | |
var lines = svg.selectAll("line") | |
.data(data); | |
lines.enter() | |
.append("line") | |
.attr("x1", margin.left) | |
.attr("x2", width - margin.right) | |
.attr("y1", function(d) { | |
return leftScale(parseFloat(d['1980'])); | |
}) | |
.attr("y2", function(d) { | |
return rightScale(parseFloat(d['2010'])); | |
}) | |
.attr("stroke", "black") | |
.attr("stroke-width", 1); | |
var rightLabels = svg.selectAll(".labels") | |
.data(data); | |
rightLabels.enter() | |
.append("text") | |
.attr("class","labels") | |
.attr("x", width - margin.right + 3) | |
.attr("y", function(d) { | |
return rightScale(parseFloat(d['2010'])) + 4; | |
}) | |
.text(function (d) { | |
return d['Country'] + " " + currencyFormatter(d['2010']); | |
}); | |
var leftLabels = svg.selectAll(".left-labels") | |
.data(data); | |
leftLabels.enter() | |
.append("text") | |
.attr("class","left-labels") | |
.attr("x", margin.left - 65) | |
.attr("y", function(d) { | |
return leftScale(parseFloat(d['1980'])) + 4; | |
}) | |
.text(function (d) { | |
return d['Country'] + " " + currencyFormatter(d['1980']); | |
}) | |
.style("text-anchor","begin"); | |
svg.append("text") | |
.attr("x", width / 2) | |
.attr("y", margin.top) | |
.attr("class", "chart-title") | |
.text("Latin America GNI per capita PPP, 1980-2010"); | |
}); | |
</script> | |
</body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment