Confidence Interval

(This chart is a part of the d3-charts collection available here.)

This chart displays the share of votes over time between two Danish parliamentary coalitions using placeholder data. The chart here has been used for two coalitions, but can also be used for two candidates.

You will notice something enveloping the line charts, which is the confidence interval, which indicates the spectrum of the confidence in our displayed results---to use a completely unscientific definition.

Compare this to Sam Wang's chart for the U.S. 2012 election and Drew Linzer's charts for individual states.

Usage

All parameters are in the top of the script under // Config. If we use the example script:

var dataset = "data.csv",
    parseDate = d3.time.format("%Y/%m").parse,
    electionDate = "",  // "2014/11",
    interpolation = "linear";

var coalitionLeft = ["A", "B", "F", "Ø"],
    coalitionLeftColor = "#D7191C", // blue
    coalitionRight = ["V", "O", "K", "I", "C"],
    coalitionRightColor = "#2B83BA", // red
    displaySingleCoalition = false;
    // false, "left", "right"

var useCoalitionLabels = true,
    yAxisTitle = "Votes (%)",
    cutoff = 50;

if (useCoalitionLabels === true) { margin.right = 50; }

parseDate refers to the date format---in this case YYYY/MM.
electionDate refers to the date of the election, if known. This will change the maximum on the x-axis to said date to contextualize the trends.
interpolation refers to the "smoothing" of the graphs. More info here.
coalitionLeft/coalitionRight refer to the letters of each member party of a coalition, entered as strings in an array.
useCoalitionLabels refers to whether the developer wishes to display a coalition name (made by concatenating all its parties’ letters) at the end of the respective graph.
displaySingleCoalition refers to the fact that elections are often a zero-sum game. This option allows you to display just one of the two coalitions.
cutoff refers to the % at which the dotted divider should be set. In some cases, 50% may not be the desired value.

The other parameters should be self-explanatory.

The data should have a column with (1) a date, one for (2) each party or candidate, and one for (3) the number of respondents.

Future Features to Consider

Easier input for choosing between competing coalitions and candidates.

Issues

Subticks don't show.
No support for asymmetric confidence interval (GitHub issue link).

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            body {
                font: 10px sans-serif;
            }

svg {
                margin-left: auto; margin-right: auto;
                display: block;
            }

line,
            rect {
                shape-rendering: crispEdges;
            }

.axis path,
            .axis line {
                fill: none;
                stroke: #000;
                shape-rendering: crispEdges;
            }

.x.axis path {
                display: none;
            }

.divider {
                stroke: #777;
                stroke-dasharray: 5,5;
                opacity: 0.7;
            }

.line {
                fill: none;
                stroke-width: 1.5px;
            }

circle.dot {
                fill: #FFF;
                stroke-width: 1.5px;
            }

.area.confidence {
                zoom: 1;
                filter: alpha(opacity=30);
                opacity: 0.3;
            }

/**
            .area.above {
                fill: #D7191C !important;
            }

.area.below {
                fill: #2B83BA !important;
            }
        */
        </style>
    </head>
    <body>
        
        <script src="d3.min.js?v=3.2.8"></script>
        <script type="text/javascript"charset="utf-8">
            // Return standard error with 95% confidence
            function se95(p, n) {
                return Math.sqrt(p*(1-p)/n)*1.96;
            };

// Settings
            var width = 440,
                height = 400,
                padding = 30;

var margin = {
                'top': 30,
                'right': 35,
                'bottom': 30,
                'left': 30
            };

margin.hor = margin.left + margin.right;
            margin.ver = margin.top + margin.bottom;

// Config
            var dataset = "data.csv",
                parseDate = d3.time.format("%Y/%m").parse,
                electionDate = "",  // "2014/11"
                interpolation = "linear";

var coalitionLeft = ["A", "B", "F", "Ø"],
                coalitionLeftColor = "#D7191C", // blue
                coalitionRight = ["V", "O", "K", "I", "C"],
                coalitionRightColor = "#2B83BA", // red
                displaySingleCoalition = false;
                // false, "left", "right"

var useCoalitionLabels = true,
                yAxisTitle = "Votes (%)",
                cutoff = 50;

if (useCoalitionLabels === true) { margin.right = 50; }
            // for the labels; 40 + 10 for each array.length > 4

var x = d3.time.scale()
                .range([0, width]);

var y = d3.scale.linear()
                .range([height, 0]);

var xAxis = d3.svg.axis()
                .scale(x)
                .orient("bottom")
                .ticks(7)
                .tickSubdivide(2);

var yAxis = d3.svg.axis()
                .scale(y)
                .orient("left")
                .tickFormat(d3.format(".0%"));

var lineLeft = d3.svg.area()
                .interpolate(interpolation)
                .x(function(d) { return x(d["date"]); })
                .y(function(d) { return y(d["left"]); });

var lineRight = d3.svg.area()
                .interpolate(interpolation)
                .x(function(d) { return x(d["date"]); })
                .y(function(d) { return y(d["right"]); });

