Based on answers from http://VolebnaKalkulacka.sk
Values between 0 and 100.
forked from michalskop's block: SK: Comparison of presidential candidates 2014
forked from anonymous's block: SK: Comparison of presidential candidates 2014
xxxxxxxxxx
<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>
<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>
<div>
<div id="viz"></div>
<div id="table-wrapper">
<a style='float:left;position:absolute;' onclick="hideTable();" href="#"><img src="./close.png" title="close" alt="close"></a>
<table id="detail-table">
<colgroup><col width="300"><col width="70"><col width="70"></colgroup>
<thead>
<tr>
<th></th>
<th id="table-name1"></th>
<th id="table-name2"></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
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