See also Unemployment Trend Comparison for a simpler version.
Last active
October 2, 2022 15:34
-
-
Save badosa/d0a635ab4ee7e8b002c065d604186882 to your computer and use it in GitHub Desktop.
EuroJSONstat: Several Indicators Trend Comparison
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> | |
| <head> | |
| <title>EuroJSONstat example</title> | |
| <link href="/d/e3e065fe80f2b0084bef/style.css" rel="stylesheet" type="text/css" /> | |
| <!-- DO NOT DO THIS IN PRODUCTION --> | |
| <!-- js.org IS NOT A CDN --> | |
| <link href="https://visual.js.org/visual.css" rel="stylesheet" type="text/css" /> | |
| <script src="https://visual.js.org/lazyvisualsetup.js"></script> | |
| <!-- /DO NOT DO THIS IN PRODUCTION --> | |
| </head> | |
| <body> | |
| <form> | |
| <div id="indicator"></div> | |
| <select id="geo1"></select> | |
| <select id="geo2"></select> | |
| </form> | |
| <div id="visual" class="visual"></div> | |
| <footer> | |
| <span class="indicator"></span>: <span class="area"></span> <i>vs</i> <span class="area"></span> | |
| </footer> | |
| <script nomodule> | |
| //For old browsers not supporting ES modules | |
| window.alert("Sorry, your browser does not support ECMAScript modules!"); | |
| </script> | |
| <script type="module"> | |
| import {fetchDataset} from "https://unpkg.com/jsonstat-euro@latest/import.mjs"; | |
| const queries=[ | |
| { | |
| label: "Unemployment Rate", | |
| dataset: "tesem120", | |
| filter: { | |
| sex: ["T"], | |
| age: ["Y15-74"], | |
| unit: ["PC_ACT"] | |
| } | |
| }, | |
| { | |
| label: "Consumer Prices Rate of Change", | |
| dataset: "prc_hicp_aind", | |
| filter: { | |
| unit: ["RCH_A_AVG"], | |
| coicop: ["TOT_X_TBC"] | |
| } | |
| }, | |
| { | |
| label: "Gross Domestic Product per Capita", | |
| dataset: "nama_10_pc", | |
| filter: { | |
| na_item: ["B1GQ"], | |
| unit: ["CP_EUR_HAB"] | |
| } | |
| } | |
| ]; | |
| //Select first indicator for Germany and for Greece | |
| ini(0, ["DE", "EL"]); | |
| //FUNCTIONS | |
| function ini(q, geo){ | |
| createRadios(q); | |
| getData(queries[q], geo); | |
| } | |
| function createRadios(ndx){ | |
| let radio=""; | |
| queries.forEach( (item, i) =>{ | |
| const checked=i!==ndx? "" : "checked"; | |
| radio+='<label><input type="radio" name="indic" value="' + i + '"' + checked + '/> ' + item.label + '</label>' | |
| }); | |
| document.querySelector("#indicator").innerHTML=radio; | |
| document.querySelectorAll("input").forEach(e=>{ | |
| e.addEventListener("change", function() { | |
| getData(queries[this.value], getGeo()); | |
| }, false); | |
| }); | |
| } | |
| function getData(query, area){ | |
| //Time series for only the last 15 years | |
| query.filter.lastTimePeriod=15; | |
| fetchDataset(query).then(ds=>{ | |
| const label=query.label; | |
| createSelects(ds, label, area); | |
| draw(ds); | |
| }); | |
| } | |
| function createSelects(ds, label, area){ | |
| const | |
| html=["", ""], | |
| egeo=[ document.querySelector( "#geo1" ), document.querySelector( "#geo2" ) ], | |
| geod=ds.Dimension( "geo" ) | |
| ; | |
| geod.id.forEach(e=>{ | |
| const selected=[0,1].map(i => e===area[i] ? "selected" : ""); | |
| [0,1].forEach(i => html[i]+='<option '+selected[i]+' value="'+e+'"'+'>'+geod.Category(e).label+'</option>'); | |
| }); | |
| [0,1].forEach(i => egeo[i].innerHTML=html[i]); | |
| document.querySelector("footer .indicator").innerHTML=label; | |
| document.querySelectorAll("select").forEach(e=>{ | |
| e.addEventListener("change", function() { | |
| draw(ds); | |
| }, false); | |
| }); | |
| } | |
| function draw(ds, indicator){ | |
| const | |
| geod=ds.Dimension( "geo" ), | |
| time=ds.Dimension( "time" ).id, | |
| def=["EU28", "EU27_2020"], | |
| val=[[],[]] | |
| ; | |
| //If pre-selected area does not exist use EU* | |
| let geo=getGeo(); | |
| geo=geo.map( (g,i) => geod.Category(g) ? g : def[i]); | |
| const label=[0,1].map( i=>geod.Category( geo[i] ).label ); | |
| time.forEach(t=>[0,1].forEach(i => val[i].push( ds.Data( { "time": t, "geo": geo[i] } ).value ))); | |
| visual({ | |
| fixed: [ 960, 395], | |
| lang: "en", | |
| autoheading: false, | |
| time: time, | |
| range: [null, null], | |
| grid: { | |
| line: 5, | |
| shadow: 6, | |
| point: 0 | |
| }, | |
| legend: false, | |
| type: "tsline", | |
| data: [0,1].map( i=> { return { label: label[i], val: val[i] }; }) | |
| }); | |
| const area=document.querySelectorAll(".area"); | |
| [0,1].forEach(i => area[i].innerHTML=label[i]); | |
| } | |
| function getGeo(){ | |
| const geo=document.querySelectorAll("select"); | |
| return [0,1].map(i => geo[i].options[geo[i].selectedIndex].value); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment