index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>Krajské volby</title>
<style>
#chart {
height: 900px;
width: 900px;
border: 1px solid;
}
circle {
fill: #888;
fill-opacity: 0.85;
}
.extra {
fill-opacity: 0.75;
}
.cssd {
fill: #ffa500;
}
.ods {
fill: #008;
}
.kscm {
fill: #800;
}
.kdu-csl {
fill: #ff0;
}
.zmena {
fill: #0a0;
}
.slk {
fill: #abc;
}
.top09 {
fill: #808;
}
.scz {
fill: #f00;
}
.hzhrom {
fill: #9ab;
}
.vv {
fill: #00f;
}
</style>
<body>
<div>
<p id="chart_cz"></p>
<p id="chart_plzen"></p>
</div>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var max_population = 1120000;
var max_size = 45;
var specs = {i: 0, name: 'cz', title:'ČR', width: 900, height: 835, lngMin: 12.156, lngMax: 18.84, latMin: 47, latMax: 51.023, file: 'obce_0c.json'}
var extra_zoom = 3;
var extras = [
{name: 'Plzeň',
ids: [545970,557978,545988,546003,546208,554731,554758,554766,554774,559199],
center: {latitude: 49.748056, longitude: 13.374167},
new_center: {longitude: 13.374167, latitude: 48},
population: 159031
},
{name: 'Ostrava',
ids: [545911,546046,546135,546224,554219,554227,554235,554243,
554286,554308,554324,554332,554367,554375,554430,554537,554561,
554570,554588,554669,554685,554715,554723],
center: {latitude: 49.835556, longitude: 18.292778},
new_center: {longitude: 18.292778, latitude: 48},
population: 297436
},
{name: 'Brno',
ids: [550973,550990,551007,551031,551058,551066,551074,551082,551091,551112,
551147,551171,551198,551210,551228,551236,551244,551252,551279,551287,551295,
551309,551317,551325,551368,551376,551406,551422,551431],
center: {latitude: 49.20, longitude: 16.616667},
new_center: {longitude: 16.616667, latitude: 48},
population: 385913
},
{name: 'Praha',
ids: [500054,500089,500097,500119,500143,500178,500186,500208,500216,500224,538060,538078,
538124,538175,538205,538213,538302,538353,538361,538388,538400,538531,538736,538931,538949,
539007,539449,539465,539589,539601,539635,539678,539694,539724,539791,539864,539899,547034,
547042,547051,547107,547115,547140,547158,547174,547271,547298,547301,547310,547328,547344,
547361,547379,547387,547395,547409,547417],
center: {latitude: 50.087222, longitude: 14.42111},
new_center: {longitude: 14.42111, latitude: 48},
population: 1281041
}
];
var shorts = [
{short: 'cssd', names: ['Česká str.sociálně demokrat.']},
{short: 'kscm', names: ['Komunistická str.Čech a Moravy']},
{short: 'ods', names: ['Občanská demokratická strana']},
{short: 'kdu-csl', names: ['Křesť.demokr.unie-Čs.str.lid.', 'Koalice pro KHK - KDU-ČSL-VPM', 'Koalice pro Pardubický kraj', 'Koalice KDU-ČSL, SNK a nez.', 'Koalice pro Ol.kr. se starosty', 'Koalice KDU-ČSL a SsČR', 'KOALICE PRO KARLOVARSKÝ KRAJ', 'Koalice pro Plzeňský kraj']},
{short: 'zmena', names: ['ZMĚNA PRO LIBERECKÝ KRAJ', 'Hnutí PRO! kraj', 'ZMĚNA 2012', 'Změna pro Královéhradecký kraj']},
{short: 'slk', names: ['Starostové pro Liberecký kraj']},
{short: 'top09', names: ['TOP 09','TOP 09 a Starostové pro STČ', 'TOP 09 a Starostové pro KHK', 'STAN a TOP 09 pro Zl. kraj','TOP 09 a Starostové pro MSK','TOP 09 a Starostové pro JMK','TOP 09 a Starostové pro Plz.k.','TOP 09 a Starostové pro Ol.k.','TOP 09 a Starostové pro PAK', 'TOP 09 a Starostové pro KVK','TOP 09 a Starostové', 'TOP 09 a Starostové pro Vys.', 'TOP 09 a Starostové pro Úst.kr', 'TOP 09 a Starostové pro JHČ']},
{short: 'hzhrom', names: ['HN.ZA HARM.ROZVOJ OBCÍ A MĚST']},
{short: 'vv', names: ['Věci veřejné']},
{short: 'scz', names: ['Severočeši.cz']}
];
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, max_population]).range([0, max_size]);
var svg = d3.select("#chart_"+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 + ")");
d3.json(specs.file, function(data) {
nodes = data.features
.map(function(d) {
return {
x: xScale(shift_extra(d.geometry.coordinates[0],d.id,0,extras,extra_zoom)),
y: yScale(shift_extra(d.geometry.coordinates[1],d.id,1,extras,extra_zoom)),
r: radiusScale(d.properties.population),
title: d.properties.name + ': ' + d.properties.winner,
name: d.properties.name,
id: d.id,
winner: d.properties.winner,
population: d.properties.population
};
});
var circle = svg.selectAll("circle")
.data(data);
var node = svg.selectAll("circle")
.data(nodes)
.enter().append("circle")
.attr("r",function(d) {
return d.r;
})
.attr("cx", function(d) {return d.x;})
.attr("cy", function(d) {return d.y;})
.attr("title", function(d) {return d.title;})
.attr("class", function(d) {
if (is_extra(d.name)) {
if (d.name == 'Ostrava') return 'extra cssd';
if (d.name == 'Brno') return 'extra cssd';
if (d.name == 'Plzeň') return 'extra ods';
else return 'extra'; }
else {
if (d.population > 50000) {
return (party2short(d.winner,shorts) + ' extra');
} else {return party2short(d.winner,shorts);}
}
})
});
function is_extra(name) {
if ((name == 'Hlavní město Praha') || (name == 'Ostrava') || (name == 'Brno') || (name == 'Plzeň')) return true;
else return false;
}
function shift_extra(coordinate,id,latlng,extras,zoom){
for (i=0; i<extras.length; i++) {
x = extras[i];
if (in_array(id,x.ids)) {
if (latlng == 0)
return ((coordinate - x.center.longitude)*zoom + x.new_center.longitude);
else
return ((coordinate - x.center.latitude)*zoom + x.new_center.latitude);
}
}
return coordinate;
}
function party2short(party,shorts) {
for (i=0; i<shorts.length; i++) {
if (in_array(party,shorts[i].names)) {
return shorts[i].short;
}
}
return false;
}
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>