block by michalskop 7779436

CZ general elections 2013: comparing 3 parties by mixing colors

Full Screen

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Czech general elections 2013</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>
	  // see //leafletjs.com/reference.html
	  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" />
	 <!--[if lte IE 8]>
		 <link rel="stylesheet" href="//cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
	 <![endif]-->
    <script src="//cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
    <!--<script type="text/javascript" src="//mbostock.github.com/d3/d3.js?1.29.1"></script>-->
    <style type="text/css">

		html, body, #map {
		  width: 100%;
		  height: 100%;
		  margin: 0;
		  padding: 0;
		}

    </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="#">Czech general elections 2013</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> is mixed from basic colors representing each party.</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="#ff0000"></svg> ČSSD: 2 times more than both ANO and TOP09+ODS<br/>
		    <svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="green"><circle cx="10" cy="10" r="10" fill="green"></svg> ANO 2011: 2 times more than both ČSSD and TOP09+ODS<br/>
		    <svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="blue"><circle cx="10" cy="10" r="10" fill="green"></svg> TOP09+ODS: 2 times more than both ČSSD and ANO<br/>
		    <svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#ffff00"><circle cx="10" cy="10" r="10" fill="green"></svg> ČSSD and ANO equal: 2 times more than TOP09+ODS<br/>
		    <svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#ff00ff"><circle cx="10" cy="10" r="10" fill="green"></svg> ČSSD and TOP09+ODS equal: 2 times more than ANO<br/>
		    <svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#00ffff"><circle cx="10" cy="10" r="10" fill="green"></svg> ANO and TOP09+ODS equal: 2 times more than ČSSD<br/>
		    <svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#ffffff"><circle cx="10" cy="10" r="10" fill="green"></svg> ČSSD, ANO and TOP09+ODS equal<br/>
		    The colors are stressing more the differences (otherwise would be more white-ish)
		</div>
    </div>
    <div id="map" style="margin-top:40px;"></div>
    <script type="text/javascript">


		// Create the map
		var map = L.map('map',{zoomControl: false}).setView([50,15], 7);
		map.addControl( L.control.zoom({position: 'topright'}) );
		
		// add an OpenStreetMap tile layer
		// also see //wiki.openstreetmap.org/wiki/Tiles
		//L.tileLayer('//{s}.tile.osm.org/{z}/{x}/{y}.png', {
		L.tileLayer('//{s}.www.toolserver.org/tiles/bw-mapnik/{z}/{x}/{y}.png', {
			attribution: '&copy; <a href="//osm.org/copyright">OpenStreetMap</a> contributors'
		}).addTo(map);
		
		//add circles
		//$.getJSON( "cz_president_2013_both_2_ring.json", function (data) {
		$.getJSON( "cz_psp_2013_mix.json", function (data) {
		    $.each(data.features, function (index, value) {
		        
		        description = "<strong>" + value.name + "</strong><br>";
				sum = 0;
				$.each(value.description, function (i, v) {
				  tmp = Math.round(parseInt(v.value) / parseInt(value.population) * 1000) / 10;
				  description += v.name + ': ' +  tmp + '% (' + v.value + ' hlasů)<br>';
				  sum += parseInt(v.value)
				});
				tmp = Math.round((parseInt(value.population) - sum) / parseInt(value.population) * 1000) / 10;
				tmp2 = value.population - sum;
				description += "Ostatní: " + tmp + '% (' + tmp2 + ' hlasů)';
		    
		    
				circle = L.circle([value.coordinates[0], value.coordinates[1]], Math.sqrt(parseInt(value.population)*1000), {
					color: value.color,
					fillColor: value.color,
					fillOpacity: 0.85, //tmp/100,
					weight: 0.1,
				}).addTo(map);
				

				circle.bindPopup(description);
		  });
		});

	</script>
  </body>
</html>

data2json3.php

<?php

//mixing 3 colors + number of its votes


$datafile = "./obce4.csv";		//********************
$valuesfile = "./cz_psp_2013_obce_cele_no_abroad.csv";

$mixing = array(
  'ff0000' => array('cssd'),
  '00ff00' => array('ano-2011'),
  '0000ff' => array('top-09','ods')
);

$fields = array(
	'name' => 0,
	'code' => 3,
	//'population' => 6,
	'latitude' => 8,
	'longitude' => 7,
);

$fout = fopen("./cz_psp_2013_mix.json","w+");		//**********************************

$fdata = fopen($datafile, "r");

$fvalues = fopen($valuesfile, "r");

$data = new stdClass();

$ar = array();

$out = array();

$i = 0;

//colors
$mixingcolors = array();
foreach ($mixing as $key => $item) {
  $mixingcolors[$key] = hex2rgb($key);
}

//print_r($mixingcolors);

//read obce
while (($row = fgetcsv($fdata, 1000, ",")) !== FALSE) {
  if ($i>0) {
	$ar[trim($row[$fields['code']])] = $row;
	  //print_r($ar);die();
  }
  $i++;
}
//echo $i; 
$i = 0;
//read values
while (($row = fgetcsv($fvalues, 1000, ",")) !== FALSE) {
  if ($i>0) {
		$item = new stdClass();
		$item->name = $row[4];
		$item->id = $row[5];
		/*$item->winner = winner($row,$header);
		  if (isset($winners[$item->winner])) {
		    $winners[$item->winner] += 1;
		  } else {
		    $winners[$item->winner] = 1;
		    echo $item->winner . '::' . $item->name . "<br/>";
		  }*/
		//$item->classname = friendly_url($item->winner);
		$item->color = result2color($row,$mixing,$mixingheader,$mixingcolors);
		//echo $item->name . ":" . $item->color . "<br/>\n";
		//if ($i == 10) die();
		$item->population = population($row);
		$item->description = description($row,$mixing,$mixingheader,$header);  
		if (isset($ar[$item->id])) {
			$item->coordinates = array($ar[$item->id][$fields['latitude']],$ar[$item->id][$fields['longitude']]);
			$out[] = $item;
			  //print_r($item);die();
		} else 
        	echo $item->id . "<br/>";
  }
  else {
    $header = $row;
    $mixingheader = mixingheader($mixing,$header);
    //print_r($mixingheader);//die();
  }  
  $i++;
}

//print_r($winners);

fclose($fdata);
fclose($fvalues);
    
$data->features = $out;
    
fwrite($fout,json_encode($data));
fclose($fout);

function mixingheader($mixing,$header) {
  $out = array();
  foreach ($mixing as $mkey => $mitem) {
    $newitem = array();
    foreach ($mitem as $mmkey => $mmitem) {
      foreach ($header as $hkey => $hitem) {
        if (friendly_url($hitem) == $mmitem) {
          $newitem[] = $hkey;
        }
      }
    }
    $out[$mkey] = $newitem;
  }
  return $out;
}

function description($row,$mixing,$mixingheader,$header) {
  $out = array();
  foreach ($mixing as $mkey => $mitem) {
    $name = array();
    foreach ($mitem as $mmkey => $mmitem) {
      $name[] = $header[$mixingheader[$mkey][$mmkey]];
      if (isset($sums[$mkey]))
        $sums[$mkey] += $row[$mixingheader[$mkey][$mmkey]];
      else
        $sums[$mkey] = $row[$mixingheader[$mkey][$mmkey]];
    }
    $item = array();
    $item['name'] = implode(' + ',$name);
    $item['value'] = $sums[$mkey];
    $out[] = $item;
  }
  //print_r($out);die();
  return $out;
}

function result2color($row,$mixing,$mixingheader,$mixingcolors) {
  $sums = array();
  foreach ($mixing as $mkey => $mitem) {
    foreach ($mitem as $mmkey => $mmitem) {
      if (isset($sums[$mkey]))
        $sums[$mkey] += $row[$mixingheader[$mkey][$mmkey]];
      else
        $sums[$mkey] = $row[$mixingheader[$mkey][$mmkey]];
    }
  }
  //print_r($sums);
  $out_ar = array();
  foreach ($sums as $skey => $sum) {
    for ($i=0; $i <= 2; $i++) {
      //echo $mixingcolors[$skey];
      if (isset($out_ar[$i]))
        $out_ar[$i] += $mixingcolors[$skey][$i] * $sum / max($sums);
      else
        $out_ar[$i] = $mixingcolors[$skey][$i] * $sum / max($sums);
    }
  }
  foreach ($out_ar as $key => $c) {
    $out_ar[$key] = max(0,($c - 127)*2 - 1);
  }
  //print_r($out_ar);die();
  return rgb2hex($out_ar);
}

function population($row) {
  return $row[13];
}

function winner($row,$header) {
  $max = 0;
  $winner = '';
  for ($j = 15; $j <= 38; $j++) {
    if ($row[$j] > $max) {
      $max = $row[$j];
      $winner = $header[$j];
    }
  }
  return $winner;
}

function hex2rgb($hex) {
   $hex = str_replace("#", "", $hex);

   if(strlen($hex) == 3) {
      $r = hexdec(substr($hex,0,1).substr($hex,0,1));
      $g = hexdec(substr($hex,1,1).substr($hex,1,1));
      $b = hexdec(substr($hex,2,1).substr($hex,2,1));
   } else {
      $r = hexdec(substr($hex,0,2));
      $g = hexdec(substr($hex,2,2));
      $b = hexdec(substr($hex,4,2));
   }
   $rgb = array($r, $g, $b);
   //return implode(",", $rgb); // returns the rgb values separated by commas
   return $rgb; // returns an array with the rgb values
}

function rgb2hex($rgb) {
   $hex = "#";
   $hex .= str_pad(dechex($rgb[0]), 2, "0", STR_PAD_LEFT);
   $hex .= str_pad(dechex($rgb[1]), 2, "0", STR_PAD_LEFT);
   $hex .= str_pad(dechex($rgb[2]), 2, "0", STR_PAD_LEFT);

   return $hex; // returns the hex value including the number sign (#)
}

/**
* creates "friendly url" version of text, translits string (gets rid of diacritics) and substitutes ' ' for '-', etc.
* @return friendly url version of text
* example:
* friendly_url('klub ČSSD')
*     returns 'klub-cssd'
*/
function friendly_url($text,$locale = 'cs_CZ.utf-8') {
    $old_locale = setlocale(LC_ALL, "0");
setlocale(LC_ALL,$locale);
$url = $text;
$url = preg_replace('~[^\\pL0-9_]+~u', '-', $url);
$url = trim($url, "-");
$url = iconv("utf-8", "us-ascii//TRANSLIT", $url);
$url = strtolower($url);
$url = preg_replace('~[^-a-z0-9_]+~', '', $url);
setlocale(LC_ALL,$old_locale);
return $url;
}

?>