Unemployment rate by EU countries and time.
In this example, data is retrieved from Eurostat in the JSON-stat format, processed with the JSON-stat Javascript Toolkit and visualized with Idescat Visual.
See a simpler version (without the time dimension) of this example: The European Union Unemployment Map.
| <!DOCTYPE html> | |
| <!--[if lt IE 7]><html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]--> | |
| <!--[if IE 7]><html class="lt-ie9 lt-ie8"> <![endif]--> | |
| <!--[if IE 8]><html class="lt-ie9"> <![endif]--> | |
| <!--[if gt IE 8]><!--> <html> <!--<![endif]--> | |
| <head> | |
| <title>Eurostat JSON-stat API + Idescat Visual choropleth map example</title> | |
| <link href="/d/ea6330880dd608fc8a48/style.css" rel="stylesheet" type="text/css" /> | |
| <!-- DO NOT DO THIS IN PRODUCTION --> | |
| <!-- js.org and json-stat.org ARE NOT CDNs --> | |
| <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 --> | |
| <script src="https://unpkg.com/jsonstat-toolkit@1.4.2"></script> | |
| </head> | |
| <body> | |
| <div id="years"></div> | |
| <div id="visual" class="visual"></div> | |
| <script> | |
| //Unemployment rate (dataset tesem120) | |
| JSONstat("https://ec.europa.eu/eurostat/api/dissemination/statistics/1.0/data/tesem120?sex=T&age=Y15-74&unit=PC_ACT&lang=EN").then(function(j){ | |
| //1. Get info | |
| var | |
| html=""; | |
| //Select the only dataset available | |
| ds=j.Dataset(0), | |
| t=ds.Dimension("time"), | |
| range=[ Math.min.apply( null, ds.value ), Math.max.apply( null, ds.value ) ], | |
| draw=function(e){ | |
| var | |
| //Get time id & label for the latest time available | |
| last=t.id[e], | |
| time=t.Category(last).label, | |
| //Get countries IDs | |
| countries=ds.Dimension( "geo" ).id, | |
| //Get the values for the selected time | |
| //for all the countries (free dimension). | |
| //Then transform info to the Visual data format | |
| data=ds.Data( { "time": last } ).map( function( e, i ){ | |
| return { id: countries[i], val: e.value }; | |
| }) | |
| ; | |
| //2. Draw map with retrieved and transformed info | |
| visual( | |
| { | |
| lang: "en", | |
| fixed: [500, 500], | |
| unit: { symbol: "%" }, | |
| dec: 1, | |
| legend: false, | |
| range: range, | |
| type: "cmap", | |
| by: "eu27", | |
| data: data | |
| } | |
| ); | |
| } | |
| ; | |
| draw(t.length-1); | |
| t.id.forEach(function(e,i){ | |
| html+='<a href="#'+i+'"'+( (t.length-1===i) ? ' id="sel"' : '' )+'>'+t.Category(e).label+'</a>'; | |
| }); | |
| document.querySelector("#years").innerHTML=html; | |
| [].forEach.call(document.querySelectorAll("#years a"), function (e) { | |
| e.addEventListener("mouseover", function() { | |
| document.querySelector("#sel").id=""; | |
| this.id="sel"; | |
| draw(this.href.split("#")[1]); | |
| }, false); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
| #years { | |
| position: absolute; | |
| width: 960px; | |
| top: 435px; | |
| left: 0; | |
| padding: 0 10px; | |
| } | |
| #years a { | |
| display: inline-block; | |
| background-color: #a52a2a; | |
| color: #fff; | |
| margin: 2px; | |
| padding: 4px; | |
| font-family: verdana; | |
| font-size: 80%; | |
| text-decoration: none; | |
| border-radius: 2px; | |
| } | |
| #years a:hover, #years #sel { | |
| background-color: #333; | |
| } |