michalskop · April 17, 2018 10:03
diff --git a/c2.html b/c2.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8">
    <title>W-PCA Scatterplot Chart</title>
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="WPCA scatter plot">
    <meta name="author" content="Michal Škop">

    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="./d3.scatterplotwithlineplot.js"></script>
    <script src="./d3.tips.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/united/bootstrap.min.css">

    <style type="text/css">

 			/* note: we duplicate some of the styles (css, and as attributes of svg elements), so FF displays it correctly, and it is possible to generate png */
 			.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;
 			}
 			circle:hover {
 			  fill-opacity: 1;
 			}
 			.label {
 			  font-family: sans-serif;
 			  font-size: 15px;
 			}

 			.d3-tip {
                line-height: 1;
                font-weight: bold;
                padding: 12px;
                background: rgba(0, 0, 0, 0.8);
                color: #fff;
                border-radius: 2px;
                pointer-events: none;
                max-width: 400px;
            }
            /* Creates a small triangle extender for the tooltip */
            .d3-tip:after {
                box-sizing: border-box;
                display: inline;
                font-size: 10px;
                width: 100%;
                line-height: 1;
                color: rgba(0, 0, 0, 0.8);
                position: absolute;
                pointer-events: none;
            }
            /* Northward tooltips */
            .d3-tip:after {
                content: "\25BC";
                margin: -1px 0 0 0;
                top: 100%;
                left: 0;
                text-align: center;
            }
            line {
             stroke:gray;
             stroke-width:1;
             opacity: .3;
            }
            .perfect {
              stroke: gray;
              stroke-width:2;
              opacity: 0.7;
            }
            #chart {
              padding-top:30px;
            }
 		</style>
  </head>
  <body>
    <nav class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
                    <h2>Spatial distribution of MPs based on their votes (2017/10-2018/04)</h2>
        </div>
      </div>
    </nav>
    <div id="chart"></div>
    <div class="alert alert-info">
      <p>Each bubble represents one MP.
      <p><a href="http://bl.ocks.org/michalskop/8514867">W-PCA</a> model is used.


 <script type="text/javascript">

 d3.csv("chart_data.csv", function(voters) {
    d3.csv("cz-2017-wpca-cutting-lines.csv", function(lines) {
        linesselected = [];
        for (k in lines) {
          if ((parseFloat(lines[k]['loss']) < 33) && (parseFloat(lines[k]['cl_beta0']) < 50)) {
              beta = [lines[k]['normal_x'],lines[k]['normal_y']];
              beta0 = lines[k]['cl_beta0'];
              if (beta[1] != 0) {
                lines[k]['a'] = -beta0/beta[1];
                lines[k]['b'] = -beta[0]/beta[1];
              } else {
                lines[k]['a'] = 0;
                lines[k]['b'] = 0;
              }
              //add class for a perfect cut:
              if (lines[k]['loss'] == 0) {
                lines[k]['class'] = 'perfect';
              } else {
                lines[k]['class'] = 'non-perfect';
              }
              lines[k]['name'] = lines[k]["motion:text"];
              lines[k]['party'] = "loss: " + lines[k]["loss"];
              linesselected.push(lines[k]);
          }
        }

        spdata = [];
        voters.forEach(function(d) {
          spdata.push({"x":d["wpca:d1"],"y":d["wpca:d2"],"color":d["color"],"name":d["name"], "party": d["party"], "r": 0.1})
        });
        var scatterplotwithlineplot = [{
          "data": spdata,
          "margin": {top: 10, right: 10, bottom: 30, left: 30},
          "axes": {"labels":{"x":"DIM 1", "y":"DIM 2"}},
          "minmax":{"x":{'min':-12,'max':12},"y":{'min':-12,'max':12},"r":{'min':0,'max':1},"rrange":{'min':0,'max':100}},
          "size":{"width":500,"height":500},
          "lines": linesselected
        }];

         var svg = d3.select("#chart")
            .append("svg")
            .attr("width",scatterplotwithlineplot[0]['size']['width'])
            .attr("height",scatterplotwithlineplot[0]['size']['height']);

        /* Initialize tooltip */
        tip = d3.tip().attr('class', 'd3-tip').html(function(d) {
          return "<span class=\'stronger\'>" + d["name"] + "</span><br>" + d["party"];
        });

        /* Invoke the tip in the context of your visualization */
        svg.call(tip)

        var sp = d3.scatterplotwithlineplot()
            .data(function(d) {return d.data})
            .margin(function(d) {return d.margin})
            .axes(function(d) {return d.axes})
            .minmax(function(d) {return d.minmax})
            .size(function(d) {return d.size})
            .lines(function(d) {return d.lines})

        var scatter = svg.selectAll(".scatterplot")
            .data(scatterplotwithlineplot)
          .enter()
            .append("svg:g")
            .attr("transform", "translate(" + scatterplotwithlineplot[0].margin.left + "," + scatterplotwithlineplot[0].margin.top + ")")
            .call(sp);
    })
 })
 </script>
  </body>
 </html>
diff --git a/chart_data.csv b/chart_data.csv
diff --git a/cz-2017-wpca-cutting-lines.csv b/cz-2017-wpca-cutting-lines.csv
diff --git a/d3.scatterplot.js b/d3.scatterplot.js
 /* requires D3 + https://github.com/Caged/d3-tip */
 d3.scatterplotwithlineplot = function() {
  unit_circle = true;
  function scatterplotwithlineplot(selection) {
    selection.each(function(d, i) {
      //options
      var data = (typeof(data) === "function" ? data(d) : d.data),
          //lines = (typeof(lines) === "function" ? lines(d) : d.lines),
          margin = (typeof(margin) === "function" ? margin(d) : d.margin),
          axes = (typeof(axes) === "function" ? axes(d) : d.axes),
          minmax = (typeof(minmax) === "function" ? minmax(d) : d.minmax),
          size = (typeof(size) === "function" ? size(d) : d.size),
          unit_circle_val = (typeof(unit_circle) === "function" ? unit_circle(d) : unit_circle);
      
      // chart sizes
      var width = size['width'] - margin.left - margin.right,
          height = size['height'] - margin.top - margin.bottom;
      
      //scales
      var xScale = d3.scale.linear()
 			 .domain([minmax['x']['min'], minmax['x']['max']])
 			 .range([0, width])

      var yScale = d3.scale.linear()
 			 .domain([minmax['y']['min'], minmax['y']['max']])
 			 .range([height, 0])

      var rScale = d3.scale.linear()
 		     .domain([minmax['r']['min'],minmax['r']['max']])
 		     .range([minmax['rrange']['min'],minmax['rrange']['max']]);

      //axes
      var xAxis = d3.svg.axis()
        .scale(xScale)
        .orient("bottom");
        //.ticks(5);
        //.tickSize(16, 0);  
      var yAxis = d3.svg.axis()
        .scale(yScale)
        .orient("left");
        //.ticks(5); 
      

      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);
      
      limits = {"x":[minmax["x"]["min"],minmax["x"]["max"]],"y":[minmax["y"]["min"],minmax["y"]["max"]]}
 //      for (k in lines) {
 //        ps = linecross(lines[k],limits);
 //        if (ps.length == 2) {
 //          lines[k].x1 = ps[0][0];
 //          lines[k].y1 = ps[0][1];
 //          lines[k].x2 = ps[1][0];
 //          lines[k].y2 = ps[1][1];
 //        }
 //        way = get_sign(lines[k].b,lines[k].n1,lines[k].n2);
 //        lines[k].path =[corners(lines[k],limits,way),corners(lines[k],limits,-1*way)];
 //      }
      
      //ellipse ~ unit_circle
      if (unit_circle_val) {
          element.selectAll(".ellipse")
              .data([0])
            .enter()
              .append("ellipse")
                .attr("cx", xScale(0))
                .attr("cy", yScale(0))
                .attr("rx", Math.abs(xScale(1)-xScale(0)))
                .attr("ry", Math.abs(yScale(1)-yScale(0)))
                .attr("fill-opacity",0)
                .attr("stroke","red")
                .style("stroke-dasharray", ("10,3"));
      }
      
      //lines
 //      var line = element.selectAll ('.line')
 //         .data(lines)
 //         .enter()
 //            .append("line")
 //         .attr("x1",function(d) {return xScale(d.x1)})
 //         .attr("y1",function(d) {return yScale(d.y1)})
 //         .attr("x2",function(d) {return xScale(d.x2)})
 //         .attr("y2",function(d) {return yScale(d.y2)})
 //         .attr("id", function (d, i) {return "q-" + i;})
 //         .attr("class", function(d) {
 //		   		if (typeof(d['class'] != 'undefined')) return d['class'];
 //		   		else return 'line';
 //		   })
 //		    //putting it here and not in css, because it is used for generating png:
 //		 .attr("stroke","gray")
 //		 .attr("stroke-width","1")
 //		 .attr("opacity", 0.15)
 //		 
 //         .on('mouseover', tip.show)
 //         .on('mouseout', tip.hide);
      
      //points
      element.selectAll(".circle")
        .data(data)
 		   .enter()
 		 .append("circle")
 		   .attr("cx", function(d) {
 		   		return xScale(d.x);
 		   })
 		   .attr("cy", function(d) {
 		   		return yScale(d.y);
 		   })
 		   .attr("r", function(d) {
 		        if ((typeof(d['r']) != 'undefined') && (d['r'] != ''))
 		            return rScale(d.r);
 		   		else return rScale(0.05);
 		   })
 		   .attr("class", function(d) {
 		   		if ((typeof(d['class']) != 'undefined') && (d['class'] != ''))
 		   		     return d['class'];
 		   		else return 'circle';
 		   })
 		   .attr("fill",function(d) {
 		       if ((typeof(d['color']) != 'undefined') && (d['color'] != ''))
    		     return d.color;
    		   else
    		     return "#eee";
    	   })
 		   .attr("stroke",function(d) {
 		       if ((typeof(d['color']) != 'undefined') && (d['color'] != ''))
    		     return d.color;
    		   else
    		     return "#bbb";
    	   })
    	   .attr("stroke-width",function(d) {
 		        if ((typeof(d['r']) != 'undefined') && (d['r'] != ''))
 		            return Math.max(d.r*5,1);
 		   		else return 1;
    	   })
 		   .attr("fill-opacity",function(d) {
 		       if ((typeof(d['opacity']) != 'undefined') && (d['opacity'] != ''))
    		     return d.opacity;
    		   else
    		     return 0.5;
    	   })
 		   .on('mouseover', tip.show)
           .on('mouseout', tip.hide);
     
 	
      //axis labels
 	  element.append("text")
 			.attr("class", "x-label label")
 			.attr("text-anchor", "end")
 			.attr("x", width)
 			.attr("y", height-5)
 			.text(axes['labels']['x']);
 	  element.append("text")
 			.attr("class", "y label")
 			.attr("text-anchor", "end")
 			.attr("y", 5)
 			.attr("x", 0)
 			.attr("dy", ".75em")
 			.attr("transform", "rotate(-90)")
 			.text(axes['labels']['y']);
 			 
 	    
 	  // putting it here and not in css, because it is used for generating png: 
 	  element.selectAll(".domain")
 	        	.attr("fill","none")
 				.attr("fill-opacity",0)
 				.attr("stroke","black")
 				.attr("stroke-width",1);
      element.selectAll(".tick")
                .attr("fill-opacity",0)
                .attr("stroke","#000")
                .attr("stroke-width",1);
      element.selectAll("text")
                .attr("font-family","sans-serif")
                .attr("font-size",11)
      element.selectAll(".label")
                .attr("font-size",15)
                .attr("font-weight","bold")
                //convert dy("0.71em") to dy("10"), inkscape feature https://www.ruby-forum.com/topic/5505193 :
      element.selectAll("text")
                .attr("dy",function(d) {
                    if (d3.select(this).attr("dy")) {
                        em = parseFloat(d3.select(this).attr("dy").replace("em",""));
                        if (d3.select(this).attr("font-size"))
                            px = parseFloat(d3.select(this).attr("font-size"));
                        else
                            px = 11;
                        return em*px + "px";
                    } else {
                        return 0;
                    }
                })
    });
  }
  scatterplotwithlineplot.data = function(value) {
    if (!arguments.length) return value;
    data = value;
    return scatterplotwithlineplot;
  };
 //  scatterplotwithlineplot.lines = function(value) {
 //    if (!arguments.length) return value;
 //    lines = value;
 //    return scatterplotwithlineplot;
 //  };    
  scatterplotwithlineplot.margin = function(value) {
    if (!arguments.length) return value;
    margin = value;
    return scatterplotwithlineplot;
  };
  scatterplotwithlineplot.axes = function(value) {
    if (!arguments.length) return value;
    axes = value;
    return scatterplotwithlineplot;
  };
  scatterplotwithlineplot.minmax = function(value) {
    if (!arguments.length) return value;
    minmax = value;
    return scatterplotwithlineplot;
  };
  scatterplotwithlineplot.size = function(value) {
    if (!arguments.length) return value;
    size = value;
    return scatterplotwithlineplot;
  };
  scatterplotwithlineplot.unit_circle = function(value) {
    if (!arguments.length) return value;
    unit_circle = value;
    return scatterplotwithlineplot;
  };
  return scatterplotwithlineplot;
  
  
    function corners(l,e,o) {
      //l = {"a":0,"b":1}  //line, a and slope, i.e., y=a+bx
      //e = {"x": [-10,10], "y": [-10,10]} //limits
      //o = 1 //orientation -1 or 1

      //crossing x0, x1  
      //crossing y0, y1
      outp = linecross (l,e);
      
      out = [];

      //vertices
      for (i=0;i<=1;i++){
        for (j=0;j<=1;j++){
          if (o*(l.a+l.b*e.x[i]-e.y[j]) > 0)
            outp.push([e.x[i],e.y[j]]);
        }
      }
      //sort the outps, anticlockwise
      if (outp.length > 0) {
        mid = [0,0];
        for (i in outp) {
          mid[0] += outp[i][0];
          mid[1] += outp[i][1];
        }
        mid[0] = mid[0] / outp.length;
        mid[1] = mid[1] / outp.length;
        for (i in outp) {
          p = outp[i][1] - mid[1];
          q = outp[i][0] - mid[0];
          if (q != 0)
            outp[i][2] = Math.atan(p/q) + (q<0 ? Math.PI : 0);
          else
            outp[i][2] = Math.PI/2 + Math.PI*sign(p);
        }
        outp = outp.sort(function(w,z) {
          return w[2] > z[2];
        });
        for (i in outp) {
          outp[i].splice(2,1);
          out.push({"x":outp[i][0],"y":outp[i][1]});
        }
      }
      return out;
    }
  
  function linecross (l,e) {
      out = [];
      //crossing x0, x1
      for (i=0;i<=1;i++){
        Y = l.a + l.b*e.x[i];
        if ((Y > e.y[0]) && (Y < e.y[1]))
          out.push([e.x[i],Y]);
      }
      //crossing y0, y1
      for (j=0;j<=1;j++){
        if (l.b != 0) {
          X = (e.y[j] - l.a)/l.b;
          if ((X > e.x[0]) && (X < e.x[1]))
            out.push([X,e.y[j]]);
        }
      }
      return out;
    }

    function get_sign(b,d1,d2) {
      t = b*d1-d2;
      if (t > 0) return 1;
      if (t < 0) return -1;
      return 0;
    }
  
 }
