The charts prepared for the article "Measures of Differentiation among Candidates as an Indicator of the Quality of Voting Advice Applications": https://docs.google.com/document/d/1KVTso9cdwvCxhPC3bEp8rAEY_7v3gWvCzHNYVOjcMR8/edit
Includes Wahl-O-Mat (Germany) 2005, 2009, 2013; StemWijzer (Netherlands) 2006, 2010, 2012; and Volební kalkulačka (Czech Republic) 2013
xxxxxxxxxx
<html lang="en">
<head>
<meta charset="utf-8">
<title>Chart</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="plot">
<meta name="author" content="Michal Škop">
<link rel="stylesheet" href="//cdn.bootcss.com/bootswatch/3.3.5/journal/bootstrap.min.css">
<script src="//cdn.bootcss.com/d3/3.5.6/d3.min.js"></script>
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- <script src="./modernizr.svg.js"></script>-->
<script src="//cdn.bootcss.com/modernizr/2.8.3/modernizr.min.js"></script>
<script src="./d3.boxesplot.js"></script>
<style type="text/css">
text {
font-family: sans-serif;
}
.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: 15px;
}
.axis {
}
rect, circle {
fill-opacity: .15;
stroke-opacity: 0.99;
stroke-width: 1;
fill: blue;
}
.line {
/*stroke: #000;*/
stroke-width: 2;
stroke-opacity: 1;
}
.centerline {
stroke: #888;
stroke-width: 3;
stroke-opacity: 1;
}
.deviationline {
stroke: #888;
stroke-width: 2;
stroke-opacity: 1;
stroke-dasharray: 5,5;
}
.label {
font-family: sans-serif;
font-size: 15px;
}
.center, .madari {
fill: #b00;
stroke: #b00;
}
.estate, .banska-bystrica, .brezno {
fill: #080;
stroke: #080;
}
</style>
</head>
<body>
<nav class="navbar navbar-default" role=navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand">Distances of parties in Czech VAA 2013</a>
</div>
</div>
</nav>
<div class="alert alert-info">Every rectangle represents one pair of parties. The <strong>size</strong> of rectangles represents number of voters for the 2 parties.</div>
<div id="chart"></div>
<script>
var $chart = $('#chart');
function drawGraphic() {
// clear out existing graphics
$chart.empty();
var margin = { top: 10, right: 30, bottom: 30, left: 40 };
var width = $chart.width() - margin.left - margin.right;
var boxesplot = [{
"data": xdata,
"size": {
"width": width,
"height": 2/7*width
},
"lines": {"mean":0.3715520140531649,"dev":0.13}
}];
var svg = d3.select("#chart")
.append("svg")
.attr("width",boxesplot[0]['size']['width'])
.attr("height",boxesplot[0]['size']['height']);
var bp = d3.boxesplot()
.data(function(d) {return d.data})
.size(function(d) {return d.size})
.lines(function(d) {return d.lines});
svg.selectAll(".boxesplot")
.data(boxesplot)
.enter()
.append("svg:g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.call(bp);
}
if (Modernizr.svg) { // if svg is supported, draw dynamic chart
d3.csv("vaa-cz-psp-2013-parties-answers_distances_selected.csv", function(data) {
xdata = data;
drawGraphic();
window.onresize = drawGraphic;
})
}
</script>
</body>
</html>
https://cdn.bootcss.com/d3/3.5.6/d3.min.js
https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js
https://cdn.bootcss.com/modernizr/2.8.3/modernizr.min.js