Czech presidential elections

Czech presidential elections 2013 2nd round (towns with population 20000+) Illustration based on results from Czech presidential elections 2013 (2nd round). Showing: delay, proper size of circle stroke calculation (r, r2), tooltips

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Czech Republic - presidential election 2013 2nd round</title>
  <link rel="stylesheet" type="text/css" href="president_2013_ring.css" />
</head>
<body>
  <h1>Czech Republic - presidential election 2013 2nd round</h1>
  
  <p id="chart_cz"></p>
  <p>Hlasy <span class="zeman">M. Zemana</span> a <span class="schwarzenberg">K. Schwarzenberga</span>. Plocha barevného kruhu odpovídá rozdílu počtu hlasů. (Velikost vnitřního (prázdného) kruhu je dle počtu hlasů kandidáta na 2. místě, celý kruh je dle počtu hlasů kandidáta na 1. místě)</p>
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <script type="text/javascript">
  
  //subcharts' specifications
	var specs = {i: 0, name: 'chart_cz', width: 900, height: 502, lngMin: 12.156, lngMax: 18.84, latMin: 48.6, latMax: 51.023, file: 'cz_president_2013_both_2_ring_20000.json', max_population: 1120000, max_size: 100};

// Chart dimensions.
	var margin = {top: 0, right: 0, bottom: 0, left: 0},
		width = specs.width - margin.right,
		height = specs.height - margin.top - margin.bottom;
		
	//Various scales. These domains make assumptions of data, naturally.
	var   xScale = d3.scale.linear().domain([specs.lngMin, specs.lngMax]).range([0, width]),
		yScale = d3.scale.linear().domain([specs.latMin, specs.latMax]).range([height, 0]),
		radiusScale = d3.scale.sqrt().domain([0, specs.max_population]).range([0, specs.max_size]);

// Create the SVG container and set the origin.
	var svg = d3.select("#"+specs.name).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 + ")");
	
	
	// Add tooltip div
    var div = d3.select("body").append("div")
    .attr("class", "tooltip")
    .style("opacity", 1e-6);
	
	
	// Load the data.
	d3.json(specs.file, function(data) {
	  var nodes = data.features
		.map(function(d) {
		  return {
			x: xScale(d.coordinates[0]),
			y: yScale(d.coordinates[1]),
			r: (radiusScale(d.population.p6)+radiusScale(d.population.p9))/2,
			r2: Math.abs(radiusScale(d.population.p9)-radiusScale(d.population.p6)),
			title: d.name + ': ' + d.winner + ' vyhrál ' + Math.max(d.population.p6,d.population.p9) + ':' + Math.min(d.population.p6,d.population.p9),
			name: d.name,
			id: d.id,
			population: d.population,
			classname: d.classname
		  };
		});

//enter data
	var circles = svg.selectAll("circle").data(nodes);
    circles
		.enter().append("circle")
	    .attr("r",function(d) {return d.r;})
			.attr("stroke-width", function(d) {return d.r2;})
			.attr("cx", function(d) {return d.x;})
			.attr("cy", function(d) {return d.y;})
			.attr("class", function(d) {return d.classname})
			.on("mouseover", mouseover)
		        .on("mousemove", function(d){mousemove(d);})
		        .on("mouseout", mouseout)	
    
    //delay needs to be done this way (or similar)
    // see https://stackoverflow.com/questions/5226285/settimeout-in-a-for-loop-and-pass-i-as-value
     var delay = 0;       
     for (var j=0;j<nodes.length;j++) {
       (function(k) {setTimeout(function(){
            animateFirstStep(d3.selectAll("circle").filter(function(d,i) { return (k==i); }));
	      },delay);
	      delay += Math.max(50*nodes[k].r,5);  
       })(j);
     }

//animation 
    function animateFirstStep(selected){
			selected
			  .transition()            
				.delay(0)            
				.duration(function(d) { return Math.min(1000,d.r*50);})
				.attr("r", function(d) {
				  return Math.max(2*d.r,10);
				})
				.each("end", animateSecondStep);
		};

function mousemove(d) {
        div
        .text(d.title)
        .style("left", (d3.event.pageX ) + "px")
        .style("top", (d3.event.pageY) + "px");
    }

function mouseout() {
        div.transition()
        .duration(300)
        .style("opacity", 1e-6);
    }
	
  </script>
</body>
</html>

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

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