Skip to content

Instantly share code, notes, and snippets.

@leondutoit
Last active December 19, 2015 09:09
Show Gist options
  • Save leondutoit/5930528 to your computer and use it in GitHub Desktop.
Save leondutoit/5930528 to your computer and use it in GitHub Desktop.
Tufte-style slopegraph

The South African economy has undergone much change since 1980. At a macroeconomic level this is noticable in the change in the contributions of different sectors of production to GDP. Like many other emerging markets, the economy has gradualy shifted to a more services-based economy.

In this visualisation I show this using a graphical technique pioneereed by Edward Tufte - a slopegraph. There are some basic mouseover interactions to help the eye see and the brain understand.

<!DOCTYPE HTML>
<html>
<head>
<title>Tufte-style slopegraph</title>
<script src="http://d3js.org/d3.v3.js"></script>
<style type="text/css">
.text {
font-size: 18px;
font-family: monospace;
}
.explanation {
font-size: 12px;
}
.start-label {
text-anchor: end;
}
.end-label {
text-anchor: start;
}
.paths {
stroke: black;
stroke-width: 1;
fill: none;
}
.mouseover {
font-weight: bold;
}
</style>
</head>
<body>
<script type="text/javascript">
(function() {
var data = {"primary": [
{ "date": "1980", "gdp": 16, "sector": "Primary" },
{ "date": "2011", "gdp": 8, "sector": "Primary" }
],
"secondary": [
{ "date": "1980", "gdp": 29, "sector": "Secondary" },
{ "date": "2011", "gdp": 23, "sector": "Secondary" }
],
"tertiary": [
{ "date": "1980", "gdp": 55, "sector": "Tertiary" },
{ "date": "2011", "gdp": 69, "sector": "Tertiary" }
]
};
var margin = {top:25, bottom:25, left:300, right:300};
var width = 800-margin.left-margin.right;
var height = 500-margin.top-margin.bottom;
var parseDate = d3.time.format("%y").parse;
var startDate = d3.min(data.primary, function(d) { return d.date; });
var endDate = d3.max(data.primary, function(d) { return d.date; });
var xScale = d3.time.scale()
.domain([startDate, endDate])
.range([0, width]);
var yScale = d3.scale.linear()
.domain([0, 100])
.range([height, 0]);
var xAxis = d3.svg.axis().scale(xScale).orient("bottom");
var yAxis = d3.svg.axis().scale(yScale).orient("left");
var slopeFunction = d3.svg.line()
.x(function(d) { return xScale(d.date); })
.y(function(d) { return yScale(d.gdp); })
.interpolate("linear");
var svg = d3.select("body").append("div").append("svg")
.attr("width", width+margin.left+margin.right)
.attr("height", height+margin.top+margin.bottom);
var slopeSvg = svg.append("g")
.attr("transform", "translate("+margin.left+","+margin.top+")");
sectors = [ data.primary, data.secondary, data.tertiary ];
sectors.forEach(function(d) {
slopeSvg.append("g")
.attr("class", "paths")
.append("path")
.datum(d)
.attr("id", d[0].sector)
.attr("d", slopeFunction);
});
sectors.forEach(function(d) {
var text = slopeSvg.append("g").attr("class", "text")
.selectAll("text").data(d).enter()
.append("text")
.attr("xml:space", "preserve")
.attr("x", function(d) { return xScale(d.date); })
.attr("y", function(d) { return yScale(d.gdp-1); })
.attr("id", function(d) { return d.sector; })
.attr("class", function(d) {
if (d.date===startDate) {
return "start-label";
} else {
return "end-label";
}
});
text.text(function(d) {
if (d.date===startDate) {
return d.sector+", "+d.gdp+"% ";
} else {
return " "+d.gdp+"%, "+d.sector;
}
});
text.on("mouseover", function() {
var sector = d3.select(this).attr("id");
d3.selectAll("#"+sector).attr("stroke-width", 2);
d3.selectAll("#"+sector).attr("font-weight", "bold");
})
.on("mouseout", function() {
var sector = d3.select(this).attr("id");
d3.selectAll("#"+sector).attr("stroke-width", 1);
d3.selectAll("#"+sector).attr("font-weight", "normal")
});
});
var title = svg.append("g")
.attr("class", "title")
.attr("transform", "translate("+margin.left/2+",0)")
.append("text")
.attr("class", "text")
.attr("text-anchor", "start")
.attr("dy", "2em")
.text("The SA economy: sectoral GDP in 1980 & 2011");
title
.on("mouseover", function() {
svg.append("g")
.attr("class", "explanation")
.attr("transform", "translate("+margin.left/2+",0)")
.append("text")
.attr("text-anchor", "start")
.attr("dy", "6em")
.text("Together the three sectors account for 100% of GDP. The graph shows their evolution - the shift to a service-based economy.");
})
.on("mouseout", function() {
d3.select(".explanation").remove();
});
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment