Skip to content

Instantly share code, notes, and snippets.

@badosa

badosa/index.html

Last active September 8, 2021 20:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save badosa/03ea95234895895f91cd9444199ef222 to your computer and use it in GitHub Desktop.
Save badosa/03ea95234895895f91cd9444199ef222 to your computer and use it in GitHub Desktop.
Download ZIP
Population Pyramid of Slovenia
Raw
readme.md
Raw
index.html
<html>
<head>
<meta charset="UTF-8">
<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>
<title>Population Pyramid of Slovenia</title>
<style>
body {
font-family: sans-serif;
}
#canvas {
width: 700px;
height: 450px;
margin: 0 auto;
}
#year {
text-align: center;
}
#year strong {
display: inline-block;
padding: 6px 8px;
border: 1px solid #ccc;
margin: 0 8px;
cursor: pointer;
}
#year strong.sel {
background-color: #ccc;
cursor: default;
}
</style>
</head>
<body>
<div id="container">
<div id="canvas"><p>Retrieving data...</p></div>
<div id="year"></div>
</div>
<script>
var
url="https://pxweb.stat.si:443/SiStatData/api/v1/en/Data/05E3002S.px",
query='{ "query": [ { "code": "KOHEZIJSKA REGIJA", "selection": { "filter": "item", "values": [ "0" ] } }, { "code": "STAROST", "selection": { "filter": "item", "values": [ "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18" ] } }, { "code": "SPOL", "selection": { "filter": "item", "values": [ "1", "2" ] } }, { "code": "GOSPODINJSKI STATUS", "selection": { "filter": "item", "values": [ "0" ] } } ], "response": { "format": "json-stat" } }'
;
$.ajax({
type: "POST",
url: url,
data: query,
success: function( json ) {
var
years='',
ds=JSONstat(json).Dataset(0),
age=ds.Dimension('STAROST'),
time=ds.Dimension('LETO'),
tlen=time.length,
tids=time.id,
latest=time.Category(tids[tlen-1]).label,
pyramid=function(year){
var
transform=function(e,i,a){ return [age.Category(i).label, e.value]; },
men=ds.Data({'SPOL': '1', 'LETO': year}).map(transform),
women=ds.Data({'SPOL': '2', 'LETO': year}).map(transform),
pop=[
{ label: 'Men', color: '#00008b', data: men, pyramid: {direction: 'L'} },
{ label: 'Women', color: '#8b0000', data: women }
]
;
$('#year strong').removeClass("sel");
$('#y'+year).addClass("sel");
$.plot('#canvas', pop, {
series: {
pyramid: { show: true },
bars: { fillColor: { colors: [ { opacity: 1 }, { opacity: 1 } ] } }
},
xaxis: { show: false },
yaxis: { show: true },
grid: { show: true, borderWidth: 0, borderColor: '#c0c0c0' }
});
}
;
tids.forEach(function(e){
years+='<strong id="y'+e+'">'+time.Category(e).label+'</strong>';
});
$('#year').html(years);
$('#year strong').click(function(){
var id=$(this).attr('id').slice(1);
pyramid(id);
});
pyramid(tids[0]);
},
error: function() {
$("#container").html("There was an error while connecting to the data provider. Please, try later.");
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment