Skip to content

Instantly share code, notes, and snippets.

@badosa
Last active November 4, 2019 22:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save badosa/00f065db7a03a04af53c to your computer and use it in GitHub Desktop.
Save badosa/00f065db7a03a04af53c to your computer and use it in GitHub Desktop.
US Unemployment Rate

This US example is a more sophisticated version of this Norway example. See notes there.

<!DOCTYPE html>
<html>
<head>
<title>US unemployment rate</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- DO NOT DO THIS IN PRODUCTION -->
<!-- js.org IS NOT A CDN! 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>
function main( obj ){
var jsonstat=JSONstat( obj );
if( !jsonstat ){
return;
}
var
values=[],
dimension=jsonstat.dimension,
cptlabel=dimension.concept.category.label[query.concept],
cptunits=dimension.concept.category.unit[query.concept],
time=getBy( dimension[by].category.index )
;
time.forEach(function( e , i ){
query[by]=e;
values[i]=getValue( query );
});
visual({
lang: "en",
title: cptlabel.charAt(0).toUpperCase() + cptlabel.slice(1),
geo: dimension.area.category.label[query.area],
time: time,
footer: "Source: " + jsonstat.source + ".",
type: "tsline",
data: [{ label: "", val: values }],
dec: cptunits.decimals,
unit: { label: cptunits.label },
grid: {
line: 4,
shadow: 4,
point: 4
},
legend: false
});
//Functions
function getBy( ndx ) {
if( isArray( ndx ) ){
return ndx;
}else{
var arr=[];
for( var p in ndx ){
arr[ndx[p]]=p;
}
return arr;
}
}
//getValue() converts a dimension/category object into a data value in three steps.
function getValue( query ){
return jsonstat.value[getValueIndex( getDimIndices( query ) )];
}
//getDimIndices() converts a dimension/category object into an array of dimensions' indices.
function getDimIndices( query ){
var ids=jsonstat.id || dimension.id; //JSON-stat 2.0-ready
for( var arr=[], i=0, len=ids.length; i<len ; i++ ){
arr[i]=getDimIndex( ids[i] , query[ids[i]] );
}
return arr;
}
//getValueIndex() converts an array of dimensions' indices into a numeric value index.
function getValueIndex( indices ){
var size=jsonstat.size || dimension.size; //JSON-stat 2.0-ready
for( var i=0, ndims=size.length, num=0, mult=1; i<ndims; i++ ){
mult*=( i>0 ) ? size[ndims-i] : 1;
num+=mult*indices[ndims-i-1];
}
return num;
}
//getDimIndex() converts a dimension ID string and a category ID string into the numeric index of that category in that dimension.
function getDimIndex( name , value ){
//In single category dimensions, "index" is optional
if( !dimension[name].category.index ){
return 0;
}
var ndx=dimension[name].category.index;
//"index" can be an object or an array
if( !isArray( ndx ) ){ //Object
return ndx[value];
}else{ //Array
return ndx.indexOf( value ); //Polyfill required in old browsers
}
}
//Validate
function JSONstat( jsonstat ){
if( !jsonstat ){
window.alert( 'Error: no response could be retrieved.' );
return NULL;
}
//If no "class", "bundle" response:
//use the first dataset available
//(assuming single dataset bundle response)
//[Of course, it'd be better to add an argument
//to the function to pass a dataset ID if
//bundle responses must be properly supported.]
if( !jsonstat.class ){
jsonstat=jsonstat[Object.keys( jsonstat )[0]]; //Polyfill required in old browsers
}else{ //Verify it's a "dataset" response
if( jsonstat.class!=='dataset' ){
window.alert( 'Error: response was not a JSON-stat bundle or dataset response.' );
return NULL;
}
}
//Program requires "value" and "dimension" properties
if( !jsonstat.value || !jsonstat.dimension ){
window.alert( 'Error: response is not valid JSON-stat or does not contain required information.' );
return NULL;
}
return jsonstat;
}
function isArray( arr ){
return (Object.prototype.toString.call( arr ) === "[object Array]");
}
}
</script>
</head>
<body>
<section id="visual" class="visual"></section>
<script>
var
query={
"concept" : "UNR",
"area" : "US"
},
by="year"
;
</script>
<script src="https://json-stat.org/samples/oecd.json?callback=main"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment