Skip to content

Instantly share code, notes, and snippets.

@PiotrKrosniak

PiotrKrosniak/SOWC_data.html

Created May 5, 2016 19:55
Show Gist options
  • Save PiotrKrosniak/68a1fb667c0193d9f4b4e45d25b5a5b2 to your computer and use it in GitHub Desktop.
Save PiotrKrosniak/68a1fb667c0193d9f4b4e45d25b5a5b2 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
SOWC_data.html
<!DOCTYPE html>
<html lang='en'>
<head>
<title>SOWC 2016 - State of the World Children's Report 2016 |Data Visualization| Piotr Krosniak </title>
<meta charset='utf-8' />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta content='Each year, UNICEF’s flagship publication, The State of the Worlds Children, closely examines a key issue affecting children. This site present data visualization for 2016 Report edition ' name='description' />
<meta content='UNCIEF Data |Piotr Krosniak Visualization' name='author' />
<!-- Styles -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?v=3"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script type="text/javascript" src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
a { color: #4B58A6; }
a:hover { color: #4B58A6; }
#googft-mapCanvas img {
max-width: none;
}
@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");
.filter-box {
height: 15px;
width: 15px;
display: inline-block;
*border-right-width: 2px;
*border-bottom-width: 2px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
.filter-yellow { background-color: #FBF358; }
.filter-green { background-color: #00E13C; }
.filter-blue { background-color: #5781FC; }
.filter-purple { background-color: #7C54FB; }
.filter-red { background-color: #FB6353; }
canvas {-ms-touch-action: double-tap-zoom;}
/* customizations for iframe template */
.iframe #googft-mapCanvas { height: 500px; }
.iframe .well { margin-bottom: 5px; }
.iframe .alert { margin-top: 5px; }
#map-canvas {
height: 500px;
width: auto;
}
.myTable {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 14px;
background: #fff;
margin: 45px;
width: 480px;
border-collapse: collapse;
text-align: left;
}
.headrow {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 12px;
font-weight: normal;
text-align: left;
padding: 10px 8px;
border-bottom: 2px solid #6678b1 ! Important;
}
.footer{
margin-left:34%;
margin-right:1%;
position: absolute;
top:550px;}
.buttons{
margin-top:40px;
}
#share-buttons img {
width: 35px;
padding: 5px;
border: 0;
box-shadow: 0;
display: inline;
}
#legendWrapper{
display:none;
}
.btn-default{
margin-bottom:5px;}
#wrapper { position: relative; }
#over_map { position: absolute; top: 10px; left: 10px; z-index: 99; }
h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
margin-left:100px;
}
</style>
</head>
<body>
<div class='navbar navbar-default navbar-static-top'>
<div class='container-fluid'>
<div class="navbar-header">
<a class='navbar-brand' href='index.html'></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class='active'><a href="index.html">Map</a></li>
<li><a data-toggle="modal" data-target="#myModal">About</a></li>
<!-- Modal -->
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">About this page</h4>
</div>
<div class="modal-body">
<a href="https://drive.google.com/open?id=0B0hkBWMKHt09QlBXYmdOcy03Ykk" target="_blank">Resources: Fusion Tables and raw Excel</a>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class='container-fluid'>
<div class='row'>
<div class='col-md-4'>
<div class='well'>
<h2>
<p>State of the World Children 2016 Report</p>
</h2>
<p>As we mark 25 years of the Convention on the Rights of the Child, The State of the World’s Children calls for brave and fresh thinking to address age-old
problems that still affect the most disadvantaged children. In particular, the report calls for innovation – and for the best and brightest solutions coming
from communities to be taken to scale to benefit every child.</p><p>The Convention itself was an innovation that recognized children as people with rights that
must be respected equally to the rights of adults. It has helped drive remarkable progress for millions of children, but far too many are still being left behind.</p>
</p>The report highlights how new ways of solving problems – often emerging from local communities and young people themselves – can help us overcome age-old inequities
that prevent millions of children from surviving, thriving and making the most of their potential.</p>
<p>To finish unfinished business, we need to innovate. This means creating interconnected systems and new networks of problem-solvers that cross sectors, generations
and geographies. It means scaling up local solutions to solve global challenges – and adapting them in new contexts. It means shaping new markets and spurring the private
sector to design for development. It means creating solutions together with communities, and with a view to including all their members – preventing innovation from widening
gaps. It means doing things differently, to drive change for children.</p>
<br><Br>
<div class='row'>
<div class='col-md-6'>
<img src="https://s3.amazonaws.com/sowc2016/images/SOWC_cover.jpg" alt="Mountain View" style="">
</div>
<div class='col-md-6'>
<ul>
</ul>
</div>
</div>
<br />
</div>
<div class='alert alert-info' id='result_box' ><strong id='result_count'></strong></div>
</div>
<div class='col-md-8'>
<noscript>
<div class='alert alert-info'>
<h4>Your JavaScript is disabled</h4>
<p>Please enable JavaScript to view the map.</p>
</div>
</noscript>
<div id="wrapper">
<div id="map-canvas"></div>
<p class='pull-right'>
<div id="over_map"> <h2><span>Birth registration (%) 2010–2015 - poorest 20%</span></h2>
</div>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="buttons">
<a href="index.html" class="btn btn-default"><span class="glyphicon glyphicon-flag"></span> General indicators</a>
<a href="sheet2.html" class="btn btn-default"><span class="glyphicon glyphicon-cutlery"></span> Nutrition</a>
<a href="sheet3.html" class="btn btn-default"><span class="glyphicon glyphicon-heart"></span> Health</a>
<a href="sheet4.html" class="btn btn-default"><span class="glyphicon glyphicon-th"></span> HIV/AIDS</a>
<a href="sheet5.html" class="btn btn-default"><span class="glyphicon glyphicon-book"></span> Education</a>
<a href="sheet6.html" class="btn btn-default"><span class="glyphicon glyphicon-signal"></span> Demographic Indicators</a>
<a href="sheet7.html" class="btn btn-default"><span class="glyphicon glyphicon-screenshot"></span> Economic Indicators</a>
<a href="sheet8.html" class="btn btn-default"><span class="glyphicon glyphicon-asterisk"></span> Women</a>
<a href="sheet9.html" class="btn btn-default"><span class="glyphicon glyphicon-repeat"></span> Child Protection</a>
<a href="sheet10.html" class="btn btn-default"><span class="glyphicon glyphicon-upload"></span> Rate of Progress</a>
<a href="sheet11.html" class="btn btn-default"><span class="glyphicon glyphicon-play"></span> Adolescents</a>
<a href="sheet12.html" class="btn btn-default"><span class="glyphicon glyphicon-home"></span> Disparities by Residence</a>
<a href="sheet13.html" class="btn btn-default"><span class="glyphicon glyphicon-plus"></span> Disparities by Household Wealth</a>
<a href="sheet14.html" class="btn btn-default"><span class="glyphicon glyphicon-fullscreen"></span> Early Childhood Development</a>
<br><br>
</div>
<h4>Data for Country</h4>
<div class="panel panel-default">
<div id="visualization", class="panel-heading" style="align:right">Data Loading...</div>
</div>
</div>
</div>
</div>
<div id="legendWrapper"></div>
<div id="share-buttons">
<!-- Email -->
<a href="mailto:?Subject=SOWC Data Vizualization&amp;Body=I%20saw%20this%20and%20thought%20of%20you!%20 https://simplesharebuttons.com">
<img src="https://simplesharebuttons.com/images/somacro/email.png" alt="Email" />
</a>
<!-- Facebook -->
<a href="http://www.facebook.com/sharer.php?u=https://simplesharebuttons.com" target="_blank">
<img src="https://simplesharebuttons.com/images/somacro/facebook.png" alt="Facebook" />
</a>
<!-- Google+ -->
<a href="https://plus.google.com/share?url=https://simplesharebuttons.com" target="_blank">
<img src="https://simplesharebuttons.com/images/somacro/google.png" alt="Google" />
</a>
<!-- LinkedIn -->
<a href="http://www.linkedin.com/shareArticle?mini=true&amp;url=https://simplesharebuttons.com" target="_blank">
<img src="https://simplesharebuttons.com/images/somacro/linkedin.png" alt="LinkedIn" />
</a>
<!-- Pinterest -->
<a href="javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());">
<img src="https://simplesharebuttons.com/images/somacro/pinterest.png" alt="Pinterest" />
</a>
<!-- Print -->
<a href="javascript:;" onclick="window.print()">
<img src="https://simplesharebuttons.com/images/somacro/print.png" alt="Print" />
</a>
<!-- Twitter -->
<a href="https://twitter.com/share?url=https://simplesharebuttons.com&amp;text=Simple%20Share%20Buttons&amp;hashtags=simplesharebuttons" target="_blank">
<img src="https://simplesharebuttons.com/images/somacro/twitter.png" alt="Twitter" />
</a>
</div>
</section>
<script type="text/javascript">
google.load('visualization', '1', { packages: ['corechart'] });
/**
* Sector type mapped to a style rule.
* @type {Object}
* @const
*/
var LAYER_STYLES = {
'Residential': {
'min': 0,
'max': 100,
'colors': [
'#b30000',
'#e34a33',
'#e34a33',
'#fdcc8a',
'#fdd49e'
]
},
'Total': {
'min': 0,
'max': 20000,
'colors': [
'#d9d2e9',
'#b4a7d6',
'#8e7cc3',
'#674ea7',
'#351c75'
]
}
}
function initialize() {
var sector = 'Residential';
var map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(36.44406009144618, 3.33984375),
zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
},
});
var layer = new google.maps.FusionTablesLayer();
updateLayerQuery(layer, sector);
layer.setMap(map);
createLegend(map, sector);
styleLayerBySector(layer, sector);
styleMap(map);
drawVisualization('Afghanistan');
google.maps.event.addListener(layer, 'click', function(e) {
var county = e.row['Country'].value;
drawVisualization(county);
});
google.maps.event.addDomListener(document.getElementById('sector'),
'change', function() {
sector = this.value;
updateLayerQuery(layer, sector);
styleLayerBySector(layer, sector);
updateLegend(sector);
});
google.maps.event.addDomListener(document.getElementById('county'),
'change', function() {
var county = this.value;
updateLayerQuery(layer, sector, county);
drawVisualization(county);
});
}
function updateLayerQuery(layer, sector, county) {
var where = "Sector = '" + sector + "'";
if (county) {
where += " AND Country = '" + county + "'";
}
layer.setOptions({
suppressInfoWindows: true,
query: {
select: 'geometry',
from: '1HmmcYqmsf45dSb2xJVGsjtg6VH_R1aty9uSb9SbD',
where: where,
}
});
}
function createLegend(map, sector) {
var legendWrapper = document.createElement('div');
legendWrapper.id = 'legendWrapper';
legendWrapper.index = 1;
map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(
legendWrapper);
legendContent(legendWrapper, sector);
}
function legendContent(legendWrapper, sector) {
var legend = document.createElement('div');
var title = document.createElement('p');
title.innerHTML = sector + '';
legend.appendChild(title);
var layerStyle = LAYER_STYLES[sector];
var colors = layerStyle.colors;
var minNum = layerStyle.min;
var maxNum = layerStyle.max;
var step = (maxNum - minNum) / colors.length;
for (var i = 0; i < colors.length; i++) {
var legendItem = document.createElement('div');
var color = document.createElement('div');
color.setAttribute('class', 'color');
color.style.backgroundColor = colors[i];
legendItem.appendChild(color);
var newMin = minNum + step * i;
var newMax = newMin + step;
var minMax = document.createElement('span');
minMax.innerHTML = newMin + ' - ' + newMax;
legendItem.appendChild(minMax);
legend.appendChild(legendItem);
}
legendWrapper.appendChild(legend);
}
function updateLegend(sector) {
var legendWrapper = document.getElementById('legendWrapper');
var legend = document.getElementById('legend2');
legendWrapper.removeChild(legend);
legendContent(legendWrapper, sector);
}
function styleLayerBySector(layer, sector) {
var layerStyle = LAYER_STYLES[sector];
var colors = layerStyle.colors;
var minNum = layerStyle.min;
var maxNum = layerStyle.max;
var step = (maxNum - minNum) / colors.length;
var styles = new Array();
for (var i = 0; i < colors.length; i++) {
var newMin = minNum + step * i;
styles.push({
where: generateWhere(newMin, sector),
polygonOptions: {
fillColor: colors[i],
fillOpacity: 0.9
}
});
}
layer.set('styles', styles);
}
function generateWhere(minNum, sector) {
var whereClause = new Array();
whereClause.push("Sector = '");
whereClause.push(sector);
whereClause.push("' AND 'col3>>0' >= ");
whereClause.push(minNum);
return whereClause.join('');
}
function styleMap(map) {
var style = [{
featureType: 'all',
stylers: [{
saturation: -99
}]
}, {
featureType: 'poi',
stylers: [{
visibility: 'off'
}]
}, {
featureType: 'road',
stylers: [{
visibility: 'off'
}]
}];
var styledMapType = new google.maps.StyledMapType(style, {
map: map,
suppressInfoWindows: true,
name: 'Styled Map'
});
map.mapTypes.set('map-style', styledMapType);
map.setMapTypeId('map-style');
}
function drawVisualization(county) {
google.visualization.drawChart({
containerId: "visualization",
dataSourceUrl: "https://www.google.com/fusiontables/gvizdata?tq=",
query: "SELECT Country ,'col3>>0','col4>>0','col5>>0','col6>>0','col7>>0','col8>>0','col9>>0','col10>>0','col11>>0','col12>>0','col13>>0' ,'col14>>0','col15>>0','col16>>0' " +
"FROM 1HmmcYqmsf45dSb2xJVGsjtg6VH_R1aty9uSb9SbD WHERE Country = '" + county + "'",
chartType: "Table",
options: {
title: county,
allowHtml: true,
cssClassNames: {tableCell: 'myTable', headerCell: 'headrow'},
alternatingRowStyle: true
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment