The API from UK's Office for National Statistics (ONS) can return data in the JSON-stat format (2018 addition: Unfortunately, ONS killed this API). This sample code retrieves data from ONS in the JSON-stat format, then these data are processed with the JSON-stat Javascript Toolkit and are finally visualized with Visual.
(2018 addition: Fortunately, there's still data from ONS available in the JSON-stat format at Nomis Web. See the UK Unemployment by Sex 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>ONS JSON-stat API + Visual + 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@0.13.13"></script> | |
| <script src="https://visual.js.org/lazyvisualsetup.js"></script> | |
| <!-- /DO NOT DO THIS IN PRODUCTION --> | |
| <script> | |
| function ini(j){ | |
| //If you retrieve the response directly from ONS you'll probably | |
| //need to correct the geo dimension size. For example: | |
| //j["ST1117EWla"].dimension.size[0]=1; | |
| var | |
| ds=JSONstat(j).Dataset(0), | |
| title=ds.Dimension({role: "metric"})[0].Category(0).unit.label, | |
| geo=ds.Dimension({role: "geo"})[0].Category(0).label, | |
| time=ds.Dimension({role: "time"})[0].Category(0).label, | |
| footer="Source: "+ds.source+".", | |
| //Id for age dimension is CL_0000304. | |
| //We store all the age labels in an array | |
| age=ds.Dimension("CL_0000304").Category() | |
| .map(function(e){ return e.label; }) | |
| .filter(function(f){ return f!=="All categories: Age"; }), | |
| //Id for sex dimension is CL_0000035 | |
| //Id for male category is CI_0000071 | |
| //Id for female category is CI_0000070 | |
| male={"CL_0000035": "CI_0000071"}, | |
| female={"CL_0000035": "CI_0000070"}, | |
| //Get the values for each sex | |
| values=function(sex){ | |
| return ds.Data(sex, false).filter(function(e){ | |
| return e<90000; //Skip total | |
| }); | |
| } | |
| ; | |
| visual({ | |
| lang: "en", | |
| title: title, | |
| geo: geo, | |
| time: time, | |
| footer: footer, | |
| unit: { label: "people" }, | |
| axis: { y: false }, | |
| dec: 0, | |
| type: "pyram", | |
| by: age, | |
| data: [ | |
| { label: "Men", val: values(male)}, | |
| { label: "Women", val: values(female)} | |
| ] | |
| }); | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <section id="visual" class="visual"></section> | |
| <script src="https://json-stat.org/samples/ons.json?callback=ini"></script> | |
| <!-- | |
| Same as | |
| http://data.ons.gov.uk/ons/api/data/dataset/ST1117EWla.json? | |
| context=Census&apikey=YOURAPIKEYHERE&geog=2011CMLADH&dm/2011CMLADH=K04000001 | |
| &jsontype=json-stat&totals=false&callback=ini | |
| (with geo dimension size corrected) | |
| --> | |
| </body> | |
| </html> |