Swedish Polls ’14–’15

By ndarville (@pessimism).

Data from https://github.com/MansMeg/SwedishPolls.

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

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

.election-date-line {
                stroke: #000;
                stroke-width: 1px;
                stroke-dasharray: 5,5;
            }

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

/** Grid lines BEGIN */
        /** https://www.d3noob.org/2013/01/adding-grid-lines-to-d3js-graph.html */
            .grid .tick {
                stroke: lightgrey;
                opacity: 0.7;
            }
            .grid path {
                 stroke-width: 0;
            }
        /** Grid lines END */
        </style>
    </head>
    <body>
        
        <script src="d3.min.js?v=3.2.8"></script>
        <script type="text/javascript"charset="utf-8">
            // Settings
            var width = 440,
                height = 400,
                padding = 30;

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

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

// Config
            var dataset = "https://data.ndarville.com/swedish-polls/Data/Polls.csv", // "data.csv",
                parseDate = d3.time.format("%Y-%m-%d").parse,
                startDate = "2014-09-14", // "", // Time since last election result
                electionDate = "2015-03-22", // "09/14/2015", // Breaks when the year is 2015 for some reason
                yAxisTitle = "Votes (%)",
                dateValue = "collectPeriodTo",
                instituteValue = "Company"
                showLineChart = false,
                showDots = true,
                showAllParties = true,
                recalculateYMax = false;
                if (showAllParties === false) {
                    var parties = ["A"];
                }
                var displayInstitutes = (showAllParties === false && parties.length === 1) ? true : false;

var ignoreFilter = [
                "PublYearMonth",
                "Uncertain",
                "n",
                "PublDate",
                "collectPeriodFrom",
                "approxPeriod",
                "house"
            ]
            ignoreFilter.push(dateValue),
            ignoreFilter.push(instituteValue);

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

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

var color = d3.scale.category10();
            var instituteColor = d3.scale.category10();

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

var yAxis = d3.svg.axis()
                .scale(y)
                .orient("left")
                .tickFormat(function(d) { return d + "%"; });

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) {
                // Make a domain array of all the headers except those in ignoreFilter
                color.domain(
                    d3.keys(data[0])
                    .filter(function(key) {
                        if (ignoreFilter.indexOf(key) === -1) return key;
                    })
                );

// Make a domain array of all polling institutes
                instituteColor.domain(
                    d3.nest()
                    // Use the instituteValue column as key
                    .key(function(d) { return d[instituteValue]; })
                    // Enter data
                    .entries(data)
                    .map(function(d) { return d.key; })
                );

data.forEach(function(d) {
                    d.date = parseDate(d[dateValue]);
                });

if (startDate !== "")    { data = data.filter(function(d) { return d.date >= parseDate(startDate);    }); }
                if (electionDate !== "") { data = data.filter(function(d) { return d.date <= parseDate(electionDate); }); }

//! Redo as d3.nest
                var valueColumns =
                    color.domain()  // Contains array of all parties
                        .map(function(name) {
                            return {
                                // Party name
                                name: name,
                                // Value array containing date, value, and institute
                                values: data.map(function(d) {
                                    return {
                                        date: d.date,
                                        dataValue: parseFloat(d[name]),
                                        institute: d[instituteValue]
                                    };
                                })
                            };
                        });

// Compute x.domain()
                x.domain([
                    startDate !== ""    ? parseDate(startDate)    : d3.min(data, function(d) { return d.date; }),
                    electionDate !== "" ? parseDate(electionDate) : d3.max(data, function(d) { return d.date; })
                ]);

// Compute y.domain()
                if (recalculateYMax === true && showAllParties === false && parties.length === 1) {
                    y.domain([
                        0, d3.max(data, function(d) { return d[parties[0]]; })
                    ]);
                } else {
                    y.domain([  //! Reconsider after implementing d3.nest
                        0, d3.max(valueColumns, function(c) { return d3.max(c.values, function(v) { return v.dataValue; }); })
                    ]);
                }

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

// Append 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);

// Gridlines
                //
                // https://www.d3noob.org/2013/01/adding-grid-lines-to-d3js-graph.html
                 svg.append("g")
                    .attr({
                        "class": "grid",
                        "transform": "translate(0," + height + ")"
                    })
                    .call(xAxis
                        .tickSize(-height, 0, 0)
                        .tickFormat("")
                        .ticks(d3.time.months, 1)
                    );

// Create graph container
                var graph = svg.selectAll(".graph")
                    .data(valueColumns
                        .filter(function(d) {
                            return showAllParties === true ? d.name : parties.indexOf(d.name) !== -1;
                        }))
                    .enter().append("g")
                        .attr("class", "graph");

// Line displaying election date
                if (electionDate !== "") {
                    svg.append("line")
                        .attr("class", "election-date-line")
                        .attr({
                            "x1": x(parseDate(electionDate)),
                            "x2": x(parseDate(electionDate)),
                            "y1": y.range()[0],
                            "y2": y.range()[1]
                        });
                }

// Connect the dots with line
                /// Does not account for null values
                if (showLineChart === true) {
                    graph.append("path")
                        .attr({
                            "class": "line",
                            "d": function(d) { return line(d.values); }
                        })
                        .style("stroke", function(d) {
                            return (showAllParties === false && parties.length === 1) ? "#777" : color(d.name);
                        });
                }

// Add dots
                if (showDots === true) {
                    var dots = svg.selectAll(".dot")
                        .data(valueColumns.filter(function(d) {
                            return showAllParties === true ? d.name : parties.indexOf(d.name) !== -1;
                        }))
                        .enter()

// Add legend
                var legendSize = 18,
                    legendSpacing = 20,
                    legendData = displayInstitutes === false ? color.domain() : instituteColor.domain();
                var legend = svg.selectAll(".legend")
                    .data(legendData)
                    .enter().append("g")
                        .attr("class", "legend")
                        .attr("transform", function(d, i) { return "translate(" + 0 + "," + i * (legendSize + 2) + ")"; });

legend.append("rect")
                        .attr("x", width + legendSpacing)
                        .attr("width", legendSize)
                        .attr("height", legendSize)
                        .style("fill", function(d) { return (displayInstitutes === false) ? color(d): instituteColor(d); });

legend.append("text")
                        .attr("x", width + legendSpacing + legendSize + 6)
                        .attr("y", legendSize/2)
                        .attr("dy", ".35em")
                        .style("text-anchor", "start")
                        .text(function(d) { return d; });
            });
        </script>
    </body>
</html>

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

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