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> |