Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
601 lines (533 sloc) 23.1 KB
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Palermo Incidenti 2016 - ixmaps story</title>
<meta name="author" content="ixmaps" />
<meta name="description" content="ixmaps story" />
<meta name="keywords" content="ixmaps,corruption,map" />
<meta name="Resource-type" content="Document" />
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="assets/css/jquery.fullPage.css" />
<link rel="stylesheet" type="text/css" href="index.css" />
<link href="assets/css/icomoon.css" rel="stylesheet" />
<style>
body{
background-color: rgba(255,255,255,0.1);
}
.fp-controlArrow.fp-prev{
border-color: transparent #444 transparent transparent;
}
.fp-controlArrow.fp-next{
border-color: transparent transparent transparent #444;
}
.shareBtns a {
color: #aaa;
}
a {
color: #aaa;
}
</style>
</head>
<body>
<div id="fullpage" style="display:none">
<div class="section " id="section0">
<!-- incidenti -->
<div class="slide" id="section0slide1">
<div class="intro">
<h1 >Palermo Incidenti</h1>
<hr>
<h1 >2016</h1>
<p>
<a id="theme_11" href='javascript:ixmaps.newTheme("Palermo Incidenti",num_totale,"clear");' style='display:none'>num_totale</a><br>
</p>
<p style="margin:0.5em">per arrivare ad altri temi si prega di scorrere giù o di scegliere dalla lista sottostante</p>
<div style="text-align:center;" >
<button type="button" class="btn btn-default" style="padding:0.7em;margin:0.2em"
onclick="javascript:$.fn.fullpage.moveTo(2);">Analisi temporali</button><br>
<button type="button" class="btn btn-default" style="padding:0.7em;margin:0.2em"
onclick="javascript:$.fn.fullpage.moveTo(3);">Indice di pericolosità</button><br>
</div>
<div class="row scrollclass fp-controlArrowUpDown" style="top:90%;left:210px;text-align:center;margin-top:1.7em;margin-bottom:1em">
<a href="javascript:$.fn.fullpage.moveSectionDown();"><span class="icon icon-arrow-down tip" data-tip="next" style="font-size:48px;color:#444;"></span></a>
</div><!-- row -->
</div>
</div>
<div class="slide" id="section0slide2">
<div class="intro">
<h1 >Incidenti stradali</h1>
<p style="text-align:center;margin:0.5em">
II</p>
<p>
<a id="theme_12" href='javascript:ixmaps.newTheme("Palermo Incidenti",num_totale_glow,"clear");'
style='display:none' >clean_street_overall_index_2016/a><br>
</p>
<div class="row scrollclass fp-controlArrowUpDown" style="top:90%;left:210px;text-align:center;margin-top:1.7em;margin-bottom:1em">
<a href="javascript:$.fn.fullpage.moveSectionDown();"></a>
</div><!-- row -->
</div>
</div>
<div class="slide" id="section0slide3">
<div class="intro">
<h1 >Incidenti stradali</h1>
<p style="text-align:center;margin:0.5em">
III</p>
<p>
<a id="theme_13" href='javascript:ixmaps.newTheme("Palermo Incidenti",num_totale_multibubble_center_glow,"clear");'
style='display:none' >clean_street_overall_index_2016/a><br>
</p>
<div class="row scrollclass fp-controlArrowUpDown" style="top:90%;left:210px;text-align:center;margin-top:1.7em;margin-bottom:1em">
<a href="javascript:$.fn.fullpage.moveSectionDown();"></a>
</div><!-- row -->
</div>
</div>
<div class="slide" id="section0slide4">
<div class="intro">
<h1 >Incidenti stradali</h1>
<p style="text-align:center;margin:0.5em">
IV</p>
<p>
<a id="theme_14" href='javascript:ixmaps.newTheme("Palermo Incidenti",num_totale_multibubble_center_linear_glow,"clear");'
style='display:none' >clean_street_overall_index_2016/a><br>
</p>
<div class="row scrollclass fp-controlArrowUpDown" style="top:90%;left:210px;text-align:center;margin-top:1.7em;margin-bottom:1em">
<a href="javascript:$.fn.fullpage.moveSectionDown();"></a>
</div><!-- row -->
</div>
</div>
<div class="slide" id="section0slide5">
<div class="intro">
<h1 >Incidenti stradali</h1>
<p style="text-align:center;margin:0.5em">
V</p>
<p>
<a id="theme_15" href='javascript:ixmaps.newTheme("Palermo Incidenti",num_totale_pie_centervalue,"clear");'
style='display:none' >clean_street_overall_index_2016/a><br>
</p>
<div class="row scrollclass fp-controlArrowUpDown" style="top:90%;left:210px;text-align:center;margin-top:1.7em;margin-bottom:1em">
<a href="javascript:$.fn.fullpage.moveSectionDown();"></a>
</div><!-- row -->
</div>
</div>
<div class="slide" id="section0slide6">
<div class="intro">
<h1 >Incidenti stradali</h1>
<p style="text-align:center;margin:0.5em">
VI</p>
<p>
<a id="theme_16" href='javascript:ixmaps.newTheme("Palermo Incidenti",num_totale_multibubble,"clear");'
style='display:none' >clean_street_overall_index_2016/a><br>
</p>
<div class="row scrollclass fp-controlArrowUpDown" style="top:90%;left:210px;text-align:center;margin-top:1.7em;margin-bottom:1em">
<a href="javascript:$.fn.fullpage.moveSectionDown();"></a>
</div><!-- row -->
</div>
</div>
</div>
<div class="section" id="section1">
<!-- curve -->
<div class="slide" id="section1slide1">
<div class="intro">
<h1 >Palermo Incidenti</h1>
<p style="text-align:center;margin:0.5em">
per giorno della settimana</p>
<p>
<a id="theme_21" href='javascript:ixmaps.newTheme("Palermo Incidenti",giorno_della_settimana_curve,"clear");' style='display:none'>hidden</a><br>
</p>
<div class="row scrollclass fp-controlArrowUpDown" style="top:90%;left:210px;text-align:center;margin-top:1.7em;margin-bottom:1em">
<a href="javascript:$.fn.fullpage.moveSectionDown();"><span class="icon icon-arrow-down tip" data-tip="next" style="font-size:48px;color:#dddddd;"></span></a>
</div><!-- row -->
</div>
</div>
<div class="slide" id="section1slide2">
<div class="intro">
<h1 >Incidenti stradali</h1>
<p style="text-align:center;margin:0.5em">
per fascia oraria</p>
<p>
<a id="theme_22" href='javascript:ixmaps.newTheme("Palermo Incidenti",fasce_orarie_curve,"clear");'
style='display:none' >clean_street_overall_index_2016/a><br>
</p>
<div class="row scrollclass fp-controlArrowUpDown" style="top:90%;left:210px;text-align:center;margin-top:1.7em;margin-bottom:1em">
<a href="javascript:$.fn.fullpage.moveSectionDown();"><span class="icon icon-arrow-down tip" data-tip="next" style="font-size:48px;color:#dddddd;"></span></a>
</div><!-- row -->
</div>
</div>
<div class="slide" id="section1slide3">
<div class="intro">
<h1 >Incidenti stradali</h1>
<p style="text-align:center;margin:0.5em">
per mese</p>
<p>
<a id="theme_23" href='javascript:ixmaps.newTheme("Palermo Incidenti",mese_curve,"clear");'
style='display:none' >clean_street_overall_index_2016/a><br>
</p>
<div class="row scrollclass fp-controlArrowUpDown" style="top:90%;left:210px;text-align:center;margin-top:1.7em;margin-bottom:1em">
<a href="javascript:$.fn.fullpage.moveSectionDown();"><span class="icon icon-arrow-down tip" data-tip="next" style="font-size:48px;color:#dddddd;"></span></a>
</div><!-- row -->
</div>
</div>
<div class="slide" id="section1slide4">
<div class="intro">
<h1 >Incidenti stradali</h1>
<p style="text-align:center;margin:0.5em">
per fascia oraria e feriti/illesi</p>
<p>
<a id="theme_24" href='javascript:ixmaps.newTheme("Palermo Incidenti",fasce_orarie_curve_all,"clear");'
style='display:none' >clean_street_overall_index_2016</a><br>
</p>
<div class="row scrollclass fp-controlArrowUpDown" style="top:90%;left:210px;text-align:center;margin-top:1.7em;margin-bottom:1em">
<a href="javascript:$.fn.fullpage.moveSectionDown();"><span class="icon icon-arrow-down tip" data-tip="next" style="font-size:48px;color:#dddddd;"></span></a>
</div><!-- row -->
</div>
</div>
</div>
<div class="section" id="section2">
<!-- indice pericolosità -->
<div class="slide" id="section2slide1">
<div class="intro">
<h1 >Palermo Incidenti</h1>
<h2 style="text-align:center;margin:0.5em">
Incidentalità</h2>
<p>
<a id="theme_31" href='javascript:ixmaps.newTheme("Palermo Incidenti",test_feriti_monochrome,"clear");' style='display:none'>hidden</a><br>
</p>
<div class="row scrollclass fp-controlArrowUpDown" style="top:90%;left:210px;text-align:center;margin-top:1.7em;margin-bottom:1em">
<a href="javascript:$.fn.fullpage.moveSectionDown();"><span class="icon icon-arrow-down tip" data-tip="next" style="font-size:48px;color:#dddddd;"></span></a>
</div><!-- row -->
</div>
</div>
<div class="slide" id="section2slide2">
<div class="intro">
<h1 >Palermo Incidenti</h1>
<h2 style="text-align:center;margin:0.5em">
Pericolosità I</h2>
<p>
<a id="theme_32" href='javascript:ixmaps.newTheme("Palermo Incidenti",test_feriti_relativi_monochrome,"clear");' style='display:none'>hidden</a><br>
</p>
<div class="row scrollclass fp-controlArrowUpDown" style="top:90%;left:210px;text-align:center;margin-top:1.7em;margin-bottom:1em">
<a href="javascript:$.fn.fullpage.moveSectionDown();"><span class="icon icon-arrow-down tip" data-tip="next" style="font-size:48px;color:#dddddd;"></span></a>
</div><!-- row -->
</div>
</div>
<div class="slide" id="section2slide3">
<div class="intro">
<h1 >Incidenti stradali</h1>
<p style="text-align:center;margin:0.5em">
Pericolosità II</p>
<p>
<a id="theme_33" href='javascript:ixmaps.newTheme("Palermo Incidenti",test_fraction,"clear");'
style='display:none' >clean_street_overall_index_2016/a><br>
</p>
<div class="row scrollclass fp-controlArrowUpDown" style="top:90%;left:210px;text-align:center;margin-top:1.7em;margin-bottom:1em">
<a href="javascript:$.fn.fullpage.moveSectionDown();"><span class="icon icon-arrow-down tip" data-tip="next" style="font-size:48px;color:#dddddd;"></span></a>
</div><!-- row -->
</div>
</div>
<div class="slide" id="section2slide4">
<div class="intro">
<h1 >Incidenti stradali</h1>
<p style="text-align:center;margin:0.5em">
Pericolosità III</p>
<p style="text-align:center;margin:0.5em">tentativo di creare un indice della pericolosità relativa aggregando il numero delle persono ferite diviso per il numero delle persone coinvolte per una griglia dinamica e normalizzando il risultato tra 0 e 1</p>
<p>
<a id="theme_34" href='javascript:ixmaps.newTheme("Roma Incidenti",num_feriti_totale_circlebin_px_dyn,"clear");' style='display:none'>dummy</a><br>
</p>
<div class="row scrollclass fp-controlArrowUpDown" style="top:90%;left:210px;text-align:center;margin-top:1.7em;margin-bottom:1em">
<a href="javascript:$.fn.fullpage.moveSectionDown();"><span class="icon icon-arrow-down tip" data-tip="next" style="font-size:48px;color:#dddddd;"></span></a>
</div><!-- row -->
</div>
</div>
<div class="slide" id="section2slide5">
<div class="intro">
<h1 >Incidenti stradali</h1>
<p style="text-align:center;margin:0.5em">
Pericolosità IV</p>
<p style="text-align:center;margin:0.5em">tentativo di creare un indice della pericolosità relativa aggregando il numero delle persono ferite diviso per il numero delle persone coinvolte per una griglia dinamica e normalizzando il risultato tra 0 e 1</p>
<p style="text-align:center;margin:0.5em">Tema da vedere preferibilmente con mappa di base scura <a href="javascript:ixmaps.loadStoryTool('./layer.html')" >
<i class="shareIcon blackHover share_bitly icon-map" title="Info" tabindex="-1" style="margin-left:0.2em" ></i></a</p>
<p>
<a id="theme_35" href='javascript:ixmaps.newTheme("Roma Incidenti",num_feriti_totale_hexbin_heat_px_dyn,"clear");' style='display:none'>dummy</a><br>
</p>
<div class="row scrollclass fp-controlArrowUpDown" style="top:90%;left:210px;text-align:center;margin-top:1.7em;margin-bottom:1em">
<a href="javascript:$.fn.fullpage.moveSectionDown();"><span class="icon icon-arrow-down tip" data-tip="next" style="font-size:48px;color:#dddddd;"></span></a>
</div><!-- row -->
</div>
</div>
</div>
<div class="section" id="section3">
<div class="footer">
<h1>Attribuzioni</h1>
<hr>
<p>Data:<br>
<a href='https://www.comune.palermo.it/opendata_dld.php?id=523' target='_blank'>Polizia Municipale di Palermo<br>Open Data Palermo</a> - CC BY 4.0</p>
<br>
<p>Visualizzazione:<br>
creato da <a href="http://ixmaps.com">iXmaps</a> - CC BY</p>
<p> <span class="icon icon-envelop"></span> <a href="#"> info@ixmaps.com</a> <br/>
<span class="icon icon-twitter"></span> <a href="#"> @grichter </a> <br/>
</p>
<br>
<p>Crediti:</p>
<p>
<a href="http://alvarotrigo.com/fullPage/">alvarotrigo.com</a> - for the scrolling
<br><a href="http://icomoon.io">icomoon.io</a> - for the nice icons
</p>
</div>
</div>
</div>
<div id="header" style="position: fixed;top:0;left:10px;width:90%;height:40px;" >
<div class="container" style="margin-top:11px" >
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="header" aria-hidden="true">
<div class="linkSocialContainer" style="float:left">
<span class="linkContainer"></span>
<span class="shareBtns" style="font-size:24px">
<a href="javascript:ixmaps.popupShare()">
<i class="shareIcon blackHover share_facebook icon-facebook-squared" title="Share on Facebook" tabindex="-1"></i></a>
<a href="javascript:ixmaps.popupBookmarks()">
<i class="shareIcon blackHover share_twitter icon-bookmark" title="Open bookmarks dialog" tabindex="-1"></i></a>
<a href="javascript:ixmaps.popupShare()">
<i class="shareIcon blackHover share_bitly icon-share" title="Share a short link" tabindex="-1"></i></a>
<a href="javascript:ixmaps.loadStoryTool('./filter.html')" >
<i class="shareIcon blackHover share_bitly icon-filter" title="Filter" tabindex="-1" style="margin-left:0.2em" ></i></a>
<a href="javascript:ixmaps.loadStoryTool('./layer.html')" >
<i class="shareIcon blackHover share_bitly icon-map" title="Info" tabindex="-1" style="margin-left:0.2em" ></i></a>
<a href="javascript:ixmaps.loadStoryTool('./about.html')" >
<i class="shareIcon blackHover share_bitly icon-info" title="Info" tabindex="-1" style="margin-left:0.2em" ></i></a>
</span>
</div>
<div class="linkSocialContainer" style="float:right;margin-right:-1.5em;margin-top:0.2em;">
<span class="linkContainer"></span>
<span class="shareBtns" style="font-size:18px">
<a href="javascript:ixmaps.loadStoryTool('./menu.html')">
<i class="shareIcon blackHover share_bitly icon-list2" title="Info" tabindex="-1" style="margin-left:0.2em;color:#444" ></i></a>
</span>
<span class="shareBtns" style="font-size:18px">
<a href="javascript:ixmaps.fullScreen()">
<i class="shareIcon blackHover share_bitly icon-close" title="Info" tabindex="-1" style="margin-left:0.2em" ></i></a>
</span>
</div>
<div class="logoContainer" style="float:right;margin-right:-10px;display:none">
<table>
<tr>
<td class="logoWrapper">
<a class="logoLink" target="_blank" tabindex="-1">
<img class="logoImg" src="" height="60px" style="opacity:0.8"/>
</a>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ==== MODAL DIALOG ==== -->
<div id="modal-dialog-1" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" style="z-index:9999">
<div class="modal-dialog modal-lg">
<div class="modal-content">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
<div id="modal-dialog-2" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" style="z-index:9999">
<div class="modal-dialog modal-lg">
<div class="modal-content">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
<div id="modal-dialog-3" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" style="white;z-index:9999">
<div class="modal-dialog modal-lg">
<div class="modal-content">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
<!--[if IE]>
<script type="text/javascript">
var console = { log: function() {} };
</script>
<![endif]-->
<script type="text/javascript" src="assets/plugins/jquery-1.10.2.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/js/main.js"></script>
<script type="text/javascript" src="assets/js/masonry.pkgd.min.js"></script>
<script type="text/javascript" src="assets/js/imagesloaded.js"></script>
<script type="text/javascript" src="assets/js/classie.js"></script>
<script type="text/javascript" src="assets/js/AnimOnScroll.js"></script>
<script type="text/javascript" src="assets/plugins/scrolloverflow.js"></script>
<script type="text/javascript" src="assets/plugins/jquery.fullPage.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// ------------------------------------------
// defune fullpage action and start fullpage
// ------------------------------------------
var __section = null;
var __slide = null;
var __onChange = function() {
if ( !ixmaps.initialized ){
return;
}
__doTheme("theme_"+__section+(__slide+1));
};
$('#fullpage').fullpage({
'scrollOverflow': true,
'scrollOverflowOptions':{
scrollbars:false
},
'verticalCentered': false,
'css3': true,
//'sectionsColor': ['#888888', '#4A6F81', '#B14A4A'],
'navigation': true,
'navigationPosition': 'right',
'navigationTooltips': ['Incidenti', 'Analisi temporali', 'Pericolosità', 'Attribuzioni'],
'afterLoad': function(a,index,c,d){
__section = index;
__slide = 0;
$.fn.fullpage.silentMoveTo(index, __slide);
//__onChange();
},
'afterSlideLoad': function(a,index,c,d){
__slide = d;
__onChange();
},
'onLeave': function(index, nextIndex, direction){
}
});
$('#fullpage').fadeIn( "slow");
});
__doThemeOldTheme = null;
__doThemeTimeout = null;
__doTheme = function(szName) {
if ( szName == __doThemeOldTheme ){
return;
}
__doThemeOldTheme = szName;
if ( __doThemeTimeout ){
clearTimeout(__doThemeTimeout);
}
__doThemeTimeout = setTimeout("__doThemeOnTimeout('"+szName+"')",100);
}
__doThemeOnTimeout = function(szName) {
$("#"+szName).click();
eval($("#"+szName).attr("href"));
}
// ------------------------------
// set resize handler
// ------------------------------
$( window ).resize(function() {
// refresh scrollspy !!!
$('[data-spy="scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')
});
});
// ------------------------------
// get map handle !!!
// ------------------------------
var ixmaps = null;
if ( window.opener ){
ixmaps = window.opener.ixmaps;
}else
if ( parent ){
ixmaps = parent.window.ixmaps;
}
else{
alert("error: missing parent window for themes !");
}
ixmaps.initialized = false;
// ------------------------------------------------------
// load themes script (must bee done with ixmaps defined)
// ------------------------------------------------------
$.getScript("./index.js",function(){
});
$.getScript("./themes.js",function(){
});
$.getScript("./theme_legend.js",function(){
});
// ------------------------------
// do some init
// ------------------------------
// don't synchronise multiple map frames
ixmaps.setSyncMultiMaps(false);
var nLegendDiv = 0;
var legendA = Array(0);
ixmaps.setLegendDiv = function(n){
nLegendDiv = n;
};
ixmaps.setLoading = function(){
ixmaps.showLoading("... caricando ...");
};
// ------------------------------
// if map ready, make first theme
// ------------------------------
ixmaps.onMapReady = function(){
if ( !ixmaps.isBookmark() ){
ixmaps.setMapFeatures("popupdelay:250;toolmargintop:60;flushPaintShape:5000;flushChartDraw:5000;featurescaling:dynamic;objectscaling:dynamic;labelscaling:dynamic;dynamiclabel:NOSIZE;labelspace:2.0;checklabeloverlap:NOSQUEEZE;loadsilent:true;");
ixmaps.setLocalString("... processing ...","");
ixmaps.setLocalString("... creating theme ...",";-)");
ixmaps.setLocalString("creating charts","...");
ixmaps.setLocalString("loading data ...","... caricando dati ...");
ixmaps.setLocalString("data loaded ...","");
ixmaps.setLocalString("cleaning up ...","");
ixmaps.setScaleParam("normalSizeScale:5000");
ixmaps.setView([38.125097958610844,13.354740142822267],14);
setTimeout("__doTheme('theme_11')",250);
}
// disable update of the page url in the browser address bar (HTML5)
// thus themes,zoom and pan are coded into an actual URL
ixmaps.embeddedApi.embeddedApi.fDynamicPageHistory = false;
ixmaps.initialized = true;
ixmaps.moveSectionsDown = function(nr){
for ( var i=0; i<nr; i++ ){
setTimeout("$.fn.fullpage.moveSectionDown();",i*100);
}
};
ixmaps.moveToSection = function(nr,slide){
__fMoveActive = true;
$.fn.fullpage.silentMoveTo(nr,slide);
};
};
// --------------------------------------------------------------
// define click extension to
// check/highlight the theme button
// --------------------------------------------------------------
// array to store the clicked objects for onRemoveTheme callback
var clickA = new Array(0);
// store the last clicked object for onNewTheme callback
var lastClicked = null;
$("a").click(function () {
if ( String($(this).attr("href")).match(/newtheme/i) ){
lastClicked = $(this);
}
});
// ----------------------------------
// connect share function to map api
// ----------------------------------
ixmaps.popupBookmarks = function(){
var szElement = "bookmarks";
ixmaps.embeddedApi.embeddedApi.openDialog(null,'bookmarks','./history.html','Bookmarks','50%,103','25%','500');
};
ixmaps.popupShare = function(){
var szElement = "bookmarks";
ixmaps.embeddedApi.embeddedApi.openDialog(null,'share','./share.html','Share','50%,103',350,450);
};
ixmaps.popupInfo = function(){
var szElement = "bookmarks";
ixmaps.embeddedApi.embeddedApi.openDialog(null,'info','../doc/help_en.html','Help','10,103',500,600);
};
</script>
</body>
</html>