michalskop · August 29, 2015 14:27
diff --git a/all_data_ten_5.csv b/all_data_ten_5.csv
diff --git a/all_data_ten_6.csv b/all_data_ten_6.csv
diff --git a/cutting_lines_ten.csv b/cutting_lines_ten.csv
diff --git a/d3.scatterplotwithlineplotellipses.js b/d3.scatterplotwithlineplotellipses.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),
          ellipses = (typeof(ellipses) === "function" ? ellipses(d) : d.ellipses);
      
      // 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);
      
      //ellipses
      var ellipse = element.selectAll('.ellipse')
        .data(ellipses)
        .enter()
            .append("ellipse")
            .attr("cx", function(d) {
 		   		return xScale(d.x);
 		    })
 		    .attr("cy", function(d) {
 		   		return yScale(d.y);
 		    })
 		    .attr("rx", function(d) {
 		   		return  Math.abs(xScale(d.rx) - xScale(0));
 		    })
 		    .attr("ry", function(d) {
 		   		return  Math.abs(yScale(d.ry) - yScale(0));
 		    })
 		    .attr("transform", function(d) {
 		        return "rotate("+d.arc+","+xScale(d.x)+","+yScale(d.y)+")";
 		    })
 		    .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['width']) != 'undefined') && (d['width'] != ''))
 		            return Math.max(d.width*d.width*16,1);
 		   		else return 2;
    	   })
 		   .attr("fill-opacity",function(d) {
 		       if ((typeof(d['opacity']) != 'undefined') && (d['opacity'] != ''))
    		     return d.opacity;
    		   else
    		     return 0.01;
    	   })
    	   .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.075);
 		   })
 		   .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 1;
    	   })
 		   .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;
  };
  scatterplotwithlineplot.ellipses = function(value) {
    if (!arguments.length) return value;
    ellipses = 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/ellipses.csv b/ellipses.csv
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 = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="./d3.scatterplotwithlineplotellipses.js"></script>
    <script src="./d3.tips.js"></script>
    <script src="./modernizr.svg.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 {
              margin-top:30px;
            }
 		</style>
  </head>
  <body>
    <nav class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <h2>Spatial distribution of Czech senate candidates from main parties based on their answers in VAA <a href="http://volebnikalkulacka.cz" class="text-success">VolebniKalkulacka.cz</a> before elections 2012-2014</h2>
        </div>
      </div>
    </nav>
      <div id="graphic" style="max-width:500px"></div>
    <div class="alert alert-info">
      <p>Each ellipse represents senate candidates from one political party from elections in 2012 and 2014 (it is 90% prediction interval for the party). Main parties only.
      <p><a href="http://bl.ocks.org/michalskop/8514867">W-PCA</a> model is used, the model is estimated using 10 biggest parties, the other parties and the senate candidates were projected into the model.

    
 <script type="text/javascript">
 /*
 responsivity based on: http://blog.apps.npr.org/2014/05/19/responsive-charts.html
 */

 var $graphic = $('#graphic');
 var graphic_data_url = 'data.csv';
 var graphic_data;
 var graphic_aspect_width = 16;
 var graphic_aspect_height = 9;
 var mobile_threshold = 500;

 function drawGraphic() {
    
    var margin = { top: 10, right: 10, bottom: 30, left: 30 };
    var width = $graphic.width() - margin.left - margin.right;

    
    var scatterplotwithlineplot = [{
      "data": spdata,
      "margin": margin,
      "axes": {"labels":{"x":"DIM 1", "y":"DIM 2"}},
      "minmax":{"x":{'min':-1,'max':1},"y":{'min':-1,'max':1},"r":{'min':0,'max':1},"rrange":{'min':0,'max':100}},
      "size":{"width":width,"height":width},
      "lines": linesselected,
      "ellipses": ellipses
    }];

     // clear out existing graphics
    $graphic.empty();

     var svg = d3.select("#graphic")
        .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>";
    });

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

 if (Modernizr.svg) { // if svg is supported, draw dynamic chart
  d3.csv("all_data_ten_5.csv", function(voters) {
    d3.csv("cutting_lines_ten.csv", function(lines) {
      d3.csv("ellipses.csv", function(ells) {
        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"]})
        });
        
        ellipses = ells;
        
        drawGraphic();
        window.onresize = drawGraphic;
    
      })    
    })
  })
 } else {
    $graphic.html('<img src="chart.png" width="' + $graphic.width() +' alt="client image" id="client_image_preview" />');
 }


 </script>
  </body>
 </html>
