CZ: Selection of questions in VAA 2013

<!DOCTYPE html>
<html>
  <head>
    <title>circles</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.2.0/journal/bootstrap.min.css">
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.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: .5;
		  stroke-opacity: 0.99;
		  stroke-width: 1;
		  fill: blue;
		  
		}

.ourpoint {
		  fill-opacity: .99;
		  stroke-opacity: 0.99;
		  stroke-width: 1;
		  fill: red;
		  
		}

.zeroline {
		  stroke: #000;
		  stroke-width: 1;
		  stroke-opacity: 1;
		}
		.centerline {
		  stroke: #080;
		  stroke-width: 10;
		  stroke-opacity: 1;
		}
		.estateline {
		  stroke: #080;
		  stroke-width: 3;
		  stroke-opacity: 1;
		}
		.restline {
		  stroke: #444;
		  stroke-width: 3;
		  stroke-opacity: 1;
		}
		.totalline {
		  stroke: #888;
		  stroke-width: 3;
		  stroke-opacity: 1;
		}
		.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">Average distances and deviations of parties using 35 random questions out of 80 in Czech VAA 2013.</a>
        </div>
      </div>
  </nav>
  <div class="alert alert-info">Every point represents one random set of 35 question out of 80 asked.  Actual VAA is in red.</div>
  <div id="chart"></div>
<script>
var margin = {top: 20, right: 20, bottom: 50, left: 50},
    width = 770 - margin.left - margin.right,
    height = 450 - margin.top - margin.bottom;

var x = d3.scale.linear()
    .range([0, width])
    .domain([0.2,0.5]);
var y = d3.scale.linear()
    .range([height, 0])
    .domain([0,0.2]);
    
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 + ")");
    
svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis)
 .append("text")
  .attr("x", x(0.5))
  .attr("dx", "0em")
  .attr("dy", "-1em")
  .style("text-anchor", "end")
  .text("weighted average distance");
  
svg.append("g")
  .attr("class", "y axis")
  .call(yAxis)
 .append("text")
  .attr("transform", "rotate(-90)")
  .attr("y", 6)
  .attr("dy", ".71em")
  .style("text-anchor", "end")
  .text("weighted average deviation");

var line = d3.svg.line()
    .x(
    function(d) { 
    return d[0]; })
    .y(function(d) { return d[1]; });

/*zeroline = Array([x(1.2),y(0)],[x(1.2),y(0.8)]);
svg.append("path")
      .datum(zeroline)
      .attr("class", "zeroline")
      .style("stroke-dasharray", ("3, 3"))
      .attr("d", line);
zeroline = Array([x(1.6),y(0)],[x(1.6),y(0.8)]);
svg.append("path")
      .datum(zeroline)
      .attr("class", "zeroline")
      .style("stroke-dasharray", ("3, 3"))
      .attr("d", line);
zeroline = Array([x(2),y(0)],[x(2),y(0.8)]);
svg.append("path")
      .datum(zeroline)
      .attr("class", "zeroline")
      .style("stroke-dasharray", ("3, 3"))
      .attr("d", line);*/

/*centerline = Array([x(0.37),y(-0.1)],[x(0.37),y(1.1)]);
svg.append("path")
      .datum(centerline)
      .attr("class", "centerline")
      .attr("d", line);*/

/*estateline = Array([x(1.6),y(0.61)],[x(2),y(0.61)]);
svg.append("path")
      .datum(estateline)
      .attr("class", "estateline")
      .attr("d", line);
estateline = Array([x(2),y(0.71)],[x(2.4),y(0.71)]);
svg.append("path")
      .datum(estateline)
      .attr("class", "estateline")
      .attr("d", line);

restline = Array([x(1.2),y(0.535)],[x(1.6),y(0.535)]);
svg.append("path")
      .datum(restline)
      .attr("class", "restline")
      .attr("d", line);

totalline = Array([x(0.8),y(0.55)],[x(2.4),y(0.55)]);
svg.append("path")
      .datum(totalline)
      .attr("class", "totalline")
      .style("stroke-dasharray", ("10, 5"))
      .attr("d", line);

data2 = [
{'x':0.85,'y':-0.02,'name':'Hungarian','color':'#b00'},
{'x':1.32,'y':-0.02,'name':'Rest','color':'#444'},
{'x':1.62,'y':-0.02,'name':'B.Bystrica reg.','color':'#080'},
{'x':2.05,'y':-0.02,'name':'Brezno reg.','color':'#080'}
]
var texts2 = svg.selectAll(".text2")
		.data(data2)
      .enter().append("text")
        //.attr('text-anchor',"middle")
        //.attr('font-family', 'sans-serif')
        .attr('font-size',15)
        .attr('font-weight','bold')
        .attr('fill',function(d) {return d.color;})
        .attr('x',function(d) {return x(d.x);})
        .attr('y',function(d) {return y(d.y);})
        .text(function(d) {return d.name});*/

ourpoint = {"average":0.37, "deviation": 0.132}

arcpoints = [
    {"x":0.34, "y": 0.055},
    {"x":0.38, "y": 0.055},
    {"x":0.43, "y": 0.08},
    {"x":0.44, "y": 0.12},
    {"x":0.44, "y": 0.127}
];

var valueline = d3.svg.line()
    .interpolate("basis")           // <=== THERE IT IS!
    .x(function(d) { return x(d.x); })
    .y(function(d) { return y(d.y); });

coef = .5;
d3.csv('statistics.csv', function(data) {
  var nodes = svg.selectAll(".circle")
    .data(data)
    .enter().append("svg:circle")
    	.attr("cx",  function (d) {return x(d.average)})
    	.attr("cy", function (d) {return y(d.deviation);})
    	.attr("r", function (d) {return 3;})
    	//.attr("stroke-width", function(d) {return d.r2})
    	.attr("class", function(d) {return "circle"})
    	.attr("title", function(d) {return d.average + ":" + d.deviation});
        
    svg.append("circle")
      .datum(ourpoint)
      .attr("class", "ourpoint")
      .attr("cx",  function (d) {return x(d.average)})
      .attr("cy", function (d) {return y(d.deviation);})
      .attr("r", 20);    
      
    svg.append("path")
        .attr("class","centerline")
        .attr("d", valueline(arcpoints))
        .attr("fill", "none");    
});

</script>
  </body>
</html>

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

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

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

https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js