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>
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" />
<script src="//cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></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">
var map = L.map('map',{zoomControl: false}).setView([50,15], 7);
map.addControl( L.control.zoom({position: 'topright'}) );
L.tileLayer('//{s}.www.toolserver.org/tiles/bw-mapnik/{z}/{x}/{y}.png', {
attribution: '© <a href="//osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
$.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,
weight: 0.1,
}).addTo(map);
circle.bindPopup(description);
});
});
</script>
</body>
</html>
data2json3.php
<?php
$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,
'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;
$mixingcolors = array();
foreach ($mixing as $key => $item) {
$mixingcolors[$key] = hex2rgb($key);
}
while (($row = fgetcsv($fdata, 1000, ",")) !== FALSE) {
if ($i>0) {
$ar[trim($row[$fields['code']])] = $row;
}
$i++;
}
$i = 0;
while (($row = fgetcsv($fvalues, 1000, ",")) !== FALSE) {
if ($i>0) {
$item = new stdClass();
$item->name = $row[4];
$item->id = $row[5];
$item->color = result2color($row,$mixing,$mixingheader,$mixingcolors);
$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;
} else
echo $item->id . "<br/>";
}
else {
$header = $row;
$mixingheader = mixingheader($mixing,$header);
}
$i++;
}
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;
}
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]];
}
}
$out_ar = array();
foreach ($sums as $skey => $sum) {
for ($i=0; $i <= 2; $i++) {
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);
}
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 $rgb;
}
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;
}
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;
}
?>