diff --git a/modernizr.svg.js b/modernizr.svg.js
 /* Modernizr 2.8.3 (Custom Build) | MIT & BSD
 * Build: http://modernizr.com/download/#-svg
 */
 ;window.Modernizr=function(a,b,c){function u(a){i.cssText=a}function v(a,b){return u(prefixes.join(a+";")+(b||""))}function w(a,b){return typeof a===b}function x(a,b){return!!~(""+a).indexOf(b)}function y(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:w(f,"function")?f.bind(d||b):f}return!1}var d="2.8.3",e={},f=b.documentElement,g="modernizr",h=b.createElement(g),i=h.style,j,k={}.toString,l={svg:"http://www.w3.org/2000/svg"},m={},n={},o={},p=[],q=p.slice,r,s={}.hasOwnProperty,t;!w(s,"undefined")&&!w(s.call,"undefined")?t=function(a,b){return s.call(a,b)}:t=function(a,b){return b in a&&w(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=q.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(q.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(q.call(arguments)))};return e}),m.svg=function(){return!!b.createElementNS&&!!b.createElementNS(l.svg,"svg").createSVGRect};for(var z in m)t(m,z)&&(r=z.toLowerCase(),e[r]=m[z](),p.push((e[r]?"":"no-")+r));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)t(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof enableClasses!="undefined"&&enableClasses&&(f.className+=" "+(b?"":"no-")+a),e[a]=b}return e},u(""),h=j=null,e._version=d,e}(this,this.document);
diff --git a/thumbnail.png b/thumbnail.png
	normal_x	normal_y	cl_beta0	loss	motion:name
