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="https://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>

(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) {

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>

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

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