Skip to content

Instantly share code, notes, and snippets.

@benvandyke benvandyke/gni_ppp.csv
Last active Jan 3, 2016

Embed
What would you like to do?
Slopegraph of Latin America per capita gross national income statistics from 1980-2010 implemented in D3.js
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
<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
You can’t perform that action at this time.