var svg = d3.select("body").append("svg")
                .attr({
                    "width": width + margin.left + margin.right,
                    "height": height + margin.top + margin.bottom
                })
                .append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.csv(dataset, function(error, data) {
                data.forEach(function(d) {
                    d.date = parseDate(d.date);
                    d.respondents = parseFloat(d.respondents);

coalitionSum = function(d, coalition) {
                        var votes = parseFloat(0);
                        for (var i = 0; i < coalition.length; i++) {
                            votes += parseFloat(d[coalition[i]])
                        }
                        // Return percentage in decimal format
                        return votes>1 ? votes/100 : votes;
                    };
                    d["left"] = coalitionSum(d, coalitionLeft),
                    d["right"] = coalitionSum(d, coalitionRight),
                    d["total"] = d["left"] + d["right"],
                    d["confidenceLeft"] = se95(d["left"], d["respondents"]),
                    d["confidenceRight"] = se95(d["right"], d["respondents"]);
                });

if (electionDate === "") {
                    x.domain(d3.extent(data, function(d) {
                        return d.date; }));
                } else {
                    x.domain([
                        d3.min(data, function(d) { return d.date; }),
                        parseDate(electionDate)
                    ]);
                }
                y.domain([
                    d3.min(data, function(d) {
                        var min = Math.min(d["right"], d["left"]);
                        return min - se95(min, d["respondents"]);
                    }),
                    d3.max(data, function(d) {
                        var max = Math.max(d["right"], d["left"]);
                        return max + se95(max, d["respondents"]);
                    })
                ]);

svg.datum(data);

// X axis
                svg.append("g")
                    .attr({
                        "class": "x axis",
                        "transform": "translate(0," + height + ")"
                    })
                    .call(xAxis);

// Y axis
                svg.append("g")
                    .attr("class", "y axis")
                    .call(yAxis)
                    .append("text")
                    .attr({
                        "transform": "rotate(-90)",
                        "y": 6,
                        "dy": ".71em"
                    })
                    .style("text-anchor", "end")
                    .text(yAxisTitle);

// Confidence area
                if (displaySingleCoalition !== "right") {
                    svg.append("path")
                        .attr({
                            "class": "area confidence",
                            "fill": coalitionLeftColor,
                            "d": confidenceAreaLeft
                        });
                }
                if (displaySingleCoalition !== "left") {
                    svg.append("path")
                        .attr({
                            "class": "area confidence",
                            "fill": coalitionRightColor,
                            "d": confidenceAreaRight
                        });
                }

// Lines
                if (displaySingleCoalition !== "right") {
                    svg.append("path")
                        .attr({
                            "class": "line",
                            "d": lineLeft,
                            "stroke": coalitionLeftColor
                        });
                }
                if (displaySingleCoalition !== "left") {
                    svg.append("path")
                        .attr({
                            "class": "line",
                            "d": lineRight,
                            "stroke": coalitionRightColor
                        });
                }

// Dots
                var dots = svg.selectAll("circle")
                    .data(data)
                    .enter();

if (displaySingleCoalition !== "right") {
                    var dotsLeft = dots.append("circle")
                        .attr({
                            "class": "dot",
                            "r": 3,
                            "cx": lineLeft.x(),
                            "cy": lineLeft.y(),
                            "stroke": coalitionLeftColor
                        });
                }
                if (displaySingleCoalition !== "left") {
                    var dotsRight = dots.append("circle")
                        .attr({
                            "class": "dot",
                            "r": 3,
                            "cx": lineRight.x(),
                            "cy": lineRight.y(),
                            "stroke": coalitionRightColor
                        });
                }

// Divider
                svg.append("line")
                    .attr("class", "divider")
                    .attr({
                        "x1": x.range()[0],
                        "x2": x.range()[1],
                        "y1": y(cutoff),
                        "y2": y(cutoff)
                    });

// Graph label
                if (useCoalitionLabels === true) {
                    if (displaySingleCoalition !== "right") {
                        svg.append("text")
                            .data(data)
                            .attr("transform", function(d) {
                                return "translate(" + x(data[data.length-1]["date"]) + "," + y(data[data.length-1]["left"]) + ")"; })
                            .attr({
                                "x": 10,
                                "dy": ".35em",
                                "class": "label",
                                "id": "coalitionLeft"
                            })
                            .text(coalitionLeft.join(""));
                    }
                    if (displaySingleCoalition !== "left") {
                        svg.append("text")
                            .data(data)
                            .attr("transform", function(d) {
                                return "translate(" + x(data[data.length-1]["date"]) + "," + y(data[data.length-1]["right"]) + ")"; })
                            .attr({
                                "x": 10,
                                "dy": ".35em",
                                "class": "label",
                                "id": "coalitionRight"
                            })
                            .text(coalitionRight.join(""));
                    }
                }
            });
        </script>
    </body>
</html>

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

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