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;
width: 620px;
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-tip {
line-height: 1;
font-weight: bold;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 2px;
}
.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>
<p id="chart"></p>
<div class="alert alert-info" >
<span class="green">KDU-ČSL > 10 %</span>; <span class="red">KDU-ČSL < 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">
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,
};
var margin = {top: 10, right: 0, bottom: 0, left: 30},
width = specs.width - margin.right,
height = specs.height - margin.top - margin.bottom;
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]);
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;
});
var svg = d3.select("#chart").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.call(tip);
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 1e-6);
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;
width: 620px;
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-tip {
line-height: 1;
font-weight: bold;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 2px;
}
.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>
<p id="chart"></p>
<div class="alert alert-info" >
<span class="green">ANO > 15 %</span>; <span class="red">ANO < 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">
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,
};
var margin = {top: 10, right: 0, bottom: 0, left: 30},
width = specs.width - margin.right,
height = specs.height - margin.top - margin.bottom;
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]);
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;
});
var svg = d3.select("#chart").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.call(tip);
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 1e-6);
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;
width: 620px;
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-tip {
line-height: 1;
font-weight: bold;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 2px;
}
.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>
<p id="chart"></p>
<div class="alert alert-info" >
<span class="green">ČSSD > 15 %</span>; <span class="red">ČSSD < 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">
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,
};
var margin = {top: 10, right: 0, bottom: 0, left: 30},
width = specs.width - margin.right,
height = specs.height - margin.top - margin.bottom;
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]);
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;
});
var svg = d3.select("#chart").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.call(tip);
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 1e-6);
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
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)
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
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])))
votes.append(r)
i = i + 1
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'
}
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>
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" />
<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">
var map = L.map('map',{zoomControl: false}).setView([50,15], 7);
map.addControl( L.control.zoom({position: 'topright'}) );
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> | © <a href="//osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
$.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>";
}
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
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
define(['d3'], factory)
} else {
root.d3.tip = factory(root.d3)
}
}(this, function (d3) {
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)
}
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
}
tip.hide = function() {
nodel = d3.select(node)
nodel.style({ opacity: 0, 'pointer-events': 'none' })
return tip
}
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
}
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
}
tip.direction = function(v) {
if (!arguments.length) return direction
direction = v == null ? v : d3.functor(v)
return tip
}
tip.offset = function(v) {
if (!arguments.length) return offset
offset = v == null ? v : d3.functor(v)
return 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
}
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;
width: 620px;
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-tip {
line-height: 1;
font-weight: bold;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 2px;
}
.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>
<p id="chart"></p>
<div class="alert alert-info" >
<span class="green">Pospíšil > 33 %</span>; <span class="red">Pospíšil < 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">
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,
};
var margin = {top: 10, right: 10, bottom: 10, left: 30},
width = specs.width - margin.right,
height = specs.height - margin.top - margin.bottom;
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]);
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;
});
var svg = d3.select("#chart").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.call(tip);
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 1e-6);
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';
}
</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;
width: 620px;
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-tip {
line-height: 1;
font-weight: bold;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 2px;
}
.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>
<p id="chart"></p>
<div class="alert alert-info" >
<span class="green">KDU-ČSL > 10 %</span>; <span class="red">KDU-ČSL < 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">
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,
};
var margin = {top: 10, right: 0, bottom: 0, left: 30},
width = specs.width - margin.right,
height = specs.height - margin.top - margin.bottom;
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]);
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;
});
var svg = d3.select("#chart").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.call(tip);
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 1e-6);
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
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
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'}
]
i = 0
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;
width: 620px;
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-tip {
line-height: 1;
font-weight: bold;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 2px;
}
.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>
<p id="chart"></p>
<div class="alert alert-info" >
<span class="green">KSČM > 10 %</span>; <span class="red">KSČM < 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">
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,
};
var margin = {top: 10, right: 0, bottom: 0, left: 30},
width = specs.width - margin.right,
height = specs.height - margin.top - margin.bottom;
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]);
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;
});
var svg = d3.select("#chart").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.call(tip);
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 1e-6);
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;
width: 620px;
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-tip {
line-height: 1;
font-weight: bold;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 2px;
}
.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>
<p id="chart"></p>
<div class="alert alert-info" >
<span class="green">ODS > 7.5 %</span>; <span class="red">ODS < 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">
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,
};
var margin = {top: 10, right: 0, bottom: 0, left: 30},
width = specs.width - margin.right,
height = specs.height - margin.top - margin.bottom;
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]);
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;
});
var svg = d3.select("#chart").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.call(tip);
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 1e-6);
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;
width: 620px;
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-tip {
line-height: 1;
font-weight: bold;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 2px;
}
.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>
<p id="chart"></p>
<div class="alert alert-info" >
<span class="green">Piráti > 5 %</span>; <span class="red">Piráti < 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">
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,
};
var margin = {top: 10, right: 0, bottom: 0, left: 30},
width = specs.width - margin.right,
height = specs.height - margin.top - margin.bottom;
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]);
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;
});
var svg = d3.select("#chart").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.call(tip);
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 1e-6);
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;
width: 620px;
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-tip {
line-height: 1;
font-weight: bold;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 2px;
}
.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>
<p id="chart"></p>
<div class="alert alert-info" >
<span class="green">Svobodní > 5 %</span>; <span class="red">Svobodní < 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">
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,
};
var margin = {top: 10, right: 0, bottom: 0, left: 30},
width = specs.width - margin.right,
height = specs.height - margin.top - margin.bottom;
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]);
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;
});
var svg = d3.select("#chart").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.call(tip);
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 1e-6);
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;
width: 620px;
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-tip {
line-height: 1;
font-weight: bold;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 2px;
}
.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>
<p id="chart"></p>
<div class="alert alert-info" >
<span class="green">TOP09 > 15 %</span>; <span class="red">TOP09 < 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">
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,
};
var margin = {top: 10, right: 0, bottom: 0, left: 30},
width = specs.width - margin.right,
height = specs.height - margin.top - margin.bottom;
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]);
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;
});
var svg = d3.select("#chart").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.call(tip);
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 1e-6);
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;
width: 620px;
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-tip {
line-height: 1;
font-weight: bold;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 2px;
}
.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>
<p id="chart"></p>
<div class="alert alert-info" >
<span class="green">Zelení > 5 %</span>; <span class="red">Zelení < 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">
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,
};
var margin = {top: 10, right: 0, bottom: 0, left: 30},
width = specs.width - margin.right,
height = specs.height - margin.top - margin.bottom;
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]);
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;
});
var svg = d3.select("#chart").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.call(tip);
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 1e-6);
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>