block by michalskop 5685008

Czech regional election 2012

Full Screen

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="//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) {
  // //kevin.vanzonneveld.net
  // +   original by: Kevin van Zonneveld (//kevin.vanzonneveld.net)
  // +   improved by: vlado houba
  // +   input by: Billy
  // +   bugfixed by: Brett Zamir (//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>