SK: Spatial distribution of presidential candidates 2014

Spatial distribution of presidential candidates, SK 2014

Based on answers from http://VolebnaKalkulacka.sk using Weighted PCA method as described here: https://gist.github.com/michalskop/8514867

Cutting lines with loss function 0 (no errors, perfect cut) are shown.

<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
  font: 12px sans-serif;
}
.point {
  fill: #1F77B4;
  stroke: #1F77B4;
  fill-opacity: .3;
  stroke-width: 1.5px;
  stroke-opacity: 1;
}
g.active .point {
  fill-opacity: .9;
}

g.active .name {
  font-weight: bold;
}

.line-text {
  font: 10px sans-serif;
}

g.active .line-text {
  font-weight: bold;
  cursor: default;
}
g.active line {
  stroke-width: 4
}

.name {
  fill: blue;
  font-family: sans-serif;
  cursor: default;
}

line {
 stroke:gray;
 stroke-width:2;
 opacity: .15;
}

.quality-1 line {
  stroke-dasharray:10,10
}

.area {
    visibility: hidden;
}

g.active .area {
    opacity: .15;
    visibility: visible;
}

g.active .yes {
  fill: green;
}
g.active .no {
  fill: red;
}
g.yes circle {
  stroke: green;
}
g.no circle {
  stroke: red;
}

</style>
<div id="chart"></div>
<script src="https://d3js.org/d3.v3.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
var margin = {top: 20, right: 30, bottom: 30, left: 30},
    width = 500 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x = d3.scale.linear()
    .range([0, width])
    .domain([-2.5,2.5]);
var y = d3.scale.linear()
    .range([height, 0])
    .domain([-2.5,2.5]);
    
    
var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");
var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");
    
 var svg = d3.select("#chart").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    
d3.csv("wpca_candidates.csv", function(error, data) {

limits = {"x": [-2.5,2.5],"y": [-2.5,2.5]};

lines = [{
        'a':0,
        'b':-1.06,
        'd1':-2.053,
        'd2':-1.93,
        'id': 1,
       'description':'Možnosť vyhlásiť amnestiu'},
       {
       'a': 0.145,
       'b': -0.177,
       'd1':0.37,
       'd2':2.07,
       'description':'Imunita prezidenta'},
       {
        'a': 0.335,
        'b': 2.7665358349,
        'd1': 1.54,
        'd2': -0.56,
       'description':'Zákaz interupcií'},
        {
        'a': -1.019,
        'b': 2.142,
        'd1':-2.1,
        'd2':0.98,
       'description':'Registrované partnerstvo'},
        {
        'a': 3.99,
        'b': -2.87,
        'd1':-0.85,
        'd2':-0.3,
       'description':'Kotleba pozývaný ako iní župani'},         
       {
        'a': -0.27,
        'b': -0.21,
        'd1':0.33,
        'd2':1.6,
       'description':'Obch. vzťahy x ľudská práva'},
       {
        'a': 2.6613760408,
        'b': -2.5781557199,
        'd1':-0.16,
        'd2':-0.06,
        'description':'Rómčina',
        'quality':1 },
       {
        'a': 6.38,
        'b': -3.16,
        'd1':-0.33,
        'd2':-0.1,
       'description':'Voľby cez internet'},
       {
        'a': -2.5817095387,
        'b': 21.1590242094,
        'd1':-0.49199217,
        'd2':0.02325212,
        'description':'Maďarčina - stejné postavenie',
        'quality': 1
        },
       ];
       
  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].d1,lines[k].d2);
    lines[k].path =[corners(lines[k],limits,way),corners(lines[k],limits,-1*way)];
  }

//explanation: https://code.hazzens.com/d3tut/lesson_3.html

function dehighlight_persons(index) {
  $(".candidate").attr('class','candidate');
}

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 get_sign(b,d1,d2) {
  t = b*d1-d2;
  if (t > 0) return 1;
  if (t < 0) return -1;
  return 0;
}

function sign(x) {
    return typeof x === 'number' ? x ? x < 0 ? -1 : 1 : x === x ? 0 : NaN : NaN;
}      
</script>

ga('create', 'UA-8592359-13', 'ocks.org');
      ga('send', 'pageview');

</script>

Modified http://d3js.org/d3.v3.js to a secure url

Modified http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js to a secure url

https://d3js.org/d3.v3.js

https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js