Skip to content

Instantly share code, notes, and snippets.

@badosa

badosa/index.html

Last active August 29, 2022 09:46
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/1a0bd5c16fda60dfce685a35344c265f to your computer and use it in GitHub Desktop.
Save badosa/1a0bd5c16fda60dfce685a35344c265f to your computer and use it in GitHub Desktop.
Download ZIP
EuroJSONstat: Educational attainment in Europe
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" media="all" href="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css"/>
<link rel="stylesheet" type="text/css" media="all" href="/d/af4edd90b99f5461e70345c23bc308f1/styles.css"/>
<script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
<!-- Using JSONstat XHR capabilities require Promises and Fetch support. Polyfill included for IE, for example -->
<script src="https://cdn.jsdelivr.net/combine/npm/es6-promise@4.2.8,npm/whatwg-fetch@3.0.0,npm/jsonstat-toolkit@1.4.2,npm/jsonstat-euro@2.0.0"></script>
</head>
<body>
<article></article>
<footer>% of population by educational attainment level (ISCED11 levels 0-2, 3-4 &amp; 5-8). <span class="nowrap">Year: <time></time>.</span> <span class="nowrap">Source: Eurostat.</span></footer>
<script>
var
query={
dataset: "edat_lfse_03",
filter: {
sex: ["T"],
geo: ["AT", "BE", "BG", "CH", "CY", "CZ", "DE", "DK", "EE", "EL", "ES", "EU28", "FI", "FR", "HR", "HU", "IE", "IS", "IT", "LT", "LU", "LV", "ME", "MK", "MT", "NL", "NO", "PL", "PT", "RO", "SE", "SI", "SK", "TR", "UK"],
unit: ["PC"],
isced11: ["ED0-2", "ED3_4", "ED5-8"],
age: ["Y15-64"],
time: ["2017"]
}
}
;
EuroJSONstat.fetchDataset(query).then(main);
function main(jsonstat){
var
geo=jsonstat.Dimension("geo")
;
geo.id.forEach(function(e){
var
title=geo.Category(e).label,
div=document.createElement("div"),
data=jsonstat.Data( { geo: e }, false )
;
div.id=e;
div.className="donut ct-perfect-fourth";
document.getElementsByTagName("article")[0].appendChild(div);
div.innerHTML='<p class="' + countryClass(data) + '" data-title="' + title + '">' + e + "</p>";
chart(e, data);
});
document.getElementsByTagName("time")[0].innerText=jsonstat.Dimension("time").id[0];
}
function chart(id, data){
var
options={
donut: true,
donutWidth: 35,
startAngle: 270,
total: 200,
showLabel: true,
chartPadding: 0
}
;
new Chartist.Pie("#"+id, { series: data }, options);
}
function countryClass(arr){
if(arr[0]>=arr[1] && arr[0]>=arr[2]){
return "country-a";
}
if(arr[1]>=arr[0] && arr[1]>=arr[2]){
return "country-b";
}
if(arr[2]>=arr[0] && arr[2]>=arr[1]){
return "country-c";
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment