Skip to content

Instantly share code, notes, and snippets.

@michalskop

michalskop/index.html

Last active December 17, 2015 22:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save michalskop/5685008 to your computer and use it in GitHub Desktop.
Save michalskop/5685008 to your computer and use it in GitHub Desktop.
Download ZIP
Czech regional election 2012
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>Krajské volby</title>
<style>
#chart {
/*margin-left: -40px;*/
height: 900px;/*502*/
width: 900px;
/*the width/height for czech rep. (itself) is 1.79*/
border: 1px solid;
/*background-image:url('./cz1024_2.png');*/
}
circle {
fill: #888;
fill-opacity: 0.85;
}
.extra {
/*stroke: #000;*/
/*fill: #fff;*/
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="http://d3js.org/d3.v3.min.js"></script>
<script>
//subcharts' specifications
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'} /*48.6 cz itself*/ /*obce_0_2010c.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']}
];
// Chart dimensions.
var margin = {top: 0, right: 0, bottom: 0, left: 0},
width = specs.width - margin.right,
height = specs.height - margin.top - margin.bottom;
//Various scales. These domains make assumptions of data, naturally.
var xScale = d3.scale.linear().domain([specs.lngMin, specs.lngMax]).range([0, width]),
yScale = d3.scale.linear().domain([specs.latMin, specs.latMax]).range([height, 0]),
radiusScale = d3.scale.sqrt().domain([0, max_population]).range([0, max_size]);
// Create the SVG container and set the origin.
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 + ")");
// Load the data.
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) {
// http://kevin.vanzonneveld.net
// + original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
// + improved by: vlado houba
// + input by: Billy
// + bugfixed by: Brett Zamir (http://brett-zamir.me)
// * example 1: in_array('van', ['Kevin', 'van', 'Zonneveld']);
// * returns 1: true
// * example 2: in_array('vlado', {0: 'Kevin', vlado: 'van', 1: 'Zonneveld'});
// * returns 2: false
// * example 3: in_array(1, ['1', '2', '3']);
// * returns 3: true
// * example 3: in_array(1, ['1', '2', '3'], false);
// * returns 3: true
// * example 4: in_array(1, ['1', '2', '3'], true);
// * returns 4: false
var key = '',
strict = !! argStrict;
if (strict) {
for (key in haystack) {
if (haystack[key] === needle) {
return true;
}
}
} else {
for (key in haystack) {
if (haystack[key] == needle) {
return true;
}
}
}
return false;
}
</script>
</body>
Display the source blob
Display the rendered blob
Raw
obce_0c.json
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment