block by michalskop 7317516

Czech elections 2013

Full Screen

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>ČR</title>
  <link rel="stylesheet" type="text/css" href="psp_2013.css" />
</head>
<body>
  <h1>Czech Republic, general elections 2013</h1>
  <!-- chart -->
  <p id="chart_cz"></p>
  <p></p>
  <script src="//d3js.org/d3.v3.min.js"></script>
  <script type="text/javascript">
  
  //subcharts' specifications
	//load specs from 
	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_psp_2013.json', max_population: 1120000, max_size: 80}; 
	//var shorts = {$shorts};
	
	// 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]);
	
a=1;
	// Create the SVG container and set the origin.
a=1;
// 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) {
	  nodes = data.features
		.map(function(d) {
		  return {
			x: xScale(d.coordinates[0]),
			y: yScale(d.coordinates[1]),
			r: radiusScale(d.population),
			title: d.name + ': ' + d.winner + ' (' + d.population + ')',
			name: d.name,
			id: d.id,
			/*winner: d.properties.winner,*/
			population: d.population,
			classname: d.classname
		  };
		});

	  var circle = svg.selectAll("circle")
		.data(data);
	
	  var node = svg.selectAll("circle")
	  		.data(nodes)
		.enter().append("circle")
			.attr("r",function(d) {
			  return d.r;
			})
			.attr("cx", function(d) {return d.x;})
			.attr("cy", function(d) {return d.y;})
			//.attr("title", function(d) {return d.title;}) 
			.attr("class", function(d) {return d.classname})
			.on("mouseover", mouseover)
            .on("mousemove", function(d){mousemove(d);})
            .on("mouseout", mouseout)	  
	});	
	
    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);
            }
	
	function in_array (needle, haystack, argStrict) {
	  // //kevin.vanzonneveld.net
	  // +   original by: Kevin van Zonneveld (//kevin.vanzonneveld.net)
	  // +   improved by: vlado houba
	  // +   input by: Billy
	  // +   bugfixed by: Brett Zamir (//brett-zamir.me)
	  // *     example 1: in_array('van', ['Kevin', 'van', 'Zonneveld']);
	  // *     returns 1: true
	  // *     example 2: in_array('vlado', {0: 'Kevin', vlado: 'van', 1: 'Zonneveld'});
	  // *     returns 2: false
	  // *     example 3: in_array(1, ['1', '2', '3']);
	  // *     returns 3: true
	  // *     example 3: in_array(1, ['1', '2', '3'], false);
	  // *     returns 3: true
	  // *     example 4: in_array(1, ['1', '2', '3'], true);
	  // *     returns 4: false
	  var key = '',
		strict = !! argStrict;

	  if (strict) {
		for (key in haystack) {
		  if (haystack[key] === needle) {
		    return true;
		  }
		}
	  } else {
		for (key in haystack) {
		  if (haystack[key] == needle) {
		    return true;
		  }
		}
	  }

	  return false;
	}	
  	
  </script>
</body>
</html>


psp_2013.css

#chart {
  height: 502px;/*502*/
  width: 900px;
  border: 1px solid;
}

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.75;
}

.cssd {
  fill: #f54200;
  color: #f54200;
}
.ods {
  fill: #008;
  color: #008
}
.kdu-csl {
  fill: #fedc35;
  color: #fedc35;
}
.svobodni {
  fill: #080;
  color: #080;
}
.kscm {
  fill: #ff0000;
  color: #ff0000;
}
.top-09 {
  fill: #808;
  color: #808;
}
.usvit {
  fill: #0ff;
  color: #0ff;
}
.ano-2011 {
  fill: #009ee0;
  color: #009ee0;
}
.pirati {
  fill: #000;
  color: #000;
}
.hlavu-vzhuru {
  fill: #ff4;
  color: #ff4;
}
.spoz {
  fill: #f44;
  color: #f44;
}