Skip to content

Instantly share code, notes, and snippets.

@benvandyke
Last active January 3, 2016 15:29
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save benvandyke/8482820 to your computer and use it in GitHub Desktop.
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