Distances in VAAs

Charts of Distributions of Candidates or Parties in VAAs

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

<!DOCTYPE html>
<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="//cdn.bootcss.com/modernizr/2.8.3/modernizr.min.js"></script>
    <script src="./d3.boxesplot.js"></script>

.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');

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