Last active
August 29, 2015 14:17
-
-
Save michalskop/f278f2a947d982a5e34a to your computer and use it in GitHub Desktop.
Polls charts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // calculates exact binomial confidence intervals (4 decimal digits) | |
| // http://statpages.org/confint.html | |
| function CalcBinL(x,N,vTL,vTU) { | |
| vTL = typeof vTL !== 'undefined' ? vTL : 0.05; | |
| vTU = typeof vTU !== 'undefined' ? vTU : 0.05; | |
| var vx = x | |
| var vN = N | |
| var vP = vx/vN | |
| P= vP | |
| if(vx==0) | |
| { DL = 0 } else | |
| { var v=vP/2; vsL=0; vsH=vP; var p=vTL | |
| while((vsH-vsL)>1e-5) { if(BinP(vN,v,vx,vN)>p) { vsH=v; v=(vsL+v)/2 } else { vsL=v; v=(v+vsH)/2 } } | |
| DL = v } | |
| return DL | |
| } | |
| function CalcBinU(x,N,vTL,vTU) { | |
| vTL = typeof vTL !== 'undefined' ? vTL : 0.05; | |
| vTU = typeof vTU !== 'undefined' ? vTU : 0.05; | |
| var vx = x | |
| var vN = N | |
| var vP = vx/vN | |
| P= vP | |
| if(vx==vN) | |
| { DU = 1 } else | |
| { var v=(1+vP)/2; vsL=vP; vsH=1; var p=vTU | |
| while((vsH-vsL)>1e-5) { if(BinP(vN,v,0,vx)<p) { vsH=v; v=(vsL+v)/2 } else { vsL=v; v=(v+vsH)/2 } } | |
| DU = v } | |
| return DU | |
| } | |
| function BinP(N,p,x1,x2) { | |
| var q=p/(1-p); var k=0; var v = 1; var s=0; var tot=0 | |
| while(k<=N) { | |
| tot=tot+v | |
| if(k>=x1 & k<=x2) { s=s+v } | |
| if(tot>1e30){s=s/1e30; tot=tot/1e30; v=v/1e30} | |
| k=k+1; v=v*q*(N+1-k)/k | |
| } | |
| return s/tot | |
| } | |
| function Fmt(x) { | |
| var v | |
| if(x>=0) { v=''+(x+0.00005) } else { v=''+(x-0.00005) } | |
| return v.substring(0,v.indexOf('.')+5) | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| d3.doublebarchart = function() { | |
| //defaults | |
| var threshold = false, | |
| data = [], | |
| color = 'gray', | |
| size = {"width": 300, "height": 300} | |
| function doublebarchart(selection) { | |
| selection.each(function(d,i) { | |
| var datav = (typeof(data) === "function" ? data(d) : data), | |
| sizev = (typeof(size) === "function" ? size(d) : size), | |
| thresholdv = (typeof(threshold) === "function" ? threshold(d) : threshold); | |
| var names = [], | |
| ymax = 0; | |
| for (i = 0; i < datav.length; i++) { | |
| names.push(datav[i].name); | |
| if ((typeof(datav[i]['value_hi']) != 'undefined') && (datav[i]['value_hi'] > ymax)) { | |
| ymax = datav[i]['value_hi']; | |
| } else if (datav[i]['value'] > ymax) | |
| ymax = datav[i]['value']; | |
| if ((typeof(datav[i]['value_old']) != 'undefined') && (datav[i]['value_old'] > ymax)) | |
| ymax = datav[i]['value_old']; | |
| } | |
| ymax = ymax * 1.1; | |
| //scales | |
| var x = d3.scale.ordinal() | |
| .rangeRoundBands([0, sizev['width']], .25) | |
| .domain(names); | |
| var y = d3.scale.linear() | |
| .range([sizev['height'], 0]) | |
| .domain([0,ymax]) | |
| .nice(); | |
| //axes | |
| var xAxis = d3.svg.axis() | |
| .scale(x) | |
| .orient("bottom"); | |
| var yAxis = d3.svg.axis() | |
| .scale(y) | |
| .orient("left") | |
| .ticks(5, "%"); | |
| //get this element | |
| var element = d3.select(this); | |
| //Create X axis | |
| element.append("g") | |
| .attr("class", "axis x-axis") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(xAxis); | |
| //Create Y axis | |
| //element.append("g") | |
| //.attr("class", "axis y-axis") | |
| //.call(yAxis); | |
| //link | |
| var link = element.append("a") | |
| .attr("xlink:href","http://pollster.eu") | |
| .append("text") | |
| .attr("fill","#abc") | |
| .attr("fill-opacity",1) | |
| .attr("font-family","sans-serif") | |
| .attr("font-weight","bold") | |
| .attr("font-size",height/2) | |
| .attr("font-size","0.66em") | |
| .attr("x",function(d) {return width*0.8}) | |
| .attr("y",function(d) {return height*0.05}); | |
| link.append("tspan") | |
| .text("pollster.eu") | |
| .attr("fill","blue"); | |
| link.append("tspan") | |
| .text("rope") | |
| .attr("fill","#abc"); | |
| element.selectAll(".value-old") | |
| .data(datav) | |
| .enter().append("rect") | |
| .attr("class", function(d) {return "bar old " + d.id}) | |
| .attr("x", function(d) { return x(d.name) - x.rangeBand()/5; }) | |
| .attr("width", x.rangeBand()) | |
| .attr("y", function(d) { if (typeof(d.value_old) != "undefined") return y(d.value_old); else return y(0); }) | |
| .attr("height", function(d) { if (typeof(d.value_old) != "undefined") return height - y(d.value_old); else return height - y(0) }) | |
| .attr("title",function(d) {title = Math.round(100*d.value_old) + " %"; return title;}) | |
| .attr("fill",function(d) {return d.color}) | |
| .attr("fill-opacity",0.2); | |
| element.selectAll(".value") | |
| .data(datav) | |
| .enter().append("rect") | |
| .attr("class", function(d) {return "bar " + d.id}) | |
| .attr("x", function(d) { return x(d.name)}) | |
| .attr("width", x.rangeBand()) | |
| .attr("y", function(d) { return y(d.value); }) | |
| .attr("height", function(d) { return height - y(d.value); }) | |
| .attr("title",function(d) {title = Math.round(100*d.value) + " %"; return title;}) | |
| .attr("fill",function(d) {return d.color}) | |
| .attr("fill-opacity",1); | |
| //threshold | |
| if (thresholdv) { | |
| element.append("line") | |
| .attr("x1", 0) | |
| .attr("y1", function() { return y(thresholdv) }) | |
| .attr("x2", width) | |
| .attr("y2", function() { return y(thresholdv) }) | |
| .attr("stroke","red"); | |
| } | |
| //text | |
| var legend = element.selectAll(".text") | |
| .data(datav) | |
| .enter() | |
| .append("text") | |
| .attr("text-anchor", "middle") | |
| .attr("x", function(d, i) { return x(d.name) + x.rangeBand()/2; }) | |
| .attr("y", function(d) { | |
| if (typeof(d.value_old) != "undefined") | |
| return y(Math.max(d.value_old,d.value)) - sizev['height']/10; | |
| else | |
| return y(d.value) - sizev['height']/10; | |
| }) | |
| .attr("font-family","sans-serif"); | |
| legend.append("tspan") | |
| .text(function(d){return Math.round(10000*d.value)/100 + "%";}) | |
| .attr("font-weight","bold") | |
| ; | |
| var legend2 = element.selectAll(".text") | |
| .data(datav) | |
| .enter() | |
| .append("text") | |
| .attr("text-anchor", "middle") | |
| .attr("x", function(d, i) { return x(d.name) + x.rangeBand()/2; }) | |
| .attr("y", function(d) { | |
| if (typeof(d.value_old) != "undefined") | |
| return y(Math.max(d.value_old,d.value)) - sizev['height']/30; | |
| else | |
| return y(d.value) - sizev['height']/30; | |
| }) | |
| .attr("font-family","sans-serif"); | |
| legend2.append("tspan") | |
| .text(function(d){return d.legend_small}) | |
| .attr("font-size","0.66em"); | |
| // element.selectAll(".text") | |
| // .data(data) | |
| // .enter() | |
| // .append("text") | |
| // .text(function(d){ | |
| // if (typeof(d.value_old) != "undefined") | |
| // return "(" + Math.round(10000*d.value_old)/100 + "%)"; | |
| // else | |
| // return ""; | |
| // }) | |
| // .attr("text-anchor", "middle") | |
| // .attr("x", function(d, i) { return x(d.name) + x.rangeBand()/2; }) | |
| // .attr("y", function(d) { | |
| // if (typeof(d.value_old) != "undefined") | |
| // return y(Math.max(d.value_old,d.value)) - 5; | |
| // else | |
| // return y(0); | |
| // }) | |
| // .attr("font-size","0.66em") | |
| // .attr("class","label2"); | |
| }); | |
| } | |
| doublebarchart.data = function(value) { | |
| if (!arguments.length) return value; | |
| data = value; | |
| return doublebarchart; | |
| }; | |
| doublebarchart.size = function(value) { | |
| if (!arguments.length) return value; | |
| size = value; | |
| return doublebarchart; | |
| }; | |
| doublebarchart.threshold = function(value) { | |
| if (!arguments.length) return value; | |
| threshold = value; | |
| return doublebarchart; | |
| }; | |
| return doublebarchart; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| d3.doublebarchart = function() { | |
| //defaults | |
| var threshold = false, | |
| data = [], | |
| color = 'gray', | |
| size = {"width": 300, "height": 300} | |
| function doublebarchart(selection) { | |
| selection.each(function(d,i) { | |
| var datav = (typeof(data) === "function" ? data(d) : data), | |
| sizev = (typeof(size) === "function" ? size(d) : size), | |
| thresholdv = (typeof(threshold) === "function" ? threshold(d) : threshold); | |
| var names = [], | |
| ymax = 0; | |
| for (i = 0; i < datav.length; i++) { | |
| names.push(datav[i].name); | |
| // if ((typeof(datav[i]['value_hi']) != 'undefined') && (datav[i]['value_hi'] > ymax)) { | |
| // ymax = datav[i]['value_hi']; | |
| // } else if (datav[i]['value'] > ymax) | |
| // ymax = datav[i]['value']; | |
| // if ((typeof(datav[i]['value_old']) != 'undefined') && (datav[i]['value_old'] > ymax)) | |
| // ymax = datav[i]['value_old']; | |
| if (2*CalcBinU(datav[i]['value']*666,666)-(2-1)*datav[i]['value'] > ymax) | |
| ymax = 2*CalcBinU(datav[i]['value']*666,666)-(2-1)*datav[i]['value']; | |
| } | |
| ymax = ymax * 1.1; | |
| //scales | |
| var x = d3.scale.ordinal() | |
| .rangeRoundBands([0, sizev['width']], .25) | |
| .domain(names); | |
| var y = d3.scale.linear() | |
| .range([sizev['height'], 0]) | |
| .domain([0,ymax]) | |
| .nice(); | |
| //axes | |
| var xAxis = d3.svg.axis() | |
| .scale(x) | |
| .orient("bottom"); | |
| var yAxis = d3.svg.axis() | |
| .scale(y) | |
| .orient("left") | |
| .ticks(5, "%"); | |
| //get this element | |
| var element = d3.select(this); | |
| //Create X axis | |
| element.append("g") | |
| .attr("class", "axis x-axis") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(xAxis); | |
| //Create Y axis | |
| //element.append("g") | |
| //.attr("class", "axis y-axis") | |
| //.call(yAxis); | |
| //link | |
| var link = element.append("a") | |
| .attr("xlink:href","http://pollster.eu") | |
| .append("text") | |
| .attr("fill","#abc") | |
| .attr("fill-opacity",1) | |
| .attr("font-family","sans-serif") | |
| .attr("font-weight","bold") | |
| .attr("font-size",height/2) | |
| .attr("font-size","0.66em") | |
| .attr("x",function(d) {return width*0.8}) | |
| .attr("y",function(d) {return height*0.05}); | |
| link.append("tspan") | |
| .text("pollster.eu") | |
| .attr("fill","blue"); | |
| link.append("tspan") | |
| .text("rope") | |
| .attr("fill","#abc"); | |
| // element.selectAll(".value-old") | |
| // .data(datav) | |
| // .enter().append("rect") | |
| // .attr("class", function(d) {return "bar old " + d.id}) | |
| // .attr("x", function(d) { return x(d.name) - x.rangeBand()/5; }) | |
| // .attr("width", x.rangeBand()) | |
| // .attr("y", function(d) { if (typeof(d.value_old) != "undefined") return y(d.value_old); else return y(0); }) | |
| // .attr("height", function(d) { if (typeof(d.value_old) != "undefined") return height - y(d.value_old); else return height - y(0) }) | |
| // .attr("title",function(d) {title = Math.round(100*d.value_old) + " %"; return title;}) | |
| // .attr("fill",function(d) {return d.color}) | |
| // .attr("fill-opacity",0.2); | |
| element.selectAll(".value") | |
| .data(datav) | |
| .enter().append("rect") | |
| .attr("class", function(d) {return "bar " + d.id}) | |
| .attr("x", function(d) { return x(d.name)}) | |
| .attr("width", x.rangeBand()) | |
| .attr("y", function(d) { | |
| coef = 2; | |
| return y(coef*CalcBinL(d.value*666,666)-(coef-1)*d.value); | |
| }) | |
| .attr("height", function(d) { | |
| coef = 2; | |
| return height - y(coef*CalcBinL(d.value*666,666)-(coef-1)*d.value) | |
| }) | |
| .attr("title",function(d) {title = Math.round(100*d.value) + " %"; return title;}) | |
| .attr("fill",function(d) {return d.color}) | |
| .attr("fill-opacity",1); | |
| element.selectAll(".half-value") | |
| .data(datav) | |
| .enter().append("rect") | |
| .attr("class", function(d) {return "bar " + d.id}) | |
| .attr("x", function(d) { return x(d.name)}) | |
| .attr("width", x.rangeBand()) | |
| .attr("y", function(d) { | |
| coef = 2; | |
| return y(coef*CalcBinU(d.value*666,666)-(coef-1)*d.value); | |
| }) | |
| .attr("height", function(d) { | |
| coef = 2; | |
| return height - y(coef*CalcBinU(d.value*666,666)-(coef-1)*d.value) | |
| }) | |
| .attr("title",function(d) {title = Math.round(100*d.value) + " %"; return title;}) | |
| .attr("fill",function(d) {return d.color}) | |
| .attr("fill-opacity",0.4) | |
| element.selectAll(".half-value") | |
| .data(datav) | |
| .enter().append("line") | |
| .attr("x1", function(d) { return x(d.name)}) | |
| .attr("y1", function(d) {return y(d.value)}) | |
| .attr("x2", function(d) { return x(d.name) + x.rangeBand(); }) | |
| .attr("y2", function(d) {return y(d.value)}) | |
| .attr("stroke",function(d) { return d.color}); | |
| //threshold | |
| if (thresholdv) { | |
| element.append("line") | |
| .attr("x1", 0) | |
| .attr("y1", function() { return y(thresholdv) }) | |
| .attr("x2", width) | |
| .attr("y2", function() { return y(thresholdv) }) | |
| .attr("stroke","darkred") | |
| .attr("stroke-dasharray","10,10"); | |
| } | |
| //text | |
| var legend = element.selectAll(".text") | |
| .data(datav) | |
| .enter() | |
| .append("text") | |
| .attr("text-anchor", "middle") | |
| .attr("x", function(d, i) { return x(d.name) + x.rangeBand()/2; }) | |
| .attr("y", function(d) { | |
| coef = 2; | |
| return y(coef*CalcBinU(d.value*666,666)-(coef-1)*d.value) - sizev['height']/10; | |
| }) | |
| .attr("font-family","sans-serif"); | |
| legend.append("tspan") | |
| .text(function(d){return Math.round(10000*d.value)/100 + "%";}) | |
| .attr("font-weight","bold") | |
| ; | |
| var legend2 = element.selectAll(".text") | |
| .data(datav) | |
| .enter() | |
| .append("text") | |
| .attr("text-anchor", "middle") | |
| .attr("x", function(d, i) { return x(d.name) + x.rangeBand()/2; }) | |
| .attr("y", function(d) { | |
| coef = 2; | |
| return y(coef*CalcBinU(d.value*666,666)-(coef-1)*d.value) - sizev['height']/30; | |
| }) | |
| .attr("font-family","sans-serif"); | |
| legend2.append("tspan") | |
| .text(function(d){ | |
| coef = 2; | |
| v = Math.round((coef*CalcBinU(d.value*666,666)-(coef)*d.value)*200)/2; | |
| return "±" + String(v) + "%"; | |
| }) | |
| .attr("font-size","0.66em"); | |
| // element.selectAll(".text") | |
| // .data(data) | |
| // .enter() | |
| // .append("text") | |
| // .text(function(d){ | |
| // if (typeof(d.value_old) != "undefined") | |
| // return "(" + Math.round(10000*d.value_old)/100 + "%)"; | |
| // else | |
| // return ""; | |
| // }) | |
| // .attr("text-anchor", "middle") | |
| // .attr("x", function(d, i) { return x(d.name) + x.rangeBand()/2; }) | |
| // .attr("y", function(d) { | |
| // if (typeof(d.value_old) != "undefined") | |
| // return y(Math.max(d.value_old,d.value)) - 5; | |
| // else | |
| // return y(0); | |
| // }) | |
| // .attr("font-size","0.66em") | |
| // .attr("class","label2"); | |
| }); | |
| } | |
| doublebarchart.data = function(value) { | |
| if (!arguments.length) return value; | |
| data = value; | |
| return doublebarchart; | |
| }; | |
| doublebarchart.size = function(value) { | |
| if (!arguments.length) return value; | |
| size = value; | |
| return doublebarchart; | |
| }; | |
| doublebarchart.threshold = function(value) { | |
| if (!arguments.length) return value; | |
| threshold = value; | |
| return doublebarchart; | |
| }; | |
| return doublebarchart; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| d3.linechart = function() { | |
| function linechart(selection) { | |
| selection.each(function(d, i) { | |
| //options | |
| var data = (typeof(data) === "function" ? data(d) : d.data), | |
| intervals = (typeof(intervals) === "function" ? intervals(d) : d.intervals), | |
| interpolation = (typeof(interpolation) === "function" ? interpolation(d) : d.interpolation), | |
| widthvar = (typeof(width) === "function" ? width(d) : d.width), | |
| heightvar = (typeof(height) === "function" ? height(d) : d.height), | |
| limitvar = (typeof(limit) === "function" ? limit(d) : d.limit); | |
| var parseDate = d3.time.format("%Y-%m-%d").parse; | |
| //minima and maxima | |
| var minmax = {"x": {'min':'5000-01-01','max':'1000-01-01'},"y": {'min':1,'max':0}}; | |
| data.forEach(function(d,i) { | |
| d['values'].forEach(function(dd,ii) { | |
| if (d['values'][ii]['y'] > minmax['y']['max']) minmax['y']['max'] = d['values'][ii]['y']; | |
| if (d['values'][ii]['y'] < minmax['y']['min']) minmax['y']['min'] = d['values'][ii]['y']; | |
| }); | |
| if (d['values'][d['values'].length-1]['x'] > minmax['x']['max']) minmax['x']['max'] = d['values'][d['values'].length-1]['x']; | |
| if (d['values'][0]['x'] < minmax['x']['min']) minmax['x']['min'] = d['values'][0]['x']; | |
| }); | |
| var margin = {top: 15, right: 80, bottom: 15, left: 40}, | |
| width = widthvar - margin.left - margin.right, | |
| height = heightvar - margin.top - margin.bottom; | |
| //scales | |
| var x = d3.time.scale() | |
| .range([0, width]) | |
| .domain([parseDate(minmax['x']['min']),parseDate(minmax['x']['max'])]); | |
| var y = d3.scale.linear() | |
| .range([height, 0]) | |
| .domain([0,minmax['y']['max']*1.15]); | |
| //axes | |
| var xAxis = d3.svg.axis() | |
| .scale(x) | |
| .orient("bottom") | |
| .ticks(d3.time.years) | |
| .tickSize(16, 0) | |
| //.tickFormat(d3.time.format("%B")); | |
| .tickFormat(d3.time.format("%Y")); | |
| var yAxis = d3.svg.axis() | |
| .scale(y) | |
| .orient("left") | |
| .tickFormat(d3.format(".0%")); | |
| // var yAxis2 = d3.svg.axis() | |
| // .scale(y) | |
| // .orient("right") | |
| // .tickFormat(d3.format(".0%")); | |
| //areas and lines | |
| var area = d3.svg.area() | |
| .interpolate("cardinal") | |
| .x(function(d) { return x(parseDate(d.x)) }) | |
| .y0(function(d) { | |
| if (!(intervals.indexOf(['statistical', 'real', 'none']))) { | |
| intervals = 'real'; | |
| } | |
| if (intervals == 'real') { coef = 2;} | |
| else {coef = 1;} | |
| return y(coef*CalcBinL(d.y*d.n,d.n)-(coef-1)*d.y) }) //2 times the stat.error | |
| .y1(function(d) { | |
| if (!(intervals.indexOf(['statistical', 'real']))) | |
| intervals = 'real'; | |
| if (intervals == 'real') coef = 2; | |
| else coef = 1; | |
| return y(coef*CalcBinU(d.y*d.n,d.n)-(coef-1)*d.y) | |
| }); //2 times the stat.error | |
| var line = d3.svg.area() | |
| .interpolate("cardinal") | |
| .x(function(d) { return x(parseDate(d.x)) }) | |
| .y(function(d) { return y(d.y) }) | |
| var element = d3.select(this); | |
| //link | |
| var link = element.append("a") | |
| .attr("xlink:href","http://pollster.eu") | |
| .append("text") | |
| .attr("fill","#abc") | |
| .attr("fill-opacity",1) | |
| .attr("font-family","sans-serif") | |
| .attr("font-weight","bold") | |
| .attr("font-size",height/2) | |
| .attr("font-size","1.35em") | |
| .style("text-anchor", "middle") | |
| .attr("x",function(d) {return width}) | |
| .attr("y",function(d) {return height*0.02}); | |
| link.append("tspan") | |
| .text("pollster.eu") | |
| .attr("fill","blue"); | |
| link.append("tspan") | |
| .text("rope") | |
| .attr("fill","#abc"); | |
| var g = element.append("g") | |
| .attr("width", width + margin.left + margin.right) | |
| .attr("height", height + margin.top + margin.bottom) | |
| .append("g") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| g.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(xAxis) | |
| .selectAll(".tick text") | |
| .style("text-anchor", "start") | |
| .attr("x", 6) | |
| .attr("y", 6); | |
| g.append("g") | |
| .attr("class", "y axis") | |
| .call(yAxis) | |
| // .append("text") | |
| // .attr("transform", "rotate(-90)") | |
| // .attr("y", 6) | |
| // .attr("dy", ".71em") | |
| // .style("text-anchor", "end") | |
| // .text("Rate"); | |
| // g.append("g") | |
| // .attr("class", "y axis") | |
| // .attr("transform", "translate(" + (width+5) + ",0)") | |
| // .call(yAxis2); | |
| // interval | |
| if (intervals != 'none') { | |
| g.selectAll(".band") | |
| .data(data) | |
| .enter().append("path") | |
| .attr("d",function(d) { | |
| nothing = 0; | |
| return area(d.values) | |
| }) | |
| .attr("class","area band") | |
| .attr("id",function(d) {return d.name + "-band"}) | |
| .style("fill",function(d) {return d.properties.fill}) | |
| //.style("fill-opacity",0.1) | |
| .attr("title",function(d) {return d.name}); | |
| } | |
| // central line | |
| g.selectAll(".line") | |
| .data(data) | |
| .enter().append("path") | |
| .attr("d",function(d) {return line(d.values)}) | |
| .attr("class","line") | |
| .attr("id",function(d) {return d.name + "-line"}) | |
| .style("stroke",function(d) {return d.properties.fill}) | |
| .style("stroke-opacity",1) | |
| .attr("title",function(d) {return d.name}); | |
| // points | |
| data.forEach(function(dat,i) { | |
| g.selectAll(".point") | |
| .data(dat.values) | |
| .enter().append("circle") | |
| .attr("cx", function(d) { | |
| nothing = 0; | |
| return x(parseDate(d.x)) | |
| }) | |
| .attr("cy", function(d) {return y(d.y) }) | |
| .attr("r", 4) | |
| .style("fill",function(d) {return dat.properties.fill}) | |
| //.style("stroke-width","2px") | |
| .style("fill-opacity",0.35) | |
| .attr("data-tooltip",function(d) {return d.tooltip}); | |
| }); | |
| // threshold line | |
| if (limitvar > 0) { | |
| g.append("line") | |
| .attr("x1", x(parseDate(minmax['x']['min']))) | |
| .attr("y1", function() { return y(limitvar) }) | |
| .attr("x2", x(parseDate(minmax['x']['max']))) | |
| .attr("y2", function() { return y(limitvar) }) | |
| .attr("class","limit-line") | |
| .style("stroke","darkred") | |
| .style("stroke-opacity",1) | |
| .style("stroke-width",2) | |
| .attr("stroke-dasharray","10,10"); | |
| //.attr("title",function(d) {return d.name}); | |
| } | |
| //gridlines | |
| step = 0.1; | |
| current = step; | |
| if (minmax['y']['max']*1.1 > current) | |
| more = true; | |
| while (more) { | |
| g.append("line") | |
| .attr("x1", x(parseDate(minmax['x']['min']))) | |
| .attr("y1", function() { return y(current) }) | |
| .attr("x2", x(parseDate(minmax['x']['max']))) | |
| .attr("y2", function() { return y(current) }) | |
| .attr("stroke", "lightgray") | |
| .attr("opacity", 0.7) | |
| .attr("stroke-width", 1) | |
| current = current + step; | |
| if (minmax['y']['max']*1.1 < current) | |
| more = false; | |
| } | |
| //legend | |
| last = 1000000; | |
| h = 16*1.1; | |
| data = data.sort(compare); | |
| for (i in data) { | |
| g.append("text") | |
| // .attr("text-anchor", "middle") | |
| .attr("x", function(d, i) { return x(parseDate(minmax['x']['max'])) + 8}) | |
| .attr("y", function(d) { | |
| lval = data[i]['values'].length; | |
| if ((y(data[i]['values'][lval - 1]['y']) + 5) > (last - h)) | |
| last = last - h; | |
| else | |
| last = y(data[i]['values'][lval - 1]['y']) + 5; | |
| return last; | |
| }) | |
| .attr("font-family","sans-serif") | |
| .attr("font-size",16) | |
| .attr("fill", function() { return data[i]['properties']['fill']}) | |
| .text(function() {return data[i]['name'];}); | |
| } | |
| }); | |
| } | |
| function compare(a,b) { | |
| la = a.values.length; | |
| lb = b.values.length; | |
| if (a.values[la-1].y < b.values[lb-1].y) | |
| return -1; | |
| if (a.values[la-1].y > b.values[lb-1].y) | |
| return 1; | |
| return 0; | |
| } | |
| linechart.data = function(value) { | |
| if (!arguments.length) return value; | |
| data = value; | |
| return linechart; | |
| }; | |
| linechart.intervals = function(value) { | |
| if (!arguments.length) return value; | |
| intervals = value; | |
| return linechart; | |
| }; | |
| linechart.interpolation = function(value) { | |
| if (!arguments.length) return value; | |
| interpolation = value; | |
| return linechart; | |
| }; | |
| linechart.width = function(value) { | |
| if (!arguments.length) return value; | |
| width = value; | |
| return linechart; | |
| }; | |
| linechart.height = function(value) { | |
| if (!arguments.length) return value; | |
| height = value; | |
| return linechart; | |
| }; | |
| linechart.limit = function(value) { | |
| if (!arguments.length) return value; | |
| limit = value; | |
| return linechart; | |
| }; | |
| return linechart; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function(){var Tooltip;window.Tooltip=Tooltip=function(){Tooltip.displayName="Tooltip";var prototype=Tooltip.prototype,constructor=Tooltip;Tooltip.counter=0;function Tooltip(options){var ref$;this.options=options!=null?options:{};this.onMouseMove=bind$(this,"onMouseMove",prototype);this.eventId="tooltip-"+constructor.counter++;(ref$=this.options).parent==null&&(ref$.parent=d3.select("body"));d3.select(document).on("mousemove."+this.eventId,bind$(this,"onMouseMove"))}prototype.watchElements=function(){var this$=this;d3.select(document).on("mouseover."+this.eventId,function(){var currentTarget,content;currentTarget=d3.event.target;do{content=currentTarget.getAttribute("data-tooltip");currentTarget=currentTarget.parentNode}while(currentTarget!==document&&content===null);if(!content){return}content=unescape(content);if(!content.length){return}return this$.display(content)});return d3.select(document).on("mouseout."+this.eventId,bind$(this,"hide"))};prototype.display=function(content){var x$;x$=this.$element=this.options.parent.append("div");x$.attr("class","tooltip");x$.html(content);return this.setPositionByMouse()};prototype.hide=function(){if(!this.$element){return}this.$element.remove();this.$element=null;return this.mouseBound=false};prototype.reposition=function(arg$){var left,top,clientLeft,clientTop,dX,dY,element,width,maxLeft,topMargin,x$;left=arg$[0],top=arg$[1],clientLeft=arg$[2],clientTop=arg$[3];dX=left-clientLeft;dY=top-clientTop;element=this.$element[0][0];width=element.offsetWidth;left-=width/2;maxLeft=(window.innerWidth||document.documentElement.clientWidth)-width;top-=element.offsetHeight;left=Math.max(dX,left);left=Math.min(left,dX+maxLeft);if(top<=19+dY){topMargin=-20;top+=element.offsetHeight-2*topMargin}x$=this.$element;x$.style("left",left+"px");x$.style("top",top+"px");return x$};prototype.setPositionByMouse=function(){this.mouseBound=true;if(this.lastMousePosition){return this.reposition(this.lastMousePosition)}};prototype.onMouseMove=function(){var evt;evt=d3.event;this.lastMousePosition=[evt.pageX||evt.clientX,evt.pageY||evt.clientY,evt.clientX,evt.clientY];if(this.mouseBound){return this.reposition(this.lastMousePosition)}};return Tooltip}();function bind$(obj,key,target){return function(){return(target||obj)[key].apply(obj,arguments)}}}).call(this); | |
| //https://github.com/economia/Tooltip |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.2/journal/bootstrap.min.css"> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="./d3.doublebarchart2.js"></script> | |
| <script src="./responsivefy.js"></script> | |
| <script src="./binomial.js"></script> | |
| <style> | |
| .tick { | |
| fill-opacity: 0; | |
| stroke: #000000; | |
| stroke-width: 1; | |
| } | |
| .domain { | |
| fill: none; | |
| fill-opacity: 0; | |
| stroke: black; | |
| stroke-width: 1; | |
| } | |
| .axis line { | |
| fill: none; | |
| fill-opacity: 0; | |
| stroke: black; | |
| stroke-width: 1; | |
| shape-rendering: crispEdges; | |
| } | |
| .axis text { | |
| font-family: sans-serif; | |
| font-size: 11px; | |
| stroke: gray; | |
| } | |
| </style> | |
| <body> | |
| <div style="margin:20px"> | |
| <h3>Poll projection <small>with error estimates</small> <span class="badge">Mar 13 2015</span></h3> | |
| <div id="chart" style="max-width:500px"></div> | |
| </div> | |
| <script> | |
| var margin = {top: 20, right: 0, bottom: 20, left: 0}, | |
| width = 500 - margin.left - margin.right, | |
| height = 200 - margin.top - margin.bottom; | |
| var doublebarchart = [{ | |
| "data": [ | |
| {"name":"ANO","value":0.31, "value_old": 0.1865, "color": "#abc", "id": "ano", "legend_small": " ±7%"}, | |
| {"name":"ČSSD","value": 0.28, "value_old": 0.2045, "color": "orange", "id":"cssd", "legend_small": " ±6%"}, | |
| {"name":"KSČM","value":0.115, "value_old": 0.1491, "color": "red", "id": "kscm", "legend_small": " ±4%"}, | |
| {"name":"TOP 09","value":0.075, "value_old": 0.1199, "color": "#808", "legend_small": " ±3.5%"}, | |
| {"name":"KDU-ČSL","value":0.06, "value_old": 0.0678, "color": "gold", "legend_small": " ±3.5%"}, | |
| {"name":"ODS","value":0.05, "value_old": 0.0772, "color": "blue", "legend_small": " ±3%"}, | |
| {"name":"Piráti","value":0.03, "value_old": 0.0266, "color": "black", "legend_small": " ±3%"}, | |
| {"name": "Úsvit", "value": 0.025, "value_old": 0.0688, "color": "pink", "legend_small": " ±3%"}, | |
| {"name": "Zelení", "value": 0.025, "value_old": 0.0319, "color": "green", "legend_small": " ±3%"}, | |
| {"name": "Ostatní", "value": 0.03, "color": "gray"} | |
| ], | |
| "size": {"width": width, "height": height}, | |
| "margin": margin, | |
| "threshold": 0.05 | |
| }]; | |
| var svg = d3.select("#chart") | |
| .append("svg") | |
| .attr("width", width + margin.left + margin.right) | |
| .attr("height", height + margin.top + margin.bottom) | |
| .call(responsivefy); | |
| var dbc = d3.doublebarchart() | |
| .data(function(d) {return d.data}) | |
| .size(function(d) {return d.size}) | |
| .threshold(function(d) {return d.threshold}) | |
| ; | |
| var bar = svg.selectAll(".barchart") | |
| .data(doublebarchart) | |
| .enter() | |
| .append("svg:g") | |
| .attr("transform", "translate(" + doublebarchart[0].margin.left + "," + doublebarchart[0].margin.top + ")") | |
| .call(dbc); | |
| </script> | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.2/journal/bootstrap.min.css"> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="./d3.doublebarchart1.js"></script> | |
| <script src="./responsivefy.js"></script> | |
| <style> | |
| .tick { | |
| fill-opacity: 0; | |
| stroke: #000000; | |
| stroke-width: 1; | |
| } | |
| .domain { | |
| fill: none; | |
| fill-opacity: 0; | |
| stroke: black; | |
| stroke-width: 1; | |
| } | |
| .axis line { | |
| fill: none; | |
| fill-opacity: 0; | |
| stroke: black; | |
| stroke-width: 1; | |
| shape-rendering: crispEdges; | |
| } | |
| .axis text { | |
| font-family: sans-serif; | |
| font-size: 11px; | |
| stroke: gray; | |
| } | |
| </style> | |
| <body> | |
| <div style="margin:20px"> | |
| <h3>Volební model <small>a srovnání s výsledky voleb</small> <span class="badge">13.3.2015</span></h3> | |
| <div id="chart" style="max-width:500px"></div> | |
| </div> | |
| <script> | |
| var margin = {top: 20, right: 0, bottom: 20, left: 0}, | |
| width = 500 - margin.left - margin.right, | |
| height = 200 - margin.top - margin.bottom; | |
| var doublebarchart = [{ | |
| "data": [ | |
| {"name":"ANO","value":0.31, "value_old": 0.1865, "color": "#abc", "id": "ano", "legend_small": " ±7%"}, | |
| {"name":"ČSSD","value": 0.28, "value_old": 0.2045, "color": "orange", "id":"cssd", "legend_small": " ±6%"}, | |
| {"name":"KSČM","value":0.115, "value_old": 0.1491, "color": "red", "id": "kscm", "legend_small": " ±4%"}, | |
| {"name":"TOP 09","value":0.075, "value_old": 0.1199, "color": "#808", "legend_small": " ±3.5%"}, | |
| {"name":"KDU-ČSL","value":0.06, "value_old": 0.0678, "color": "gold", "legend_small": " ±3.5%"}, | |
| {"name":"ODS","value":0.05, "value_old": 0.0772, "color": "blue", "legend_small": " ±3%"}, | |
| {"name":"Piráti","value":0.03, "value_old": 0.0266, "color": "black", "legend_small": " ±3%"}, | |
| {"name": "Úsvit", "value": 0.025, "value_old": 0.0688, "color": "pink", "legend_small": " ±3%"}, | |
| {"name": "Zelení", "value": 0.025, "value_old": 0.0319, "color": "green", "legend_small": " ±3%"}, | |
| {"name": "Ostatní", "value": 0.03, "color": "gray"} | |
| ], | |
| "size": {"width": width, "height": height}, | |
| "margin": margin, | |
| "threshold": 0.05 | |
| }]; | |
| var svg = d3.select("#chart") | |
| .append("svg") | |
| .attr("width", width + margin.left + margin.right) | |
| .attr("height", height + margin.top + margin.bottom) | |
| .call(responsivefy); | |
| var dbc = d3.doublebarchart() | |
| .data(function(d) {return d.data}) | |
| .size(function(d) {return d.size}) | |
| .threshold(function(d) {return d.threshold}) | |
| ; | |
| var bar = svg.selectAll(".barchart") | |
| .data(doublebarchart) | |
| .enter() | |
| .append("svg:g") | |
| .attr("transform", "translate(" + doublebarchart[0].margin.left + "," + doublebarchart[0].margin.top + ")") | |
| .call(dbc); | |
| </script> | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.2/journal/bootstrap.min.css"> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="./d3.doublebarchart2.js"></script> | |
| <script src="./responsivefy.js"></script> | |
| <script src="./binomial.js"></script> | |
| <style> | |
| .tick { | |
| fill-opacity: 0; | |
| stroke: #000000; | |
| stroke-width: 1; | |
| } | |
| .domain { | |
| fill: none; | |
| fill-opacity: 0; | |
| stroke: black; | |
| stroke-width: 1; | |
| } | |
| .axis line { | |
| fill: none; | |
| fill-opacity: 0; | |
| stroke: black; | |
| stroke-width: 1; | |
| shape-rendering: crispEdges; | |
| } | |
| .axis text { | |
| font-family: sans-serif; | |
| font-size: 11px; | |
| stroke: gray; | |
| } | |
| </style> | |
| <body> | |
| <div style="margin:20px"> | |
| <h3>Volební model <small>s odhadem jeho chyby</small> <span class="badge">13.3.2015</span></h3> | |
| <div id="chart" style="max-width:500px"></div> | |
| </div> | |
| <script> | |
| var margin = {top: 20, right: 0, bottom: 20, left: 0}, | |
| width = 500 - margin.left - margin.right, | |
| height = 200 - margin.top - margin.bottom; | |
| var doublebarchart = [{ | |
| "data": [ | |
| {"name":"ANO","value":0.31, "value_old": 0.1865, "color": "#abc", "id": "ano", "legend_small": " ±7%"}, | |
| {"name":"ČSSD","value": 0.28, "value_old": 0.2045, "color": "orange", "id":"cssd", "legend_small": " ±6%"}, | |
| {"name":"KSČM","value":0.115, "value_old": 0.1491, "color": "red", "id": "kscm", "legend_small": " ±4%"}, | |
| {"name":"TOP 09","value":0.075, "value_old": 0.1199, "color": "#808", "legend_small": " ±3.5%"}, | |
| {"name":"KDU-ČSL","value":0.06, "value_old": 0.0678, "color": "gold", "legend_small": " ±3.5%"}, | |
| {"name":"ODS","value":0.05, "value_old": 0.0772, "color": "blue", "legend_small": " ±3%"}, | |
| {"name":"Piráti","value":0.03, "value_old": 0.0266, "color": "black", "legend_small": " ±3%"}, | |
| {"name": "Úsvit", "value": 0.025, "value_old": 0.0688, "color": "pink", "legend_small": " ±3%"}, | |
| {"name": "Zelení", "value": 0.025, "value_old": 0.0319, "color": "green", "legend_small": " ±3%"}, | |
| {"name": "Ostatní", "value": 0.03, "color": "gray"} | |
| ], | |
| "size": {"width": width, "height": height}, | |
| "margin": margin, | |
| "threshold": 0.05 | |
| }]; | |
| var svg = d3.select("#chart") | |
| .append("svg") | |
| .attr("width", width + margin.left + margin.right) | |
| .attr("height", height + margin.top + margin.bottom) | |
| .call(responsivefy); | |
| var dbc = d3.doublebarchart() | |
| .data(function(d) {return d.data}) | |
| .size(function(d) {return d.size}) | |
| .threshold(function(d) {return d.threshold}) | |
| ; | |
| var bar = svg.selectAll(".barchart") | |
| .data(doublebarchart) | |
| .enter() | |
| .append("svg:g") | |
| .attr("transform", "translate(" + doublebarchart[0].margin.left + "," + doublebarchart[0].margin.top + ")") | |
| .call(dbc); | |
| </script> | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.2/journal/bootstrap.min.css"> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="https://code.jquery.com/jquery-1.11.1.js"></script> | |
| <script src="d3.linechart.js"></script> | |
| <script src="d3.tooltip.js"></script> | |
| <script src="./binomial.js"></script> | |
| <script src="./responsivefy.js"></script> | |
| <style> | |
| body { | |
| font: 10px sans-serif; | |
| } | |
| /*.axis text { | |
| font: 10px sans-serif; | |
| fill: #666; | |
| }*/ | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: #ccc; | |
| shape-rendering: crispEdges; | |
| } | |
| .y.axis { | |
| stroke-width: 0; | |
| } | |
| .band { | |
| fill-opacity: 0.05; | |
| } | |
| .band:hover { | |
| fill-opacity: 0.6 | |
| } | |
| .tooltip { | |
| font-family: sans-serif; | |
| font-size: 11px; | |
| z-index: 50; | |
| position: absolute; | |
| border: 1px solid #888; | |
| color: #fff; | |
| border-radius: 4px; | |
| background: rgba(0, 0, 0, 0.8); | |
| padding: 12px; | |
| margin-top: -8px; | |
| margin-left: 0px; | |
| box-shadow: #aaa 0px 0px 1px; | |
| } | |
| .tooltip p.only-child { | |
| margin: 0px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div style="margin:20px"> | |
| <h3>Poll projection over time <small>with error estimates</small> <span class="badge">Mar 14 2015</span></h3> | |
| <div id="chart" style="max-width:900px;max-height:600px"></div> | |
| </div> | |
| <script type="text/javascript"> | |
| new Tooltip().watchElements(); | |
| var json = (function () { | |
| var json = null; | |
| $.ajax({ | |
| 'async': false, | |
| 'global': false, | |
| 'url': "./linedata.json", | |
| 'dataType': "json", | |
| 'success': function (data) { | |
| json = data; | |
| } | |
| }); | |
| return json; | |
| })(); | |
| width = getParameterByName('width'); | |
| height = getParameterByName('height'); | |
| if ((width == '') || (!isNumeric(width)) || width < 10) width = 900; | |
| if (height == '') height = 600; | |
| var linechart = [{ | |
| "data":json, | |
| "intervals": "real", | |
| "interpolation": "nevim", | |
| "width": width, | |
| "height": height, | |
| "limit": 0.05 | |
| }]; | |
| var w=width,h=height, | |
| svg=d3.select("#chart") | |
| .append("svg") | |
| .attr("width",w) | |
| .attr("height",h) | |
| .call(responsivefy); | |
| var lc = d3.linechart() | |
| .data(function(d) { | |
| nothing = 0; | |
| return d.data; | |
| }) | |
| .intervals(function(d) {return d.intervals;}) | |
| .interpolation(function(d) {return d.interpolation;}) | |
| .width(function(d) {return d.width;}) | |
| .height(function(d) {return d.height;}); | |
| var item = svg.selectAll(".linechart") | |
| .data(linechart) | |
| .enter() | |
| .append("svg:g") | |
| .call(lc); | |
| $('.axis path').attr('stroke','#ccc').attr('fill','none').attr('shape-rendering','crispEdges'); | |
| $('.axis line').attr('stroke','#ccc').attr('fill','none').attr('shape-rendering','crispEdges'); | |
| $('.axis text').attr('font-size','10px').attr('fill','#666').attr('shape-rendering','crispEdges'); | |
| function getParameterByName(name) { | |
| name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]"); | |
| var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"), | |
| results = regex.exec(location.search); | |
| return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " ")); | |
| } | |
| function isNumeric(n) { | |
| return !isNaN(parseFloat(n)) && isFinite(n); | |
| } | |
| </script> | |
| </body> | |
| </html> | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| [{"name":"pirati","values":[{"x":"2013-11-18","y":0.025,"n":981,"tooltip":"<strong>Pir\u00e1ti<\/strong><br>2,5 %<br>18.11.2013"},{"x":"2014-01-20","y":0.015,"n":1105,"tooltip":"<strong>Pir\u00e1ti<\/strong><br>1,5 %<br>20.1.2014"},{"x":"2014-02-10","y":0.02,"n":1081,"tooltip":"<strong>Pir\u00e1ti<\/strong><br>2 %<br>10.2.2014"},{"x":"2014-03-10","y":0.015,"n":1061,"tooltip":"<strong>Pir\u00e1ti<\/strong><br>1,5 %<br>10.3.2014"},{"x":"2014-04-14","y":0.01,"n":1027,"tooltip":"<strong>Pir\u00e1ti<\/strong><br>1 %<br>14.4.2014"},{"x":"2014-05-12","y":0.015,"n":994,"tooltip":"<strong>Pir\u00e1ti<\/strong><br>1,5 %<br>12.5.2014"},{"x":"2014-06-09","y":0.015,"n":1049,"tooltip":"<strong>Pir\u00e1ti<\/strong><br>1,5 %<br>9.6.2014"},{"x":"2014-09-15","y":0.015,"n":1017,"tooltip":"<strong>Pir\u00e1ti<\/strong><br>1,5 %<br>15.9.2014"},{"x":"2014-10-08","y":0.02,"n":1045,"tooltip":"<strong>Pir\u00e1ti<\/strong><br>2 %<br>8.10.2014"},{"x":"2014-11-10","y":0.03,"n":1085,"tooltip":"<strong>Pir\u00e1ti<\/strong><br>3 %<br>10.11.2014"},{"x":"2014-12-08","y":0.025,"n":1005,"tooltip":"<strong>Pir\u00e1ti<\/strong><br>2,5 %<br>8.12.2014"},{"x":"2015-01-19","y":0.025,"n":1021,"tooltip":"<strong>Pir\u00e1ti<\/strong><br>2,5 %<br>19.1.2015"},{"x":"2015-02-09","y":0.03,"n":1069,"tooltip":"<strong>Pir\u00e1ti<\/strong><br>3 %<br>9.2.2015"}],"properties":{"fill":"black"}},{"name":"svobodni","values":[{"x":"2013-11-18","y":0.01,"n":981,"tooltip":"<strong>Svobodn\u00ed<\/strong><br>1 %<br>18.11.2013"},{"x":"2014-04-14","y":0.01,"n":1027,"tooltip":"<strong>Svobodn\u00ed<\/strong><br>1 %<br>14.4.2014"},{"x":"2014-05-12","y":0.01,"n":994,"tooltip":"<strong>Svobodn\u00ed<\/strong><br>1 %<br>12.5.2014"},{"x":"2014-06-09","y":0.015,"n":1049,"tooltip":"<strong>Svobodn\u00ed<\/strong><br>1,5 %<br>9.6.2014"},{"x":"2014-10-08","y":0.015,"n":1045,"tooltip":"<strong>Svobodn\u00ed<\/strong><br>1,5 %<br>8.10.2014"},{"x":"2014-11-10","y":0.01,"n":1085,"tooltip":"<strong>Svobodn\u00ed<\/strong><br>1 %<br>10.11.2014"},{"x":"2015-01-19","y":0.01,"n":1021,"tooltip":"<strong>Svobodn\u00ed<\/strong><br>1 %<br>19.1.2015"}],"properties":{"fill":"#060"}},{"name":"ostatni-strany","values":[{"x":"2013-11-18","y":0.01,"n":981,"tooltip":"<strong>Ostatn\u00ed<\/strong><br>1 %<br>18.11.2013"},{"x":"2014-01-20","y":0.02,"n":1105,"tooltip":"<strong>Ostatn\u00ed<\/strong><br>2 %<br>20.1.2014"},{"x":"2014-02-10","y":0.01,"n":1081,"tooltip":"<strong>Ostatn\u00ed<\/strong><br>1 %<br>10.2.2014"},{"x":"2014-03-10","y":0.01,"n":1061,"tooltip":"<strong>Ostatn\u00ed<\/strong><br>1 %<br>10.3.2014"},{"x":"2014-04-14","y":0.01,"n":1027,"tooltip":"<strong>Ostatn\u00ed<\/strong><br>1 %<br>14.4.2014"},{"x":"2014-05-12","y":0.01,"n":994,"tooltip":"<strong>Ostatn\u00ed<\/strong><br>1 %<br>12.5.2014"},{"x":"2014-06-09","y":0.01,"n":1049,"tooltip":"<strong>Ostatn\u00ed<\/strong><br>1 %<br>9.6.2014"},{"x":"2014-09-15","y":0.03,"n":1017,"tooltip":"<strong>Jin\u00e9<\/strong><br>3 %<br>15.9.2014"},{"x":"2014-10-08","y":0.025,"n":1045,"tooltip":"<strong>Jin\u00e9<\/strong><br>2,5 %<br>8.10.2014"},{"x":"2014-11-10","y":0.005,"n":1085,"tooltip":"<strong>Jin\u00e9<\/strong><br>0,5 %<br>10.11.2014"},{"x":"2014-12-08","y":0.02,"n":1005,"tooltip":"<strong>Jin\u00e9<\/strong><br>2 %<br>8.12.2014"}],"properties":{"fill":"#888"}},{"name":"ano","values":[{"x":"2013-11-18","y":0.245,"n":981,"tooltip":"<strong>ANO<\/strong><br>24,5 %<br>18.11.2013"},{"x":"2014-01-20","y":0.25,"n":1105,"tooltip":"<strong>ANO<\/strong><br>25 %<br>20.1.2014"},{"x":"2014-02-10","y":0.25,"n":1081,"tooltip":"<strong>ANO<\/strong><br>25 %<br>10.2.2014"},{"x":"2014-03-10","y":0.28,"n":1061,"tooltip":"<strong>ANO<\/strong><br>28 %<br>10.3.2014"},{"x":"2014-04-14","y":0.3,"n":1027,"tooltip":"<strong>ANO<\/strong><br>30 %<br>14.4.2014"},{"x":"2014-05-12","y":0.33,"n":994,"tooltip":"<strong>ANO<\/strong><br>33 %<br>12.5.2014"},{"x":"2014-06-09","y":0.29,"n":1049,"tooltip":"<strong>ANO<\/strong><br>29 %<br>9.6.2014"},{"x":"2014-09-15","y":0.28,"n":1017,"tooltip":"<strong>ANO<\/strong><br>28 %<br>15.9.2014"},{"x":"2014-10-08","y":0.31,"n":1045,"tooltip":"<strong>ANO<\/strong><br>31 %<br>8.10.2014"},{"x":"2014-11-10","y":0.3,"n":1085,"tooltip":"<strong>ANO<\/strong><br>30 %<br>10.11.2014"},{"x":"2014-12-08","y":0.295,"n":1005,"tooltip":"<strong>ANO<\/strong><br>29,5 %<br>8.12.2014"},{"x":"2015-01-19","y":0.3,"n":1021,"tooltip":"<strong>ANO<\/strong><br>30 %<br>19.1.2015"},{"x":"2015-02-09","y":0.31,"n":1069,"tooltip":"<strong>ANO<\/strong><br>31 %<br>9.2.2015"}],"properties":{"fill":"#0bb"}},{"name":"ods","values":[{"x":"2013-11-18","y":0.04,"n":981,"tooltip":"<strong>ODS<\/strong><br>4 %<br>18.11.2013"},{"x":"2014-01-20","y":0.05,"n":1105,"tooltip":"<strong>ODS<\/strong><br>5 %<br>20.1.2014"},{"x":"2014-02-10","y":0.075,"n":1081,"tooltip":"<strong>ODS<\/strong><br>7,5 %<br>10.2.2014"},{"x":"2014-03-10","y":0.06,"n":1061,"tooltip":"<strong>ODS<\/strong><br>6 %<br>10.3.2014"},{"x":"2014-04-14","y":0.06,"n":1027,"tooltip":"<strong>ODS<\/strong><br>6 %<br>14.4.2014"},{"x":"2014-05-12","y":0.05,"n":994,"tooltip":"<strong>ODS<\/strong><br>5 %<br>12.5.2014"},{"x":"2014-06-09","y":0.07,"n":1049,"tooltip":"<strong>ODS<\/strong><br>7 %<br>9.6.2014"},{"x":"2014-09-15","y":0.075,"n":1017,"tooltip":"<strong>ODS<\/strong><br>7,5 %<br>15.9.2014"},{"x":"2014-10-08","y":0.055,"n":1045,"tooltip":"<strong>ODS<\/strong><br>5,5 %<br>8.10.2014"},{"x":"2014-11-10","y":0.065,"n":1085,"tooltip":"<strong>ODS<\/strong><br>6,5 %<br>10.11.2014"},{"x":"2014-12-08","y":0.085,"n":1005,"tooltip":"<strong>ODS<\/strong><br>8,5 %<br>8.12.2014"},{"x":"2015-01-19","y":0.065,"n":1021,"tooltip":"<strong>ODS<\/strong><br>6,5 %<br>19.1.2015"},{"x":"2015-02-09","y":0.05,"n":1069,"tooltip":"<strong>ODS<\/strong><br>5 %<br>9.2.2015"}],"properties":{"fill":"blue"}},{"name":"zeleni","values":[{"x":"2013-11-18","y":0.03,"n":981,"tooltip":"<strong>Zelen\u00ed<\/strong><br>3 %<br>18.11.2013"},{"x":"2014-01-20","y":0.015,"n":1105,"tooltip":"<strong>Zelen\u00ed<\/strong><br>1,5 %<br>20.1.2014"},{"x":"2014-02-10","y":0.02,"n":1081,"tooltip":"<strong>Zelen\u00ed<\/strong><br>2 %<br>10.2.2014"},{"x":"2014-03-10","y":0.035,"n":1061,"tooltip":"<strong>Zelen\u00ed<\/strong><br>3,5 %<br>10.3.2014"},{"x":"2014-04-14","y":0.025,"n":1027,"tooltip":"<strong>Zelen\u00ed<\/strong><br>2,5 %<br>14.4.2014"},{"x":"2014-05-12","y":0.025,"n":994,"tooltip":"<strong>Zelen\u00ed<\/strong><br>2,5 %<br>12.5.2014"},{"x":"2014-06-09","y":0.015,"n":1049,"tooltip":"<strong>Zelen\u00ed<\/strong><br>1,5 %<br>9.6.2014"},{"x":"2014-09-15","y":0.01,"n":1017,"tooltip":"<strong>Zelen\u00ed<\/strong><br>1 %<br>15.9.2014"},{"x":"2014-11-10","y":0.035,"n":1085,"tooltip":"<strong>Zelen\u00ed<\/strong><br>3,5 %<br>10.11.2014"},{"x":"2014-12-08","y":0.02,"n":1005,"tooltip":"<strong>Zelen\u00ed<\/strong><br>2 %<br>8.12.2014"},{"x":"2015-01-19","y":0.01,"n":1021,"tooltip":"<strong>Zelen\u00ed<\/strong><br>1 %<br>19.1.2015"},{"x":"2015-02-09","y":0.025,"n":1069,"tooltip":"<strong>Zelen\u00ed<\/strong><br>2,5 %<br>9.2.2015"}],"properties":{"fill":"green"}},{"name":"usvit","values":[{"x":"2013-11-18","y":0.06,"n":981,"tooltip":"<strong>\u00dasvit<\/strong><br>6 %<br>18.11.2013"},{"x":"2014-01-20","y":0.05,"n":1105,"tooltip":"<strong>\u00dasvit<\/strong><br>5 %<br>20.1.2014"},{"x":"2014-02-10","y":0.03,"n":1081,"tooltip":"<strong>\u00dasvit<\/strong><br>3 %<br>10.2.2014"},{"x":"2014-03-10","y":0.05,"n":1061,"tooltip":"<strong>\u00dasvit<\/strong><br>5 %<br>10.3.2014"},{"x":"2014-04-14","y":0.03,"n":1027,"tooltip":"<strong>\u00dasvit<\/strong><br>3 %<br>14.4.2014"},{"x":"2014-05-12","y":0.03,"n":994,"tooltip":"<strong>\u00dasvit<\/strong><br>3 %<br>12.5.2014"},{"x":"2014-06-09","y":0.025,"n":1049,"tooltip":"<strong>\u00dasvit<\/strong><br>2,5 %<br>9.6.2014"},{"x":"2014-09-15","y":0.015,"n":1017,"tooltip":"<strong>\u00dasvit<\/strong><br>1,5 %<br>15.9.2014"},{"x":"2014-10-08","y":0.025,"n":1045,"tooltip":"<strong>\u00dasvit<\/strong><br>2,5 %<br>8.10.2014"},{"x":"2014-11-10","y":0.025,"n":1085,"tooltip":"<strong>\u00dasvit<\/strong><br>2,5 %<br>10.11.2014"},{"x":"2014-12-08","y":0.025,"n":1005,"tooltip":"<strong>\u00dasvit<\/strong><br>2,5 %<br>8.12.2014"},{"x":"2015-01-19","y":0.02,"n":1021,"tooltip":"<strong>\u00dasvit<\/strong><br>2 %<br>19.1.2015"},{"x":"2015-02-09","y":0.025,"n":1069,"tooltip":"<strong>\u00dasvit<\/strong><br>2,5 %<br>9.2.2015"}],"properties":{"fill":"pink"}},{"name":"cssd","values":[{"x":"2013-11-18","y":0.24,"n":981,"tooltip":"<strong>\u010cSSD<\/strong><br>24 %<br>18.11.2013"},{"x":"2014-01-20","y":0.27,"n":1105,"tooltip":"<strong>\u010cSSD<\/strong><br>27 %<br>20.1.2014"},{"x":"2014-02-10","y":0.28,"n":1081,"tooltip":"<strong>\u010cSSD<\/strong><br>28 %<br>10.2.2014"},{"x":"2014-03-10","y":0.24,"n":1061,"tooltip":"<strong>\u010cSSD<\/strong><br>24 %<br>10.3.2014"},{"x":"2014-04-14","y":0.25,"n":1027,"tooltip":"<strong>\u010cSSD<\/strong><br>25 %<br>14.4.2014"},{"x":"2014-05-12","y":0.235,"n":994,"tooltip":"<strong>\u010cSSD<\/strong><br>23,5 %<br>12.5.2014"},{"x":"2014-06-09","y":0.24,"n":1049,"tooltip":"<strong>\u010cSSD<\/strong><br>24 %<br>9.6.2014"},{"x":"2014-09-15","y":0.275,"n":1017,"tooltip":"<strong>\u010cSSD<\/strong><br>27,5 %<br>15.9.2014"},{"x":"2014-10-08","y":0.245,"n":1045,"tooltip":"<strong>\u010cSSD<\/strong><br>24,5 %<br>8.10.2014"},{"x":"2014-11-10","y":0.25,"n":1085,"tooltip":"<strong>\u010cSSD<\/strong><br>25 %<br>10.11.2014"},{"x":"2014-12-08","y":0.245,"n":1005,"tooltip":"<strong>\u010cSSD<\/strong><br>24,5 %<br>8.12.2014"},{"x":"2015-01-19","y":0.275,"n":1021,"tooltip":"<strong>\u010cSSD<\/strong><br>27,5 %<br>19.1.2015"},{"x":"2015-02-09","y":0.28,"n":1069,"tooltip":"<strong>\u010cSSD<\/strong><br>28 %<br>9.2.2015"}],"properties":{"fill":"orange"}},{"name":"top-09","values":[{"x":"2013-11-18","y":0.09,"n":981,"tooltip":"<strong>TOP 09<\/strong><br>9 %<br>18.11.2013"},{"x":"2014-01-20","y":0.12,"n":1105,"tooltip":"<strong>TOP 09<\/strong><br>12 %<br>20.1.2014"},{"x":"2014-02-10","y":0.11,"n":1081,"tooltip":"<strong>TOP 09<\/strong><br>11 %<br>10.2.2014"},{"x":"2014-03-10","y":0.11,"n":1061,"tooltip":"<strong>TOP 09<\/strong><br>11 %<br>10.3.2014"},{"x":"2014-04-14","y":0.105,"n":1027,"tooltip":"<strong>TOP 09<\/strong><br>10,5 %<br>14.4.2014"},{"x":"2014-05-12","y":0.09,"n":994,"tooltip":"<strong>TOP 09<\/strong><br>9 %<br>12.5.2014"},{"x":"2014-06-09","y":0.115,"n":1049,"tooltip":"<strong>TOP 09<\/strong><br>11,5 %<br>9.6.2014"},{"x":"2014-09-15","y":0.095,"n":1017,"tooltip":"<strong>TOP 09<\/strong><br>9,5 %<br>15.9.2014"},{"x":"2014-10-08","y":0.1,"n":1045,"tooltip":"<strong>TOP 09<\/strong><br>10 %<br>8.10.2014"},{"x":"2014-11-10","y":0.075,"n":1085,"tooltip":"<strong>TOP 09<\/strong><br>7,5 %<br>10.11.2014"},{"x":"2014-12-08","y":0.095,"n":1005,"tooltip":"<strong>TOP 09<\/strong><br>9,5 %<br>8.12.2014"},{"x":"2015-01-19","y":0.065,"n":1021,"tooltip":"<strong>TOP 09<\/strong><br>6,5 %<br>19.1.2015"},{"x":"2015-02-09","y":0.075,"n":1069,"tooltip":"<strong>TOP 09<\/strong><br>7,5 %<br>9.2.2015"}],"properties":{"fill":"#808"}},{"name":"kscm","values":[{"x":"2013-11-18","y":0.18,"n":981,"tooltip":"<strong>KS\u010cM<\/strong><br>18 %<br>18.11.2013"},{"x":"2014-01-20","y":0.145,"n":1105,"tooltip":"<strong>KS\u010cM<\/strong><br>14,5 %<br>20.1.2014"},{"x":"2014-02-10","y":0.15,"n":1081,"tooltip":"<strong>KS\u010cM<\/strong><br>15 %<br>10.2.2014"},{"x":"2014-03-10","y":0.14,"n":1061,"tooltip":"<strong>KS\u010cM<\/strong><br>14 %<br>10.3.2014"},{"x":"2014-04-14","y":0.135,"n":1027,"tooltip":"<strong>KS\u010cM<\/strong><br>13,5 %<br>14.4.2014"},{"x":"2014-05-12","y":0.125,"n":994,"tooltip":"<strong>KS\u010cM<\/strong><br>12,5 %<br>12.5.2014"},{"x":"2014-06-09","y":0.155,"n":1049,"tooltip":"<strong>KS\u010cM<\/strong><br>15,5 %<br>9.6.2014"},{"x":"2014-09-15","y":0.14,"n":1017,"tooltip":"<strong>KS\u010cM<\/strong><br>14 %<br>15.9.2014"},{"x":"2014-10-08","y":0.13,"n":1045,"tooltip":"<strong>KS\u010cM<\/strong><br>13 %<br>8.10.2014"},{"x":"2014-11-10","y":0.13,"n":1085,"tooltip":"<strong>KS\u010cM<\/strong><br>13 %<br>10.11.2014"},{"x":"2014-12-08","y":0.12,"n":1005,"tooltip":"<strong>KS\u010cM<\/strong><br>12 %<br>8.12.2014"},{"x":"2015-01-19","y":0.135,"n":1021,"tooltip":"<strong>KS\u010cM<\/strong><br>13,5 %<br>19.1.2015"},{"x":"2015-02-09","y":0.115,"n":1069,"tooltip":"<strong>KS\u010cM<\/strong><br>11,5 %<br>9.2.2015"}],"properties":{"fill":"red"}},{"name":"kdu-csl","values":[{"x":"2013-11-18","y":0.07,"n":981,"tooltip":"<strong>KDU-\u010cSL<\/strong><br>7 %<br>18.11.2013"},{"x":"2014-01-20","y":0.065,"n":1105,"tooltip":"<strong>KDU-\u010cSL<\/strong><br>6,5 %<br>20.1.2014"},{"x":"2014-02-10","y":0.055,"n":1081,"tooltip":"<strong>KDU-\u010cSL<\/strong><br>5,5 %<br>10.2.2014"},{"x":"2014-03-10","y":0.06,"n":1061,"tooltip":"<strong>KDU-\u010cSL<\/strong><br>6 %<br>10.3.2014"},{"x":"2014-04-14","y":0.065,"n":1027,"tooltip":"<strong>KDU-\u010cSL<\/strong><br>6,5 %<br>14.4.2014"},{"x":"2014-05-12","y":0.08,"n":994,"tooltip":"<strong>KDU-\u010cSL<\/strong><br>8 %<br>12.5.2014"},{"x":"2014-06-09","y":0.055,"n":1049,"tooltip":"<strong>KDU-\u010cSL<\/strong><br>5,5 %<br>9.6.2014"},{"x":"2014-09-15","y":0.065,"n":1017,"tooltip":"<strong>KDU-\u010cSL<\/strong><br>6,5 %<br>15.9.2014"},{"x":"2014-10-08","y":0.075,"n":1045,"tooltip":"<strong>KDU-\u010cSL<\/strong><br>7,5 %<br>8.10.2014"},{"x":"2014-11-10","y":0.075,"n":1085,"tooltip":"<strong>KDU-\u010cSL<\/strong><br>7,5 %<br>10.11.2014"},{"x":"2014-12-08","y":0.07,"n":1005,"tooltip":"<strong>KDU-\u010cSL<\/strong><br>7 %<br>8.12.2014"},{"x":"2015-01-19","y":0.075,"n":1021,"tooltip":"<strong>KDU-\u010cSL<\/strong><br>7,5 %<br>19.1.2015"},{"x":"2015-02-09","y":0.06,"n":1069,"tooltip":"<strong>KDU-\u010cSL<\/strong><br>6 %<br>9.2.2015"}],"properties":{"fill":"#FFD801"}}] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.2/journal/bootstrap.min.css"> | |
| <link href="//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> | |
| <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="./d3.doublebarchart2.js"></script> | |
| <script src="./responsivefy.js"></script> | |
| <script src="./binomial.js"></script> | |
| <script src="d3.linechart.js"></script> | |
| <style> | |
| .container { | |
| margin-right: auto; | |
| margin-left: auto; | |
| padding-left: 15px; | |
| padding-right: 15px; | |
| } | |
| @media (min-width: 1200px) | |
| .container { | |
| width: 1170px; | |
| } | |
| @media (min-width: 992px) | |
| .container { | |
| width: 970px; | |
| } | |
| @media (min-width: 768px) | |
| .container { | |
| width: 750px; | |
| } | |
| .page-header { | |
| padding-bottom: 9px; | |
| margin: 40px 0 20px; | |
| border-bottom: 1px solid #EEE; | |
| } | |
| p { | |
| margin: 0 0 10px; | |
| } | |
| footer { | |
| margin: 5em 0; | |
| } | |
| .list-unstyled { | |
| padding-left: 0; | |
| list-style: none; | |
| } | |
| .tick { | |
| fill-opacity: 0; | |
| stroke: #000000; | |
| stroke-width: 1; | |
| } | |
| .domain { | |
| fill: none; | |
| fill-opacity: 0; | |
| stroke: black; | |
| stroke-width: 1; | |
| } | |
| .axis line { | |
| fill: none; | |
| fill-opacity: 0; | |
| stroke: black; | |
| stroke-width: 1; | |
| shape-rendering: crispEdges; | |
| } | |
| .axis text { | |
| font-family: sans-serif; | |
| font-size: 11px; | |
| stroke: gray; | |
| } | |
| .block { | |
| border-style: solid; | |
| border-width: 3px; | |
| width: 10em; | |
| height: 10em; | |
| border-radius: 8px; | |
| margin: 8px; | |
| display: inline-block; | |
| } | |
| .number { | |
| font-family: "News Cycle","Arial Narrow Bold",sans-serif; | |
| font-weight: 700; | |
| line-height: 1.1; | |
| color: #000; | |
| } | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: #ccc; | |
| shape-rendering: crispEdges; | |
| } | |
| .y.axis { | |
| stroke-width: 0; | |
| } | |
| .band { | |
| fill-opacity: 0.05; | |
| } | |
| .band:hover { | |
| fill-opacity: 0.6 | |
| } | |
| </style> | |
| <body> | |
| <div class="navbar navbar-inverse navbar-static-top hidden-print"> | |
| <div class="container"> | |
| <div class="navbar-header"> | |
| <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> | |
| <span class="sr-only">Toggle navigation</span> | |
| <i class="fa fa-bars fa-lg"></i> | |
| </button> | |
| <a class="navbar-brand" href="./"><i class="fa fa-bar-chart"></i> pollster.eu</a> | |
| </div> | |
| <div class="navbar-collapse collapse"> | |
| <ul class="nav navbar-nav"> | |
| <li class="dropdown"> | |
| <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Česká republika <i class="fa fa-caret-down"></i></a> | |
| <ul class="dropdown-menu" role="menu"> | |
| <li><a href="#">Česká republika</a></li> | |
| <li><a href="#">Slovensko</a></li> | |
| </ul> | |
| </li> | |
| </ul> | |
| <ul class="nav navbar-nav navbar-right"> | |
| <li class="dropdown"> | |
| <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">čeština <i class="fa fa-caret-down"></i></a> | |
| <ul class="dropdown-menu" role="menu"> | |
| <li><a href="#">čeština</a></li> | |
| <li><a href="#">English</a></li> | |
| </ul> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="container"> | |
| <section id="id1"> | |
| <div > | |
| <h2 class="page-header">Volební model <small>s odhadem jeho nejistoty</small> <span class="badge">13.3.2015</span></h2> | |
| </div> | |
| <div class="row"> | |
| <div class="col-md-3 col-sm-4"> | |
| <p>Volební model co nejlépe odhaduje, jak by dopadly volby nyní. | |
| <p>Nejistota modelu je dána statistickou chybou a dalšími vlivy. | |
| <p>Volební model je založen na průzkumech <a href="#">CVVM</a>, <a href="#">ABC</a>. | |
| <p> <a href="#"><span class="fa-stack fa-lg"> | |
| <i class="fa fa-square-o fa-stack-2x"></i> | |
| <i class="fa fa-twitter fa-stack-1x"></i> | |
| </span></a> | |
| <a href="#"><span class="fa-stack fa-lg"> | |
| <i class="fa fa-square-o fa-stack-2x"></i> | |
| <i class="fa fa-facebook fa-stack-1x"></i> | |
| </span></a> | |
| </div> | |
| <div class="col-md-9 col-sm-8"> | |
| <div id="chart1" style="max-width:666px"></div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="id2"> | |
| <div> | |
| <h2 class="page-header">Odhad počtu poslanců <small>s odhadem chyby</small> <span class="badge">14.3.2015</span> <span class="label label-info" style="font-size:0.25em;position:relative;bottom:5px;">Experimentální</span></h2> | |
| </div> | |
| <div class="row"> | |
| <div class="col-md-3 col-sm-4"> | |
| <p>Odhad počtu poslanců je založen na volebním modelu. | |
| <p>Nejistota je dána také různou podporou stran v různých krajích. | |
| <p>Odhad je založen na průzkumech <a href="#">CVVM</a>, <a href="#">ABC</a>. | |
| <p> <a href="#"><span class="fa-stack fa-lg"> | |
| <i class="fa fa-square-o fa-stack-2x"></i> | |
| <i class="fa fa-twitter fa-stack-1x"></i> | |
| </span></a> | |
| <a href="#"><span class="fa-stack fa-lg"> | |
| <i class="fa fa-square-o fa-stack-2x"></i> | |
| <i class="fa fa-facebook fa-stack-1x"></i> | |
| </span></a> | |
| </div> | |
| <div class="col-md-9 col-sm-8"> | |
| <div id="chart2" style="max-width:700px"> | |
| <div class="block" style="border-color:#abc;position:relative"> | |
| <div class=""> | |
| <h4 style="color:#abc;padding-left:2px;margin-bottom: 0px;">ANO</h4> | |
| </div> | |
| <div class="pull-rightx"> | |
| </div> | |
| <div class="text-center"> | |
| <span class="number" style="font-size:4em;">78</span> | |
| </div> | |
| <div class="text-center"> | |
| ±12 | |
| </div> | |
| <div style="position:absolute;top:3em;left:7em;"> | |
| <span class="text-success">▲</span>31 | |
| </div> | |
| </div> | |
| <div class="block" style="border-color:orange;position:relative"> | |
| <div class=""> | |
| <h4 style="color:orange;padding-left:2px;margin-bottom: 0px;">ČSSD</h4> | |
| </div> | |
| <div class="pull-rightx"> | |
| </div> | |
| <div class="text-center"> | |
| <span class="number" style="font-size:4em;">68</span> | |
| </div> | |
| <div class="text-center"> | |
| ±12 | |
| </div> | |
| <div style="position:absolute;top:3em;left:7em;"> | |
| <span class="text-success">▲</span>18 | |
| </div> | |
| </div> | |
| <div class="block" style="border-color:red;position:relative"> | |
| <div class=""> | |
| <h4 style="color:red;padding-left:2px;margin-bottom: 0px;">KSČM</h4> | |
| </div> | |
| <div class="pull-rightx"> | |
| </div> | |
| <div class="text-center"> | |
| <span class="number" style="font-size:4em;">24</span> | |
| </div> | |
| <div class="text-center"> | |
| ±9 | |
| </div> | |
| <div style="position:absolute;top:3em;left:7em;"> | |
| <span class="text-danger">▼</span>9 | |
| </div> | |
| </div> | |
| <div class="block" style="border-color:#808;position:relative"> | |
| <div class=""> | |
| <h4 style="color:#808;padding-left:2px;margin-bottom: 0px;">TOP 09</h4> | |
| </div> | |
| <div class="pull-rightx"> | |
| </div> | |
| <div class="text-center"> | |
| <span class="number" style="font-size:4em;">15</span> | |
| </div> | |
| <div class="text-center"> | |
| ±7 | |
| </div> | |
| <div style="position:absolute;top:3em;left:7em;"> | |
| <span class="text-danger">▼</span>11 | |
| </div> | |
| </div> | |
| <div class="block" style="border-color:gold;position:relative"> | |
| <div class=""> | |
| <h4 style="color:gold;padding-left:2px;margin-bottom: 0px;">KDU-ČSL</h4> | |
| </div> | |
| <div class="pull-rightx"> | |
| </div> | |
| <div class="text-center"> | |
| <span class="number" style="font-size:4em;">11</span> | |
| </div> | |
| <div class="text-center"> | |
| ±6 | |
| </div> | |
| <div style="position:absolute;top:3em;left:7em;"> | |
| <span class="text-danger">▼</span>3 | |
| </div> | |
| </div> | |
| <div class="block" style="border-color:blue;position:relative"> | |
| <div class=""> | |
| <h4 style="color:blue;padding-left:2px;margin-bottom: 0px;">ODS</h4> | |
| </div> | |
| <div class="pull-rightx"> | |
| </div> | |
| <div class="text-center"> | |
| <span class="number" style="font-size:4em;">9</span> | |
| </div> | |
| <div class="text-center"> | |
| ±6 | |
| </div> | |
| <div style="position:absolute;top:3em;left:7em;"> | |
| <span class="text-danger">▼</span>7 | |
| </div> | |
| </div> | |
| <div class="block" style="border-color:black;position:relative"> | |
| <div class=""> | |
| <h4 style="color:black;padding-left:2px;margin-bottom: 0px;">Piráti</h4> | |
| </div> | |
| <div class="pull-rightx"> | |
| </div> | |
| <div class="text-center"> | |
| <span class="number" style="font-size:4em;">0</span> | |
| </div> | |
| <div class="text-center"> | |
| ±5 | |
| </div> | |
| <div style="position:absolute;top:3em;left:7em;"> | |
| <span class="text-muted">⚫</span>0 | |
| </div> | |
| </div> | |
| <div class="block" style="border-color:pink;position:relative"> | |
| <div class=""> | |
| <h4 style="color:pink;padding-left:2px;margin-bottom: 0px;">Úsvit</h4> | |
| </div> | |
| <div class="pull-rightx"> | |
| </div> | |
| <div class="text-center"> | |
| <span class="number" style="font-size:4em;">0</span> | |
| </div> | |
| <div class="text-center"> | |
| ±4 | |
| </div> | |
| <div style="position:absolute;top:3em;left:7em;"> | |
| <span class="text-danger">▼</span>14 | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="id3"> | |
| <div > | |
| <h2 class="page-header">Volební model v čase <small>s odhadem jeho chyby</small> <span class="badge">13.3.2015</span></h2> | |
| </div> | |
| <div class="row"> | |
| <div class="col-md-3 col-sm-4"> | |
| <p>Volební model co nejlépe odhaduje, jak by dopadly volby v daném okamžiku. | |
| <p>Nejistota modelu je dána statistickou chybou a dalšími vlivy. | |
| <p>Volební model je založen na průzkumech <a href="#">CVVM</a>, <a href="#">ABC</a>. | |
| <p> <a href="#"><span class="fa-stack fa-lg"> | |
| <i class="fa fa-square-o fa-stack-2x"></i> | |
| <i class="fa fa-twitter fa-stack-1x"></i> | |
| </span></a> | |
| <a href="#"><span class="fa-stack fa-lg"> | |
| <i class="fa fa-square-o fa-stack-2x"></i> | |
| <i class="fa fa-facebook fa-stack-1x"></i> | |
| </span></a> | |
| </div> | |
| <div class="col-md-9 col-sm-8"> | |
| <div id="chart3" style="max-width:750px"></div> | |
| </div> | |
| </div> | |
| </section> | |
| <footer id="footer"> | |
| <div class="row"> | |
| <a href="#">O projektu</a> <a href="#" style="margin-left:2em">Data</a> <a href="#" style="margin-left:2em">Data</a> ... | |
| </div> | |
| </footer> | |
| </div> <!-- /container --> | |
| <script> | |
| var margin = {top: 20, right: 0, bottom: 20, left: 0}, | |
| width = 600 - margin.left - margin.right, | |
| height = 250 - margin.top - margin.bottom; | |
| var doublebarchart = [{ | |
| "data": [ | |
| {"name":"ANO","value":0.31, "value_old": 0.1865, "color": "#abc", "id": "ano", "legend_small": " ±7%"}, | |
| {"name":"ČSSD","value": 0.28, "value_old": 0.2045, "color": "orange", "id":"cssd", "legend_small": " ±6%"}, | |
| {"name":"KSČM","value":0.115, "value_old": 0.1491, "color": "red", "id": "kscm", "legend_small": " ±4%"}, | |
| {"name":"TOP 09","value":0.075, "value_old": 0.1199, "color": "#808", "legend_small": " ±3.5%"}, | |
| {"name":"KDU-ČSL","value":0.06, "value_old": 0.0678, "color": "gold", "legend_small": " ±3.5%"}, | |
| {"name":"ODS","value":0.05, "value_old": 0.0772, "color": "blue", "legend_small": " ±3%"}, | |
| {"name":"Piráti","value":0.03, "value_old": 0.0266, "color": "black", "legend_small": " ±3%"}, | |
| {"name": "Úsvit", "value": 0.025, "value_old": 0.0688, "color": "pink", "legend_small": " ±3%"}, | |
| {"name": "Zelení", "value": 0.025, "value_old": 0.0319, "color": "green", "legend_small": " ±3%"}, | |
| {"name": "Ostatní", "value": 0.03, "color": "gray"} | |
| ], | |
| "size": {"width": width, "height": height}, | |
| "margin": margin, | |
| "threshold": 0.05 | |
| }]; | |
| var svg = d3.select("#chart1") | |
| .append("svg") | |
| .attr("width", width + margin.left + margin.right) | |
| .attr("height", height + margin.top + margin.bottom) | |
| .call(responsivefy); | |
| var dbc = d3.doublebarchart() | |
| .data(function(d) {return d.data}) | |
| .size(function(d) {return d.size}) | |
| .threshold(function(d) {return d.threshold}) | |
| ; | |
| var bar = svg.selectAll(".barchart") | |
| .data(doublebarchart) | |
| .enter() | |
| .append("svg:g") | |
| .attr("transform", "translate(" + doublebarchart[0].margin.left + "," + doublebarchart[0].margin.top + ")") | |
| .call(dbc); | |
| var json = (function () { | |
| var json = null; | |
| $.ajax({ | |
| 'async': false, | |
| 'global': false, | |
| 'url': "./linedata.json", | |
| 'dataType': "json", | |
| 'success': function (data) { | |
| json = data; | |
| } | |
| }); | |
| return json; | |
| })(); | |
| width = getParameterByName('width'); | |
| height = getParameterByName('height'); | |
| if ((width == '') || (!isNumeric(width)) || width < 10) width = 750; | |
| if (height == '') height = 500; | |
| var linechart = [{ | |
| "data":json, | |
| "intervals": "real", | |
| "interpolation": "nevim", | |
| "width": width, | |
| "height": height, | |
| "limit": 0.05 | |
| }]; | |
| var w=width,h=height, | |
| svg=d3.select("#chart3") | |
| .append("svg") | |
| .attr("width",w) | |
| .attr("height",h) | |
| .call(responsivefy); | |
| var lc = d3.linechart() | |
| .data(function(d) { | |
| nothing = 0; | |
| return d.data; | |
| }) | |
| .intervals(function(d) {return d.intervals;}) | |
| .interpolation(function(d) {return d.interpolation;}) | |
| .width(function(d) {return d.width;}) | |
| .height(function(d) {return d.height;}); | |
| var item = svg.selectAll(".linechart") | |
| .data(linechart) | |
| .enter() | |
| .append("svg:g") | |
| .call(lc); | |
| $('.axis path').attr('stroke','#ccc').attr('fill','none').attr('shape-rendering','crispEdges'); | |
| $('.axis line').attr('stroke','#ccc').attr('fill','none').attr('shape-rendering','crispEdges'); | |
| $('.axis text').attr('font-size','10px').attr('fill','#666').attr('shape-rendering','crispEdges'); | |
| function getParameterByName(name) { | |
| name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]"); | |
| var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"), | |
| results = regex.exec(location.search); | |
| return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " ")); | |
| } | |
| function isNumeric(n) { | |
| return !isNaN(parseFloat(n)) && isFinite(n); | |
| } | |
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.2/journal/bootstrap.min.css"> | |
| <link href="//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> | |
| <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="./d3.doublebarchart2.js"></script> | |
| <script src="./responsivefy.js"></script> | |
| <script src="./binomial.js"></script> | |
| <script src="d3.linechart.js"></script> | |
| <style> | |
| .container { | |
| margin-right: auto; | |
| margin-left: auto; | |
| padding-left: 15px; | |
| padding-right: 15px; | |
| } | |
| @media (min-width: 1200px) | |
| .container { | |
| width: 1170px; | |
| } | |
| @media (min-width: 992px) | |
| .container { | |
| width: 970px; | |
| } | |
| @media (min-width: 768px) | |
| .container { | |
| width: 750px; | |
| } | |
| .page-header { | |
| padding-bottom: 9px; | |
| margin: 40px 0 20px; | |
| border-bottom: 1px solid #EEE; | |
| } | |
| p { | |
| margin: 0 0 10px; | |
| } | |
| footer { | |
| margin: 5em 0; | |
| } | |
| .list-unstyled { | |
| padding-left: 0; | |
| list-style: none; | |
| } | |
| .tick { | |
| fill-opacity: 0; | |
| stroke: #000000; | |
| stroke-width: 1; | |
| } | |
| .domain { | |
| fill: none; | |
| fill-opacity: 0; | |
| stroke: black; | |
| stroke-width: 1; | |
| } | |
| .axis line { | |
| fill: none; | |
| fill-opacity: 0; | |
| stroke: black; | |
| stroke-width: 1; | |
| shape-rendering: crispEdges; | |
| } | |
| .axis text { | |
| font-family: sans-serif; | |
| font-size: 11px; | |
| stroke: gray; | |
| } | |
| .block { | |
| border-style: solid; | |
| border-width: 3px; | |
| width: 8em; | |
| height: 8em; | |
| border-radius: 8px; | |
| margin: 8px; | |
| display: inline-block; | |
| } | |
| .number { | |
| font-family: "News Cycle","Arial Narrow Bold",sans-serif; | |
| font-weight: 700; | |
| line-height: 1.1; | |
| color: #000; | |
| } | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: #ccc; | |
| shape-rendering: crispEdges; | |
| } | |
| .y.axis { | |
| stroke-width: 0; | |
| } | |
| .band { | |
| fill-opacity: 0.05; | |
| } | |
| .band:hover { | |
| fill-opacity: 0.6 | |
| } | |
| </style> | |
| <body> | |
| <div class="navbar navbar-inverse navbar-static-top hidden-print"> | |
| <div class="container"> | |
| <div class="navbar-header"> | |
| <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> | |
| <span class="sr-only">Toggle navigation</span> | |
| <i class="fa fa-bars fa-lg"></i> | |
| </button> | |
| <a class="navbar-brand" href="./"><i class="fa fa-bar-chart"></i> pollster.eu</a> | |
| </div> | |
| <div class="navbar-collapse collapse"> | |
| <ul class="nav navbar-nav"> | |
| <li class="dropdown"> | |
| <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Česká republika <i class="fa fa-caret-down"></i></a> | |
| <ul class="dropdown-menu" role="menu"> | |
| <li><a href="#">Česká republika</a></li> | |
| <li><a href="#">Slovensko</a></li> | |
| </ul> | |
| </li> | |
| </ul> | |
| <ul class="nav navbar-nav navbar-right"> | |
| <li class="dropdown"> | |
| <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">čeština <i class="fa fa-caret-down"></i></a> | |
| <ul class="dropdown-menu" role="menu"> | |
| <li><a href="#">čeština</a></li> | |
| <li><a href="#">English</a></li> | |
| </ul> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-md-6"> | |
| <section id="id1" name="id1"> | |
| <h2 class="page-header" style="margin-top:20px">Volební model <small>s odhadem jeho nejistoty</small> <span class="badge">13.3.2015</span></h2> | |
| <div id="chart1" style="max-width:666px"></div> | |
| <p> | |
| <a href="#id1" data-toggle="modal" data-target="#info1"><span class="fa-stack fa-lg"> | |
| <i class="fa fa-square-o fa-stack-2x"></i> | |
| <i class="fa fa-info fa-stack-1x"></i> | |
| </span></a> | |
| <a href="#"><span class="fa-stack fa-lg"> | |
| <i class="fa fa-square-o fa-stack-2x"></i> | |
| <i class="fa fa-twitter fa-stack-1x"></i> | |
| </span></a> | |
| <a href="#"><span class="fa-stack fa-lg"> | |
| <i class="fa fa-square-o fa-stack-2x"></i> | |
| <i class="fa fa-facebook fa-stack-1x"></i> | |
| </span></a> | |
| <!-- Modal --> | |
| <div class="modal fade" id="info1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> | |
| <div class="modal-dialog"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> | |
| <h4 class="modal-title" id="myModalLabel">Volební model v čase <small>s odhadem jeho chyby</small></h4> | |
| </div> | |
| <div class="modal-body"> | |
| <p>Volební model co nejlépe odhaduje, jak by dopadly volby nyní. | |
| <p>Nejistota modelu je dána statistickou chybou a dalšími vlivy. | |
| <p>Volební model je založen na průzkumech <a href="#">CVVM</a>, <a href="#">ABC</a>. | |
| </div> | |
| <div class="modal-footer"> | |
| <button type="button" class="btn btn-default" data-dismiss="modal">Fajn</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| <div class="col-md-6"> | |
| <section id="id2" name="id2"> | |
| <div> | |
| <h2 class="page-header" style="margin-top:20px">Odhad počtu poslanců <small>s odhadem chyby</small> <span class="badge">14.3.2015</span> <span class="label label-info" style="font-size:0.25em;position:relative;bottom:5px;">Experimentální</span></h2> | |
| </div> | |
| <div id="chart2"> | |
| <div class="block" style="border-color:#abc;position:relative"> | |
| <div class=""> | |
| <h4 style="color:#abc;padding-left:2px;margin-bottom: 0px;">ANO</h4> | |
| </div> | |
| <div class="pull-rightx"> | |
| </div> | |
| <div class="text-center"> | |
| <span class="number" style="font-size:3em;">78</span> | |
| </div> | |
| <div class="text-center"> | |
| ±12 | |
| </div> | |
| <div style="position:absolute;top:3em;left:5.5em;"> | |
| <span class="text-success">▲</span>31 | |
| </div> | |
| </div> | |
| <div class="block" style="border-color:orange;position:relative"> | |
| <div class=""> | |
| <h4 style="color:orange;padding-left:2px;margin-bottom: 0px;">ČSSD</h4> | |
| </div> | |
| <div class="pull-rightx"> | |
| </div> | |
| <div class="text-center"> | |
| <span class="number" style="font-size:3em;">68</span> | |
| </div> | |
| <div class="text-center"> | |
| ±12 | |
| </div> | |
| <div style="position:absolute;top:3em;left:5.5em;"> | |
| <span class="text-success">▲</span>18 | |
| </div> | |
| </div> | |
| <div class="block" style="border-color:red;position:relative"> | |
| <div class=""> | |
| <h4 style="color:red;padding-left:2px;margin-bottom: 0px;">KSČM</h4> | |
| </div> | |
| <div class="pull-rightx"> | |
| </div> | |
| <div class="text-center"> | |
| <span class="number" style="font-size:3em;">24</span> | |
| </div> | |
| <div class="text-center"> | |
| ±9 | |
| </div> | |
| <div style="position:absolute;top:3em;left:5.5em;"> | |
| <span class="text-danger">▼</span>9 | |
| </div> | |
| </div> | |
| <div class="block" style="border-color:#808;position:relative"> | |
| <div class=""> | |
| <h4 style="color:#808;padding-left:2px;margin-bottom: 0px;">TOP 09</h4> | |
| </div> | |
| <div class="pull-rightx"> | |
| </div> | |
| <div class="text-center"> | |
| <span class="number" style="font-size:3em;">15</span> | |
| </div> | |
| <div class="text-center"> | |
| ±7 | |
| </div> | |
| <div style="position:absolute;top:3em;left:5.5em;"> | |
| <span class="text-danger">▼</span>11 | |
| </div> | |
| </div> | |
| <div class="block" style="border-color:gold;position:relative"> | |
| <div class=""> | |
| <h4 style="color:gold;padding-left:2px;margin-bottom: 0px;">KDU-ČSL</h4> | |
| </div> | |
| <div class="pull-rightx"> | |
| </div> | |
| <div class="text-center"> | |
| <span class="number" style="font-size:3em;">11</span> | |
| </div> | |
| <div class="text-center"> | |
| ±6 | |
| </div> | |
| <div style="position:absolute;top:3em;left:5.5em;"> | |
| <span class="text-danger">▼</span>3 | |
| </div> | |
| </div> | |
| <div class="block" style="border-color:blue;position:relative"> | |
| <div class=""> | |
| <h4 style="color:blue;padding-left:2px;margin-bottom: 0px;">ODS</h4> | |
| </div> | |
| <div class="pull-rightx"> | |
| </div> | |
| <div class="text-center"> | |
| <span class="number" style="font-size:3em;">9</span> | |
| </div> | |
| <div class="text-center"> | |
| ±6 | |
| </div> | |
| <div style="position:absolute;top:3em;left:5.5em;"> | |
| <span class="text-danger">▼</span>7 | |
| </div> | |
| </div> | |
| <div class="block" style="border-color:black;position:relative"> | |
| <div class=""> | |
| <h4 style="color:black;padding-left:2px;margin-bottom: 0px;">Piráti</h4> | |
| </div> | |
| <div class="pull-rightx"> | |
| </div> | |
| <div class="text-center"> | |
| <span class="number" style="font-size:3em;">0</span> | |
| </div> | |
| <div class="text-center"> | |
| ±5 | |
| </div> | |
| <div style="position:absolute;top:3em;left:5.5em;"> | |
| <span class="text-muted">⚫</span>0 | |
| </div> | |
| </div> | |
| <div class="block" style="border-color:pink;position:relative"> | |
| <div class=""> | |
| <h4 style="color:pink;padding-left:2px;margin-bottom: 0px;">Úsvit</h4> | |
| </div> | |
| <div class="pull-rightx"> | |
| </div> | |
| <div class="text-center"> | |
| <span class="number" style="font-size:3em;">0</span> | |
| </div> | |
| <div class="text-center"> | |
| ±4 | |
| </div> | |
| <div style="position:absolute;top:3em;left:5.5em;"> | |
| <span class="text-danger">▼</span>14 | |
| </div> | |
| </div> | |
| <p> | |
| <a href="#id2" data-toggle="modal" data-target="#info2"><span class="fa-stack fa-lg"> | |
| <i class="fa fa-square-o fa-stack-2x"></i> | |
| <i class="fa fa-info fa-stack-1x"></i> | |
| </span></a> | |
| <a href="#"><span class="fa-stack fa-lg"> | |
| <i class="fa fa-square-o fa-stack-2x"></i> | |
| <i class="fa fa-twitter fa-stack-1x"></i> | |
| </span></a> | |
| <a href="#"><span class="fa-stack fa-lg"> | |
| <i class="fa fa-square-o fa-stack-2x"></i> | |
| <i class="fa fa-facebook fa-stack-1x"></i> | |
| </span></a> | |
| </div> | |
| <!-- Modal --> | |
| <div class="modal fade" id="info2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> | |
| <div class="modal-dialog"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> | |
| <h4 class="modal-title" id="myModalLabel">Volební model v čase <small>s odhadem jeho chyby</small></h4> | |
| </div> | |
| <div class="modal-body"> | |
| <p>Odhad počtu poslanců je založen na volebním modelu. | |
| <p>Nejistota je dána také různou podporou stran v různých krajích. | |
| <p>Odhad je založen na průzkumech <a href="#">CVVM</a>, <a href="#">ABC</a>. | |
| </div> | |
| <div class="modal-footer"> | |
| <button type="button" class="btn btn-default" data-dismiss="modal">Fajn</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| </div> | |
| <section id="id3" name="#id3"> | |
| <div > | |
| <h2 class="page-header">Volební model v čase <small>s odhadem jeho chyby</small> <span class="badge">13.3.2015</span></h2> | |
| </div> | |
| <div id="chart3" style="max-width:960px"></div> | |
| <p> | |
| <a href="#id3" data-toggle="modal" data-target="#info3"><span class="fa-stack fa-lg"> | |
| <i class="fa fa-square-o fa-stack-2x"></i> | |
| <i class="fa fa-info fa-stack-1x"></i> | |
| </span></a> | |
| <a href="#"><span class="fa-stack fa-lg"> | |
| <i class="fa fa-square-o fa-stack-2x"></i> | |
| <i class="fa fa-twitter fa-stack-1x"></i> | |
| </span></a> | |
| <a href="#"><span class="fa-stack fa-lg"> | |
| <i class="fa fa-square-o fa-stack-2x"></i> | |
| <i class="fa fa-facebook fa-stack-1x"></i> | |
| </span></a> | |
| <!-- Modal --> | |
| <div class="modal fade" id="info3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> | |
| <div class="modal-dialog"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> | |
| <h4 class="modal-title" id="myModalLabel">Volební model v čase <small>s odhadem jeho chyby</small></h4> | |
| </div> | |
| <div class="modal-body"> | |
| <p>Volební model co nejlépe odhaduje, jak by dopadly volby v daném okamžiku. | |
| <p>Nejistota modelu je dána <a href="http://cs.wikipedia.org/wiki/Chyba_m%C4%9B%C5%99en%C3%AD" target="_blank">statistickou chybou</a> a dalšími vlivy jako <a href="http://en.wikipedia.org/wiki/Response_rate">počtem lidí, kteří odmítnou se průzkumů zůčastnit</a>. | |
| <p>Volební model je založen na průzkumech <a href="#">CVVM</a>, <a href="#">ABC</a> a počítá se <a href="#">takto</a>. | |
| </div> | |
| <div class="modal-footer"> | |
| <button type="button" class="btn btn-default" data-dismiss="modal">Fajn</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <footer id="footer"> | |
| <div class="row"> | |
| <a href="#">O projektu</a> <a href="#" style="margin-left:2em">Data</a> <a href="#" style="margin-left:2em">Data</a> ... | |
| </div> | |
| </footer> | |
| </div> <!-- /container --> | |
| <script> | |
| var margin = {top: 20, right: 0, bottom: 20, left: 0}, | |
| width = 600 - margin.left - margin.right, | |
| height = 250 - margin.top - margin.bottom; | |
| var doublebarchart = [{ | |
| "data": [ | |
| {"name":"ANO","value":0.31, "value_old": 0.1865, "color": "#abc", "id": "ano", "legend_small": " ±7%"}, | |
| {"name":"ČSSD","value": 0.28, "value_old": 0.2045, "color": "orange", "id":"cssd", "legend_small": " ±6%"}, | |
| {"name":"KSČM","value":0.115, "value_old": 0.1491, "color": "red", "id": "kscm", "legend_small": " ±4%"}, | |
| {"name":"TOP 09","value":0.075, "value_old": 0.1199, "color": "#808", "legend_small": " ±3.5%"}, | |
| {"name":"KDU-ČSL","value":0.06, "value_old": 0.0678, "color": "gold", "legend_small": " ±3.5%"}, | |
| {"name":"ODS","value":0.05, "value_old": 0.0772, "color": "blue", "legend_small": " ±3%"}, | |
| {"name":"Piráti","value":0.03, "value_old": 0.0266, "color": "black", "legend_small": " ±3%"}, | |
| {"name": "Úsvit", "value": 0.025, "value_old": 0.0688, "color": "pink", "legend_small": " ±3%"}, | |
| {"name": "Zelení", "value": 0.025, "value_old": 0.0319, "color": "green", "legend_small": " ±3%"}, | |
| {"name": "Ostatní", "value": 0.03, "color": "gray"} | |
| ], | |
| "size": {"width": width, "height": height}, | |
| "margin": margin, | |
| "threshold": 0.05 | |
| }]; | |
| var svg = d3.select("#chart1") | |
| .append("svg") | |
| .attr("width", width + margin.left + margin.right) | |
| .attr("height", height + margin.top + margin.bottom) | |
| .call(responsivefy); | |
| var dbc = d3.doublebarchart() | |
| .data(function(d) {return d.data}) | |
| .size(function(d) {return d.size}) | |
| .threshold(function(d) {return d.threshold}) | |
| ; | |
| var bar = svg.selectAll(".barchart") | |
| .data(doublebarchart) | |
| .enter() | |
| .append("svg:g") | |
| .attr("transform", "translate(" + doublebarchart[0].margin.left + "," + doublebarchart[0].margin.top + ")") | |
| .call(dbc); | |
| var json = (function () { | |
| var json = null; | |
| $.ajax({ | |
| 'async': false, | |
| 'global': false, | |
| 'url': "./linedata.json", | |
| 'dataType': "json", | |
| 'success': function (data) { | |
| json = data; | |
| } | |
| }); | |
| return json; | |
| })(); | |
| width = getParameterByName('width'); | |
| height = getParameterByName('height'); | |
| if ((width == '') || (!isNumeric(width)) || width < 10) width = 960; | |
| if (height == '') height = 400; | |
| var linechart = [{ | |
| "data":json, | |
| "intervals": "real", | |
| "interpolation": "nevim", | |
| "width": width, | |
| "height": height, | |
| "limit": 0.05 | |
| }]; | |
| var w=width,h=height, | |
| svg=d3.select("#chart3") | |
| .append("svg") | |
| .attr("width",w) | |
| .attr("height",h) | |
| .call(responsivefy); | |
| var lc = d3.linechart() | |
| .data(function(d) { | |
| nothing = 0; | |
| return d.data; | |
| }) | |
| .intervals(function(d) {return d.intervals;}) | |
| .interpolation(function(d) {return d.interpolation;}) | |
| .width(function(d) {return d.width;}) | |
| .height(function(d) {return d.height;}); | |
| var item = svg.selectAll(".linechart") | |
| .data(linechart) | |
| .enter() | |
| .append("svg:g") | |
| .call(lc); | |
| $('.axis path').attr('stroke','#ccc').attr('fill','none').attr('shape-rendering','crispEdges'); | |
| $('.axis line').attr('stroke','#ccc').attr('fill','none').attr('shape-rendering','crispEdges'); | |
| $('.axis text').attr('font-size','10px').attr('fill','#666').attr('shape-rendering','crispEdges'); | |
| function getParameterByName(name) { | |
| name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]"); | |
| var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"), | |
| results = regex.exec(location.search); | |
| return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " ")); | |
| } | |
| function isNumeric(n) { | |
| return !isNaN(parseFloat(n)) && isFinite(n); | |
| } | |
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function responsivefy(svg) { | |
| // get container + svg aspect ratio | |
| var container = d3.select(svg.node().parentNode), | |
| width = parseInt(svg.style("width")), | |
| height = parseInt(svg.style("height")), | |
| aspect = width / height; | |
| // add viewBox and preserveAspectRatio properties, | |
| // and call resize so that svg resizes on inital page load | |
| svg.attr("viewBox", "0 0 " + width + " " + height) | |
| .attr("perserveAspectRatio", "xMinYMid") | |
| .call(resize); | |
| // to register multiple listeners for same event type, | |
| // you need to add namespace, i.e., 'click.foo' | |
| // necessary if you call invoke this function for multiple svgs | |
| // api docs: https://github.com/mbostock/d3/wiki/Selections#on | |
| d3.select(window).on("resize." + container.attr("id"), resize); | |
| // get width of container and resize svg to fit it | |
| function resize() { | |
| var targetWidth = parseInt(container.style("width")); | |
| svg.attr("width", targetWidth); | |
| svg.attr("height", Math.round(targetWidth / aspect)); | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.2/journal/bootstrap.min.css"> | |
| <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> | |
| <style> | |
| .block { | |
| border-style: solid; | |
| border-width: 3px; | |
| width: 10em; | |
| height: 10em; | |
| border-radius: 8px; | |
| margin: 8px; | |
| display: inline-block; | |
| } | |
| .number { | |
| font-family: "News Cycle","Arial Narrow Bold",sans-serif; | |
| font-weight: 700; | |
| line-height: 1.1; | |
| color: #000; | |
| } | |
| .well { | |
| min-height: 20px; | |
| padding: 19px; | |
| margin-bottom: 20px; | |
| background-color: #F5F5F5; | |
| border: 1px solid #E3E3E3; | |
| border-radius: 4px; | |
| box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05) inset; | |
| </style> | |
| <body> | |
| <div style="margin:20px"> | |
| <h3>Number of seats estimate <small>with error estimates</small> <span class="badge">Mar 14 2015</span> <span class="label label-info" style="font-size:0.33em;position:relative;bottom:5px;">Experimental</span></h3> | |
| <div id="chart" style="max-width:700px"> | |
| <div class="block" style="border-color:#abc;position:relative"> | |
| <div class=""> | |
| <h4 style="color:#abc;padding-left:2px;margin-bottom: 0px;">ANO <i class="fa fa-user"></i></h4> | |
| </div> | |
| <div class="pull-rightx"> | |
| </div> | |
| <div class="text-center"> | |
| <span class="number" style="font-size:4em;">78</span> | |
| </div> | |
| <div class="text-center"> | |
| ±12 | |
| </div> | |
| <div style="position:absolute;top:3em;left:7em;"> | |
| <span class="text-success">▲</span>31 | |
| </div> | |
| </div> | |
| <div class="block" style="border-color:orange;position:relative"> | |
| <div class=""> | |
| <h4 style="color:orange;padding-left:2px;margin-bottom: 0px;">ČSSD <i class="fa fa-user"></i></h4> | |
| </div> | |
| <div class="pull-rightx"> | |
| </div> | |
| <div class="text-center"> | |
| <span class="number" style="font-size:4em;">68</span> | |
| </div> | |
| <div class="text-center"> | |
| ±12 | |
| </div> | |
| <div style="position:absolute;top:3em;left:7em;"> | |
| <span class="text-success">▲</span>18 | |
| </div> | |
| </div> | |
| <div class="block" style="border-color:red;position:relative"> | |
| <div class=""> | |
| <h4 style="color:red;padding-left:2px;margin-bottom: 0px;">KSČM <i class="fa fa-user"></i></h4> | |
| </div> | |
| <div class="pull-rightx"> | |
| </div> | |
| <div class="text-center"> | |
| <span class="number" style="font-size:4em;">24</span> | |
| </div> | |
| <div class="text-center"> | |
| ±9 | |
| </div> | |
| <div style="position:absolute;top:3em;left:7em;"> | |
| <span class="text-danger">▼</span>9 | |
| </div> | |
| </div> | |
| <div class="block" style="border-color:#808;position:relative"> | |
| <div class=""> | |
| <h4 style="color:#808;padding-left:2px;margin-bottom: 0px;">TOP 09 <i class="fa fa-user"></i></h4> | |
| </div> | |
| <div class="pull-rightx"> | |
| </div> | |
| <div class="text-center"> | |
| <span class="number" style="font-size:4em;">15</span> | |
| </div> | |
| <div class="text-center"> | |
| ±7 | |
| </div> | |
| <div style="position:absolute;top:3em;left:7em;"> | |
| <span class="text-danger">▼</span>11 | |
| </div> | |
| </div> | |
| <div class="block" style="border-color:gold;position:relative"> | |
| <div class=""> | |
| <h4 style="color:gold;padding-left:2px;margin-bottom: 0px;">KDU-ČSL <i class="fa fa-user"></i></h4> | |
| </div> | |
| <div class="pull-rightx"> | |
| </div> | |
| <div class="text-center"> | |
| <span class="number" style="font-size:4em;">11</span> | |
| </div> | |
| <div class="text-center"> | |
| ±6 | |
| </div> | |
| <div style="position:absolute;top:3em;left:7em;"> | |
| <span class="text-danger">▼</span>3 | |
| </div> | |
| </div> | |
| <div class="block" style="border-color:blue;position:relative"> | |
| <div class=""> | |
| <h4 style="color:blue;padding-left:2px;margin-bottom: 0px;">ODS <i class="fa fa-user"></i></h4> | |
| </div> | |
| <div class="pull-rightx"> | |
| </div> | |
| <div class="text-center"> | |
| <span class="number" style="font-size:4em;">9</span> | |
| </div> | |
| <div class="text-center"> | |
| ±6 | |
| </div> | |
| <div style="position:absolute;top:3em;left:7em;"> | |
| <span class="text-danger">▼</span>7 | |
| </div> | |
| </div> | |
| <div class="block" style="border-color:black;position:relative"> | |
| <div class=""> | |
| <h4 style="color:black;padding-left:2px;margin-bottom: 0px;">Piráti <i class="fa fa-user"></i></h4> | |
| </div> | |
| <div class="pull-rightx"> | |
| </div> | |
| <div class="text-center"> | |
| <span class="number" style="font-size:4em;">0</span> | |
| </div> | |
| <div class="text-center"> | |
| ±5 | |
| </div> | |
| <div style="position:absolute;top:3em;left:7em;"> | |
| <span class="text-muted">⚫</span>0 | |
| </div> | |
| </div> | |
| <div class="block" style="border-color:pink;position:relative"> | |
| <div class=""> | |
| <h4 style="color:pink;padding-left:2px;margin-bottom: 0px;">Úsvit <i class="fa fa-user"></i></h4> | |
| </div> | |
| <div class="pull-rightx"> | |
| </div> | |
| <div class="text-center"> | |
| <span class="number" style="font-size:4em;">0</span> | |
| </div> | |
| <div class="text-center"> | |
| ±4 | |
| </div> | |
| <div style="position:absolute;top:3em;left:7em;"> | |
| <span class="text-danger">▼</span>14 | |
| </div> | |
| </div> | |
| </div> | |
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.2/journal/bootstrap.min.css"> | |
| <style> | |
| .block { | |
| border-style: solid; | |
| border-width: 3px; | |
| width: 10em; | |
| height: 10em; | |
| border-radius: 8px; | |
| margin: 8px; | |
| display: inline-block; | |
| } | |
| .number { | |
| font-family: "News Cycle","Arial Narrow Bold",sans-serif; | |
| font-weight: 700; | |
| line-height: 1.1; | |
| color: #000; | |
| } | |
| .well { | |
| min-height: 20px; | |
| padding: 19px; | |
| margin-bottom: 20px; | |
| background-color: #F5F5F5; | |
| border: 1px solid #E3E3E3; | |
| border-radius: 4px; | |
| box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05) inset; | |
| </style> | |
| <body> | |
| <div style="margin:20px"> | |
| <h3>Number of seats estimate <small>with error estimates</small> <span class="badge">Mar 14 2015</span> <span class="label label-info" style="font-size:0.33em;position:relative;bottom:5px;">Experimental</span></h3> | |
| <div id="chart" style="max-width:700px"> | |
| <div class="block" style="border-color:#abc;position:relative"> | |
| <div class=""> | |
| <h4 style="color:#abc;padding-left:2px;margin-bottom: 0px;">ANO</h4> | |
| </div> | |
| <div class="pull-rightx"> | |
| </div> | |
| <div class="text-center"> | |
| <span class="number" style="font-size:4em;">78</span> | |
| </div> | |
| <div class="text-center"> | |
| ±12 | |
| </div> | |
| <div style="position:absolute;top:3em;left:7em;"> | |
| <span class="text-success">▲</span>31 | |
| </div> | |
| </div> | |
| <div class="block" style="border-color:orange;position:relative"> | |
| <div class=""> | |
| <h4 style="color:orange;padding-left:2px;margin-bottom: 0px;">ČSSD</h4> | |
| </div> | |
| <div class="pull-rightx"> | |
| </div> | |
| <div class="text-center"> | |
| <span class="number" style="font-size:4em;">68</span> | |
| </div> | |
| <div class="text-center"> | |
| ±12 | |
| </div> | |
| <div style="position:absolute;top:3em;left:7em;"> | |
| <span class="text-success">▲</span>18 | |
| </div> | |
| </div> | |
| <div class="block" style="border-color:red;position:relative"> | |
| <div class=""> | |
| <h4 style="color:red;padding-left:2px;margin-bottom: 0px;">KSČM</h4> | |
| </div> | |
| <div class="pull-rightx"> | |
| </div> | |
| <div class="text-center"> | |
| <span class="number" style="font-size:4em;">24</span> | |
| </div> | |
| <div class="text-center"> | |
| ±9 | |
| </div> | |
| <div style="position:absolute;top:3em;left:7em;"> | |
| <span class="text-danger">▼</span>9 | |
| </div> | |
| </div> | |
| <div class="block" style="border-color:#808;position:relative"> | |
| <div class=""> | |
| <h4 style="color:#808;padding-left:2px;margin-bottom: 0px;">TOP 09</h4> | |
| </div> | |
| <div class="pull-rightx"> | |
| </div> | |
| <div class="text-center"> | |
| <span class="number" style="font-size:4em;">15</span> | |
| </div> | |
| <div class="text-center"> | |
| ±7 | |
| </div> | |
| <div style="position:absolute;top:3em;left:7em;"> | |
| <span class="text-danger">▼</span>11 | |
| </div> | |
| </div> | |
| <div class="block" style="border-color:gold;position:relative"> | |
| <div class=""> | |
| <h4 style="color:gold;padding-left:2px;margin-bottom: 0px;">KDU-ČSL</h4> | |
| </div> | |
| <div class="pull-rightx"> | |
| </div> | |
| <div class="text-center"> | |
| <span class="number" style="font-size:4em;">11</span> | |
| </div> | |
| <div class="text-center"> | |
| ±6 | |
| </div> | |
| <div style="position:absolute;top:3em;left:7em;"> | |
| <span class="text-danger">▼</span>3 | |
| </div> | |
| </div> | |
| <div class="block" style="border-color:blue;position:relative"> | |
| <div class=""> | |
| <h4 style="color:blue;padding-left:2px;margin-bottom: 0px;">ODS</h4> | |
| </div> | |
| <div class="pull-rightx"> | |
| </div> | |
| <div class="text-center"> | |
| <span class="number" style="font-size:4em;">9</span> | |
| </div> | |
| <div class="text-center"> | |
| ±6 | |
| </div> | |
| <div style="position:absolute;top:3em;left:7em;"> | |
| <span class="text-danger">▼</span>7 | |
| </div> | |
| </div> | |
| <div class="block" style="border-color:black;position:relative"> | |
| <div class=""> | |
| <h4 style="color:black;padding-left:2px;margin-bottom: 0px;">Piráti</h4> | |
| </div> | |
| <div class="pull-rightx"> | |
| </div> | |
| <div class="text-center"> | |
| <span class="number" style="font-size:4em;">0</span> | |
| </div> | |
| <div class="text-center"> | |
| ±5 | |
| </div> | |
| <div style="position:absolute;top:3em;left:7em;"> | |
| <span class="text-muted">⚫</span>0 | |
| </div> | |
| </div> | |
| <div class="block" style="border-color:pink;position:relative"> | |
| <div class=""> | |
| <h4 style="color:pink;padding-left:2px;margin-bottom: 0px;">Úsvit</h4> | |
| </div> | |
| <div class="pull-rightx"> | |
| </div> | |
| <div class="text-center"> | |
| <span class="number" style="font-size:4em;">0</span> | |
| </div> | |
| <div class="text-center"> | |
| ±4 | |
| </div> | |
| <div style="position:absolute;top:3em;left:7em;"> | |
| <span class="text-danger">▼</span>14 | |
| </div> | |
| </div> | |
| </div> | |
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.2/journal/bootstrap.min.css"> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> | |
| <body> | |
| <div style="margin:20px"> | |
| <h3>Odhad počtu poslanců <small>s odhadem chyby</small> <span class="badge">14.3.2015</span> <span class="label label-info" style="font-size:0.33em;position:relative;bottom:5px;">Experimentální</span></h3> | |
| <div id="chart" style="max-width:700px;"></div> | |
| <script> | |
| var data = [ | |
| {"name": 'ANO', 'now': 78, 'move': 'up', 'moven': 31, 'var': 12, 'color': '#abc'}, | |
| {"name": 'ČSSD', 'now': 68, 'move': 'up', 'moven': 18, 'var': 12, 'color': 'orange'}, | |
| {"name": 'KSČM', 'now': 24, 'move': 'down', 'moven': 9, 'var': 9, 'color': 'red'}, | |
| {"name": 'TOP 09', 'now': 15, 'move': 'down', 'moven': 11, 'var': 7, 'color': '#808'}, | |
| {"name": 'KDU-ČSL', 'now': 11, 'move': 'down', 'moven': 3, 'var': 6, 'color': 'gold'}, | |
| {"name": 'ODS', 'now': 9, 'move': 'down', 'moven': 7, 'var': 6, 'color': 'blue'}, | |
| ]; | |
| hcol = 10 | |
| ncol = data.length - 1; | |
| for (i=0; i<data.length; i++) { | |
| ncol = ncol + Math.ceil(data[i]['now']/hcol); | |
| } | |
| var x = d3.scale.linear() | |
| .domain([0,ncol]) | |
| .range([0,700]); | |
| var y = d3.scale.linear() | |
| .domain([0,hcol]) | |
| .range([300,0]); | |
| ccol = 0; | |
| pos = 0; | |
| var svg = d3.select("#chart").append("svg").attr("width",700).attr("height",450); | |
| for (i=0; i<data.length; i++) { | |
| if (i>0) | |
| ccol = ccol + Math.ceil(data[i-1]['now'] / hcol); | |
| for (j=0; j<data[i]['now'];j++) { | |
| svg.append("text") | |
| .attr("font-size",30) | |
| .attr("x",function() { | |
| return x(ccol + Math.floor(j / hcol) + 0.5); | |
| }) | |
| .attr("y",function() { | |
| return y(j % hcol); | |
| }) | |
| .attr('text-anchor',"middle") | |
| .attr('fill',function() {return data[i]['color']}) | |
| .attr('font-family', 'FontAwesome') | |
| .text('\uf007') | |
| } | |
| if (i>0) { | |
| if (pos > 0) | |
| pos = 0; | |
| else { | |
| if (data[i-1]['now'] / hcol <= 5) | |
| pos = 1; | |
| } | |
| } | |
| svg.append("text") | |
| .attr('fill',function() {return data[i]['color']}) | |
| .attr("x",function() { | |
| return x(ccol + Math.ceil(data[i]['now']/hcol)/2); | |
| }) | |
| .attr("y",function() { | |
| return y(-1 - 2*pos); | |
| }) | |
| .attr("text-anchor","middle") | |
| .attr("font-size",30) | |
| .attr("font-family",'"News Cycle","Arial Narrow Bold",sans-serif') | |
| .attr("font-weight",700) | |
| .text(data[i]['name']); | |
| var text = svg.append("text") | |
| .attr('fill',function() {return data[i]['color']}) | |
| .attr("x",function() { | |
| return x(ccol + Math.ceil(data[i]['now']/hcol)/2); | |
| }) | |
| .attr("y",function() { | |
| return y(-2 - 2*pos); | |
| }) | |
| .attr("text-anchor","middle") | |
| .attr("font-family",'"News Cycle","Arial Narrow Bold",sans-serif') | |
| ; | |
| text.append("tspan") | |
| .attr("font-size",30) | |
| .text(data[i]['now']) | |
| .attr("font-weight",700); | |
| text.append("tspan") | |
| .attr("font-size",15) | |
| .text(function() {return "±" + data[i]['var']}); | |
| } | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment