Documentation for science.js:
Related GitHub-repo:
xxxxxxxxxx<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="https://d3js.org/d3.v3.min.js"></script> --> <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 dateArr = data.map(function(d) { return d[dateValue]; }), leftArr = data.map(function(d) { return d["left"]; }), rightArr = data.map(function(d) { return d["right"]; }); 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