index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Czech elections 2013 - Úsvit</title>
<link rel="stylesheet" type="text/css" href="president_2013_ring.css" />
</head>
<body>
<h1>Czech elections 2013 - Úsvit</h1>
<p id="chart_cz"></p>
<p></p>
<script src="//d3js.org/d3.v3.min.js"></script>
<script type="text/javascript">
var specs = {i: 0, name: 'chart_cz', width: 900, height: 502, lngMin: 12.156, lngMax: 18.84, latMin: 48.6, latMax: 51.023, file: 'cz_psp_2013_ring_usvit_5.json', max_population: 1120000, max_size: 160};
var margin = {top: 0, right: 0, bottom: 0, left: 0},
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]);
a=1;
a=1;
var svg = d3.select("#"+specs.name).append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 1e-6);
d3.json(specs.file, function(data) {
nodes = data.features
.map(function(d) {
return {
x: xScale(d.coordinates[0]),
y: yScale(d.coordinates[1]),
r: (radiusScale(d.population.p6)+radiusScale(d.population.p9))/2,
r2: Math.abs(radiusScale(d.population.p9)-radiusScale(d.population.p6)),
title: d.name + ': ' + d.winner + ' vyhráli ' + Math.max(d.population.p6,d.population.p9) + ':' + Math.min(d.population.p6,d.population.p9),
name: d.name,
id: d.id,
population: d.population,
classname: d.classname
};
});
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", mouseover)
.on("mousemove", function(d){mousemove(d);})
.on("mouseout", mouseout)
});
function mouseover() {
div.transition()
.duration(300)
.style("opacity", 1);
}
function mousemove(d) {
div
.text(d.title)
.style("left", (d3.event.pageX ) + "px")
.style("top", (d3.event.pageY) + "px");
}
function mouseout() {
div.transition()
.duration(300)
.style("opacity", 1e-6);
}
function in_array (needle, haystack, argStrict) {
var key = '',
strict = !! argStrict;
if (strict) {
for (key in haystack) {
if (haystack[key] === needle) {
return true;
}
}
} else {
for (key in haystack) {
if (haystack[key] == needle) {
return true;
}
}
}
return false;
}
</script>
</body>
</html>
president_2013_ring.css
#chart_cz {
height: 502px;
width: 900px;
background-color: white;
}
div.tooltip
{
position: absolute;
text-align: center;
width: 140px;
height: 25px;
padding: 8px;
font: 10px sans-serif;
background: #ffff99;
border: solid 1px #aaa;
border-radius: 8px;
pointer-events: none;
}
circle {
fill: #888;
fill-opacity: 0.01;
stroke-opacity: 0.75;
stroke: #f00;
}
.cssd {
stroke: #f54200;
color: #f54200;
fill: #fff;
}
.ods, .top-09-ods {
stroke: #008;
fill: white;
color: #008
}
.kdu-csl {
stroke: #fedc35;
fill: white;
color: #fedc35;
}
.svobodni {
stroke: #080;
fill: white;
color: #080;
}
.kscm {
fill: white;
stroke: #f00;
color: #f00;
}
.top-09 {
fill: white;
stroke: #808;
color: #808;
}
.zeleni, .zmena, .zeleni-pirati-zmena {
fill: white;
stroke: #0f0;
color: #0f0;
}
.usvit {
stroke: #0bb;
fill: white;
color: #0bb;
}
.ano-2011 {
stroke: #44f;
fill: white;
color: #44f;
}
.pirati {
stroke: #000;
fill: white;
color: #000;
}
.hlavu-vzhuru {
fill: #ff4;
color: #ff4;
}
.spoz {
fill: #f44;
color: #f44;
}
.cssd-ano,.kscm-top-09 {
stroke: #0f0;
fill: white;
color: #0f0;
}