Old school D3 from simpler times

All examples By author By category About

SpaceActuary

Full window Github gist

Slopegraph

forked from benvandyke's block: Slopegraph

<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="https://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="https://data.worldbank.org/indicator/NY.GNP.PCAP.PP.CD">https://data.worldbank.org/indicator/NY.GNP.PCAP.PP.CD.</a>
		<p>Most recent year available for Argentina is 2006.</p>
	<script>
		
		var width = 480;
		var height = 500;
		
		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.Expected));
				})
				.attr("y2", function(d) {
					return rightScale(parseFloat(d.Actual));
				})
				.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.Actual)) + 4;
				})
				.text(function (d) {
					return d['Country'] + " " + currencyFormatter(d.Actual);
				});
			
			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.Expected)) + 4;
				})
				.text(function (d) {
					return d['Country'] + " " + currencyFormatter(d.Expected);
				})
				.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>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js