block by michalskop f278f2a947d982a5e34a

Polls charts

Full Screen

index.html

<!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="//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>

binomial.js

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

d3.doublebarchart1.js

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

d3.doublebarchart2.js

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

d3.linechart.js

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

d3.tooltip.js

(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

index1.html

<!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="//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>

index2.html

<!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="//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>

linechart1.html

<!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="//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>

linedata.json

[{"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"}}]

page1.html

<!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="//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>

responsivefy.js

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

seats1.1.html

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

seats1.html

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

seats2.html

<!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="//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>