fv15 Trend Chart

Documentation for science.js:

https://github.com/jasondavies/science.js/blob/master/src/stats/loess.js

Related GitHub-repo:

https://github.com/ndarville/d3-charts/issues/26

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

.trend {
                fill: none;
            }

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

.x.axis path {
                display: none;
            }

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

.majority-line {
                stroke: #000;
                stroke-width: 1px;
                stroke-dasharray: 3,3;
            }
        </style>
    </head>
    <body>
        
        <script src="d3.min.js?v=3.5.5"></script>
        <script src="science.v1.min.js"></script>
        <script type="text/javascript" charset="utf-8">
            // Settings
            // ========
            var width = 440,
                height = 150,
                padding = 30;

var margin = {
                "top"    : padding,
                "right"  : 35,
                "bottom" : padding,
                "left"   : padding
            };

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

// Config
            // ======
            var dataset = "https://data.ndarville.com/danish-polls/data.csv", // "data.csv"
                parseDate = d3.time.format("%Y-%m-%d").parse,
                dateValue = "Date",
                lastElectionDate = "2011-09-15", // ""
                nextElectionDate = "2015-06-18", // ""
                coalitionLeft = ["A", "B", "F", "Ø", "Å"],
                coalitionLeftColor = "#D7191C", // Accessible red
                coalitionRight = ["V", "O", "K", "I", "C"],
                coalitionRightColor = "#2B83BA", // Accessible blue
                yAxisTitle = "Votes (%)",
                loessRegression = true, // false
                loessBandwidth = .1; // .2
                // On a smaller dataset, you may want a bandwidth of .2

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")
                .tickFormat(function(d) {
                    var timeFormat = d3.time.format("%-b")(d) === "Jan" ? "%Y" : "%-b";
                    return d3.time.format(timeFormat)(d);
                });

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

return d < 50 ? d - 50 : "+" + (d - 50);
                });

var area = d3.svg.area()
                .interpolate("linear")
                .x(function(d) { return x(d[dateValue]); })
                .y1(function(d) { return y(d["right"]); }); // ! Still breaks without this setting

var line = d3.svg.line()
                .interpolate("linear");

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[dateValue] = parseDate(d[dateValue]);

coalitionSum = function(d, coalition) {
                        var votes = 0;
                        for (var i = 0; i < coalition.length; i++) {
                            // Add the votes for each coalition party to total
                            votes += +d[coalition[i]] || 0;
                        }
                        return votes;
                    };
                    d["left"] = coalitionSum(d, coalitionLeft);
                    d["right"] = coalitionSum(d, coalitionRight);
                    d["total"] = d["left"] + d["right"];
                });

x.domain([
                    parseDate(lastElectionDate) || d3.min(data, function(d) { return d[dateValue]; }),
                    parseDate(nextElectionDate) || d3.max(data, function(d) { return d[dateValue]; })
                ]);

data = data.filter(function(d) {
                    // Filter data by date range
                    return x.domain()[0] <= d[dateValue] && d[dateValue] <= x.domain()[1]; })
                .sort(function(a, b) {
                    // Non-descending date chronology breaks loess(),
                    // so we make sure to order the data properly.
                    return a[dateValue] - b[dateValue];
                });

if (loessRegression === true) {
                    // LOESS trend
                    // ===========
                    var loess = science.stats.loess().bandwidth(loessBandwidth);

var leftLOESS = loess(dateArr, leftArr),
                        rightLOESS = loess(dateArr, rightArr);

data.forEach(function(d, i) {
                        d["left"] = leftLOESS[i];
                        d["right"] = rightLOESS[i];
                    });
                }

y.domain([
                    d3.min(data, function(d) { return Math.min(d["left"]); }),
                    d3.max(data, function(d) { return Math.min(d["left"]); })
                ]);

var tickRange = [],
                    high = 50,
                    low = y.domain()[0];

while (high >= low) {
                    tickRange.push(d3.round(high--, 0));
                }

yAxis.tickValues(tickRange);

svg.datum(data);

svg.append("path")
                    .attr({
                        "class" : "trend",
                        "d"     : line
                                      .x(function(d) { return x(d[dateValue]); })
                                      .y(function(d) { return y(d["left"]); })
                    })
                    .style("stroke", "#777")
                    .style("stroke", "#D7191C");

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

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

// Majority line
                svg.append("line")
                    .attr({
                        "class" : "majority-line",
                        "x1"    : x.range()[0],
                        "x2"    : x.range()[1],
                        "y1"    : y(50),
                        "y2"    : y(50)
                    });
            });
        </script>
    </body>
</html>

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

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