SK: Comparison of presidential candidates 2014

Comparison of presidential candidates, SK 2014

Based on answers from http://VolebnaKalkulacka.sk

Values between 0 and 100.

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  .rect:hover, .hover {
    fill-opacity: .6;
    cursor: pointer;
  }
  .domain {
    display: none;
  }
  .tick {
    font-family: sans-serif;
  }
  .descr {
    cursor: pointer;
    fill: black;
    font-family: sans-serif;
  }
  .hoverBold {
    font-weight: bold;
  }
  .middle-rect {
    fill: #aaa;
  }
  
  #table-wrapper{
    position: absolute;
    height: 470px;
    z-index: 1000;
    overflow-x: hidden;
    overflow-y: scroll;
    top: 25px;
    left: 100px;
    width: 370px;
    border:2px solid;
    border-radius:25px;
  }
    #detail-table {
        background: none repeat scroll 0 0 #FFFFFF;
        border: 0 none;
        border-radius: 6px;
        font: 12px sans-serif;
        padding: 5px;
        text-align: left
    }
    #detail-table > thead {
       font-size: 1.25em;
       padding: .25em 0 .25em 0;
    }
</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.0.js"></script>

//using https://datasklad.ihned.cz/programova-shoda/

var margin = {top: 20, right: 20, bottom: 30, left: 50},
    padding = {top: 100, right: 0, bottom: 0, left: 100},
    width = 960 - margin.left - margin.right - padding.left - padding.right,
    height = 500 - margin.top - margin.bottom - padding.top - padding.bottom;
    item = {padding: 0.2}

var x = d3.scale.linear()
    .range([0, Math.min(width,height)]);

var y = d3.scale.linear()
    .range([0,Math.min(width,height)]);
    
var color = d3.scale.linear()
    .domain([0, 35, 55, 75, 100])
    .range(["#880000", "red", "yellow", "green", "green"]);
    
    mpleft = margin.left+padding.left;
    mptop = margin.top+padding.top;

$(function(){
  $("#table-wrapper").hide();
});

$(function(){var svg = d3.select("#viz").append("svg")
    .attr("width", width + margin.left + margin.right + padding.left + padding.right)
    .attr("height", height + margin.top + margin.bottom + padding.top + padding.bottom)
  .append("g")
    .attr("transform", "translate(" + mpleft + "," + mptop + ")");

d3.csv("matrix.csv", function(error, data) {
  //questions
  d3.csv("questions.csv", function(qerror, qdata) {
    d3.csv("matrixdb.csv", function(dberror, dbdata) {
      //number of categories:
      ocategory = Object();
      data.forEach(function(d) {
        ocategory[d['i1']] = d;
      })
      var category = Array();
      category4data = Object();
      category1 = Array();
      i = 0;
      for (key in ocategory){
        category.push(i);
        category4data[key] = i;
        category1.push(ocategory[key]['name1'])
        i++;
      }
      
      for (key in data) {
        data[key]['id1'] = category4data[data[key]['i1']];
        data[key]['id2'] = category4data[data[key]['i2']];
      }

ncat = category.length;
      
      category1.push('');
      
      //size of item:
      item['size'] = Math.floor(Math.min(width,height)/ncat);
      item['innersize'] = Math.floor(item['size']*(1-item['padding']));
      
      //domains:
      x.domain([0,ncat]);
      y.domain([0,ncat]);
      
        var scale = d3.scale.ordinal()
	        .domain(category1)
	        .rangePoints([0, Math.floor(Math.min(width,height))])

//axes
        var xAxis = d3.svg.axis()
		        .scale(scale)
		        .orient("bottom")

var yAxis = d3.svg.axis()
		        .scale(scale)
		        .orient("right")
      
      //axes content
      var xaxisContent = svg.append("g")
		    .attr("class", "x axis")
		    .attr("transform", "translate(0,-"+ padding.top/2 +")")
		    .attr("font-size", function () {return Math.floor(item['innersize']*.5)+"px"})
		    .call(xAxis);
		
	    svg.selectAll("g.axis text")
		    .attr("transform", "rotate(-90)");
5
      var yaxisContent = svg.append("g")
	        .attr("class", "y axis")
	        .attr("transform", "translate(-" + padding.left + ","+item['size']/2+")")
	        .attr("font-size", function () {return Math.floor(item['innersize']*.5)+"px"})
	        .call(yAxis)
      
      //create rects
      var rect = svg.selectAll(".rect")
          .data(data)
        .enter().append("g")
          .on("mouseover", function (d, i) {
            icko = i
            svg.selectAll(".rect")
			    .filter(function (d, i) {
				    return ((i % ncat) == (icko % ncat) || Math.floor(i/ ncat) == Math.floor(icko / ncat) ) 
			    })
			    .attr("class", "rect hover")
	        yaxisContent.selectAll("text")
			    .filter(function(d, i) {
				    return ((i % ncat) == (icko % ncat))
			    })
			    .attr("class", "hoverBold")

xaxisContent.selectAll("text")
			    .filter(function(d, i) {
				    return (i == Math.floor(icko / ncat))
			    })
			    .attr("class", "hoverBold")	
          })
          .on("mouseout", function (d, i) {
		    icko = i
		    svg.selectAll(".rect")
			    .filter(function (d, i) {
				    return ((i % ncat) == (icko % ncat) || Math.floor(i/ ncat) == Math.floor(icko / ncat) ) 
			    })
			    .attr("class", "rect")
		    yaxisContent.selectAll("text")
			    .filter(function(d, i) {
				    return ((i % ncat) == (icko % ncat))
			    })
			    .attr("class", "")

xaxisContent.selectAll("text")
			    .filter(function(d, i) {
				    return (i == Math.floor(icko / ncat))
			    })
			    .attr("class", "")	
          })
          .on("click", function(d,i) {
            showTable(d,category4data,qdata,dbd);
          })
      
      rect.append("rect")
          .attr("x",function(d) {return x(d.id1);})
          .attr("y",function(d) {return y(d.id2);})
          .attr("width",item['innersize'])
          .attr("height",item['innersize'])
          .style("fill",function(d) {return color(d.val);})
          .attr("class","rect");
      
      //add text inside
      rect.append("text")
		    .attr("text-anchor", "middle")
		    .text(function (d, i) {
			        return d.val;
		    })
		    .attr("x", function(d, i) {
			    return x(d.id1) + item['innersize']/2;
		    })
		    .attr("y", function(d, i) {
			    return y(d.id2) +  item['innersize']/2 + (item['size'] - item['innersize'])/2;
		    })
		    .attr("class","descr")
		    .attr("font-size", function () {return Math.floor(item['innersize']*.5)+"px"})
		    .on("mouseover", function (d,i) {
		       
		    });
		
      //middle rects		
      var grayrect = svg.selectAll(".grayrect")
          .data(category)
        .enter().append("rect")
          .attr("x",function(d) {
            return x(d);
          })
          .attr("y",function(d) {return y(d);})
          .attr("width",item['innersize'])
          .attr("height",item['innersize'])
          .attr("class",'middle-rect')
          ;
          
      //reorder dbdata
      dbd = Object();
      dbdata.forEach(function(d) {
        if (typeof dbd[d.question_id] === 'undefined')
          dbd[d.question_id] = Object();
        dbd[d.question_id][d.mp_id] = d.vote
      });
      
    })
  })
}); 
});

function showTable(d,category4data,qdata,dbd) {
  $('#table-name1').html(d.name2);
  $('#table-name2').html(d.name1);
  html = '';
  for(key in qdata){
    html = html + '<tr><td style="background-color:#B0B0B0">' + qdata[key].question + '</td>' + num2word(dbd[qdata[key].id][d.i2]) +  num2word(dbd[qdata[key].id][d.i1]) + '</td></tr>';
  }
  $("#detail-table>tbody").html(html);
  $("#table-wrapper").show(200);
}

function num2word(n) {
  if (n == 1) return '<td style="background-color:#33FF00;text-align:center">Áno</td>';
  if (n == -1) return '<td style="background-color:#FF3300;text-align:center">Nie</td>';
  return '<td style="background-color:#B0B0B0 ;text-align:center">-</td>';
}

function hideTable() {
  $("#table-wrapper").hide(500);
}

</script>

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

</script>

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

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

https://code.jquery.com/jquery-1.11.0.js