Meningsmålingstendenser op til 27/11-14

Kig på dén grafik og fortæl mig, at Megafon-målingen—markeret med store cirkler helt til højre—ikke afviger bare en lille smule fra den generelle tendens?

Velkommen til statistisk usikkerhed—især hvis man kun bruger 1095 respondenter ...

Fortsat diskussion fra denne illustration af usikkerheden i den seneste Megafon-måling.

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

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 = "data.csv",
                parseDate = d3.time.format("%m/%d/%Y").parse,
                electionDate = "", // "09/14/2015"
                yAxisTitle = "Votes (%)",
                dateValue = "Date",
                instituteValue = "Polling Firm"
                showLineChart = false,
                showDots = true,
                showAllParties = false,
                recalculateYMax = false;
                if (showAllParties === false) {
                    var parties = ["O", "V", "A"];
                }
                var displayInstitutes = (showAllParties === false && parties.length === 1) ? true : false;

var ignoreFilter = [
                "Lead",
                "Red (A+B+F+Ø)",
                "Blue (V+O+I+C+K)"
            ]
            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]);
                });

//! 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()
                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)
                    ]);
                }

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

// Connect the dots with line
                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(".megafon")
                        .data(valueColumns.filter(function(d) {
                            return showAllParties === true ? d.name : parties.indexOf(d.name) !== -1;
                        }))
                        .enter()

else {
                            dots.append("circle")
                                .attr({
                                    "class": "dot",
                                    "r": 2,
                                    "cx": function(d) {
                                        return x(d.values[n].date);
                                    },
                                    "cy": function(d) {
                                        return y(d.values[n].dataValue);
                                    },
                                    "stroke": function(d) {
                                        return displayInstitutes === false ? color(d.name) : instituteColor(d.values[n].institute);
                                    }});
                            n += 1;
                        }
                    }
                }

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