Same example as GDP per capita in the European Union but using JSON-stat for Eurostat.
Last active
August 29, 2022 13:26
-
-
Save badosa/54a79252883ab2c5a1fb788e9d98c200 to your computer and use it in GitHub Desktop.
EuroJSONstat: GDP per capita in the EU
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> | |
| <!--[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 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 --> | |
| <!-- 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> | |
| <div id="visual" class="visual"></div> | |
| <script> | |
| var | |
| query={ | |
| dataset: "nama_10r_3gdp", //Unemployment rate (dataset tesem120) | |
| filter: { | |
| unit: "EUR_HAB_EU27_2020", | |
| geo: ["AT", "BE", "BG", "CY", "CZ", "DE", "DK", "EE", "EL", "ES", "FI", "FR", "HR", "HU", "IE", "IT", "LT", "LU", "LV", "MT", "NL", "PL", "PT", "RO", "SE", "SI", "SK", "UK"], | |
| lastTimePeriod: 1 | |
| } | |
| }, | |
| main=function(ds){ | |
| //1. Get info | |
| var | |
| 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", //eu27 from 2020 | |
| data: data | |
| } | |
| ); | |
| } | |
| ; | |
| EuroJSONstat.fetchDataset(query).then(main); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment