Sample size and standard error

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