2	0.387203485	1.653567751	0.2262220402	0.1080728926	Armáda v zahraničí
3	-1.4383536766	0.5658304435	-0.1192870994	0.646509282	Daňová progrese
6	1.1079983829	-0.3383725325	-0.7099132901	0.3884413667	Školné na VŠ
9	-0.7317462198	-1.8291834039	-0.3803369219	0.1125535031	Zrušení zdravotnických poplatků
10	-0.4757468355	-0.3828744801	-0.4085634698	0	Vystoupení z NATO
12	-1.1874902188	-1.0999196098	0.2284742597	1.0656287254	Důchodová reforma
13	0.682780333	-0.7926673505	-0.881653224	0	Vystoupení z EU
15	0.0561319092	1.9750720865	0.5209197447	0	Církevní restituce
16	-1.8969382269	1.0078213289	0.3585907041	0.0975226719	Zavedení eura
18	-1.4615330955	0.3268646241	0.7158384842	0	Zákon o prokázání nabytí majetku
22	0.140925252	-0.1178094667	0.1027905894	0.1296643579	Poplatek za prázdná média
33	-0.46633172	-0.3250100841	2360.6798105263	0	Zveřejňování platů politiků a úředníků
35	-0.484390216	1.0714390332	0.8536981284	0	Protikorupční státní zastupitelství
37	0.0480310536	-1.4849706795	0.0914309516	0	Zavedení eutanazie
38	-0.6750579955	0.9669047593	0.1124368111	0.739608605	Zachování prezidentských milostí
40	-0.682780333	0.7926673505	0.7301583207	0	Přímá volba prezidenta
43	-1.1949403733	-1.4460152236	-0.2564261257	0	Adopce homosexuálními páry
44	0.46633172	0.3250100841	-5278.6403435454	0	Zákaz stavby mešit
47	0.5548088232	-0.1292196575	0.4085635066	0	Zákon o vyrovnaném státním rozpočtu
48	-1.4373629777	-0.1898862499	0.2632822771	0.8048254618	Rovnoměrné rozmístění státních institucí
49	-1.4941038407	-0.0056276494	-1.0275955103	0	Kvóty pro ženy
50	-1.8491306036	0.5804938944	-0.3001133059	0	Zákaz kouření v restauracích
54	-1.0862985157	-1.8227528847	0.5040000726	0	Celostátní referendum
57	-0.5152755302	-0.3212849323	-0.3481357237	0.1556995638	Zrušení Senátu
59	-2.0095682114	-0.9979828616	0.4056635805	0.0291025904	Lidová iniciativa
72	-2.0518063001	0.554681227	-0.6188331629	0	Měly by být zavedeny tzv. registrační pokladny.
76	-0.454836184	-0.5978367361	0.5577143362	0	Platnost smluv uzavřených veřejnou správnou by měla být podmíněna jejich zveřejněním v registru smluv.
77	-1.4829663985	-0.0184370213	0.8708709834	0	Kontrolní pravomoci NKÚ by měly být rozšířeny na samosprávy a obchodní společnosti s vlastnickou účastí veřejné správy.
80	-0.4580229715	0.5317374238	2360.6798105263	0	Účetnictví politických stran včetně smluv a dokladů by mělo být pravidelně zveřejňováno na internetu.
81	-1.4213505141	1.2602798567	0.1401109614	0	Povinné přidávání biosložek do paliv by mělo být i nadále zachováno.
82	-1.561059382	-0.6271549404	0.6354144674	0	Sazba DPH na základní potraviny by měla být nejvýše 10 %.
83	1.9192904896	0.1344678585	-0.7378328044	0	Národní podnik Budějovický Budvar by měl být privatizován.
84	-0.2254760395	-0.8225533664	0.0559737647	0.525940964	Soudci by nadále měli být jmenováni do funkce doživotně.
85	-1.4501986729	-0.3868877533	0.4684139848	0.766553969	Finanční podpora místo školek
86	-2.5634651845	0.4685492641	-0.1958030125	0	Obchodní řetězce by měly nabízet povinně předepsaný podíl potravin od českých výrobců.
87	-0.7492864173	0.2598188538	0.137822455	0.7252315778	Spotřební daň z pohoných hmot by se měla snížit alespoň o 2 Kč/litr.
88	-2.1588920405	0.4811199951	0.3680732334	0.0457674052	Regulace ČNB nebankovních společností
89	0.0785559389	1.2401474039	0.6115178504	0.1533025832	Daňové zvýhodnění pro starší lidi
90	-0.4799846936	-0.5232260728	-0.2876314109	0.0072653199	Spotřební daň na alkohol by se měla zvýšit.
	/* 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),
	ellipses = (typeof(ellipses) === "function" ? ellipses(d) : d.ellipses);

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

	//ellipses
	var ellipse = element.selectAll('.ellipse')
	.data(ellipses)
	.enter()
	.append("ellipse")
	.attr("cx", function(d) {
	return xScale(d.x);
	})
	.attr("cy", function(d) {
	return yScale(d.y);
	})
	.attr("rx", function(d) {
	return Math.abs(xScale(d.rx) - xScale(0));
	})
	.attr("ry", function(d) {
	return Math.abs(yScale(d.ry) - yScale(0));
	})
	.attr("transform", function(d) {
	return "rotate("+d.arc+","+xScale(d.x)+","+yScale(d.y)+")";
	})
	.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['width']) != 'undefined') && (d['width'] != ''))
	return Math.max(d.widthd.width16,1);
	else return 2;
	})
	.attr("fill-opacity",function(d) {
	if ((typeof(d['opacity']) != 'undefined') && (d['opacity'] != ''))
	return d.opacity;
	else
	return 0.01;
	})
	.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.075);
	})
	.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 1;
	})
	.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;
	};
	scatterplotwithlineplot.ellipses = function(value) {
	if (!arguments.length) return value;
	ellipses = 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
	};

	}));
id	name	x	y	rx	ry	arc	color	width
top-09	TOP 09	0.1854215	0.1954918	0.6989572061	0.4037292592	-39.44572	#660066	0.3672703364
kdu-csl	KDU-ČSL	-0.3004707	0.2113611	0.6796304755	0.4356661673	-71.46887	yellow	0.2761792896
kscm	KSČM	-0.4130825	-0.4975329	0.4177151959	0.2109323653	36.4545	red	0.4095576882
cssd	ČSSD	-0.5645961	-0.231405	0.5076190755	0.3161001265	48.64932	orange	0.4796483087
sz	Zelení	-0.5796359	-0.2170824	0.4843710714	0.2720517347	-7.494547	green	0.1894399641
svobodni	Svobodní	0.6500235	-0.4048686	0.4310734143	0.1714074449	-61.83275	darkgreen	0.1663580477
ods	ODS	0.4767697	0.2154355	0.6161090918	0.4039229633	-27.25659	darkblue	0.2947032405
pirati	Piráti	-0.1689064	-0.5534283	0.7480496857	0.1139738918	58.58541	black	0.1729884389
ano	ANO	-0.3099298	-0.1321353	0.6659162265	0.4561774633	22.84365	#5f91b3	0.4580529446
	<!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 = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
	<script src="./d3.scatterplotwithlineplotellipses.js"></script>
	<script src="./d3.tips.js"></script>
	<script src="./modernizr.svg.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 {
	margin-top:30px;
	}
	</style>
	</head>
	<body>
	<nav class="navbar navbar-default">
	<div class="container">
	<div class="navbar-header">
	<h2>Spatial distribution of Czech senate candidates from main parties based on their answers in VAA <a href="http://volebnikalkulacka.cz" class="text-success">VolebniKalkulacka.cz</a> before elections 2012-2014</h2>
	</div>
	</div>
	</nav>
	<div id="graphic" style="max-width:500px"></div>
	<div class="alert alert-info">
	<p>Each ellipse represents senate candidates from one political party from elections in 2012 and 2014 (it is 90% prediction interval for the party). Main parties only.
	<p><a href="http://bl.ocks.org/michalskop/8514867">W-PCA</a> model is used, the model is estimated using 10 biggest parties, the other parties and the senate candidates were projected into the model.


	<script type="text/javascript">
	/*
	responsivity based on: http://blog.apps.npr.org/2014/05/19/responsive-charts.html
	*/

	var $graphic = $('#graphic');
	var graphic_data_url = 'data.csv';
	var graphic_data;
	var graphic_aspect_width = 16;
	var graphic_aspect_height = 9;
	var mobile_threshold = 500;

	function drawGraphic() {

	var margin = { top: 10, right: 10, bottom: 30, left: 30 };
	var width = $graphic.width() - margin.left - margin.right;


	var scatterplotwithlineplot = [{
	"data": spdata,
	"margin": margin,
	"axes": {"labels":{"x":"DIM 1", "y":"DIM 2"}},
	"minmax":{"x":{'min':-1,'max':1},"y":{'min':-1,'max':1},"r":{'min':0,'max':1},"rrange":{'min':0,'max':100}},
	"size":{"width":width,"height":width},
	"lines": linesselected,
	"ellipses": ellipses
	}];

	// clear out existing graphics
	$graphic.empty();

	var svg = d3.select("#graphic")
	.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>";
	});

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

	if (Modernizr.svg) { // if svg is supported, draw dynamic chart
	d3.csv("all_data_ten_5.csv", function(voters) {
	d3.csv("cutting_lines_ten.csv", function(lines) {
	d3.csv("ellipses.csv", function(ells) {
	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"]})
	});

	ellipses = ells;

	drawGraphic();
	window.onresize = drawGraphic;

	})
	})
	})
	} else {
	$graphic.html('<img src="chart.png" width="' + $graphic.width() +' alt="client image" id="client_image_preview" />');
	}


	</script>
	</body>
	</html>
	/* Modernizr 2.8.3 (Custom Build) \| MIT & BSD
	* Build: http://modernizr.com/download/#-svg
	*/
	;window.Modernizr=function(a,b,c){function u(a){i.cssText=a}function v(a,b){return u(prefixes.join(a+";")+(b\|\|""))}function w(a,b){return typeof a===b}function x(a,b){return!!~(""+a).indexOf(b)}function y(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:w(f,"function")?f.bind(d\|\|b):f}return!1}var d="2.8.3",e={},f=b.documentElement,g="modernizr",h=b.createElement(g),i=h.style,j,k={}.toString,l={svg:"http://www.w3.org/2000/svg"},m={},n={},o={},p=[],q=p.slice,r,s={}.hasOwnProperty,t;!w(s,"undefined")&&!w(s.call,"undefined")?t=function(a,b){return s.call(a,b)}:t=function(a,b){return b in a&&w(a.constructor.prototype[b],"undefined")},Function.prototype.bind\|\|(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=q.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(q.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(q.call(arguments)))};return e}),m.svg=function(){return!!b.createElementNS&&!!b.createElementNS(l.svg,"svg").createSVGRect};for(var z in m)t(m,z)&&(r=z.toLowerCase(),e[r]=m[z](),p.push((e[r]?"":"no-")+r));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)t(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof enableClasses!="undefined"&&enableClasses&&(f.className+=" "+(b?"":"no-")+a),e[a]=b}return e},u(""),h=j=null,e._version=d,e}(this,this.document);