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.
For a very similar example, see The European Union Unemployment Map.
See also EuroJSONstat: GDP per capita in the EU.
| <!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> | |
| <!-- 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://cdn.jsdelivr.net/npm/jsonstat@0.13.13"></script> | |
| </head> | |
| <body> | |
| <div id="visual" class="visual"></div> | |
| <script> | |
| //Unemployment rate (dataset tesem120) | |
| JSONstat("https://ec.europa.eu/eurostat/wdds/rest/data/v2.1/json/en/nama_10r_3gdp?unit=EUR_HAB_EU27_2020&geo=AT&geo=BE&geo=BG&geo=CY&geo=CZ&geo=DE&geo=DK&geo=EE&geo=EL&geo=ES&geo=FI&geo=FR&geo=HR&geo=HU&geo=IE&geo=IT&geo=LT&geo=LU&geo=LV&geo=MT&geo=NL&geo=PL&geo=PT&geo=RO&geo=SE&geo=SI&geo=SK&geo=UK&precision=1&lastTimePeriod=1", function(){ | |
| //1. Get info | |
| var | |
| //Select the only dataset available in the bundle | |
| ds=this.Dataset(0), | |
| t=ds.Dimension("time"), | |
| //Get time id & label for the latest time available | |
| last=t.id[t.length-1], | |
| 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", | |
| title: "GDP per capita in percentage of the EU average", | |
| time: time, | |
| footer: "Source: Eurostat (dataset nama_10r_3gdp).", | |
| unit: { symbol: "%" }, | |
| legend: false, | |
| type: "cmap", | |
| by: "eu28", | |
| data: data | |
| } | |
| ); | |
| }); | |
| </script> | |
| </body> | |
| </html> |