Skip to content

Instantly share code, notes, and snippets.

@badosa
Last active November 21, 2019 05:10
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/6103806 to your computer and use it in GitHub Desktop.
Save badosa/6103806 to your computer and use it in GitHub Desktop.
Dynamic Norwegian Pyramid

(If you cannot see the pyramid, visit the cross-browser version.)

Click on the year to stop the animation or to start it again.

The application uses the Statistics Norway API to retrieve the data in the JSON-stat format. The data is then processed with the help of the JSON-stat Javascript Toolkit. Finally, it is visualized using Flot.

This example illustrates how to use the JSON-stat .Data() method with a free non-constant dimension to retrieve a slice of the original cube. The original data has 5 dimensions (region, sex, age, time, contents). 2 of them are constant dimensions (region and contents). By calling .Data() for a certain sex and time the developer gets an array with all the age data (for that time and sex).

<!DOCTYPE html>
<html>
<head>
<title>Dynamic Norwegian Pyramid</title>
<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"></div>
<div id="year"></div>
</div>
<script>
JSONstat('https://data.ssb.no/api/v0/dataset/1082.json?lang=en', function(){
var
ds=this.Dataset(0),
max=Math.max.apply(Math, ds.value),
age=ds.Dimension('Alder'),
time=ds.Dimension('Tid'),
tlen=time.length,
tids=time.id,
latest=tids[tlen-1],
pyramid=function(year){
var
transform=function(e,i,a){return [age.Category(i).label, e.value];},
men=ds.Data({'Kjonn': '1', 'Tid': year}).map(transform),
women=ds.Data({'Kjonn': '2', 'Tid': year}).map(transform),
pop=[
{ label: 'Men', color: '#00008b', data: men, pyramid: {direction: 'L'} },
{ label: 'Women', color: '#8b0000', data: women }
]
;
$('#year').text(year);
$.plot('#canvas', pop, {
series: {
pyramid: { show: true },
bars: { fillColor: { colors: [ { opacity: 1 }, { opacity: 1 } ] } }
},
xaxis: { show: false, max: max },
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.');
}
});
init();
});
</script>
</body>
</html>
body {
font-family: sans-serif;
}
#container {
width: 960px;
height: 500px;
padding-left: 130px;
}
#canvas {
width: 700px;
height: 500px;
}
#year {
position: absolute;
top: 260px;
left: 366px;
color: white;
font-size: 100px;
font-weight: bold;
opacity: 0.7;
cursor: pointer;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment