block by michalskop ff43ca4f6ee65cb1981f

EU: Elections 2014 in Czechia, detailed

Full Screen

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>KDU-ČSL vs. 10 %</title>
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
  <script src="//d3js.org/d3.v3.min.js"></script>
  <script src="d3.tip.js"></script>
  <style>
    #chart {
      height: 325px;/*502*/
      width: 620px;/*900*/
      /*border: 1px solid;*/
      background-color: white;
    }
    circle {
      fill: #888;
      fill-opacity: 0.01;
      stroke-opacity: 0.75;
      stroke: #f00;
    }
    .group1{
      stroke: yellow;
    }
    .green {
      color: yellow;
    }
    .red {
      color: #f00;
    }
    .stronger {
      color: yellow;
    }  
    /* D3 tips */  
    .d3-tip {
      line-height: 1;
      font-weight: bold;
      padding: 12px;
      background: rgba(0, 0, 0, 0.8);
      color: #fff;
      border-radius: 2px;
    }
    /* Creates a small triangle extender for the tooltip */
    /*.d3-tip:after {
      box-sizing: border-box;
      display: inline;
      font-size: 10px;
      width: 100%;
      line-height: 1;
      color: rgba(0, 0, 0, 0.8);
      content: "\25BC";
      position: absolute;
      text-align: center;
    }*/
    /* Style northward tooltips differently */
    .d3-tip.n:after {
      margin: -1px 0 0 0;
      top: 100%;
      left: 0;
    }  
  </style>
</head>
<body>
  <div class="navbar navbar-inverse" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <a class="navbar-brand" href="#"><span class="green">KDU-ČSL</span> vs. <span class="red">10 %</span> - Evropské volby 2014 - European Elections 2014</a>
      </div>
    </div>
  </div>
  <!-- chart -->
  <p id="chart"></p>
  <div class="alert alert-info" >
    <span class="green">KDU-ČSL &gt 10 %</span>; <span class="red">KDU-ČSL &lt 10 %</span><br>
    <strong>Velikost bubliny</strong> odpovídá počtu voličů, <strong>tloušťka kruhu</strong> ukazuje rozdíl porovnávaných hodnot.<br>
    The <strong>size</strong> of bubbles represents number of voters, the <strong>ring width</strong> represents the difference.
  </div>

  <script type="text/javascript">
  //subcharts' specifications
	//load specs from 
	var specs = {
      'lngMin': 12.156,
      'lngMax': 18.84,
      'latMin': 48.6,
      'latMax': 51.023,
      'max_population': 45000,
      'max_size': 50,
      'file': 'epcz_kdu-csl_10_2014.json',
      'height': 325,
      'width': 620,
    };
	// Chart dimensions.
	var margin = {top: 10, right: 0, bottom: 0, left: 30},
		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]);
      
    /* Initialize tooltip */	
    tip = d3.tip().attr('class', 'd3-tip').html(function(d) { 
      return '<span class="stronger">' + d.title + '</span><br><br>KDU-ČSL: ' + d.votes1 + '<br>10 %: ' + d.votes2;
    });   

// Create the SVG container and set the origin.
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 + ")");
	
	/* Invoke the tip in the context of your visualization */
    svg.call(tip);
	
	// 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
		.map(function(d) {
		  return {
			x: xScale(parseFloat(d.lng)),
			y: yScale(parseFloat(d.lat)),
			r: (radiusScale(d.votes[0])+radiusScale(d.votes[1]))/2,
			r2: Math.abs(radiusScale(d.votes[0])-radiusScale(d.votes[1])),
			title: d.town,
			name: d.town,
			id: d.id,
			votes1: d.votes[0],
			votes2: d.votes[1],
			classname: compare(d.votes[0],d.votes[1])
		  };
		});
	  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("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", tip.show)
			.on("mouseout", tip.hide);
	});  

function compare(a,b) {
  if (a > b) return 'group1'; else return 'group2';
}    	
  </script>
</body>
</html>

ano.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>ANO vs. 15 %</title>
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
  <script src="//d3js.org/d3.v3.min.js"></script>
  <script src="d3.tip.js"></script>
  <style>
    #chart {
      height: 325px;/*502*/
      width: 620px;/*900*/
      /*border: 1px solid;*/
      background-color: white;
    }
    circle {
      fill: #888;
      fill-opacity: 0.01;
      stroke-opacity: 0.75;
      stroke: #f00;
    }
    .group1{
      stroke: #009ee0;
    }
    .green {
      color: #009ee0;
    }
    .red {
      color: #f00;
    }
    .stronger {
      color: yellow;
    }  
    /* D3 tips */  
    .d3-tip {
      line-height: 1;
      font-weight: bold;
      padding: 12px;
      background: rgba(0, 0, 0, 0.8);
      color: #fff;
      border-radius: 2px;
    }
    /* Creates a small triangle extender for the tooltip */
    /*.d3-tip:after {
      box-sizing: border-box;
      display: inline;
      font-size: 10px;
      width: 100%;
      line-height: 1;
      color: rgba(0, 0, 0, 0.8);
      content: "\25BC";
      position: absolute;
      text-align: center;
    }*/
    /* Style northward tooltips differently */
    .d3-tip.n:after {
      margin: -1px 0 0 0;
      top: 100%;
      left: 0;
    }  
  </style>
</head>
<body>
  <div class="navbar navbar-inverse" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <a class="navbar-brand" href="#"><span class="green">ANO</span> vs. <span class="red">15 %</span> - Evropské volby 2014 - European Elections 2014</a>
      </div>
    </div>
  </div>
  <!-- chart -->
  <p id="chart"></p>
  <div class="alert alert-info" >
    <span class="green">ANO &gt 15 %</span>; <span class="red">ANO &lt 15 %</span><br>
    <strong>Velikost bubliny</strong> odpovídá počtu voličů, <strong>tloušťka kruhu</strong> ukazuje rozdíl porovnávaných hodnot.<br>
    The <strong>size</strong> of bubbles represents number of voters, the <strong>ring width</strong> represents the difference.
  </div>

  <script type="text/javascript">
  //subcharts' specifications
	//load specs from 
	var specs = {
      'lngMin': 12.156,
      'lngMax': 18.84,
      'latMin': 48.6,
      'latMax': 51.023,
      'max_population': 45000,
      'max_size': 50,
      'file': 'epcz_ano_15_2014.json',
      'height': 325,
      'width': 620,
    };
	// Chart dimensions.
	var margin = {top: 10, right: 0, bottom: 0, left: 30},
		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]);
      
    /* Initialize tooltip */	
    tip = d3.tip().attr('class', 'd3-tip').html(function(d) { 
      return '<span class="stronger">' + d.title + '</span><br><br>ANO: ' + d.votes1 + '<br>15 %: ' + d.votes2;
    });   

// Create the SVG container and set the origin.
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 + ")");
	
	/* Invoke the tip in the context of your visualization */
    svg.call(tip);
	
	// 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
		.map(function(d) {
		  return {
			x: xScale(parseFloat(d.lng)),
			y: yScale(parseFloat(d.lat)),
			r: (radiusScale(d.votes[0])+radiusScale(d.votes[1]))/2,
			r2: Math.abs(radiusScale(d.votes[0])-radiusScale(d.votes[1])),
			title: d.town,
			name: d.town,
			id: d.id,
			votes1: d.votes[0],
			votes2: d.votes[1],
			classname: compare(d.votes[0],d.votes[1])
		  };
		});
	  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("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", tip.show)
			.on("mouseout", tip.hide);
	});  

function compare(a,b) {
  if (a > b) return 'group1'; else return 'group2';
}    	
  </script>
</body>
</html>

cssd.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>ČSSD vs. 15 %</title>
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
  <script src="//d3js.org/d3.v3.min.js"></script>
  <script src="d3.tip.js"></script>
  <style>
    #chart {
      height: 325px;/*502*/
      width: 620px;/*900*/
      /*border: 1px solid;*/
      background-color: white;
    }
    circle {
      fill: #888;
      fill-opacity: 0.01;
      stroke-opacity: 0.75;
      stroke: #000;
    }
    .group1{
      stroke: #f54200;
    }
    .green {
      color: #f54200;
    }
    .red {
      color: #000;
    }
    .stronger {
      color: yellow;
    }  
    /* D3 tips */  
    .d3-tip {
      line-height: 1;
      font-weight: bold;
      padding: 12px;
      background: rgba(0, 0, 0, 0.8);
      color: #fff;
      border-radius: 2px;
    }
    /* Creates a small triangle extender for the tooltip */
    /*.d3-tip:after {
      box-sizing: border-box;
      display: inline;
      font-size: 10px;
      width: 100%;
      line-height: 1;
      color: rgba(0, 0, 0, 0.8);
      content: "\25BC";
      position: absolute;
      text-align: center;
    }*/
    /* Style northward tooltips differently */
    .d3-tip.n:after {
      margin: -1px 0 0 0;
      top: 100%;
      left: 0;
    }  
  </style>
</head>
<body>
  <div class="navbar navbar-inverse" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <a class="navbar-brand" href="#"><span class="green">ČSSD</span> vs. <span class="red" style="color:#777">15 %</span> - Evropské volby 2014 - European Elections 2014</a>
      </div>
    </div>
  </div>
  <!-- chart -->
  <p id="chart"></p>
  <div class="alert alert-info" >
    <span class="green">ČSSD &gt 15 %</span>; <span class="red">ČSSD &lt 15 %</span><br>
    <strong>Velikost bubliny</strong> odpovídá počtu voličů, <strong>tloušťka kruhu</strong> ukazuje rozdíl porovnávaných hodnot.<br>
    The <strong>size</strong> of bubbles represents number of voters, the <strong>ring width</strong> represents the difference.
  </div>

  <script type="text/javascript">
  //subcharts' specifications
	//load specs from 
	var specs = {
      'lngMin': 12.156,
      'lngMax': 18.84,
      'latMin': 48.6,
      'latMax': 51.023,
      'max_population': 45000,
      'max_size': 50,
      'file': 'epcz_cssd_15_2014.json',
      'height': 325,
      'width': 620,
    };
	// Chart dimensions.
	var margin = {top: 10, right: 0, bottom: 0, left: 30},
		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]);
      
    /* Initialize tooltip */	
    tip = d3.tip().attr('class', 'd3-tip').html(function(d) { 
      return '<span class="stronger">' + d.title + '</span><br><br>ČSSD: ' + d.votes1 + '<br>15 %: ' + d.votes2;
    });   

// Create the SVG container and set the origin.
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 + ")");
	
	/* Invoke the tip in the context of your visualization */
    svg.call(tip);
	
	// 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
		.map(function(d) {
		  return {
			x: xScale(parseFloat(d.lng)),
			y: yScale(parseFloat(d.lat)),
			r: (radiusScale(d.votes[0])+radiusScale(d.votes[1]))/2,
			r2: Math.abs(radiusScale(d.votes[0])-radiusScale(d.votes[1])),
			title: d.town,
			name: d.town,
			id: d.id,
			votes1: d.votes[0],
			votes2: d.votes[1],
			classname: compare(d.votes[0],d.votes[1])
		  };
		});
	  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("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", tip.show)
			.on("mouseout", tip.hide);
	});  

function compare(a,b) {
  if (a > b) return 'group1'; else return 'group2';
}    	
  </script>
</body>
</html>

csv2json.py

# -*- coding: utf-8 -*-
# python 3
import csv
import json
from slugify import slugify

i = 0
people = []
votes = []
winners = {}
with open('obce_geocoded_adj.csv','r') as f:
  csvreader = csv.reader(f,delimiter=",")
  for row in csvreader:
    if i <= 1:
      if i == 1:
        for j in range(10,49):
          people.append(row[j])
          winners[row[j]] = 0
    else:
      r = {}
      r['id'] = row[4]
      r['town'] = row[5]
      r['lat'] = row[50]
      r['lng'] = row[49]
      r['votes'] = []
      maxi = 0
      sumi = 0
      for j in range(0,38):
        r['votes'].append(row[j+10])
        sumi = sumi + int(row[j+10])
        if (int(row[j+10])) > maxi:
          winner = people[j]
          maxi = int(row[j+10])
      r['winner'] = winner
      r['winner_class'] = slugify(winner),
      r['population'] = sumi
      winners[winner] = winners[winner] + 1  
      votes.append(r)

    i = i + 1
      
print(winners)
 
#print(people)
#print(r)
#raise(Exception,'dipy')  

colors = {
  'ne-brusel': '#888',
  'moravane': '#888',
  'top-09': '#808',
  'aneo': '#888',
  'snk-ed': '#888',
  'svobodni': '#080',
  'lev-21': '#888',
  'hss': '#888',
  'pirati': '#000',
  'vize-2014': '#888',
  'kdu-csl': '#fedc35',
  'cssd': '#f54200',
  'kscm': '#ff0000',
  'rds': '#888',
  'vv': '#888',
  'ksc': '#888',
  'zeleni': '#0b0',
  'antibursik': '#888',
  'les': '#888',
  'usvit': '#0ff',
  'rozumni': '#888',
  'ods': '#008',
  'sp-a-no': '#888',
  'ano': '#009ee0'
}

data = {'people':people,'votes':votes,'colors':colors}
with open('epcz_2014.json', 'w') as outfile:
  json.dump(data, outfile)
outfile.close()

csv2selected_json.py

# -*- coding: utf-8 -*-
# python 3
import csv
import json
from slugify import slugify

party = 'kscm'
percent = 10

i = 0
people = []
votes = []
winners = {}
with open('obce_geocoded_adj.csv','r') as f:
  csvreader = csv.reader(f,delimiter=",")
  for row in csvreader:
    if i <= 1:
      if i == 1:
        for j in range(10,49):
          people.append(row[j])
          winners[row[j]] = 0
    else:
      r = {}
      r['id'] = row[4]
      r['town'] = row[5]
      r['lat'] = row[50]
      r['lng'] = row[49]
      r['votes'] = []
      maxi = 0
      sumi = 0
      for j in range(0,38):
        if slugify(people[j]) == party:
          r['votes'].append(int(row[j+10]))
      r['votes'].append(int(percent/100*int(row[9])))
        
#        r['votes'].append(row[j+10])
#        sumi = sumi + int(row[j+10])
#        if (int(row[j+10])) > maxi:
#          winner = people[j]
#          maxi = int(row[j+10])
#      r['winner'] = winner
#      r['winner_class'] = slugify(winner),
#      r['population'] = sumi
#      winners[winner] = winners[winner] + 1  
      votes.append(r)

    i = i + 1
      
#print(winners)
 
#print(people)
#print(r)
#raise(Exception,'dipy')  

colors = {
  'ne-brusel': '#888',
  'moravane': '#888',
  'top-09': '#808',
  'aneo': '#888',
  'snk-ed': '#888',
  'svobodni': '#080',
  'lev-21': '#888',
  'hss': '#888',
  'pirati': '#000',
  'vize-2014': '#888',
  'kdu-csl': '#fedc35',
  'cssd': '#f54200',
  'kscm': '#ff0000',
  'rds': '#888',
  'vv': '#888',
  'ksc': '#888',
  'zeleni': '#0b0',
  'antibursik': '#888',
  'les': '#888',
  'usvit': '#0ff',
  'rozumni': '#888',
  'ods': '#008',
  'sp-a-no': '#888',
  'ano': '#009ee0'
}

#data = {'people':people,'votes':votes,'colors':colors}
with open('epcz_'+party+'_'+str(percent)+'_2014.json', 'w') as outfile:
  json.dump(votes, outfile)
outfile.close()

cz.html

<!DOCTYPE html>
<html>
  <head>
    <title>European election 2014 in the Czech republic</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
	<script src="//code.jquery.com/jquery-1.8.2.min.js"></script>
	
	
	<script>
	  // see //leafletjs.com/reference.html
	  L_PREFER_CANVAS = true;
	</script>

	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="//cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
	 <!--[if lte IE 8]>
		 <link rel="stylesheet" href="//cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
	 <![endif]-->
    <script src="//cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>

    <style type="text/css">

		html, body, #map {
		  width: 100%;
		  height: 100%;
		  margin: 0;
		  padding: 0;
		}
		.leaflet-tile-pane {
		  opacity: .3
		}
		.leaflet-container {
          background-color: #fff;
        }

    </style>
  </head>
  <body>
  
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">European election 2014 in the Czech republic</a>
        </div>
      </div>
    </div>
    
    <div style="position:fixed;top:50px;z-index:1000;">
      <div class="alert alert-info" >The <strong>size</strong> of bubbles represents number of voters, the <strong>color</strong> represents the winner.</div>
    </div>    <div style="position:fixed;top:125px;z-index:1000;">
		<div class="alert alert-info" style="float:left;">
		    <svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#009ee0"></svg> ANO<br/>
		    <svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#808"></svg> TOP 09<br/>
		    <svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#f54200"></svg> ČSSD<br/>
		    <svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#ff0000"></svg> KSČM<br/>
		    <svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#fedc35"></svg> KDU-ČSL
		</div>
    </div>
    <div id="map" style="margin-top:40px;"></div>
    <script type="text/javascript">


		// Create the map
		var map = L.map('map',{zoomControl: false}).setView([50,15], 7);
		map.addControl( L.control.zoom({position: 'topright'}) );
		
		// add an OpenStreetMap tile layer
		// also see //wiki.openstreetmap.org/wiki/Tiles
		//L.tileLayer('//{s}.tile.osm.org/{z}/{x}/{y}.png', {
		L.tileLayer('//{s}.www.toolserver.org/tiles/bw-mapnik/{z}/{x}/{y}.png', {
			attribution: 'CC-BY Michal Škop <a href="//kohovolit.eu">KohoVolit.eu</a> | &copy; <a href="//osm.org/copyright">OpenStreetMap</a> contributors'
		}).addTo(map);
		
		//add circles
		$.getJSON( "epcz_2014.json", function (data) {
		    $.each(data.votes, function (index, value) {
		        
		        description = "<strong>" + value.town + "</strong> (" + value.population + ")<br>";
		        
		        tuples = [];
		        for (var key in value.votes) {
		          tuples.push([key,parseInt(value.votes[key])]);
		        }
		        
		        tuples.sort(function(a, b) {
                    a = a[1];
                    b = b[1];
                    return a < b ? 1 : (a > b ? -1 : 0);
                });
                for (i = 0; i < 9; i++) {
                  tmp = Math.round(parseInt(tuples[i][1]) / parseInt(value.population) * 100);
                  description += data.people[tuples[i][0]] + ": " +  tmp  +"%<br>";
                }
				/*sum = 0;
				$.each(value.description, function (i, v) {
				  tmp = Math.round(parseInt(v.value) / parseInt(value.population) * 1000) / 10;
				  description += v.name + ': ' +  tmp + '% (' + v.value + ' hlasů)<br>';
				  sum += parseInt(v.value)
				});
				tmp = Math.round((parseInt(value.population) - sum) / parseInt(value.population) * 1000) / 10;
				tmp2 = value.population - sum;
				description += "Ostatní: " + tmp + '% (' + tmp2 + ' hlasů)';*/
		    
		    
				circle = L.circle([value.lat, value.lng], Math.sqrt(parseInt(value.population)*2000), {
					color: data.colors[value.winner_class],
					fillColor: data.colors[value.winner_class],
					fillOpacity: 0.85,
					weight: 1,
				}).addTo(map);
				

				circle.bindPopup(description);
		  });
		});

	</script>
	
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-8592359-13', 'ocks.org');
      ga('send', 'pageview');

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

d3.tip.js

// d3.tip
// Copyright (c) 2013 Justin Palmer
//
// Tooltips for d3.js SVG visualizations

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module with d3 as a dependency.
    define(['d3'], factory)
  } else {
    // Browser global.
    root.d3.tip = factory(root.d3)
  }
}(this, function (d3) {

  // Public - contructs a new tooltip
  //
  // Returns a tip
  return function() {
    var direction = d3_tip_direction,
        offset    = d3_tip_offset,
        html      = d3_tip_html,
        node      = initNode(),
        svg       = null,
        point     = null,
        target    = null
  
    function tip(vis) {
      svg = getSVGNode(vis)
      point = svg.createSVGPoint()
      document.body.appendChild(node)
    }
  
    // Public - show the tooltip on the screen
    //
    // Returns a tip
    tip.show = function() {
      var args = Array.prototype.slice.call(arguments)
      if(args[args.length - 1] instanceof SVGElement) target = args.pop()
  
      var content = html.apply(this, args),
          poffset = offset.apply(this, args),
          dir     = direction.apply(this, args),
          nodel   = d3.select(node),
          i       = directions.length,
          coords,
          scrollTop  = document.documentElement.scrollTop || document.body.scrollTop,
          scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft
  
      nodel.html(content)
        .style({ opacity: 1, 'pointer-events': 'all' })
  
      while(i--) nodel.classed(directions[i], false)
      coords = direction_callbacks.get(dir).apply(this)
      nodel.classed(dir, true).style({
        top: (coords.top +  poffset[0]) + scrollTop + 'px',
        left: (coords.left + poffset[1]) + scrollLeft + 'px'
      })
  
      return tip
    }
  
    // Public - hide the tooltip
    //
    // Returns a tip
    tip.hide = function() {
      nodel = d3.select(node)
      nodel.style({ opacity: 0, 'pointer-events': 'none' })
      return tip
    }
  
    // Public: Proxy attr calls to the d3 tip container.  Sets or gets attribute value.
    //
    // n - name of the attribute
    // v - value of the attribute
    //
    // Returns tip or attribute value
    tip.attr = function(n, v) {
      if (arguments.length < 2 && typeof n === 'string') {
        return d3.select(node).attr(n)
      } else {
        var args =  Array.prototype.slice.call(arguments)
        d3.selection.prototype.attr.apply(d3.select(node), args)
      }
  
      return tip
    }
  
    // Public: Proxy style calls to the d3 tip container.  Sets or gets a style value.
    //
    // n - name of the property
    // v - value of the property
    //
    // Returns tip or style property value
    tip.style = function(n, v) {
      if (arguments.length < 2 && typeof n === 'string') {
        return d3.select(node).style(n)
      } else {
        var args =  Array.prototype.slice.call(arguments)
        d3.selection.prototype.style.apply(d3.select(node), args)
      }
  
      return tip
    }
  
    // Public: Set or get the direction of the tooltip
    //
    // v - One of n(north), s(south), e(east), or w(west), nw(northwest),
    //     sw(southwest), ne(northeast) or se(southeast)
    //
    // Returns tip or direction
    tip.direction = function(v) {
      if (!arguments.length) return direction
      direction = v == null ? v : d3.functor(v)
  
      return tip
    }
  
    // Public: Sets or gets the offset of the tip
    //
    // v - Array of [x, y] offset
    //
    // Returns offset or
    tip.offset = function(v) {
      if (!arguments.length) return offset
      offset = v == null ? v : d3.functor(v)
  
      return tip
    }
  
    // Public: sets or gets the html value of the tooltip
    //
    // v - String value of the tip
    //
    // Returns html value or tip
    tip.html = function(v) {
      if (!arguments.length) return html
      html = v == null ? v : d3.functor(v)
  
      return tip
    }
  
    function d3_tip_direction() { return 'n' }
    function d3_tip_offset() { return [0, 0] }
    function d3_tip_html() { return ' ' }
  
    var direction_callbacks = d3.map({
      n:  direction_n,
      s:  direction_s,
      e:  direction_e,
      w:  direction_w,
      nw: direction_nw,
      ne: direction_ne,
      sw: direction_sw,
      se: direction_se
    }),
  
    directions = direction_callbacks.keys()
  
    function direction_n() {
      var bbox = getScreenBBox()
      return {
        top:  bbox.n.y - node.offsetHeight,
        left: bbox.n.x - node.offsetWidth / 2
      }
    }
  
    function direction_s() {
      var bbox = getScreenBBox()
      return {
        top:  bbox.s.y,
        left: bbox.s.x - node.offsetWidth / 2
      }
    }
  
    function direction_e() {
      var bbox = getScreenBBox()
      return {
        top:  bbox.e.y - node.offsetHeight / 2,
        left: bbox.e.x
      }
    }
  
    function direction_w() {
      var bbox = getScreenBBox()
      return {
        top:  bbox.w.y - node.offsetHeight / 2,
        left: bbox.w.x - node.offsetWidth
      }
    }
  
    function direction_nw() {
      var bbox = getScreenBBox()
      return {
        top:  bbox.nw.y - node.offsetHeight,
        left: bbox.nw.x - node.offsetWidth
      }
    }
  
    function direction_ne() {
      var bbox = getScreenBBox()
      return {
        top:  bbox.ne.y - node.offsetHeight,
        left: bbox.ne.x
      }
    }
  
    function direction_sw() {
      var bbox = getScreenBBox()
      return {
        top:  bbox.sw.y,
        left: bbox.sw.x - node.offsetWidth
      }
    }
  
    function direction_se() {
      var bbox = getScreenBBox()
      return {
        top:  bbox.se.y,
        left: bbox.e.x
      }
    }
  
    function initNode() {
      var node = d3.select(document.createElement('div'))
      node.style({
        position: 'absolute',
        top: 0,
        opacity: 0,
        'pointer-events': 'none',
        'box-sizing': 'border-box'
      })
  
      return node.node()
    }
  
    function getSVGNode(el) {
      el = el.node()
      if(el.tagName.toLowerCase() == 'svg')
        return el
  
      return el.ownerSVGElement
    }
  
    // Private - gets the screen coordinates of a shape
    //
    // Given a shape on the screen, will return an SVGPoint for the directions
    // n(north), s(south), e(east), w(west), ne(northeast), se(southeast), nw(northwest),
    // sw(southwest).
    //
    //    +-+-+
    //    |   |
    //    +   +
    //    |   |
    //    +-+-+
    //
    // Returns an Object {n, s, e, w, nw, sw, ne, se}
    function getScreenBBox() {
      var targetel   = target || d3.event.target,
          bbox       = {},
          matrix     = targetel.getScreenCTM(),
          tbbox      = targetel.getBBox(),
          width      = tbbox.width,
          height     = tbbox.height,
          x          = tbbox.x,
          y          = tbbox.y
  
      point.x = x
      point.y = y
      bbox.nw = point.matrixTransform(matrix)
      point.x += width
      bbox.ne = point.matrixTransform(matrix)
      point.y += height
      bbox.se = point.matrixTransform(matrix)
      point.x -= width
      bbox.sw = point.matrixTransform(matrix)
      point.y -= height / 2
      bbox.w  = point.matrixTransform(matrix)
      point.x += width
      bbox.e = point.matrixTransform(matrix)
      point.x -= width / 2
      point.y -= height / 2
      bbox.n = point.matrixTransform(matrix)
      point.y += height
      bbox.s = point.matrixTransform(matrix)
  
      return bbox
    }
  
    return tip
  };

}));

index_krouzky.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>KSČM vs. 10 %</title>
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
  <script src="//d3js.org/d3.v3.min.js"></script>
  <script src="d3.tip.js"></script>
  <style>
    #chart {
      height: 325px;/*502*/
      width: 620px;/*900*/
      /*border: 1px solid;*/
      background-color: white;
    }
    circle {
      fill: #888;
      fill-opacity: 0.01;
      stroke-opacity: 0.75;
      stroke: #f00;
    }
    .group1{
      stroke: #808;
    }
    .green {
      color: #808;
    }
    .red {
      color: #f00;
    }
    .stronger {
      color: yellow;
    }  
    /* D3 tips */  
    .d3-tip {
      line-height: 1;
      font-weight: bold;
      padding: 12px;
      background: rgba(0, 0, 0, 0.8);
      color: #fff;
      border-radius: 2px;
    }
    /* Creates a small triangle extender for the tooltip */
    /*.d3-tip:after {
      box-sizing: border-box;
      display: inline;
      font-size: 10px;
      width: 100%;
      line-height: 1;
      color: rgba(0, 0, 0, 0.8);
      content: "\25BC";
      position: absolute;
      text-align: center;
    }*/
    /* Style northward tooltips differently */
    .d3-tip.n:after {
      margin: -1px 0 0 0;
      top: 100%;
      left: 0;
    }  
  </style>
</head>
<body>
  <div class="navbar navbar-inverse" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <a class="navbar-brand" href="#"><span class="green">Pospíšil</span> vs. <span class="red">33 %</span></a>
      </div>
    </div>
  </div>
  <!-- chart -->
  <p id="chart"></p>
  <div class="alert alert-info" >
    <span class="green">Pospíšil &gt 33 %</span>; <span class="red">Pospíšil &lt 33 %</span><br>
    <strong>Velikost bubliny</strong> odpovídá počtu voličů, <strong>tloušťka kruhu</strong> ukazuje rozdíl porovnávaných hodnot.<br>
    The <strong>size</strong> of bubbles represents number of voters, the <strong>ring width</strong> represents the difference.
  </div>

  <script type="text/javascript">
  //subcharts' specifications
	//load specs from 
	var specs = {
      'lngMin': 12.156,
      'lngMax': 18.84,
      'latMin': 48.6,
      'latMax': 51.023,
      'max_population': 90000,
      'max_size': 80,
      'file': 'epcz_pospisil_2014.json',
      'height': 325,
      'width': 620,
    };
	// Chart dimensions.
	var margin = {top: 10, right: 10, bottom: 10, left: 30},
		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]);
      
    /* Initialize tooltip */	
    tip = d3.tip().attr('class', 'd3-tip').html(function(d) { 
      return '<span class="stronger">' + d.title + '</span><br><br>Pospíšil: ' + d.votes1 + '<br>TOP09: ' + d.votes2;
    });   

// Create the SVG container and set the origin.
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 + ")");
	
	/* Invoke the tip in the context of your visualization */
    svg.call(tip);
	
	// 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
		.map(function(d) {
		  return {
			x: xScale(parseFloat(d.lng)),
			y: yScale(parseFloat(d.lat)),
			r: (radiusScale(d.votes[0])+radiusScale(d.votes[1]*0.335))/2,
			r2: Math.abs(radiusScale(d.votes[0])-0.335*radiusScale(d.votes[1])),
			title: d.town,
			name: d.town,
			id: d.id,
			votes1: d.votes[0],
			votes2: d.votes[1],
			classname: compare(d.votes[0],d.votes[1])
		  };
		});
	  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("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", tip.show)
			.on("mouseout", tip.hide);
	});  

function compare(a,b) {
  if (parseFloat(a) > 0.3215*parseFloat(b)) return 'group1'; else return 'group2';
}    	
//0.1537
//0.3215
  </script>
</body>
</html>

kdu-csl.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>KDU-ČSL vs. 10 %</title>
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
  <script src="//d3js.org/d3.v3.min.js"></script>
  <script src="d3.tip.js"></script>
  <style>
    #chart {
      height: 325px;/*502*/
      width: 620px;/*900*/
      /*border: 1px solid;*/
      background-color: white;
    }
    circle {
      fill: #888;
      fill-opacity: 0.01;
      stroke-opacity: 0.75;
      stroke: #f00;
    }
    .group1{
      stroke: yellow;
    }
    .green {
      color: yellow;
    }
    .red {
      color: #f00;
    }
    .stronger {
      color: yellow;
    }  
    /* D3 tips */  
    .d3-tip {
      line-height: 1;
      font-weight: bold;
      padding: 12px;
      background: rgba(0, 0, 0, 0.8);
      color: #fff;
      border-radius: 2px;
    }
    /* Creates a small triangle extender for the tooltip */
    /*.d3-tip:after {
      box-sizing: border-box;
      display: inline;
      font-size: 10px;
      width: 100%;
      line-height: 1;
      color: rgba(0, 0, 0, 0.8);
      content: "\25BC";
      position: absolute;
      text-align: center;
    }*/
    /* Style northward tooltips differently */
    .d3-tip.n:after {
      margin: -1px 0 0 0;
      top: 100%;
      left: 0;
    }  
  </style>
</head>
<body>
  <div class="navbar navbar-inverse" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <a class="navbar-brand" href="#"><span class="green">KDU-ČSL</span> vs. <span class="red">10 %</span> - Evropské volby 2014 - European Elections 2014</a>
      </div>
    </div>
  </div>
  <!-- chart -->
  <p id="chart"></p>
  <div class="alert alert-info" >
    <span class="green">KDU-ČSL &gt 10 %</span>; <span class="red">KDU-ČSL &lt 10 %</span><br>
    <strong>Velikost bubliny</strong> odpovídá počtu voličů, <strong>tloušťka kruhu</strong> ukazuje rozdíl porovnávaných hodnot.<br>
    The <strong>size</strong> of bubbles represents number of voters, the <strong>ring width</strong> represents the difference.
  </div>

  <script type="text/javascript">
  //subcharts' specifications
	//load specs from 
	var specs = {
      'lngMin': 12.156,
      'lngMax': 18.84,
      'latMin': 48.6,
      'latMax': 51.023,
      'max_population': 45000,
      'max_size': 50,
      'file': 'epcz_kdu-csl_10_2014.json',
      'height': 325,
      'width': 620,
    };
	// Chart dimensions.
	var margin = {top: 10, right: 0, bottom: 0, left: 30},
		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]);
      
    /* Initialize tooltip */	
    tip = d3.tip().attr('class', 'd3-tip').html(function(d) { 
      return '<span class="stronger">' + d.title + '</span><br><br>KDU-ČSL: ' + d.votes1 + '<br>10 %: ' + d.votes2;
    });   

// Create the SVG container and set the origin.
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 + ")");
	
	/* Invoke the tip in the context of your visualization */
    svg.call(tip);
	
	// 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
		.map(function(d) {
		  return {
			x: xScale(parseFloat(d.lng)),
			y: yScale(parseFloat(d.lat)),
			r: (radiusScale(d.votes[0])+radiusScale(d.votes[1]))/2,
			r2: Math.abs(radiusScale(d.votes[0])-radiusScale(d.votes[1])),
			title: d.town,
			name: d.town,
			id: d.id,
			votes1: d.votes[0],
			votes2: d.votes[1],
			classname: compare(d.votes[0],d.votes[1])
		  };
		});
	  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("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", tip.show)
			.on("mouseout", tip.hide);
	});  

function compare(a,b) {
  if (a > b) return 'group1'; else return 'group2';
}    	
  </script>
</body>
</html>

krousky2json.py

# -*- coding: utf-8 -*-
# python 3
import csv
import json

votes = []
with open('krouzky_obce.csv','r') as f:
  csvreader = csv.reader(f,delimiter=",")
  for row in csvreader:
    if i > 1:
      r = {}
      r['id'] = row[4]
      r['town'] = row[5]
      r['lat'] = row[50]
      r['lng'] = row[49]
      r['votes'] = [row[54],row[23]]
      votes.append(r)

    i = i + 1
with open('epcz_keller_2014.json', 'w') as outfile:
  json.dump(votes, outfile)
outfile.close()

krouzky2csv.py

# -*- coding: utf-8 -*-

# python 3.4

import xml.etree.ElementTree as ET
import urllib
import json
import csv

outfile = open('krouzky_obce.csv', 'w')
outwriter = csv.writer(outfile, quoting=csv.QUOTE_NONNUMERIC)

selected = [
 {'party': 7, 'cand': 2, 'name': 'Pospíšil'},
 {'party': 7, 'cand': 1, 'name': 'Niedermayer'},
 {'party': 7, 'cand': 5, 'name': 'Štětina'},
 {'party': 14, 'cand': 1, 'name': 'Keller'},
 {'party': 5, 'cand': 1, 'name': 'Svoboda'},
 {'party': 5, 'cand': 2, 'name': 'Šojdrová'},
 {'party': 20, 'cand': 1, 'name': 'Zahradil'},
 {'party': 20, 'cand': 2, 'name': 'Tošenovský'},
 {'party': 10, 'cand': 1, 'name': 'Konečná'},
 {'party': 16, 'cand': 1, 'name': 'Telička'}
]

#tree = ET.parse('ept2p.xml')
#root = tree.getroot()

i = 0
#data = {}
#for sel in selected:
#  data[sel['name']] = {}
#  
#for row in root:
#  for sel in selected:
#    if sel['party'] == int(row.find('{http://www.volby.cz/ep/}ESTRANA').text):
#      obec = row.find('{http://www.volby.cz/ep/}OBEC').text
#      n = row.find('{http://www.volby.cz/ep/}HLASY_0' + str(sel['cand'])).text
#      try:
#        data[sel['name']][obec]
#      except:
#        data[sel['name']][obec] = 0
#      data[sel['name']][obec] = data[sel['name']][obec] + int(n)
#  i = i + 1
#  if i > 100:
#    raise(Exception,'')  

i = 0
results = {}
with open('obce_geocoded_adj.csv','r') as f:
  csvreader = csv.reader(f,delimiter=",")
  for row in csvreader:
    if i > 1:
      results[row[4]] = row
    i = i + 1

for key in results:
  row = results[key]
  for sel in selected:
    try:
      row.append(data[sel['name']][key])
    except:
      row.append(0)
  outwriter.writerow(row)
outfile.close()

kscm.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>KSČM vs. 10 %</title>
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
  <script src="//d3js.org/d3.v3.min.js"></script>
  <script src="d3.tip.js"></script>
  <style>
    #chart {
      height: 325px;/*502*/
      width: 620px;/*900*/
      /*border: 1px solid;*/
      background-color: white;
    }
    circle {
      fill: #888;
      fill-opacity: 0.01;
      stroke-opacity: 0.75;
      stroke: #000;
    }
    .group1{
      stroke: #f00;
    }
    .green {
      color: #f00;
    }
    .red {
      color: #000;
    }
    .stronger {
      color: yellow;
    }  
    /* D3 tips */  
    .d3-tip {
      line-height: 1;
      font-weight: bold;
      padding: 12px;
      background: rgba(0, 0, 0, 0.8);
      color: #fff;
      border-radius: 2px;
    }
    /* Creates a small triangle extender for the tooltip */
    /*.d3-tip:after {
      box-sizing: border-box;
      display: inline;
      font-size: 10px;
      width: 100%;
      line-height: 1;
      color: rgba(0, 0, 0, 0.8);
      content: "\25BC";
      position: absolute;
      text-align: center;
    }*/
    /* Style northward tooltips differently */
    .d3-tip.n:after {
      margin: -1px 0 0 0;
      top: 100%;
      left: 0;
    }  
  </style>
</head>
<body>
  <div class="navbar navbar-inverse" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <a class="navbar-brand" href="#"><span class="green">KSČM</span> vs. <span class="red" style="color:#777">10 %</span> - Evropské volby 2014 - European Elections 2014</a>
      </div>
    </div>
  </div>
  <!-- chart -->
  <p id="chart"></p>
  <div class="alert alert-info" >
    <span class="green">KSČM &gt 10 %</span>; <span class="red">KSČM &lt 10 %</span><br>
    <strong>Velikost bubliny</strong> odpovídá počtu voličů, <strong>tloušťka kruhu</strong> ukazuje rozdíl porovnávaných hodnot.<br>
    The <strong>size</strong> of bubbles represents number of voters, the <strong>ring width</strong> represents the difference.
  </div>

  <script type="text/javascript">
  //subcharts' specifications
	//load specs from 
	var specs = {
      'lngMin': 12.156,
      'lngMax': 18.84,
      'latMin': 48.6,
      'latMax': 51.023,
      'max_population': 45000,
      'max_size': 50,
      'file': 'epcz_kscm_10_2014.json',
      'height': 325,
      'width': 620,
    };
	// Chart dimensions.
	var margin = {top: 10, right: 0, bottom: 0, left: 30},
		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]);
      
    /* Initialize tooltip */	
    tip = d3.tip().attr('class', 'd3-tip').html(function(d) { 
      return '<span class="stronger">' + d.title + '</span><br><br>KSČM: ' + d.votes1 + '<br>10 %: ' + d.votes2;
    });   

// Create the SVG container and set the origin.
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 + ")");
	
	/* Invoke the tip in the context of your visualization */
    svg.call(tip);
	
	// 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
		.map(function(d) {
		  return {
			x: xScale(parseFloat(d.lng)),
			y: yScale(parseFloat(d.lat)),
			r: (radiusScale(d.votes[0])+radiusScale(d.votes[1]))/2,
			r2: Math.abs(radiusScale(d.votes[0])-radiusScale(d.votes[1])),
			title: d.town,
			name: d.town,
			id: d.id,
			votes1: d.votes[0],
			votes2: d.votes[1],
			classname: compare(d.votes[0],d.votes[1])
		  };
		});
	  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("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", tip.show)
			.on("mouseout", tip.hide);
	});  

function compare(a,b) {
  if (a > b) return 'group1'; else return 'group2';
}    	
  </script>
</body>
</html>

ods.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>ODS vs. 7.5 %</title>
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
  <script src="//d3js.org/d3.v3.min.js"></script>
  <script src="d3.tip.js"></script>
  <style>
    #chart {
      height: 325px;/*502*/
      width: 620px;/*900*/
      /*border: 1px solid;*/
      background-color: white;
    }
    circle {
      fill: #888;
      fill-opacity: 0.01;
      stroke-opacity: 0.75;
      stroke: #f00;
    }
    .group1{
      stroke: #008;
    }
    .green {
      color: #008;
    }
    .red {
      color: #f00;
    }
    .stronger {
      color: yellow;
    }  
    /* D3 tips */  
    .d3-tip {
      line-height: 1;
      font-weight: bold;
      padding: 12px;
      background: rgba(0, 0, 0, 0.8);
      color: #fff;
      border-radius: 2px;
    }
    /* Creates a small triangle extender for the tooltip */
    /*.d3-tip:after {
      box-sizing: border-box;
      display: inline;
      font-size: 10px;
      width: 100%;
      line-height: 1;
      color: rgba(0, 0, 0, 0.8);
      content: "\25BC";
      position: absolute;
      text-align: center;
    }*/
    /* Style northward tooltips differently */
    .d3-tip.n:after {
      margin: -1px 0 0 0;
      top: 100%;
      left: 0;
    }  
  </style>
</head>
<body>
  <div class="navbar navbar-inverse" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <a class="navbar-brand" href="#"><span class="green">ODS</span> vs. <span class="red">7.5 %</span> - Evropské volby 2014 - European Elections 2014</a>
      </div>
    </div>
  </div>
  <!-- chart -->
  <p id="chart"></p>
  <div class="alert alert-info" >
    <span class="green">ODS &gt 7.5 %</span>; <span class="red">ODS &lt 7.5 %</span><br>
    <strong>Velikost bubliny</strong> odpovídá počtu voličů, <strong>tloušťka kruhu</strong> ukazuje rozdíl porovnávaných hodnot.<br>
    The <strong>size</strong> of bubbles represents number of voters, the <strong>ring width</strong> represents the difference.
  </div>

  <script type="text/javascript">
  //subcharts' specifications
	//load specs from 
	var specs = {
      'lngMin': 12.156,
      'lngMax': 18.84,
      'latMin': 48.6,
      'latMax': 51.023,
      'max_population': 45000,
      'max_size': 50,
      'file': 'epcz_ods_7.5_2014.json',
      'height': 325,
      'width': 620,
    };
	// Chart dimensions.
	var margin = {top: 10, right: 0, bottom: 0, left: 30},
		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]);
      
    /* Initialize tooltip */	
    tip = d3.tip().attr('class', 'd3-tip').html(function(d) { 
      return '<span class="stronger">' + d.title + '</span><br><br>ODS: ' + d.votes1 + '<br>7.5 %: ' + d.votes2;
    });   

// Create the SVG container and set the origin.
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 + ")");
	
	/* Invoke the tip in the context of your visualization */
    svg.call(tip);
	
	// 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
		.map(function(d) {
		  return {
			x: xScale(parseFloat(d.lng)),
			y: yScale(parseFloat(d.lat)),
			r: (radiusScale(d.votes[0])+radiusScale(d.votes[1]))/2,
			r2: Math.abs(radiusScale(d.votes[0])-radiusScale(d.votes[1])),
			title: d.town,
			name: d.town,
			id: d.id,
			votes1: d.votes[0],
			votes2: d.votes[1],
			classname: compare(d.votes[0],d.votes[1])
		  };
		});
	  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("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", tip.show)
			.on("mouseout", tip.hide);
	});  