diff --git a/d3.scatterplotwithlineplot.js b/d3.scatterplotwithlineplot.js
 /* requires D3 + https://github.com/Caged/d3-tip */
 d3.scatterplotwithlineplot = function() {
  function scatterplotwithlineplot(selection) {
    selection.each(function(d, i) {
      //options
      var data = (typeof(data) === "function" ? data(d) : d.data),
          lines = (typeof(lines) === "function" ? lines(d) : d.lines),
          margin = (typeof(margin) === "function" ? margin(d) : d.margin),
          axes = (typeof(axes) === "function" ? axes(d) : d.axes),
          minmax = (typeof(minmax) === "function" ? minmax(d) : d.minmax),
          size = (typeof(size) === "function" ? size(d) : d.size);
      
      // chart sizes
      var width = size['width'] - margin.left - margin.right,
          height = size['height'] - margin.top - margin.bottom;
      
      //scales
      var xScale = d3.scale.linear()
 							 .domain([minmax['x']['min'], minmax['x']['max']])
 							 .range([0, width])

      var yScale = d3.scale.linear()
 							 .domain([minmax['y']['min'], minmax['y']['max']])
 							 .range([height, 0])

      var rScale = d3.scale.linear()
 							 .domain([minmax['r']['min'],minmax['r']['max']])
 							 .range([minmax['rrange']['min'],minmax['rrange']['max']]);

      //axes
      var xAxis = d3.svg.axis()
        .scale(xScale)
        .orient("bottom");
        //.ticks(5);
        //.tickSize(16, 0);  
      var yAxis = d3.svg.axis()
        .scale(yScale)
        .orient("left");
        //.ticks(5); 
      

      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);
      
      limits = {"x":[minmax["x"]["min"],minmax["x"]["max"]],"y":[minmax["y"]["min"],minmax["y"]["max"]]}
      for (k in lines) {
        ps = linecross(lines[k],limits);
        if (ps.length == 2) {
          lines[k].x1 = ps[0][0];
          lines[k].y1 = ps[0][1];
          lines[k].x2 = ps[1][0];
          lines[k].y2 = ps[1][1];
        }
        way = get_sign(lines[k].b,lines[k].n1,lines[k].n2);
        lines[k].path =[corners(lines[k],limits,way),corners(lines[k],limits,-1*way)];
      }
      
      var line = element.selectAll ('.line')
         .data(lines)
         .enter()
            .append("line")
         .attr("x1",function(d) {return xScale(d.x1)})
         .attr("y1",function(d) {return yScale(d.y1)})
         .attr("x2",function(d) {return xScale(d.x2)})
         .attr("y2",function(d) {return yScale(d.y2)})
         .attr("id", function (d, i) {return "q-" + i;})
         .attr("class", function(d) {
 		   		if (typeof(d['class'] != 'undefined')) return d['class'];
 		   		else return 'line';
 		   })
         .on('mouseover', tip.show)
         .on('mouseout', tip.hide);
      
      element.selectAll(".circle")
        .data(data)
 		   .enter()
 		 .append("circle")
 		   .attr("cx", function(d) {
 		   		return xScale(d.x);
 		   })
 		   .attr("cy", function(d) {
 		   		return yScale(d.y);
 		   })
 		   .attr("r", function(d) {
 		   		return rScale(d.r);
 		   })
 		   .attr("class", function(d) {
 		   		if (typeof(d['class'] != 'undefined')) return d['class'];
 		   		else return 'circle';
 		   })
 		   .attr("fill",function(d) {return d.color})
 		   .attr("stroke",function(d) {return d.color})
 		   .attr("fill-opacity",0.33)
 		   .on('mouseover', tip.show)
           .on('mouseout', tip.hide);
 	
      //axis labels
 	  element.append("text")
 			.attr("class", "x-label label")
 			.attr("text-anchor", "end")
 			.attr("x", width)
 			.attr("y", height-5)
 			.text(axes['labels']['x']);
 	  element.append("text")
 			.attr("class", "y label")
 			.attr("text-anchor", "end")
 			.attr("y", 5)
 			.attr("x", 0)
 			.attr("dy", ".75em")
 			.attr("transform", "rotate(-90)")
 			.text(axes['labels']['y']);
 			 
 		
    });
  }
  scatterplotwithlineplot.data = function(value) {
    if (!arguments.length) return value;
    data = value;
    return scatterplotwithlineplot;
  };
  scatterplotwithlineplot.lines = function(value) {
    if (!arguments.length) return value;
    lines = value;
    return scatterplotwithlineplot;
  };    
  scatterplotwithlineplot.margin = function(value) {
    if (!arguments.length) return value;
    margin = value;
    return scatterplotwithlineplot;
  };
  scatterplotwithlineplot.axes = function(value) {
    if (!arguments.length) return value;
    axes = value;
    return scatterplotwithlineplot;
  };
  scatterplotwithlineplot.minmax = function(value) {
    if (!arguments.length) return value;
    minmax = value;
    return scatterplotwithlineplot;
  };
  scatterplotwithlineplot.size = function(value) {
    if (!arguments.length) return value;
    size = value;
    return scatterplotwithlineplot;
  };
  
  return scatterplotwithlineplot;
  
  
    function corners(l,e,o) {
      //l = {"a":0,"b":1}  //line, a and slope, i.e., y=a+bx
      //e = {"x": [-10,10], "y": [-10,10]} //limits
      //o = 1 //orientation -1 or 1

      //crossing x0, x1  
      //crossing y0, y1
      outp = linecross (l,e);
      
      out = [];

      //vertices
      for (i=0;i<=1;i++){
        for (j=0;j<=1;j++){
          if (o*(l.a+l.b*e.x[i]-e.y[j]) > 0)
            outp.push([e.x[i],e.y[j]]);
        }
      }
      //sort the outps, anticlockwise
      if (outp.length > 0) {
        mid = [0,0];
        for (i in outp) {
          mid[0] += outp[i][0];
          mid[1] += outp[i][1];
        }
        mid[0] = mid[0] / outp.length;
        mid[1] = mid[1] / outp.length;
        for (i in outp) {
          p = outp[i][1] - mid[1];
          q = outp[i][0] - mid[0];
          if (q != 0)
            outp[i][2] = Math.atan(p/q) + (q<0 ? Math.PI : 0);
          else
            outp[i][2] = Math.PI/2 + Math.PI*sign(p);
        }
        outp = outp.sort(function(w,z) {
          return w[2] > z[2];
        });
        for (i in outp) {
          outp[i].splice(2,1);
          out.push({"x":outp[i][0],"y":outp[i][1]});
        }
      }
      return out;
    }
  
  function linecross (l,e) {
      out = [];
      //crossing x0, x1
      for (i=0;i<=1;i++){
        Y = l.a + l.b*e.x[i];
        if ((Y > e.y[0]) && (Y < e.y[1]))
          out.push([e.x[i],Y]);
      }
      //crossing y0, y1
      for (j=0;j<=1;j++){
        if (l.b != 0) {
          X = (e.y[j] - l.a)/l.b;
          if ((X > e.x[0]) && (X < e.x[1]))
            out.push([X,e.y[j]]);
        }
      }
      return out;
    }

    function get_sign(b,d1,d2) {
      t = b*d1-d2;
      if (t > 0) return 1;
      if (t < 0) return -1;
      return 0;
    }
  
 }
diff --git a/d3.tips.js b/d3.tips.js
 // d3.tip
 // Copyright (c) 2013 Justin Palmer
 //
 // Tooltips for d3.js SVG visualizations

 (function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module with d3 as a dependency.
    define(['d3'], factory)
  } else if (typeof module === 'object' && module.exports) {
    // CommonJS
    module.exports = function(d3) {
      d3.tip = factory(d3)
      return d3.tip
    }
  } else {
    // Browser global.
    root.d3.tip = factory(root.d3)
  }
 }(this, function (d3) {

  // Public - contructs a new tooltip
  //
  // Returns a tip
  return function() {
    var direction = d3_tip_direction,
        offset    = d3_tip_offset,
        html      = d3_tip_html,
        node      = initNode(),
        svg       = null,
        point     = null,
        target    = null

    function tip(vis) {
      svg = getSVGNode(vis)
      point = svg.createSVGPoint()
      document.body.appendChild(node)
    }

    // Public - show the tooltip on the screen
    //
    // Returns a tip
    tip.show = function() {
      var args = Array.prototype.slice.call(arguments)
      if(args[args.length - 1] instanceof SVGElement) target = args.pop()

      var content = html.apply(this, args),
          poffset = offset.apply(this, args),
          dir     = direction.apply(this, args),
          nodel   = d3.select(node),
          i       = directions.length,
          coords,
          scrollTop  = document.documentElement.scrollTop || document.body.scrollTop,
          scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft

      nodel.html(content)
        .style({ opacity: 1, 'pointer-events': 'all' })

      while(i--) nodel.classed(directions[i], false)
      coords = direction_callbacks.get(dir).apply(this)
      nodel.classed(dir, true).style({
        top: (coords.top +  poffset[0]) + scrollTop + 'px',
        left: (coords.left + poffset[1]) + scrollLeft + 'px'
      })

      return tip
    }

    // Public - hide the tooltip
    //
    // Returns a tip
    tip.hide = function() {
      var nodel = d3.select(node)
      nodel.style({ opacity: 0, 'pointer-events': 'none' })
      return tip
    }

    // Public: Proxy attr calls to the d3 tip container.  Sets or gets attribute value.
    //
    // n - name of the attribute
    // v - value of the attribute
    //
    // Returns tip or attribute value
    tip.attr = function(n, v) {
      if (arguments.length < 2 && typeof n === 'string') {
        return d3.select(node).attr(n)
      } else {
        var args =  Array.prototype.slice.call(arguments)
        d3.selection.prototype.attr.apply(d3.select(node), args)
      }

      return tip
    }

    // Public: Proxy style calls to the d3 tip container.  Sets or gets a style value.
    //
    // n - name of the property
    // v - value of the property
    //
    // Returns tip or style property value
    tip.style = function(n, v) {
      if (arguments.length < 2 && typeof n === 'string') {
        return d3.select(node).style(n)
      } else {
        var args =  Array.prototype.slice.call(arguments)
        d3.selection.prototype.style.apply(d3.select(node), args)
      }

      return tip
    }

    // Public: Set or get the direction of the tooltip
    //
    // v - One of n(north), s(south), e(east), or w(west), nw(northwest),
    //     sw(southwest), ne(northeast) or se(southeast)
    //
    // Returns tip or direction
    tip.direction = function(v) {
      if (!arguments.length) return direction
      direction = v == null ? v : d3.functor(v)

      return tip
    }

    // Public: Sets or gets the offset of the tip
    //
    // v - Array of [x, y] offset
    //
    // Returns offset or
    tip.offset = function(v) {
      if (!arguments.length) return offset
      offset = v == null ? v : d3.functor(v)

      return tip
    }

    // Public: sets or gets the html value of the tooltip
    //
    // v - String value of the tip
    //
    // Returns html value or tip
    tip.html = function(v) {
      if (!arguments.length) return html
      html = v == null ? v : d3.functor(v)

      return tip
    }

    function d3_tip_direction() { return 'n' }
    function d3_tip_offset() { return [0, 0] }
    function d3_tip_html() { return ' ' }

    var direction_callbacks = d3.map({
      n:  direction_n,
      s:  direction_s,
      e:  direction_e,
      w:  direction_w,
      nw: direction_nw,
      ne: direction_ne,
      sw: direction_sw,
      se: direction_se
    }),

    directions = direction_callbacks.keys()

    function direction_n() {
      var bbox = getScreenBBox()
      return {
        top:  bbox.n.y - node.offsetHeight,
        left: bbox.n.x - node.offsetWidth / 2
      }
    }

    function direction_s() {
      var bbox = getScreenBBox()
      return {
        top:  bbox.s.y,
        left: bbox.s.x - node.offsetWidth / 2
      }
    }

    function direction_e() {
      var bbox = getScreenBBox()
      return {
        top:  bbox.e.y - node.offsetHeight / 2,
        left: bbox.e.x
      }
    }

    function direction_w() {
      var bbox = getScreenBBox()
      return {
        top:  bbox.w.y - node.offsetHeight / 2,
        left: bbox.w.x - node.offsetWidth
      }
    }

    function direction_nw() {
      var bbox = getScreenBBox()
      return {
        top:  bbox.nw.y - node.offsetHeight,
        left: bbox.nw.x - node.offsetWidth
      }
    }

    function direction_ne() {
      var bbox = getScreenBBox()
      return {
        top:  bbox.ne.y - node.offsetHeight,
        left: bbox.ne.x
      }
    }

    function direction_sw() {
      var bbox = getScreenBBox()
      return {
        top:  bbox.sw.y,
        left: bbox.sw.x - node.offsetWidth
      }
    }

    function direction_se() {
      var bbox = getScreenBBox()
      return {
        top:  bbox.se.y,
        left: bbox.e.x
      }
    }

    function initNode() {
      var node = d3.select(document.createElement('div'))
      node.style({
        position: 'absolute',
        top: 0,
        opacity: 0,
        'pointer-events': 'none',
        'box-sizing': 'border-box'
      })

      return node.node()
    }

    function getSVGNode(el) {
      el = el.node()
      if(el.tagName.toLowerCase() === 'svg')
        return el

      return el.ownerSVGElement
    }

    // Private - gets the screen coordinates of a shape
    //
    // Given a shape on the screen, will return an SVGPoint for the directions
    // n(north), s(south), e(east), w(west), ne(northeast), se(southeast), nw(northwest),
    // sw(southwest).
    //
    //    +-+-+
    //    |   |
    //    +   +
    //    |   |
    //    +-+-+
    //
    // Returns an Object {n, s, e, w, nw, sw, ne, se}
    function getScreenBBox() {
      var targetel   = target || d3.event.target;

      while ('undefined' === typeof targetel.getScreenCTM && 'undefined' === targetel.parentNode) {
          targetel = targetel.parentNode;
      }

      var bbox       = {},
          matrix     = targetel.getScreenCTM(),
          tbbox      = targetel.getBBox(),
          width      = tbbox.width,
          height     = tbbox.height,
          x          = tbbox.x,
          y          = tbbox.y

      point.x = x
      point.y = y
      bbox.nw = point.matrixTransform(matrix)
      point.x += width
      bbox.ne = point.matrixTransform(matrix)
      point.y += height
      bbox.se = point.matrixTransform(matrix)
      point.x -= width
      bbox.sw = point.matrixTransform(matrix)
      point.y -= height / 2
      bbox.w  = point.matrixTransform(matrix)
      point.x += width
      bbox.e = point.matrixTransform(matrix)
      point.x -= width / 2
      point.y -= height / 2
      bbox.n = point.matrixTransform(matrix)
      point.y += height
      bbox.s = point.matrixTransform(matrix)

      return bbox
    }

    return tip
  };

 }));
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8">
    <title>W-PCA Scatterplot Chart</title>
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="WPCA scatter plot">
    <meta name="author" content="Michal Škop">

    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="./d3.scatterplot.js"></script>
    <script src="./d3.tips.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/united/bootstrap.min.css">

    <style type="text/css">

 			/* note: we duplicate some of the styles (css, and as attributes of svg elements), so FF displays it correctly, and it is possible to generate png */
 			.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;
 			}
 			circle:hover {
 			  fill-opacity: 1;
 			}
 			.label {
 			  font-family: sans-serif;
 			  font-size: 15px;
 			}

 			.d3-tip {
                line-height: 1;
                font-weight: bold;
                padding: 12px;
                background: rgba(0, 0, 0, 0.8);
                color: #fff;
                border-radius: 2px;
                pointer-events: none;
                max-width: 400px;
            }
            /* Creates a small triangle extender for the tooltip */
            .d3-tip:after {
                box-sizing: border-box;
                display: inline;
                font-size: 10px;
                width: 100%;
                line-height: 1;
                color: rgba(0, 0, 0, 0.8);
                position: absolute;
                pointer-events: none;
            }
            /* Northward tooltips */
            .d3-tip:after {
                content: "\25BC";
                margin: -1px 0 0 0;
                top: 100%;
                left: 0;
                text-align: center;
            }
            line {
             stroke:gray;
             stroke-width:0;
             opacity: .3;
            }
            .perfect {
              stroke: gray;
              stroke-width:0;
              opacity: 0.7;
            }
            #chart {
              padding-top:30px;
            }
 		</style>
  </head>
  <body>
    <nav class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <h2>Spatial distribution of MEPs based on their votes in the 1st year of the 8th term (2014-2015)</h2>
        </div>
      </div>
    </nav>
    <div id="chart"></div>
    <div class="alert alert-info">
      <p>Each bubble represents one MEP.
      <p><a href="http://bl.ocks.org/michalskop/8514867">W-PCA</a> model is used.
      <p>Another file: c2.html (with cutting lines)


 <script type="text/javascript">

 d3.csv("chart_data.csv", function(voters) {
    //d3.csv("cutting_lines_ten.csv", function(lines) {
        /*linesselected = [];
        for (k in lines) {
          if ((parseFloat(lines[k]['loss']) < 1.5) && (parseFloat(lines[k]['cl_beta0']) < 50)) {
              beta = [lines[k]['normal_x'],lines[k]['normal_y']];
              beta0 = lines[k]['cl_beta0'];
              if (beta[1] != 0) {
                lines[k]['a'] = -beta0/beta[1];
                lines[k]['b'] = -beta[0]/beta[1];
              } else {
                lines[k]['a'] = 0;
                lines[k]['b'] = 0;
              }
              //add class for a perfect cut:
              if (lines[k]['loss'] == 0) {
                lines[k]['class'] = 'perfect';
              } else {
                lines[k]['class'] = 'non-perfect';
              }
              lines[k]['name'] = lines[k]["motion:name"];
              linesselected.push(lines[k]);
          }
        }*/

        spdata = [];
        voters.forEach(function(d) {
          spdata.push({"x":d["wpca:d1"],"y":d["wpca:d2"],"r":d["r"],"color":d["color"],"name":d["name"],"opacity":d["opacity"], "party": d["party"], "country": d["country"]})
        });
        var scatterplotwithlineplot = [{
          "data": spdata,
          "margin": {top: 10, right: 10, bottom: 30, left: 30},
          "axes": {"labels":{"x":"DIM 1", "y":"DIM 2"}},
          "minmax":{"x":{'min':-10,'max':10},"y":{'min':-10,'max':10},"r":{'min':0,'max':1},"rrange":{'min':0,'max':100}},
          "size":{"width":500,"height":500}//,
          //"lines": linesselected
        }];

         var svg = d3.select("#chart")
            .append("svg")
            .attr("width",scatterplotwithlineplot[0]['size']['width'])
            .attr("height",scatterplotwithlineplot[0]['size']['height']);

        /* Initialize tooltip */
        tip = d3.tip().attr('class', 'd3-tip').html(function(d) {
          return "<span class=\'stronger\'>" + d["name"] + "</span><br>" + d["party"];
        });

        /* Invoke the tip in the context of your visualization */
        svg.call(tip)

        var sp = d3.scatterplotwithlineplot()
            .data(function(d) {return d.data})
            .margin(function(d) {return d.margin})
            .axes(function(d) {return d.axes})
            .minmax(function(d) {return d.minmax})
            .size(function(d) {return d.size})
            //.lines(function(d) {return d.lines})

        var scatter = svg.selectAll(".scatterplot")
            .data(scatterplotwithlineplot)
          .enter()
            .append("svg:g")
            .attr("transform", "translate(" + scatterplotwithlineplot[0].margin.left + "," + scatterplotwithlineplot[0].margin.top + ")")
            .call(sp);
    //})
 })
 </script>
  </body>
 </html>
