This sample code retrieves data from Statistics Norway in the JSON-stat format using JSONP, processes them with the JSON-stat Javascript Toolkit and visualizes them with Visual. Technically, this is done in a couple of lines of code!
See also the simple choropleth map 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 + JSONP</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 href="https://visual.js.org/visual.css" rel="stylesheet" type="text/css" /> | |
| <script src="https://cdn.jsdelivr.net/npm/jsonstat-toolkit@1.2.6"></script> | |
| <script src="https://visual.js.org/lazyvisualsetup.js"></script> | |
| <!-- /DO NOT DO THIS IN PRODUCTION --> | |
| </head> | |
| <body> | |
| <section id="visual" class="visual"></section> | |
| <script> | |
| JSONstat("https://data.ssb.no/api/v0/dataset/1082.json?lang=en").then(function(j){ | |
| var | |
| ds=j.Dataset(0), | |
| time=ds.Dimension('Tid'), | |
| latest=time.id[time.length-1] | |
| ; //End of line #1 | |
| visual({ | |
| lang: "en", | |
| title: "Norwegian population pyramid", | |
| geo: ds.Dimension("Region").Category(0).label, | |
| time: latest, | |
| footer: "Source: "+ds.source+".", | |
| unit: { label: "people" }, | |
| axis: { y: false }, | |
| dec: 0, | |
| type: "pyram", | |
| by: ds.Dimension('Alder').Category().map(function(e){ return e.label; }), | |
| data: [ | |
| { label: "Men", val: ds.Data({'Kjonn': '1', 'Tid': latest}, false)}, | |
| { label: "Women", val: ds.Data({'Kjonn': '2', 'Tid': latest}, false)} | |
| ] | |
| }); //End of line #2 | |
| }); | |
| </script> | |
| </body> | |
| </html> |