function compare(a,b) {
  if (a > b) return 'group1'; else return 'group2';
}    	
  </script>
</body>
</html>

pirati.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Piráti vs. 5 %</title>
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
  <script src="//d3js.org/d3.v3.min.js"></script>
  <script src="d3.tip.js"></script>
  <style>
    #chart {
      height: 325px;/*502*/
      width: 620px;/*900*/
      /*border: 1px solid;*/
      background-color: white;
    }
    circle {
      fill: #888;
      fill-opacity: 0.01;
      stroke-opacity: 0.75;
      stroke: #f00;
    }
    .group1{
      stroke: #000;
    }
    .green {
      color: #000;
    }
    .red {
      color: #f00;
    }
    .stronger {
      color: yellow;
    }  
    /* D3 tips */  
    .d3-tip {
      line-height: 1;
      font-weight: bold;
      padding: 12px;
      background: rgba(0, 0, 0, 0.8);
      color: #fff;
      border-radius: 2px;
    }
    /* Creates a small triangle extender for the tooltip */
    /*.d3-tip:after {
      box-sizing: border-box;
      display: inline;
      font-size: 10px;
      width: 100%;
      line-height: 1;
      color: rgba(0, 0, 0, 0.8);
      content: "\25BC";
      position: absolute;
      text-align: center;
    }*/
    /* Style northward tooltips differently */
    .d3-tip.n:after {
      margin: -1px 0 0 0;
      top: 100%;
      left: 0;
    }  
  </style>
</head>
<body>
  <div class="navbar navbar-inverse" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <a class="navbar-brand" href="#"><span class="green" style="color:#777">Piráti</span> vs. <span class="red">5 %</span> - Evropské volby 2014 - European Elections 2014</a>
      </div>
    </div>
  </div>
  <!-- chart -->
  <p id="chart"></p>
  <div class="alert alert-info" >
    <span class="green">Piráti &gt 5 %</span>; <span class="red">Piráti &lt 5 %</span><br>
    <strong>Velikost bubliny</strong> odpovídá počtu voličů, <strong>tloušťka kruhu</strong> ukazuje rozdíl porovnávaných hodnot.<br>
    The <strong>size</strong> of bubbles represents number of voters, the <strong>ring width</strong> represents the difference.
  </div>

  <script type="text/javascript">
  //subcharts' specifications
	//load specs from 
	var specs = {
      'lngMin': 12.156,
      'lngMax': 18.84,
      'latMin': 48.6,
      'latMax': 51.023,
      'max_population': 45000,
      'max_size': 50,
      'file': 'epcz_pirati_5_2014.json',
      'height': 325,
      'width': 620,
    };
	// Chart dimensions.
	var margin = {top: 10, right: 0, bottom: 0, left: 30},
		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]);
      
    /* Initialize tooltip */	
    tip = d3.tip().attr('class', 'd3-tip').html(function(d) { 
      return '<span class="stronger">' + d.title + '</span><br><br>Piráti: ' + d.votes1 + '<br>5 %: ' + d.votes2;
    });   

// Create the SVG container and set the origin.
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 + ")");
	
	/* Invoke the tip in the context of your visualization */
    svg.call(tip);
	
	// 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
		.map(function(d) {
		  return {
			x: xScale(parseFloat(d.lng)),
			y: yScale(parseFloat(d.lat)),
			r: (radiusScale(d.votes[0])+radiusScale(d.votes[1]))/2,
			r2: Math.abs(radiusScale(d.votes[0])-radiusScale(d.votes[1])),
			title: d.town,
			name: d.town,
			id: d.id,
			votes1: d.votes[0],
			votes2: d.votes[1],
			classname: compare(d.votes[0],d.votes[1])
		  };
		});
	  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("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", tip.show)
			.on("mouseout", tip.hide);
	});  

function compare(a,b) {
  if (a > b) return 'group1'; else return 'group2';
}    	
  </script>
</body>
</html>

svobodni.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Svobodní vs. 5 %</title>
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
  <script src="//d3js.org/d3.v3.min.js"></script>
  <script src="d3.tip.js"></script>
  <style>
    #chart {
      height: 325px;/*502*/
      width: 620px;/*900*/
      /*border: 1px solid;*/
      background-color: white;
    }
    circle {
      fill: #888;
      fill-opacity: 0.01;
      stroke-opacity: 0.75;
      stroke: #f00;
    }
    .group1{
      stroke: #080;
    }
    .green {
      color: #080;
    }
    .red {
      color: #f00;
    }
    .stronger {
      color: yellow;
    }  
    /* D3 tips */  
    .d3-tip {
      line-height: 1;
      font-weight: bold;
      padding: 12px;
      background: rgba(0, 0, 0, 0.8);
      color: #fff;
      border-radius: 2px;
    }
    /* Creates a small triangle extender for the tooltip */
    /*.d3-tip:after {
      box-sizing: border-box;
      display: inline;
      font-size: 10px;
      width: 100%;
      line-height: 1;
      color: rgba(0, 0, 0, 0.8);
      content: "\25BC";
      position: absolute;
      text-align: center;
    }*/
    /* Style northward tooltips differently */
    .d3-tip.n:after {
      margin: -1px 0 0 0;
      top: 100%;
      left: 0;
    }  
  </style>
</head>
<body>
  <div class="navbar navbar-inverse" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <a class="navbar-brand" href="#"><span class="green">Svobodní</span> vs. <span class="red">5 %</span> - Evropské volby 2014 - European Elections 2014</a>
      </div>
    </div>
  </div>
  <!-- chart -->
  <p id="chart"></p>
  <div class="alert alert-info" >
    <span class="green">Svobodní &gt 5 %</span>; <span class="red">Svobodní &lt 5 %</span><br>
    <strong>Velikost bubliny</strong> odpovídá počtu voličů, <strong>tloušťka kruhu</strong> ukazuje rozdíl porovnávaných hodnot.<br>
    The <strong>size</strong> of bubbles represents number of voters, the <strong>ring width</strong> represents the difference.
  </div>

  <script type="text/javascript">
  //subcharts' specifications
	//load specs from 
	var specs = {
      'lngMin': 12.156,
      'lngMax': 18.84,
      'latMin': 48.6,
      'latMax': 51.023,
      'max_population': 45000,
      'max_size': 50,
      'file': 'epcz_svobodni_5_2014.json',
      'height': 325,
      'width': 620,
    };
	// Chart dimensions.
	var margin = {top: 10, right: 0, bottom: 0, left: 30},
		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]);
      
    /* Initialize tooltip */	
    tip = d3.tip().attr('class', 'd3-tip').html(function(d) { 
      return '<span class="stronger">' + d.title + '</span><br><br>Svobodní: ' + d.votes1 + '<br>5 %: ' + d.votes2;
    });   

// Create the SVG container and set the origin.
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 + ")");
	
	/* Invoke the tip in the context of your visualization */
    svg.call(tip);
	
	// 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
		.map(function(d) {
		  return {
			x: xScale(parseFloat(d.lng)),
			y: yScale(parseFloat(d.lat)),
			r: (radiusScale(d.votes[0])+radiusScale(d.votes[1]))/2,
			r2: Math.abs(radiusScale(d.votes[0])-radiusScale(d.votes[1])),
			title: d.town,
			name: d.town,
			id: d.id,
			votes1: d.votes[0],
			votes2: d.votes[1],
			classname: compare(d.votes[0],d.votes[1])
		  };
		});
	  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("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", tip.show)
			.on("mouseout", tip.hide);
	});  

function compare(a,b) {
  if (a > b) return 'group1'; else return 'group2';
}    	
  </script>
</body>
</html>

top09.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>TOP09 vs. 15 %</title>
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
  <script src="//d3js.org/d3.v3.min.js"></script>
  <script src="d3.tip.js"></script>
  <style>
    #chart {
      height: 325px;/*502*/
      width: 620px;/*900*/
      /*border: 1px solid;*/
      background-color: white;
    }
    circle {
      fill: #888;
      fill-opacity: 0.01;
      stroke-opacity: 0.75;
      stroke: #f00;
    }
    .group1{
      stroke: #808;
    }
    .green {
      color: #808;
    }
    .red {
      color: #f00;
    }
    .stronger {
      color: yellow;
    }  
    /* D3 tips */  
    .d3-tip {
      line-height: 1;
      font-weight: bold;
      padding: 12px;
      background: rgba(0, 0, 0, 0.8);
      color: #fff;
      border-radius: 2px;
    }
    /* Creates a small triangle extender for the tooltip */
    /*.d3-tip:after {
      box-sizing: border-box;
      display: inline;
      font-size: 10px;
      width: 100%;
      line-height: 1;
      color: rgba(0, 0, 0, 0.8);
      content: "\25BC";
      position: absolute;
      text-align: center;
    }*/
    /* Style northward tooltips differently */
    .d3-tip.n:after {
      margin: -1px 0 0 0;
      top: 100%;
      left: 0;
    }  
  </style>
</head>
<body>
  <div class="navbar navbar-inverse" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <a class="navbar-brand" href="#"><span class="green">TOP09</span> vs. <span class="red">15 %</span> - Evropské volby 2014 - European Elections 2014</a>
      </div>
    </div>
  </div>
  <!-- chart -->
  <p id="chart"></p>
  <div class="alert alert-info" >
    <span class="green">TOP09 &gt 15 %</span>; <span class="red">TOP09 &lt 15 %</span><br>
    <strong>Velikost bubliny</strong> odpovídá počtu voličů, <strong>tloušťka kruhu</strong> ukazuje rozdíl porovnávaných hodnot.<br>
    The <strong>size</strong> of bubbles represents number of voters, the <strong>ring width</strong> represents the difference.
  </div>

  <script type="text/javascript">
  //subcharts' specifications
	//load specs from 
	var specs = {
      'lngMin': 12.156,
      'lngMax': 18.84,
      'latMin': 48.6,
      'latMax': 51.023,
      'max_population': 45000,
      'max_size': 50,
      'file': 'epcz_top-09_15_2014.json',
      'height': 325,
      'width': 620,
    };
	// Chart dimensions.
	var margin = {top: 10, right: 0, bottom: 0, left: 30},
		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]);
      
    /* Initialize tooltip */	
    tip = d3.tip().attr('class', 'd3-tip').html(function(d) { 
      return '<span class="stronger">' + d.title + '</span><br><br>TOP 09: ' + d.votes1 + '<br>15 %: ' + d.votes2;
    });   

// Create the SVG container and set the origin.
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 + ")");
	
	/* Invoke the tip in the context of your visualization */
    svg.call(tip);
	
	// 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
		.map(function(d) {
		  return {
			x: xScale(parseFloat(d.lng)),
			y: yScale(parseFloat(d.lat)),
			r: (radiusScale(d.votes[0])+radiusScale(d.votes[1]))/2,
			r2: Math.abs(radiusScale(d.votes[0])-radiusScale(d.votes[1])),
			title: d.town,
			name: d.town,
			id: d.id,
			votes1: d.votes[0],
			votes2: d.votes[1],
			classname: compare(d.votes[0],d.votes[1])
		  };
		});
	  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("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", tip.show)
			.on("mouseout", tip.hide);
	});  

function compare(a,b) {
  if (a > b) return 'group1'; else return 'group2';
}    	
  </script>
</body>
</html>

zeleni.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Zelení vs. 5 %</title>
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
  <script src="//d3js.org/d3.v3.min.js"></script>
  <script src="d3.tip.js"></script>
  <style>
    #chart {
      height: 325px;/*502*/
      width: 620px;/*900*/
      /*border: 1px solid;*/
      background-color: white;
    }
    circle {
      fill: #888;
      fill-opacity: 0.01;
      stroke-opacity: 0.75;
      stroke: #f00;
    }
    .group1{
      stroke: #080;
    }
    .green {
      color: #080;
    }
    .red {
      color: #f00;
    }
    .stronger {
      color: yellow;
    }  
    /* D3 tips */  
    .d3-tip {
      line-height: 1;
      font-weight: bold;
      padding: 12px;
      background: rgba(0, 0, 0, 0.8);
      color: #fff;
      border-radius: 2px;
    }
    /* Creates a small triangle extender for the tooltip */
    /*.d3-tip:after {
      box-sizing: border-box;
      display: inline;
      font-size: 10px;
      width: 100%;
      line-height: 1;
      color: rgba(0, 0, 0, 0.8);
      content: "\25BC";
      position: absolute;
      text-align: center;
    }*/
    /* Style northward tooltips differently */
    .d3-tip.n:after {
      margin: -1px 0 0 0;
      top: 100%;
      left: 0;
    }  
  </style>
</head>
<body>
  <div class="navbar navbar-inverse" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <a class="navbar-brand" href="#"><span class="green">Zelení</span> vs. <span class="red">5 %</span> - Evropské volby 2014 - European Elections 2014</a>
      </div>
    </div>
  </div>
  <!-- chart -->
  <p id="chart"></p>
  <div class="alert alert-info" >
    <span class="green">Zelení &gt 5 %</span>; <span class="red">Zelení &lt 5 %</span><br>
    <strong>Velikost bubliny</strong> odpovídá počtu voličů, <strong>tloušťka kruhu</strong> ukazuje rozdíl porovnávaných hodnot.<br>
    The <strong>size</strong> of bubbles represents number of voters, the <strong>ring width</strong> represents the difference.
  </div>

  <script type="text/javascript">
  //subcharts' specifications
	//load specs from 
	var specs = {
      'lngMin': 12.156,
      'lngMax': 18.84,
      'latMin': 48.6,
      'latMax': 51.023,
      'max_population': 45000,
      'max_size': 50,
      'file': 'epcz_zeleni_5_2014.json',
      'height': 325,
      'width': 620,
    };
	// Chart dimensions.
	var margin = {top: 10, right: 0, bottom: 0, left: 30},
		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]);
      
    /* Initialize tooltip */	
    tip = d3.tip().attr('class', 'd3-tip').html(function(d) { 
      return '<span class="stronger">' + d.title + '</span><br><br>Zelení: ' + d.votes1 + '<br>5 %: ' + d.votes2;
    });   

// Create the SVG container and set the origin.
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 + ")");
	
	/* Invoke the tip in the context of your visualization */
    svg.call(tip);
	
	// 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
		.map(function(d) {
		  return {
			x: xScale(parseFloat(d.lng)),
			y: yScale(parseFloat(d.lat)),
			r: (radiusScale(d.votes[0])+radiusScale(d.votes[1]))/2,
			r2: Math.abs(radiusScale(d.votes[0])-radiusScale(d.votes[1])),
			title: d.town,
			name: d.town,
			id: d.id,
			votes1: d.votes[0],
			votes2: d.votes[1],
			classname: compare(d.votes[0],d.votes[1])
		  };
		});
	  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("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", tip.show)
			.on("mouseout", tip.hide);
	});  

function compare(a,b) {
  if (a > b) return 'group1'; else return 'group2';
}    	
  </script>
</body>
</html>