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; } .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="https://d3js.org/d3.v3.min.js"></script> --> <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 confidenceAreaLeft = d3.svg.area() .interpolate(interpolation) .x(function(d) { return x(d["date"]); }) .y0(function(d) { return y(d["left"] - d["confidenceRight"]); }) .y1(function(d) { return y(d["left"] + d["confidenceRight"]); }); var confidenceAreaRight = d3.svg.area() .interpolate(interpolation) .x(function(d) { return x(d["date"]); }) .y0(function(d) { return y(d["right"] - d["confidenceRight"]); }) .y1(function(d) { return y(d["right"] + d["confidenceRight"]); }); 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