block by michalskop 4688352

Czech presidential elections

Full Screen

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

index.html

<!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>
  <!-- chart -->
  <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="//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 //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 animateSecondStep(){
			d3.select(this)
			  .transition()
				.duration(function(d) { return Math.min(1000,d.r*50);})
				.attr("r", function(d) {
				  return 0;//d.r;
				})		
		};
			
	});	
	
    //tooltips animations
    function mouseover() {
      div.transition()
       .duration(300)
       .style("opacity", 1);
    }

    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>

cz_president_2013_both_2_ring_20000.json

{"features":[{"id":"554782","coordinates":["14.421111","50.087106"],"name":"Praha","population":{"p6":200472,"p9":389250},"winner":"Schwarzenberg","classname":"schwarzenberg"},{"id":"582786","coordinates":["16.606085","49.193816"],"name":"Brno","population":{"p6":85372,"p9":99828},"winner":"Schwarzenberg","classname":"schwarzenberg"},{"id":"554821","coordinates":["18.291581","49.841743"],"name":"Ostrava","population":{"p6":92460,"p9":50317},"winner":"Zeman","classname":"zeman"},{"id":"554791","coordinates":["13.377767","49.748147"],"name":"Plze\u0148","population":{"p6":39708,"p9":46898},"winner":"Schwarzenberg","classname":"schwarzenberg"},{"id":"500496","coordinates":["17.251466","49.593699"],"name":"Olomouc","population":{"p6":24988,"p9":23406},"winner":"Zeman","classname":"zeman"},{"id":"563889","coordinates":["15.058251","50.769002"],"name":"Liberec","population":{"p6":19796,"p9":26814},"winner":"Schwarzenberg","classname":"schwarzenberg"},{"id":"554804","coordinates":["14.036975","50.660316"],"name":"\u00dast\u00ed nad Labem","population":{"p6":21011,"p9":16025},"winner":"Zeman","classname":"zeman"},{"id":"544256","coordinates":["14.47439","48.973841"],"name":"\u010cesk\u00e9 Bud\u011bjovice","population":{"p6":20743,"p9":24813},"winner":"Schwarzenberg","classname":"schwarzenberg"},{"id":"569810","coordinates":["15.837246","50.21233"],"name":"Hradec Kr\u00e1lov\u00e9","population":{"p6":22766,"p9":26504},"winner":"Schwarzenberg","classname":"schwarzenberg"},{"id":"555134","coordinates":["15.778958","50.039049"],"name":"Pardubice","population":{"p6":22347,"p9":21501},"winner":"Zeman","classname":"zeman"},{"id":"555088","coordinates":["18.422702","49.783083"],"name":"Hav\u00ed\u0159ov","population":{"p6":25562,"p9":8568},"winner":"Zeman","classname":"zeman"},{"id":"585068","coordinates":["17.665842","49.226624"],"name":"Zl\u00edn","population":{"p6":18574,"p9":20086},"winner":"Schwarzenberg","classname":"schwarzenberg"},{"id":"532053","coordinates":["14.102998","50.147821"],"name":"Kladno","population":{"p6":15379,"p9":13052},"winner":"Zeman","classname":"zeman"},{"id":"567027","coordinates":["13.640524","50.502867"],"name":"Most","population":{"p6":16166,"p9":8903},"winner":"Zeman","classname":"zeman"},{"id":"598917","coordinates":["18.542995","49.853942"],"name":"Karvin\u00e1","population":{"p6":18889,"p9":4037},"winner":"Zeman","classname":"zeman"},{"id":"505927","coordinates":["17.90251","49.938873"],"name":"Opava","population":{"p6":15536,"p9":11415},"winner":"Zeman","classname":"zeman"},{"id":"598003","coordinates":["18.350637","49.685506"],"name":"Fr\u00fddek-M\u00edstek","population":{"p6":16788,"p9":8719},"winner":"Zeman","classname":"zeman"},{"id":"562335","coordinates":["14.195645","50.773765"],"name":"D\u011b\u010d\u00edn","population":{"p6":11711,"p9":8779},"winner":"Zeman","classname":"zeman"},{"id":"567442","coordinates":["13.824423","50.641389"],"name":"Teplice","population":{"p6":11004,"p9":8989},"winner":"Zeman","classname":"zeman"},{"id":"586846","coordinates":["15.591191","49.396014"],"name":"Jihlava","population":{"p6":14226,"p9":10721},"winner":"Zeman","classname":"zeman"},{"id":"562971","coordinates":["13.410816","50.462475"],"name":"Chomutov","population":{"p6":11777,"p9":6526},"winner":"Zeman","classname":"zeman"},{"id":"554961","coordinates":["12.865922","50.228046"],"name":"Karlovy Vary","population":{"p6":9910,"p9":11805},"winner":"Schwarzenberg","classname":"schwarzenberg"},{"id":"511382","coordinates":["17.446161","49.453653"],"name":"P\u0159erov","population":{"p6":13819,"p9":7434},"winner":"Zeman","classname":"zeman"},{"id":"589250","coordinates":["17.109298","49.471944"],"name":"Prost\u011bjov","population":{"p6":13028,"p9":7940},"winner":"Zeman","classname":"zeman"},{"id":"563510","coordinates":["15.171279","50.724523"],"name":"Jablonec nad Nisou","population":{"p6":9114,"p9":11243},"winner":"Schwarzenberg","classname":"schwarzenberg"},{"id":"535419","coordinates":["14.903544","50.412332"],"name":"Mlad\u00e1 Boleslav","population":{"p6":9123,"p9":9220},"winner":"Schwarzenberg","classname":"schwarzenberg"},{"id":"590266","coordinates":["15.878082","49.215584"],"name":"T\u0159eb\u00ed\u010d","population":{"p6":11309,"p9":7871},"winner":"Zeman","classname":"zeman"},{"id":"561380","coordinates":["14.53793","50.68659"],"name":"\u010cesk\u00e1 L\u00edpa","population":{"p6":8472,"p9":5608},"winner":"Zeman","classname":"zeman"},{"id":"598810","coordinates":["18.672753","49.677715"],"name":"T\u0159inec","population":{"p6":9775,"p9":5050},"winner":"Zeman","classname":"zeman"},{"id":"552046","coordinates":["14.657882","49.414129"],"name":"T\u00e1bor","population":{"p6":8860,"p9":8445},"winner":"Zeman","classname":"zeman"},{"id":"593711","coordinates":["16.048628","48.855449"],"name":"Znojmo","population":{"p6":10258,"p9":6224},"winner":"Zeman","classname":"zeman"},{"id":"539911","coordinates":["14.010561","49.6892"],"name":"P\u0159\u00edbram","population":{"p6":8509,"p9":7446},"winner":"Zeman","classname":"zeman"},{"id":"599069","coordinates":["18.426842","49.871854"],"name":"Orlov\u00e1","population":{"p6":10243,"p9":2275},"winner":"Zeman","classname":"zeman"},{"id":"579025","coordinates":["15.916048","50.561696"],"name":"Trutnov","population":{"p6":7237,"p9":6941},"winner":"Zeman","classname":"zeman"},{"id":"554481","coordinates":["12.371099","50.079044"],"name":"Cheb","population":{"p6":7287,"p9":4585},"winner":"Zeman","classname":"zeman"},{"id":"533165","coordinates":["15.201039","50.028746"],"name":"Kol\u00edn","population":{"p6":8512,"p9":6070},"winner":"Zeman","classname":"zeman"},{"id":"549240","coordinates":["14.147326","49.308782"],"name":"P\u00edsek","population":{"p6":7214,"p9":7343},"winner":"Schwarzenberg","classname":"schwarzenberg"},{"id":"588296","coordinates":["17.392929","49.297851"],"name":"Krom\u011b\u0159\u00ed\u017e","population":{"p6":8341,"p9":5927},"winner":"Zeman","classname":"zeman"},{"id":"541630","coordinates":["17.993587","49.338041"],"name":"Vset\u00edn","population":{"p6":7048,"p9":5091},"winner":"Zeman","classname":"zeman"},{"id":"523704","coordinates":["16.970455","49.965324"],"name":"\u0160umperk","population":{"p6":7509,"p9":5189},"winner":"Zeman","classname":"zeman"},{"id":"545058","coordinates":["17.970583","49.471163"],"name":"Vala\u0161sk\u00e9 Mezi\u0159\u00ed\u010d\u00ed","population":{"p6":6009,"p9":4922},"winner":"Zeman","classname":"zeman"},{"id":"567256","coordinates":["13.611726","50.598837"],"name":"Litv\u00ednov","population":{"p6":5645,"p9":3644},"winner":"Zeman","classname":"zeman"},{"id":"586021","coordinates":["17.128363","48.84832"],"name":"Hodon\u00edn","population":{"p6":7292,"p9":3986},"winner":"Zeman","classname":"zeman"},{"id":"592005","coordinates":["17.460571","49.067927"],"name":"Uhersk\u00e9 Hradi\u0161t\u011b","population":{"p6":6922,"p9":6077},"winner":"Zeman","classname":"zeman"},{"id":"598933","coordinates":["18.625598","49.746341"],"name":"\u010cesk\u00fd T\u011b\u0161\u00edn","population":{"p6":6988,"p9":3573},"winner":"Zeman","classname":"zeman"},{"id":"597520","coordinates":["17.701973","50.090522"],"name":"Krnov","population":{"p6":7193,"p9":3311},"winner":"Zeman","classname":"zeman"},{"id":"584291","coordinates":["16.880729","48.75896"],"name":"B\u0159eclav","population":{"p6":6998,"p9":4415},"winner":"Zeman","classname":"zeman"},{"id":"599191","coordinates":["18.010388","49.594369"],"name":"Nov\u00fd Ji\u010d\u00edn","population":{"p6":6436,"p9":4174},"winner":"Zeman","classname":"zeman"},{"id":"560286","coordinates":["12.643671","50.179547"],"name":"Sokolov","population":{"p6":5634,"p9":3513},"winner":"Zeman","classname":"zeman"},{"id":"564567","coordinates":["14.131442","50.533538"],"name":"Litom\u011b\u0159ice","population":{"p6":5876,"p9":5364},"winner":"Zeman","classname":"zeman"},{"id":"568414","coordinates":["15.578583","49.606578"],"name":"Havl\u00ed\u010dk\u016fv Brod","population":{"p6":7265,"p9":4856},"winner":"Zeman","classname":"zeman"},{"id":"571164","coordinates":["15.795575","49.951092"],"name":"Chrudim","population":{"p6":6186,"p9":5491},"winner":"Zeman","classname":"zeman"},{"id":"599565","coordinates":["18.14716","49.597824"],"name":"Kop\u0159ivnice","population":{"p6":6232,"p9":3908},"winner":"Zeman","classname":"zeman"},{"id":"550787","coordinates":["13.901639","49.261221"],"name":"Strakonice","population":{"p6":6062,"p9":5054},"winner":"Zeman","classname":"zeman"},{"id":"599051","coordinates":["18.3581","49.904"],"name":"Bohum\u00edn","population":{"p6":6892,"p9":2210},"winner":"Zeman","classname":"zeman"},{"id":"595209","coordinates":["15.936123","49.564997"],"name":"\u017d\u010f\u00e1r nad S\u00e1zavou","population":{"p6":7895,"p9":4296},"winner":"Zeman","classname":"zeman"},{"id":"555771","coordinates":["13.292941","49.394639"],"name":"Klatovy","population":{"p6":5566,"p9":5264},"winner":"Zeman","classname":"zeman"},{"id":"545881","coordinates":["15.001932","49.147091"],"name":"Jind\u0159ich\u016fv Hradec","population":{"p6":5801,"p9":4848},"winner":"Zeman","classname":"zeman"},{"id":"592889","coordinates":["16.998987","49.277268"],"name":"Vy\u0161kov","population":{"p6":7088,"p9":3405},"winner":"Zeman","classname":"zeman"},{"id":"563099","coordinates":["13.447754","50.500469"],"name":"Jirkov","population":{"p6":4480,"p9":2249},"winner":"Zeman","classname":"zeman"},{"id":"533955","coordinates":["15.269119","49.948394"],"name":"Kutn\u00e1 Hora","population":{"p6":5400,"p9":4435},"winner":"Zeman","classname":"zeman"},{"id":"573868","coordinates":["16.16386","50.416326"],"name":"N\u00e1chod","population":{"p6":4367,"p9":5287},"winner":"Schwarzenberg","classname":"schwarzenberg"},{"id":"581283","coordinates":["16.643754","49.363493"],"name":"Blansko","population":{"p6":6711,"p9":3877},"winner":"Zeman","classname":"zeman"}]}

