badosa/index.html

## readme.md

      
    Raw
  

              readme.md
            
          
    Istat was the first National Statistical Office to offer an API supporting
JSON-stat. Unfortunately, Istat closed its JSON-stat API.
Here is a similar code to the one used in Dynamic Norwegian Pyramid.

  
## index.html
  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="UTF-8">
      <link href="/d/6103806/style.css" type="text/css" rel="stylesheet" />
      <script src="https://cdn.jsdelivr.net/npm/jsonstat@0.13.13"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
      <script src="https://www.flotcharts.org/javascript/jquery.flot.min.js"></script>
      <script src="https://rawgithub.com/asis/flot-pyramid/v1.0.0/src/jquery.flot.pyramid.js"> </script>
    </head>
    <body>
      <div id="container">
        <div id="canvas"><p>Sorry, Istat closed its JSON-stat API!</p></div>
        <div id="year"></div>
      </div>

      <script>
      JSONstat("http://apistat.istat.it/?q=getdatajson&dataset=DCIS_POPRES1&lang=1&dim=1,1,0,0,8,0", function(){
         var
          ds=this.Dataset(0),
          age=ds.Dimension('IDETA1'),
          time=ds.Dimension('IDTIME'),
          tlen=time.length,
          tids=time.id,
          latest=time.Category(tids[tlen-1]).label,
          pyramid=function(year){
           var
             transform=function(e,i,a){
               if(age.Category(i).label!=="total"){
                 return [age.Category(i).label, e.value];
               }
             },
             men=ds.Data({'IDSEXISTAT1': '1', 'IDTIME': year}).map(transform),
             women=ds.Data({'IDSEXISTAT1': '2', 'IDTIME': year}).map(transform),
             pop=[
              { label: 'Men', color: '#00008b', data: men, pyramid: {direction: 'L'} },
              { label: 'Women', color: '#8b0000', data: women }
             ]
           ;

           $('#year').text(time.Category(year).label);
           $.plot('#canvas', pop, {
             series: {
              pyramid: { show: true },
              bars: { fillColor: { colors: [ { opacity: 1 }, { opacity: 1 } ] } }
             },
             xaxis: { show: false },
             yaxis: { show: false },
             grid: { show: false, borderWidth: 1, borderColor: '#c0c0c0' }
           });
          },
          init=function(){
           var t=-1;
           window.setInterval(function() {
             ++t;
             if (t<tlen) { pyramid(tids[t]); }
           }, 500);
          }
        ;

        $('#year').click(function(){
          if($('#year').text()===latest){
           init();
          }else{
           window.alert('Animation frozen.\n\nTo rerun, wait till the animation stops and then click on the year.');
          }
        });

        $('#canvas').html('');
        init();
      });
      </script>
    </body>
  </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<link href="/d/6103806/style.css" type="text/css" rel="stylesheet" />
	<script src="https://cdn.jsdelivr.net/npm/jsonstat@0.13.13"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
	<script src="https://www.flotcharts.org/javascript/jquery.flot.min.js"></script>
	<script src="https://rawgithub.com/asis/flot-pyramid/v1.0.0/src/jquery.flot.pyramid.js"> </script>
	</head>
	<body>
	<div id="container">
	<div id="canvas"><p>Sorry, Istat closed its JSON-stat API!</p></div>
	<div id="year"></div>
	</div>

	<script>
	JSONstat("http://apistat.istat.it/?q=getdatajson&dataset=DCIS_POPRES1&lang=1&dim=1,1,0,0,8,0", function(){
	var
	ds=this.Dataset(0),
	age=ds.Dimension('IDETA1'),
	time=ds.Dimension('IDTIME'),
	tlen=time.length,
	tids=time.id,
	latest=time.Category(tids[tlen-1]).label,
	pyramid=function(year){
	var
	transform=function(e,i,a){
	if(age.Category(i).label!=="total"){
	return [age.Category(i).label, e.value];
	}
	},
	men=ds.Data({'IDSEXISTAT1': '1', 'IDTIME': year}).map(transform),
	women=ds.Data({'IDSEXISTAT1': '2', 'IDTIME': year}).map(transform),
	pop=[
	{ label: 'Men', color: '#00008b', data: men, pyramid: {direction: 'L'} },
	{ label: 'Women', color: '#8b0000', data: women }
	]
	;

	$('#year').text(time.Category(year).label);
	$.plot('#canvas', pop, {
	series: {
	pyramid: { show: true },
	bars: { fillColor: { colors: [ { opacity: 1 }, { opacity: 1 } ] } }
	},
	xaxis: { show: false },
	yaxis: { show: false },
	grid: { show: false, borderWidth: 1, borderColor: '#c0c0c0' }
	});
	},
	init=function(){
	var t=-1;
	window.setInterval(function() {
	++t;
	if (t<tlen) { pyramid(tids[t]); }
	}, 500);
	}
	;

	$('#year').click(function(){
	if($('#year').text()===latest){
	init();
	}else{
	window.alert('Animation frozen.\n\nTo rerun, wait till the animation stops and then click on the year.');
	}
	});

	$('#canvas').html('');
	init();
	});
	</script>
	</body>
	</html>