The Statistical Institute of Galicia (IGE) supports the JSON-stat format. In this example, data is retrieved using the IGE's API, processed with the JSON-stat Javascript Toolkit and finally visualized with Idescat Visual.
It is the same code used in this Danish example.
| <!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>Visual + JSON-stat: simple choropleth map</title> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> | |
| <!-- DO NOT DO THIS IN PRODUCTION --> | |
| <!-- js.org and json-stat.org ARE NOT CDNs! Link to your own copies or to 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 --> | |
| <script src="https://cdn.jsdelivr.net/npm/jsonstat@0.13.13"></script> | |
| </head> | |
| <body> | |
| <section id="visual" class="visual"></section> | |
| <script> | |
| JSONstat( | |
| "https://www.ige.eu/igebdt/igeapi/jsonstat/datos/5089/1:1:2,2:0,3:0,9915:12,T[all:m]", | |
| function(){ | |
| if( this.length ){ | |
| var | |
| //"0" contains time; "1", sex ("1"=men; "2"=women) | |
| ds=this.Dataset(0), | |
| time=ds.Dimension("0").id, | |
| men=[], | |
| women=[] | |
| ; | |
| time.forEach(function(t){ | |
| var | |
| //men | |
| m=ds.Data({"0": t, "1": "1"}, false), | |
| //women | |
| w=ds.Data({"0": t, "1": "2"}, false) | |
| ; | |
| men.push(m); | |
| women.push(w); | |
| }); | |
| visual({ | |
| lang: "en", | |
| title: "Registered unemployment by sex", | |
| geo: "Galicia", | |
| time: time, | |
| footer: 'Source: Instituto Galego de Estatistica (Original source: "'+ds.source+'").', | |
| unit: {label: "people"}, | |
| dec: 0, | |
| grid: { | |
| line: 5, | |
| shadow: 6, | |
| point: 0 | |
| }, | |
| type: "tsline", | |
| data: [ | |
| { label: "Men", val: men }, | |
| { label: "Women", val: women } | |
| ] | |
| }); | |
| }else{ | |
| document.getElementById("visual").innerHTML="There was a problem retrieving the data. This can be a browser issue or a server issue. Please, try with a different browser."; | |
| } | |
| } | |
| ); | |
| </script> | |
| </body> | |
| </html> |