president_2013_ring.css

#chart_cz {
  height: 502px;/*502*/
  width: 900px;
  border: 1px solid;
  background-color: black;
}

div.tooltip 
{
    position: absolute;
    text-align: center;
    width: 140px;
    height: 25px;
    padding: 8px;
    font: 10px sans-serif;
    background: #ffff99;
    border: solid 1px #aaa;
    border-radius: 8px;
    pointer-events: none;
}

circle {
  fill: #888;
  fill-opacity: 0.01;
  stroke-opacity: 0.75;
}

.dienstbier {
  stroke: #ffa500;
  color: #ffa500;
  fill: none;
}
.sobotka {
  stroke: #008;
  color: #008;
  fill: none;
}
.roithova {
  stroke: #ff0;
  color: #ff0;
  fill: none;
}
.fischerova {
  stroke: #0a0;
  color: #0a0;
  fill: none;
}
.franz {
  stroke: #000;
  color: #000;
  fill: none;
}
.schwarzenberg {
  stroke: #f0f;
  color: #f0f;
  fill: #f0f;
}
.zeman {
  stroke: #f00;
  color: #f00;
  fill: #f00;
}
.bobosikova {
  stroke: #ff4;
  color: #ff4;
  fill: none;
}
.fischer {
  stroke: #00f;
  color: #00f;
  fill: none;
}