diff --git a/thumbnail.png b/thumbnail.png
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>W-PCA Scatterplot Chart</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="WPCA scatter plot">
	<meta name="author" content="Michal Škop">

	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="./d3.scatterplotwithlineplot.js"></script>
	<script src="./d3.tips.js"></script>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/united/bootstrap.min.css">

	<style type="text/css">

	/* note: we duplicate some of the styles (css, and as attributes of svg elements), so FF displays it correctly, and it is possible to generate png */
	.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;
	}
	circle:hover {
	fill-opacity: 1;
	}
	.label {
	font-family: sans-serif;
	font-size: 15px;
	}

	.d3-tip {
	line-height: 1;
	font-weight: bold;
	padding: 12px;
	background: rgba(0, 0, 0, 0.8);
	color: #fff;
	border-radius: 2px;
	pointer-events: none;
	max-width: 400px;
	}
	/* Creates a small triangle extender for the tooltip */
	.d3-tip:after {
	box-sizing: border-box;
	display: inline;
	font-size: 10px;
	width: 100%;
	line-height: 1;
	color: rgba(0, 0, 0, 0.8);
	position: absolute;
	pointer-events: none;
	}
	/* Northward tooltips */
	.d3-tip:after {
	content: "\25BC";
	margin: -1px 0 0 0;
	top: 100%;
	left: 0;
	text-align: center;
	}
	line {
	stroke:gray;
	stroke-width:1;
	opacity: .3;
	}
	.perfect {
	stroke: gray;
	stroke-width:2;
	opacity: 0.7;
	}
	#chart {
	padding-top:30px;
	}
	</style>
	</head>
	<body>
	<nav class="navbar navbar-default">
	<div class="container">
	<div class="navbar-header">
	<h2>Spatial distribution of MPs based on their votes (2017/10-2018/04)</h2>
	</div>
	</div>
	</nav>
	<div id="chart"></div>
	<div class="alert alert-info">
	<p>Each bubble represents one MP.
	<p><a href="http://bl.ocks.org/michalskop/8514867">W-PCA</a> model is used.


	<script type="text/javascript">

	d3.csv("chart_data.csv", function(voters) {
	d3.csv("cz-2017-wpca-cutting-lines.csv", function(lines) {
	linesselected = [];
	for (k in lines) {
	if ((parseFloat(lines[k]['loss']) < 33) && (parseFloat(lines[k]['cl_beta0']) < 50)) {
	beta = [lines[k]['normal_x'],lines[k]['normal_y']];
	beta0 = lines[k]['cl_beta0'];
	if (beta[1] != 0) {
	lines[k]['a'] = -beta0/beta[1];
	lines[k]['b'] = -beta[0]/beta[1];
	} else {
	lines[k]['a'] = 0;
	lines[k]['b'] = 0;
	}
	//add class for a perfect cut:
	if (lines[k]['loss'] == 0) {
	lines[k]['class'] = 'perfect';
	} else {
	lines[k]['class'] = 'non-perfect';
	}
	lines[k]['name'] = lines[k]["motion:text"];
	lines[k]['party'] = "loss: " + lines[k]["loss"];
	linesselected.push(lines[k]);
	}
	}

	spdata = [];
	voters.forEach(function(d) {
	spdata.push({"x":d["wpca:d1"],"y":d["wpca:d2"],"color":d["color"],"name":d["name"], "party": d["party"], "r": 0.1})
	});
	var scatterplotwithlineplot = [{
	"data": spdata,
	"margin": {top: 10, right: 10, bottom: 30, left: 30},
	"axes": {"labels":{"x":"DIM 1", "y":"DIM 2"}},
	"minmax":{"x":{'min':-12,'max':12},"y":{'min':-12,'max':12},"r":{'min':0,'max':1},"rrange":{'min':0,'max':100}},
	"size":{"width":500,"height":500},
	"lines": linesselected
	}];

	var svg = d3.select("#chart")
	.append("svg")
	.attr("width",scatterplotwithlineplot[0]['size']['width'])
	.attr("height",scatterplotwithlineplot[0]['size']['height']);

	/* Initialize tooltip */
	tip = d3.tip().attr('class', 'd3-tip').html(function(d) {
	return "<span class=\'stronger\'>" + d["name"] + "</span><br>" + d["party"];
	});

	/* Invoke the tip in the context of your visualization */
	svg.call(tip)

	var sp = d3.scatterplotwithlineplot()
	.data(function(d) {return d.data})
	.margin(function(d) {return d.margin})
	.axes(function(d) {return d.axes})
	.minmax(function(d) {return d.minmax})
	.size(function(d) {return d.size})
	.lines(function(d) {return d.lines})

	var scatter = svg.selectAll(".scatterplot")
	.data(scatterplotwithlineplot)
	.enter()
	.append("svg:g")
	.attr("transform", "translate(" + scatterplotwithlineplot[0].margin.left + "," + scatterplotwithlineplot[0].margin.top + ")")
	.call(sp);
	})
	})
	</script>
	</body>
	</html>
id	name	wpca:d1=o	wpca:d2	wpca:d3	party	color	wpca:d1
237	Bohuslav Sobotka	-0.4727583604	0.9281887936	0.0178811009		#888888	-4.6297401581
252	Lubomír Zaorálek	0.0445420045	-1.7432343097	0.282846218	ČSSD	#F07D00	0.4362015023
303	Vojtěch Filip	0.2858492246	-0.257843776	1.7757603623E-05	KSČM	#8c0000	2.799332059
305	Miroslav Grebeníček	0.371384362	0.7260529738	0.0216672341	KSČM	#8c0000	3.6369808314
309	Pavel Kováčik	0.358018822	1.614582992	0.1437556389	KSČM	#8c0000	3.5060916024
377	Miroslav Kalousek	-0.9561715847	1.1373037252	-0.1546610301	TOP09	#723769	-9.3638237935
4	Marek Benda	-0.9088112313	2.1155522541	-0.3526231319	ODS	#004494	-8.9000220955
401	Miroslava Němcová	-1.1039220236	0.5998545155	-0.4145463885	ODS	#004494	-10.8107493216
443	Martin Stropnický	0.511595457	-2.1408680533	-0.1381316452	ANO	#261060	5.0100732853
4778	Stanislav Grospič	0.3036650038	1.2801815593	0.0812745002	KSČM	#8c0000	2.9738026448
5226	Pavel Žáček	-0.9981828542	2.9282525464	-0.4814052379	ODS	#004494	-9.7752417132
5261	Jiří Dolejš	0.0439005288	0.3825393793	0.006376772	KSČM	#8c0000	0.4299195067
5268	Miloslava Vostrá	0.3571988697	0.6768191542	-0.0123067021	KSČM	#8c0000	3.4980617798
5307	Alexander Černý	0.3874905468	1.0994033686	-8.86675455105E-05	KSČM	#8c0000	3.7947092969
5313	Vladimír Koníček	0.2835936382	1.6034596688	0.042677358	KSČM	#8c0000	2.7772430178
5379	Jan Bauer	-1.0460958316	1.1919510309	-0.3935135052	ODS	#004494	-10.2444552777
5459	Radim Fiala	0.1150511006	7.690434671	0.2224296966	SPD	#ea2329	1.1266996952
5462	Jan Hamáček	-0.1077406438	-3.1266411739	0.0306123533	ČSSD	#F07D00	-1.0551081213
5558	Karel Schwarzenberg	-0.9381488297	0.9864828006	0.0329339021	TOP09	#723769	-9.1873262853
5700	Ivan Adamec	-1.0217416944	1.1414934165	-0.472611698	ODS	#004494	-10.0059543095
5703	Alena Gajdůšková	-0.2266825716	-3.1846434416	0.1117978459	ČSSD	#F07D00	-2.2199108317
5844	Jan Zahradník	-1.0485417938	1.058873748	-0.3779879513	ODS	#004494	-10.2684086767
5847	Stanislav Juránek	-0.6700140727	-3.2264757297	0.0154496524	KDU-ČSL	#e6ac21	-6.5614726642
5903	Jana Černochová	-1.0155752602	1.2376594288	-0.3836860557	ODS	#004494	-9.9455661901
5909	Jan Farský	-0.9600789257	0.1963365763	-0.11202668	STAN	#5d8c00	-9.4020885285
5911	Jaroslav Foldyna	0.1820103901	-1.9330608924	0.0789543222	ČSSD	#F07D00	1.7824345011
5914	Petr Gazdík	-0.9770276521	0.900487427	-0.1430102637	STAN	#5d8c00	-9.5680680342
5926	Jan Chvojka	-0.0682727344	-3.3204049905	0.1152332104	ČSSD	#F07D00	-0.66859742
5938	Květa Matušovská	0.3308097602	1.6551848661	0.1427404757	KSČM	#8c0000	3.239632251
5943	Helena Langšádlová	-0.9138031047	0.3748064153	-0.1311738391	TOP09	#723769	-8.9489076969
5945	Jaroslav Martinů	-1.0311781521	0.7640629918	-0.3321972611	ODS	#004494	-10.0983658899
5969	Zbyněk Stanjura	-1.0290732471	1.2698660274	-0.4100771357	ODS	#004494	-10.0777524772
6002	Jiří Běhounek	-0.133254213	-3.1652634664	0.089166918	ČSSD	#F07D00	-1.3049634505
6007	Bohuslav Svoboda	-0.9802624137	2.9236777659	-0.4854865568	ODS	#004494	-9.5997461753
6052	Veronika Vrecionová	-1.0267112654	0.4921896401	-0.4678530732	ODS	#004494	-10.0546215021
6074	Petr Fiala	-1.044380342	2.2883032076	-0.4254558524	ODS	#004494	-10.2276554251
6079	Pavel Blažek	-0.8597238355	2.0859809192	-0.3329431998	ODS	#004494	-8.4193074078
6105	Tomio Okamura	0.1070987581	7.914319317	0.2354078403	SPD	#ea2329	1.0488221102
6137	František Vácha	-1.0018929494	1.1527474451	-0.1855689912	TOP09	#723769	-9.8115748132
6138	Pavel Bělobrádek	-0.6360388813	-1.7013312957	-0.0534136539	KDU-ČSL	#e6ac21	-6.2287523551
6139	Josef Hájek	0.5992842173	-1.521695289	-0.0598506639	ANO	#261060	5.8688125671
6143	Stanislav Berkovec	0.6954806625	-1.1611886603	-0.102684598	ANO	#261060	6.8108679234
6147	Markéta Pekarová Adamová	-1.0614955642	-0.5637546499	-0.1244961621	TOP09	#723769	-10.395265431
6149	Hana Aulická Jírovcová	0.3386110654	1.5886586965	0.0467939837	KSČM	#8c0000	3.3160307228
6150	Andrej Babiš	0.6515419144	-1.2552002999	-0.044297018	ANO	#261060	6.380574133
6158	Karel Rais	0.6772114765	-0.8245519737	-0.1159679741	ANO	#261060	6.631957107
6161	Rostislav Vyzula	0.6136122188	-1.5839350567	-0.0777946375	ANO	#261060	6.0091272178
6165	Radek Vondráček	0.6105032833	-0.8394001179	-0.1025094844	ANO	#261060	5.9786812972
6166	Jan Volný	0.6517877336	-2.5486488536	-0.0805050018	ANO	#261060	6.3829814497
6168	Helena Válková	0.6143769547	-0.9252065812	-0.0998369303	ANO	#261060	6.0166163042
6169	Jiří Valenta	0.3851997968	1.4139649327	-0.0106183839	KSČM	#8c0000	3.7722758965
6171	Pavel Plzák	0.6944378288	-0.7495871655	-0.1179415062	ANO	#261060	6.800655414
6172	Ladislav Okleštěk	0.6863039275	-1.0735230886	-0.1022750494	ANO	#261060	6.7209998173
6177	Margita Balaštíková	0.7014060432	-1.2462792024	-0.1421419226	ANO	#261060	6.8688953963
6178	Jan Bartošek	-0.5406367638	-3.5135649561	0.0484823966	KDU-ČSL	#e6ac21	-5.2944758795
6179	Ondřej Benešík	-0.6453658557	-2.0052676767	0.2241566515	KDU-ČSL	#e6ac21	-6.320091761
6182	Jan Birke	0.0044802062	-0.749945218	0.155786012	ČSSD	#F07D00	0.0438748257
6184	Richard Brabec	0.6765772199	-1.5257235482	-0.0857967623	ANO	#261060	6.6257458087
6185	Milan Brázdil	0.6196482919	-2.5756460644	-0.1122633325	ANO	#261060	6.068238705
6190	Jaroslav Faltýnek	0.6664306609	-0.8934241304	-0.1094838878	ANO	#261060	6.5263801801
6198	Jaroslav Holík	0.1018453063	8.2852136669	0.3098422977	SPD	#ea2329	0.9973748621
6200	Milan Chovanec	0.1427987216	-1.0002235945	0.0803360962	ČSSD	#F07D00	1.3984331772
6201	Miloslav Janulík	0.6928508138	-1.0036307929	-0.0637706968	ANO	#261060	6.7851137168
6205	Marian Jurečka	-0.6483989603	1.8312736355	-0.0527121677	KDU-ČSL	#e6ac21	-6.3497950669
6207	Vít Kaňkovský	-0.7099190132	-2.0040883263	0.207065548	KDU-ČSL	#e6ac21	-6.9522632266
6209	David Kasal	0.7182967356	-1.1634413013	-0.1354713198	ANO	#261060	7.034306573
6211	Martin Kolovratník	0.5913383868	-1.1742988287	-0.0752596318	ANO	#261060	5.790998754
6214	Věra Kovářová	-1.0139692829	0.9675822977	-0.085140395	STAN	#5d8c00	-9.9298387949
6215	Roman Kubíček	0.7023108158	-1.1277665761	-0.0977188509	ANO	#261060	6.8777558681
6221	Radka Maxová	0.685636606	-1.0447999924	-0.0516980877	ANO	#261060	6.714464713
6222	Jiří Mihola	-0.6303793119	-1.6178701277	0.1720250949	KDU-ČSL	#e6ac21	-6.1733279822
6224	Zdeněk Ondráček	0.3039574636	1.5525031307	0.0312435392	KSČM	#8c0000	2.9766667142
6225	Jana Pastuchová	0.6804894298	-1.2216882704	-0.1280614484	ANO	#261060	6.6640582251
6233	Ivo Pojezný	0.3994011642	1.6132430653	0.0047394018	KSČM	#8c0000	3.9113504143
6240	Karel Tureček	0.6143522871	-1.592721991	-0.0849173372	ANO	#261060	6.0163747337
6246	Josef Kott	0.6596158713	-0.8696531921	-0.1004767567	ANO	#261060	6.4596426926
6254	Věra Adámková	0.6760377525	-1.3456180568	-0.0909745923	ANO	#261060	6.6204627841
6279	Leo Luzar	0.3782333035	1.3258826736	0.1236901348	KSČM	#8c0000	3.7040527694
6287	Karla Šlechtová	0.6589198525	-2.5521290368	-0.1723924858	ANO	#261060	6.4528265547
6291	Dan Ťok	0.660420772	-0.9935646149	-0.065209596	ANO	#261060	6.4675251145
6292	Pavla Golasowská	-0.6156645413	-3.0633453465	0.0293859785	KDU-ČSL	#e6ac21	-6.0292256875
6318	Robert Pelikán	0.6467501127	-1.4089604998	-0.1601651173	ANO	#261060	6.3336478415
6337	Kateřina Valachová	-0.1590084384	-2.5022414727	0.1413941996	ČSSD	#F07D00	-1.5571755349
6379	Miloslava Rutová	0.6980584729	-0.9181807095	-0.1482536232	ANO	#261060	6.8361125158
6409	František Petrtýl	0.6991628856	-0.4963107569	-0.1083871337	ANO	#261060	6.84692807
6418	Jan Skopeček	-0.9765158981	2.5223173419	-0.4791493969	ODS	#004494	-9.5630564085
6428	Andrea Babišová	0.6757561757	-0.684992155	-0.0520369767	ANO	#261060	6.6177052922
6429	Dana Balcarová	-0.7164603311	-4.0424371201	0.3472252609	Piráti	#000000	-7.016322596
6430	Klára Dostálová	0.6855566679	-0.6616287199	-0.1409606249	ANO	#261060	6.7136818759
6431	Lenka Dražilová	0.6909039585	-1.1841308232	-0.0819303089	ANO	#261060	6.7660480908
6432	Lukáš Bartoň	-0.7041662168	-4.1557099492	0.4536072757	Piráti	#000000	-6.8959258781
6433	Ivan Bartoš	-0.6649450111	-4.0822436633	0.4284154655	Piráti	#000000	-6.511831156
6434	Andrea Brzobohatá	0.6789385593	-1.2480369509	-0.147063493	ANO	#261060	6.6488704926
6435	Martin Baxa	-1.0539938426	0.7587632699	-0.4027550481	ODS	#004494	-10.3218007931
6436	Petr Beitl	-0.9792707669	-1.4388697673	-0.2528140945	ODS	#004494	-9.5900349411
6437	Josef Bělica	0.7090740927	-0.7687287249	-0.0965307635	ANO	#261060	6.9439888892
6438	Stanislav Blaha	-1.0158633133	1.5355884067	-0.4242474204	ODS	#004494	-9.9483871047
6439	Jiří Bláha	0.7219519992	-1.2697042551	-0.1228326133	ANO	#261060	7.070102705
6440	Marian Bojko	0.1088654397	8.030695729	0.3032640575	SPD	#ea2329	1.0661232889
6441	Jaroslav Bžoch	0.6603802151	-1.8840945758	-0.103392365	ANO	#261060	6.4671279401
6442	Lukáš Černohorský	-0.7254426681	-4.052770756	0.4291485194	Piráti	#000000	-7.1042869554
6443	Jan Čižinský	-0.8129790387	-1.132471337	0.1130318229	KDU-ČSL	#e6ac21	-7.9615338795
6444	Petr Dolínek	-0.1383563789	-3.6614776016	0.2356170515	ČSSD	#F07D00	-1.3549291505
6445	Jaroslav Dvořák	0.1390800207	8.2199702159	0.2867368387	SPD	#ea2329	1.3620158008
6446	František Elfmark	-0.7133611031	-4.1066077641	0.4574792413	Piráti	#000000	-6.9859717409
6447	Kamal Farhan	0.7216530774	-0.9683179417	-0.0908256593	ANO	#261060	7.0671753527
6448	Milan Feranec	0.7067240788	-0.9474512787	-0.0865360082	ANO	#261060	6.9209751161
6449	Dominik Feri	-0.9882228937	-0.2757596828	-0.1321802568	TOP09	#723769	-9.6777034507
6450	Mikuláš Ferjenčík	-0.6888175148	-4.5249744272	0.4517415811	Piráti	#000000	-6.7456154704
6451	Stanislav Fridrich	0.7015266854	-1.0531131518	-0.1003112689	ANO	#261060	6.8700768496
6452	Tomáš Hanzel	-0.2409440573	-3.2445086127	0.170248315	ČSSD	#F07D00	-2.3595740894
6453	Milan Hnilička	0.5965439411	-2.1525226958	-0.0338610758	ANO	#261060	5.8419769407
6454	Radek Holomčík	-0.731361272	-4.2722940041	0.4755458889	Piráti	#000000	-7.1622480623
6455	Jan Hrnčíř	0.0883256505	8.2902322078	0.2785983993	SPD	#ea2329	0.8649763715
6456	Tereza Hyťhová	0.137662116	9.044183493	0.2762538795	SPD	#ea2329	1.3481302076
6457	Eva Fialová	0.710257745	-1.1893297833	-0.0875695453	ANO	#261060	6.9555804399
6458	Ivan Jáč	0.6265364961	-1.4177793472	-0.091851567	ANO	#261060	6.1356951444
6459	Jakub Janda	-1.0606334236	1.3375704573	-0.3826065781	ODS	#004494	-10.3868224558
6460	Monika Jarošová	0.0902179555	8.2085510628	0.2896552373	SPD	#ea2329	0.8835077847
6461	Pavel Jelínek	0.1135709799	8.233668541	0.2859227212	SPD	#ea2329	1.1122048184
6462	Martin Jiránek	-0.7362841931	-3.9160689423	0.444491085	Piráti	#000000	-7.2104584117
6463	Aleš Juchelka	0.6024737977	-1.4270037139	-0.1074220084	ANO	#261060	5.9000482468
6464	Barbora Kořanová	0.6895447752	-1.4928267004	-0.070474033	ANO	#261060	6.7527375582
6465	Lenka Kozlová	-0.7416548449	-4.0373962933	0.404108278	Piráti	#000000	-7.263053404
6466	Jana Krutáková	-0.9781451526	0.5636154768	-0.0997862305	STAN	#5d8c00	-9.5790117588
6467	Zuzana Majerová Zahradníková	-0.9580432479	1.408669356	-0.3828190619	ODS	#004494	-9.3821530598
6468	Taťána Malá	0.7136395509	-1.071649265	-0.0997204662	ANO	#261060	6.9886985903
6469	Karla Maříková	0.1098484148	8.3095595912	0.3092939176	SPD	#ea2329	1.0757496004
6470	Ilona Mauritzová	-1.0196796612	1.2738559193	-0.4253073839	ODS	#004494	-9.9857607414
6471	Jana Vildumetzová	0.6893898491	-0.9940915126	-0.1128236829	ANO	#261060	6.7512203619
6472	Věra Procházková	0.7055690265	-0.7541056302	-0.0956561689	ANO	#261060	6.9096636459
6473	Olga Richterová	-0.5603163465	-3.1295886191	0.4351902537	Piráti	#000000	-5.4871987629
6474	Zuzana Ožanová	0.6992098125	-1.3217944279	-0.0671207619	ANO	#261060	6.8473876269
6475	Monika Oborná	0.700162773	-1.042710899	-0.1087753061	ANO	#261060	6.8567200048
6476	Marcela Melková	0.6348684088	-1.4338238359	-0.1017205232	ANO	#261060	6.2172898745
6477	Jakub Michálek	-0.6249473349	-4.4342450436	0.4387111846	Piráti	#000000	-6.1201324294
6478	Ivana Nevludová	0.1295880591	8.020544274	0.3135227666	SPD	#ea2329	1.2690606687
6479	Lucie Šafránková	0.1078647187	8.0170533821	0.2952511513	SPD	#ea2329	1.0563231906
6480	Radek Zlesák	0.6779804409	-1.1000027677	-0.0576842519	ANO	#261060	6.639487604
6481	Lubomír Volný	0.1353733768	8.0348292159	0.2922813506	SPD	#ea2329	1.3257164996
6482	Vlastimil Válek	-1.010908737	-0.2477676639	-0.1108616545	TOP09	#723769	-9.8998667561
6483	Petr Třešňák	-0.7951731065	-3.6296411853	0.444375166	Piráti	#000000	-7.7871597243
6484	David Štolpa	0.7174617055	-1.0978065304	-0.0831192853	ANO	#261060	7.0261290923
6485	Daniel Pawlas	0.3963951756	1.1752182891	0.0898525781	KSČM	#8c0000	3.8819126565
6486	Vojtěch Munzar	-1.02469325	0.9464771076	-0.3948137717	ODS	#004494	-10.0348590026
6487	Patrik Nacher	0.6131669729	-1.1531350095	-0.1001222663	ANO	#261060	6.0047669081
6488	Mikuláš Peksa	-0.6823808196	-4.4450875463	0.4577567022	Piráti	#000000	-6.6825806756
6489	Tomáš Vymazal	-0.7451807178	-4.4264562645	0.4085039073	Piráti	#000000	-7.2975824077
6490	Petr Vrána	0.7099692724	-1.0933297374	-0.1151775596	ANO	#261060	6.9527554174
6491	Adam Vojtěch	0.6652253777	-1.395295358	-0.1255977201	ANO	#261060	6.5145767965
6492	Ivo Vondrák	0.6781852475	-1.03948989	-0.1097159017	ANO	#261060	6.6414932824
6493	Jiří Ventruba	-1.0604673258	1.0882254637	-0.4014916419	ODS	#004494	-10.3851958537
6494	Ondřej Veselý	-0.1425196569	-3.5075237515	0.1542304935	ČSSD	#F07D00	-1.3957002863
6495	Radovan Vích	0.1061443082	8.2236187458	0.253392072	SPD	#ea2329	1.0394751474
6496	Pavel Juříček	0.6179531061	-1.276726071	-0.0929929134	ANO	#261060	6.0516376875
6497	Adam Kalous	0.6791511432	-0.4245042492	-0.0961492613	ANO	#261060	6.6509523352
6498	Václav Klaus	-0.6107245115	0.5456291323	-0.5214007148	ODS	#004494	-5.980847793
6499	František Kopřiva	-0.7238934998	-4.7270583691	0.4371323599	Piráti	#000000	-7.0891158922
6500	Jan Richter	0.6958138949	-1.1955882369	-0.0798305457	ANO	#261060	6.8141312802
6501	Pavel Staněk	0.6858854333	-0.6107407004	-0.0940650163	ANO	#261060	6.716901488
6502	Jana Levová	0.0686111587	7.879436629	0.2756935893	SPD	#ea2329	0.6719116219
6503	Jiří Kobza	0.1565530203	8.8492512644	0.2688310945	SPD	#ea2329	1.5331295338
6504	Jiří Kohoutek	-0.0257768471	8.0134825368	0.3911390071	SPD	#ea2329	-0.2524336194
6505	Julius Špičák	0.6892083358	-1.1699361179	-0.0778697162	ANO	#261060	6.7494427945
6506	Tomáš Kohoutek	0.7025143001	-1.3296040659	-0.1075526821	ANO	#261060	6.8797485969
6507	Lukáš Kolářík	-0.715472249	-3.9577795168	0.4538673656	Piráti	#000000	-7.0066462709
6508	Radek Koten	0.1143433376	7.9160501887	0.3110822113	SPD	#ea2329	1.1197685459
6509	Robert Králíček	0.7253124875	-1.0211996271	-0.0917978126	ANO	#261060	7.1030120918
6510	Karel Krejza	-1.0273931318	3.1867080684	-0.4902169406	ODS	#004494	-10.0612990458
6511	Jan Kubík	0.6945342152	-0.845216939	-0.0969884995	ANO	#261060	6.8015993299
6512	Jaroslav Kytýr	0.7172722577	-0.6564443203	-0.1072940133	ANO	#261060	7.0242738227
6513	Marek Výborný	-0.7260403479	-1.1844835799	0.0830985226	KDU-ČSL	#e6ac21	-7.1101400554
6514	Lubomír Španěl	0.0827148942	8.0097313372	0.2972964314	SPD	#ea2329	0.8100300271
6515	Jiří Strýček	0.6739133614	-1.538756652	-0.0743852725	ANO	#261060	6.5996585434
6516	Antonín Staněk	-0.0896955659	-2.8716473741	0.1127859244	ČSSD	#F07D00	-0.8783920036
6517	Jan Schiller	0.6729650284	-1.107004082	-0.1002082977	ANO	#261060	6.5903714835
6518	Petr Sadovský	0.7080815851	-0.9174257138	-0.1020457856	ANO	#261060	6.9342692254
6519	Jan Řehounek	0.6789769473	-1.1573293634	-0.1072130158	ANO	#261060	6.6492464277
6520	Pavel Růžička	0.6984220695	-0.8460075726	-0.0919183534	ANO	#261060	6.8396732313
6521	Radek Rozvoral	0.1087217683	8.1143723784	0.3013005717	SPD	#ea2329	1.0647163093
6522	Miloslav Rozner	0.1183969314	7.9997379476	0.2982027984	SPD	#ea2329	1.159465541
6523	Michal Ratiborský	0.7037991232	-1.0695319316	-0.1013347663	ANO	#261060	6.8923309169
6524	Vít Rakušan	-0.9832435865	0.0523009192	0.0444089506	STAN	#5d8c00	-9.6289409109
6525	Pavel Pustějovský	0.6508386535	-1.3720796626	-0.1013308611	ANO	#261060	6.3736870727
6526	Ondřej Profant	-0.7334616424	-4.0908244461	0.4526530713	Piráti	#000000	-7.1828170679
6527	David Pražák	0.6011093187	-1.4139627289	-0.1239233782	ANO	#261060	5.8866858531
6528	Jan Pošvář	-0.6755291829	-4.7826422066	0.4705280117	Piráti	#000000	-6.615482343
6529	Ondřej Polanský	-0.7333936293	-3.5811266528	0.4094602991	Piráti	#000000	-7.182151013
6530	Zdeněk Podal	0.1233145865	8.1912475774	0.258206808	SPD	#ea2329	1.2076243195
6531	Vojtěch Pikal	-0.7431572624	-3.4541451598	0.3647663443	Piráti	#000000	-7.2777666345
6532	Roman Onderka	-0.1496999912	-2.9516871284	0.0529983482	ČSSD	#F07D00	-1.4660175661
6533	Marek Novák	0.698627468	-1.1934113221	-0.1001399367	ANO	#261060	6.841684706
6534	Jiří Mašek	0.7055511522	-0.8084944842	-0.0935140039	ANO	#261060	6.9094886019
6535	Tomáš Martínek	-0.7151049654	-4.1797229272	0.4126768288	Piráti	#000000	-7.0030494493
6536	Přemysl Mališ	0.595094365	-2.397794703	-0.0392675981	ANO	#261060	5.8277811879
6537	Jan Lipavský	-0.7193227601	-4.5319579286	0.4192385363	Piráti	#000000	-7.044354469
6538	Martin Kupka	-1.0187887814	2.5284542318	-0.4820334853	ODS	#004494	-9.9770363229
6539	Milan Pour	0.6864723457	-1.1983422449	-0.0815664905	ANO	#261060	6.7226491423
6540	Eva Matyášová	0.7038178882	-0.7945843074	-0.090623921	ANO	#261060	6.8925146835
6541	Petr Pávek	-0.8829660872	1.2768448861	-0.1607660366	STAN	#5d8c00	-8.6469196411
	/* requires D3 + https://github.com/Caged/d3-tip */
	d3.scatterplotwithlineplot = function() {
	unit_circle = true;
	function scatterplotwithlineplot(selection) {
	selection.each(function(d, i) {
	//options
	var data = (typeof(data) === "function" ? data(d) : d.data),
	//lines = (typeof(lines) === "function" ? lines(d) : d.lines),
	margin = (typeof(margin) === "function" ? margin(d) : d.margin),
	axes = (typeof(axes) === "function" ? axes(d) : d.axes),
	minmax = (typeof(minmax) === "function" ? minmax(d) : d.minmax),
	size = (typeof(size) === "function" ? size(d) : d.size),
	unit_circle_val = (typeof(unit_circle) === "function" ? unit_circle(d) : unit_circle);

	// chart sizes
	var width = size['width'] - margin.left - margin.right,
	height = size['height'] - margin.top - margin.bottom;

	//scales
	var xScale = d3.scale.linear()
	.domain([minmax['x']['min'], minmax['x']['max']])
	.range([0, width])

	var yScale = d3.scale.linear()
	.domain([minmax['y']['min'], minmax['y']['max']])
	.range([height, 0])

	var rScale = d3.scale.linear()
	.domain([minmax['r']['min'],minmax['r']['max']])
	.range([minmax['rrange']['min'],minmax['rrange']['max']]);

	//axes
	var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom");
	//.ticks(5);
	//.tickSize(16, 0);
	var yAxis = d3.svg.axis()
	.scale(yScale)
	.orient("left");
	//.ticks(5);


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

	limits = {"x":[minmax["x"]["min"],minmax["x"]["max"]],"y":[minmax["y"]["min"],minmax["y"]["max"]]}
	// for (k in lines) {
	// ps = linecross(lines[k],limits);
	// if (ps.length == 2) {
	// lines[k].x1 = ps[0][0];
	// lines[k].y1 = ps[0][1];
	// lines[k].x2 = ps[1][0];
	// lines[k].y2 = ps[1][1];
	// }
	// way = get_sign(lines[k].b,lines[k].n1,lines[k].n2);
	// lines[k].path =[corners(lines[k],limits,way),corners(lines[k],limits,-1*way)];
	// }

	//ellipse ~ unit_circle
	if (unit_circle_val) {
	element.selectAll(".ellipse")
	.data([0])
	.enter()
	.append("ellipse")
	.attr("cx", xScale(0))
	.attr("cy", yScale(0))
	.attr("rx", Math.abs(xScale(1)-xScale(0)))
	.attr("ry", Math.abs(yScale(1)-yScale(0)))
	.attr("fill-opacity",0)
	.attr("stroke","red")
	.style("stroke-dasharray", ("10,3"));
	}

	//lines
	// var line = element.selectAll ('.line')
	// .data(lines)
	// .enter()
	// .append("line")
	// .attr("x1",function(d) {return xScale(d.x1)})
	// .attr("y1",function(d) {return yScale(d.y1)})
	// .attr("x2",function(d) {return xScale(d.x2)})
	// .attr("y2",function(d) {return yScale(d.y2)})
	// .attr("id", function (d, i) {return "q-" + i;})
	// .attr("class", function(d) {
	// if (typeof(d['class'] != 'undefined')) return d['class'];
	// else return 'line';
	// })
	// //putting it here and not in css, because it is used for generating png:
	// .attr("stroke","gray")
	// .attr("stroke-width","1")
	// .attr("opacity", 0.15)
	//
	// .on('mouseover', tip.show)
	// .on('mouseout', tip.hide);

	//points
	element.selectAll(".circle")
	.data(data)
	.enter()
	.append("circle")
	.attr("cx", function(d) {
	return xScale(d.x);
	})
	.attr("cy", function(d) {
	return yScale(d.y);
	})
	.attr("r", function(d) {
	if ((typeof(d['r']) != 'undefined') && (d['r'] != ''))
	return rScale(d.r);
	else return rScale(0.05);
	})
	.attr("class", function(d) {
	if ((typeof(d['class']) != 'undefined') && (d['class'] != ''))
	return d['class'];
	else return 'circle';
	})
	.attr("fill",function(d) {
	if ((typeof(d['color']) != 'undefined') && (d['color'] != ''))
	return d.color;
	else
	return "#eee";
	})
	.attr("stroke",function(d) {
	if ((typeof(d['color']) != 'undefined') && (d['color'] != ''))
	return d.color;
	else
	return "#bbb";
	})
	.attr("stroke-width",function(d) {
	if ((typeof(d['r']) != 'undefined') && (d['r'] != ''))
	return Math.max(d.r*5,1);
	else return 1;
	})
	.attr("fill-opacity",function(d) {
	if ((typeof(d['opacity']) != 'undefined') && (d['opacity'] != ''))
	return d.opacity;
	else
	return 0.5;
	})
	.on('mouseover', tip.show)
	.on('mouseout', tip.hide);


	//axis labels
	element.append("text")
	.attr("class", "x-label label")
	.attr("text-anchor", "end")
	.attr("x", width)
	.attr("y", height-5)
	.text(axes['labels']['x']);
	element.append("text")
	.attr("class", "y label")
	.attr("text-anchor", "end")
	.attr("y", 5)
	.attr("x", 0)
	.attr("dy", ".75em")
	.attr("transform", "rotate(-90)")
	.text(axes['labels']['y']);


	// putting it here and not in css, because it is used for generating png:
	element.selectAll(".domain")
	.attr("fill","none")
	.attr("fill-opacity",0)
	.attr("stroke","black")
	.attr("stroke-width",1);
	element.selectAll(".tick")
	.attr("fill-opacity",0)
	.attr("stroke","#000")
	.attr("stroke-width",1);
	element.selectAll("text")
	.attr("font-family","sans-serif")
	.attr("font-size",11)
	element.selectAll(".label")
	.attr("font-size",15)
	.attr("font-weight","bold")
	//convert dy("0.71em") to dy("10"), inkscape feature https://www.ruby-forum.com/topic/5505193 :
	element.selectAll("text")
	.attr("dy",function(d) {
	if (d3.select(this).attr("dy")) {
	em = parseFloat(d3.select(this).attr("dy").replace("em",""));
	if (d3.select(this).attr("font-size"))
	px = parseFloat(d3.select(this).attr("font-size"));
	else
	px = 11;
	return em*px + "px";
	} else {
	return 0;
	}
	})
	});
	}
	scatterplotwithlineplot.data = function(value) {
	if (!arguments.length) return value;
	data = value;
	return scatterplotwithlineplot;
	};
	// scatterplotwithlineplot.lines = function(value) {
	// if (!arguments.length) return value;
	// lines = value;
	// return scatterplotwithlineplot;
	// };
	scatterplotwithlineplot.margin = function(value) {
	if (!arguments.length) return value;
	margin = value;
	return scatterplotwithlineplot;
	};
	scatterplotwithlineplot.axes = function(value) {
	if (!arguments.length) return value;
	axes = value;
	return scatterplotwithlineplot;
	};
	scatterplotwithlineplot.minmax = function(value) {
	if (!arguments.length) return value;
	minmax = value;
	return scatterplotwithlineplot;
	};
	scatterplotwithlineplot.size = function(value) {
	if (!arguments.length) return value;
	size = value;
	return scatterplotwithlineplot;
	};
	scatterplotwithlineplot.unit_circle = function(value) {
	if (!arguments.length) return value;
	unit_circle = value;
	return scatterplotwithlineplot;
	};
	return scatterplotwithlineplot;


	function corners(l,e,o) {
	//l = {"a":0,"b":1} //line, a and slope, i.e., y=a+bx
	//e = {"x": [-10,10], "y": [-10,10]} //limits
	//o = 1 //orientation -1 or 1

	//crossing x0, x1
	//crossing y0, y1
	outp = linecross (l,e);

	out = [];

	//vertices
	for (i=0;i<=1;i++){
	for (j=0;j<=1;j++){
	if (o(l.a+l.be.x[i]-e.y[j]) > 0)
	outp.push([e.x[i],e.y[j]]);
	}
	}
	//sort the outps, anticlockwise
	if (outp.length > 0) {
	mid = [0,0];
	for (i in outp) {
	mid[0] += outp[i][0];
	mid[1] += outp[i][1];
	}
	mid[0] = mid[0] / outp.length;
	mid[1] = mid[1] / outp.length;
	for (i in outp) {
	p = outp[i][1] - mid[1];
	q = outp[i][0] - mid[0];
	if (q != 0)
	outp[i][2] = Math.atan(p/q) + (q<0 ? Math.PI : 0);
	else
	outp[i][2] = Math.PI/2 + Math.PI*sign(p);
	}
	outp = outp.sort(function(w,z) {
	return w[2] > z[2];
	});
	for (i in outp) {
	outp[i].splice(2,1);
	out.push({"x":outp[i][0],"y":outp[i][1]});
	}
	}
	return out;
	}

	function linecross (l,e) {
	out = [];
	//crossing x0, x1
	for (i=0;i<=1;i++){
	Y = l.a + l.b*e.x[i];
	if ((Y > e.y[0]) && (Y < e.y[1]))
	out.push([e.x[i],Y]);
	}
	//crossing y0, y1
	for (j=0;j<=1;j++){
	if (l.b != 0) {
	X = (e.y[j] - l.a)/l.b;
	if ((X > e.x[0]) && (X < e.x[1]))
	out.push([X,e.y[j]]);
	}
	}
	return out;
	}

	function get_sign(b,d1,d2) {
	t = b*d1-d2;
	if (t > 0) return 1;
	if (t < 0) return -1;
	return 0;
	}

	}
	// d3.tip
	// Copyright (c) 2013 Justin Palmer
	//
	// Tooltips for d3.js SVG visualizations

	(function (root, factory) {
	if (typeof define === 'function' && define.amd) {
	// AMD. Register as an anonymous module with d3 as a dependency.
	define(['d3'], factory)
	} else if (typeof module === 'object' && module.exports) {
	// CommonJS
	module.exports = function(d3) {
	d3.tip = factory(d3)
	return d3.tip
	}
	} else {
	// Browser global.
	root.d3.tip = factory(root.d3)
	}
	}(this, function (d3) {

	// Public - contructs a new tooltip
	//
	// Returns a tip
	return function() {
	var direction = d3_tip_direction,
	offset = d3_tip_offset,
	html = d3_tip_html,
	node = initNode(),
	svg = null,
	point = null,
	target = null

	function tip(vis) {
	svg = getSVGNode(vis)
	point = svg.createSVGPoint()
	document.body.appendChild(node)
	}

	// Public - show the tooltip on the screen
	//
	// Returns a tip
	tip.show = function() {
	var args = Array.prototype.slice.call(arguments)
	if(args[args.length - 1] instanceof SVGElement) target = args.pop()

	var content = html.apply(this, args),
	poffset = offset.apply(this, args),
	dir = direction.apply(this, args),
	nodel = d3.select(node),
	i = directions.length,
	coords,
	scrollTop = document.documentElement.scrollTop \|\| document.body.scrollTop,
	scrollLeft = document.documentElement.scrollLeft \|\| document.body.scrollLeft

	nodel.html(content)
	.style({ opacity: 1, 'pointer-events': 'all' })

	while(i--) nodel.classed(directions[i], false)
	coords = direction_callbacks.get(dir).apply(this)
	nodel.classed(dir, true).style({
	top: (coords.top + poffset[0]) + scrollTop + 'px',
	left: (coords.left + poffset[1]) + scrollLeft + 'px'
	})

	return tip
	}

	// Public - hide the tooltip
	//
	// Returns a tip
	tip.hide = function() {
	var nodel = d3.select(node)
	nodel.style({ opacity: 0, 'pointer-events': 'none' })
	return tip
	}

	// Public: Proxy attr calls to the d3 tip container. Sets or gets attribute value.
	//
	// n - name of the attribute
	// v - value of the attribute
	//
	// Returns tip or attribute value
	tip.attr = function(n, v) {
	if (arguments.length < 2 && typeof n === 'string') {
	return d3.select(node).attr(n)
	} else {
	var args = Array.prototype.slice.call(arguments)
	d3.selection.prototype.attr.apply(d3.select(node), args)
	}

	return tip
	}

	// Public: Proxy style calls to the d3 tip container. Sets or gets a style value.
	//
	// n - name of the property
	// v - value of the property
	//
	// Returns tip or style property value
	tip.style = function(n, v) {
	if (arguments.length < 2 && typeof n === 'string') {
	return d3.select(node).style(n)
	} else {
	var args = Array.prototype.slice.call(arguments)
	d3.selection.prototype.style.apply(d3.select(node), args)
	}

	return tip
	}

	// Public: Set or get the direction of the tooltip
	//
	// v - One of n(north), s(south), e(east), or w(west), nw(northwest),
	// sw(southwest), ne(northeast) or se(southeast)
	//
	// Returns tip or direction
	tip.direction = function(v) {
	if (!arguments.length) return direction
	direction = v == null ? v : d3.functor(v)

	return tip
	}

	// Public: Sets or gets the offset of the tip
	//
	// v - Array of [x, y] offset
	//
	// Returns offset or
	tip.offset = function(v) {
	if (!arguments.length) return offset
	offset = v == null ? v : d3.functor(v)

	return tip
	}

	// Public: sets or gets the html value of the tooltip
	//
	// v - String value of the tip
	//
	// Returns html value or tip
	tip.html = function(v) {
	if (!arguments.length) return html
	html = v == null ? v : d3.functor(v)

	return tip
	}

	function d3_tip_direction() { return 'n' }
	function d3_tip_offset() { return [0, 0] }
	function d3_tip_html() { return ' ' }

	var direction_callbacks = d3.map({
	n: direction_n,
	s: direction_s,
	e: direction_e,
	w: direction_w,
	nw: direction_nw,
	ne: direction_ne,
	sw: direction_sw,
	se: direction_se
	}),

	directions = direction_callbacks.keys()

	function direction_n() {
	var bbox = getScreenBBox()
	return {
	top: bbox.n.y - node.offsetHeight,
	left: bbox.n.x - node.offsetWidth / 2
	}
	}

	function direction_s() {
	var bbox = getScreenBBox()
	return {
	top: bbox.s.y,
	left: bbox.s.x - node.offsetWidth / 2
	}
	}

	function direction_e() {
	var bbox = getScreenBBox()
	return {
	top: bbox.e.y - node.offsetHeight / 2,
	left: bbox.e.x
	}
	}

	function direction_w() {
	var bbox = getScreenBBox()
	return {
	top: bbox.w.y - node.offsetHeight / 2,
	left: bbox.w.x - node.offsetWidth
	}
	}

	function direction_nw() {
	var bbox = getScreenBBox()
	return {
	top: bbox.nw.y - node.offsetHeight,
	left: bbox.nw.x - node.offsetWidth
	}
	}

	function direction_ne() {
	var bbox = getScreenBBox()
	return {
	top: bbox.ne.y - node.offsetHeight,
	left: bbox.ne.x
	}
	}

	function direction_sw() {
	var bbox = getScreenBBox()
	return {
	top: bbox.sw.y,
	left: bbox.sw.x - node.offsetWidth
	}
	}

	function direction_se() {
	var bbox = getScreenBBox()
	return {
	top: bbox.se.y,
	left: bbox.e.x
	}
	}

	function initNode() {
	var node = d3.select(document.createElement('div'))
	node.style({
	position: 'absolute',
	top: 0,
	opacity: 0,
	'pointer-events': 'none',
	'box-sizing': 'border-box'
	})

	return node.node()
	}

	function getSVGNode(el) {
	el = el.node()
	if(el.tagName.toLowerCase() === 'svg')
	return el

	return el.ownerSVGElement
	}

	// Private - gets the screen coordinates of a shape
	//
	// Given a shape on the screen, will return an SVGPoint for the directions
	// n(north), s(south), e(east), w(west), ne(northeast), se(southeast), nw(northwest),
	// sw(southwest).
	//
	// +-+-+
	// \| \|
	// + +
	// \| \|
	// +-+-+
	//
	// Returns an Object {n, s, e, w, nw, sw, ne, se}
	function getScreenBBox() {
	var targetel = target \|\| d3.event.target;

	while ('undefined' === typeof targetel.getScreenCTM && 'undefined' === targetel.parentNode) {
	targetel = targetel.parentNode;
	}

	var bbox = {},
	matrix = targetel.getScreenCTM(),
	tbbox = targetel.getBBox(),
	width = tbbox.width,
	height = tbbox.height,
	x = tbbox.x,
	y = tbbox.y

	point.x = x
	point.y = y
	bbox.nw = point.matrixTransform(matrix)
	point.x += width
	bbox.ne = point.matrixTransform(matrix)
	point.y += height
	bbox.se = point.matrixTransform(matrix)
	point.x -= width
	bbox.sw = point.matrixTransform(matrix)
	point.y -= height / 2
	bbox.w = point.matrixTransform(matrix)
	point.x += width
	bbox.e = point.matrixTransform(matrix)
	point.x -= width / 2
	point.y -= height / 2
	bbox.n = point.matrixTransform(matrix)
	point.y += height
	bbox.s = point.matrixTransform(matrix)

	return bbox
	}

	return tip
	};

	}));