Eurostat's API serves data in the JSON-stat format. In this example, the data is processed using the JSON-stat Javascript Toolkit and visualized with Chartist.js.
Last active
October 2, 2022 16:45
-
-
Save badosa/af4edd90b99f5461e70345c23bc308f1 to your computer and use it in GitHub Desktop.
Educational attainment in Europe
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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://unpkg.com/jsonstat@0.13.13"></script> | |
| <script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script> | |
| </head> | |
| <body> | |
| <article></article> | |
| <footer>% of population by educational attainment level (ISCED11 levels 0-2, 3-4 & 5-8). <span class="nowrap">Year: <time></time>.</span> <span class="nowrap">Source: Eurostat.</span></footer> | |
| <script> | |
| var | |
| year="2017", | |
| url="https://ec.europa.eu/eurostat/api/dissemination/statistics/1.0/data/edat_lfse_03?sex=T&geo=AT&geo=BE&geo=BG&geo=CH&geo=CY&geo=CZ&geo=DE&geo=DK&geo=EE&geo=EL&geo=ES&geo=EU28&geo=FI&geo=FR&geo=HR&geo=HU&geo=IE&geo=IS&geo=IT&geo=LT&geo=LU&geo=LV&geo=ME&geo=MK&geo=MT&geo=NL&geo=NO&geo=PL&geo=PT&geo=RO&geo=SE&geo=SI&geo=SK&geo=TR&geo=UK&unit=PC&isced11=ED0-2&isced11=ED3_4&isced11=ED5-8&age=Y15-64&time="+year | |
| ; | |
| JSONstat(url, main); | |
| function main(){ | |
| var | |
| jsonstat=this, | |
| 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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| article { | |
| padding: 10px 0; | |
| text-align: center; | |
| margin-left: 20px; | |
| } | |
| footer { | |
| text-align: center; | |
| } | |
| footer, p, .ct-label { | |
| font-family: monospace; | |
| } | |
| .donut { | |
| display: inline-block; | |
| width: 20%; | |
| margin: 0 0 -80px -20px; | |
| padding: 0; | |
| } | |
| .donut p { | |
| display: block; | |
| margin: 25% 0; | |
| font-weight: bold; | |
| text-align: center; | |
| } | |
| .ct-series-a .ct-slice-donut { | |
| stroke: #fd3538; | |
| } | |
| .country-a { | |
| color: #fd3538; | |
| } | |
| .ct-series-b .ct-slice-donut { | |
| stroke: #0000cc; | |
| } | |
| .country-b { | |
| color: #0000cc; | |
| } | |
| .ct-series-c .ct-slice-donut { | |
| stroke: #008000; | |
| } | |
| .country-c { | |
| color: #008000; | |
| } | |
| .ct-label { | |
| fill: #fff; | |
| } | |
| .nowrap { | |
| white-space: nowrap; | |
| } | |
| [data-title] { | |
| position: relative; | |
| z-index: 100; | |
| cursor: help; | |
| } | |
| [data-title]:before, | |
| [data-title]:after { | |
| position: absolute; | |
| top: 100%; | |
| bottom: auto; | |
| left: 47%; | |
| visibility: hidden; | |
| -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; | |
| filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0); | |
| opacity: 0; | |
| pointer-events: none; | |
| } | |
| [data-title]:before { | |
| margin-top: 5px; | |
| margin-left: -50px; | |
| padding: 7px; | |
| width: 100px; | |
| border-radius: 3px; | |
| background-color: #000; | |
| background-color: hsla(0, 0%, 0%, 0.8); | |
| color: #fff; | |
| content: attr(data-title); | |
| text-align: center; | |
| font-weight: normal; | |
| } | |
| [data-title]:hover:before, | |
| [data-title]:hover:after { | |
| visibility: visible; | |
| -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; | |
| filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100); | |
| opacity: 1; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment