Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
JSON-stat & JS
the JSON-stat Javascript Toolkit
Xavier Badosa
@badosa
https://xavierbadosa.com
https://json-stat.org
July,...
The JSON-stat
Ecosystem
format
libs
conn.
schema
Introducing
the
JSON-stat
Javascript
Toolkit
json-stat.com
Introducing
the
JSON-stat
Javascript
Toolkit
It’s a Javascript
library that helps
you dealing with
JSON-stat
responses.
Introducing
the
JSON-stat
Javascript
Toolkit
It offers methods
to easily traverse
the JSON-stat
tree:
Dataset
Dimension
Ca...
Introducing
the
JSON-stat
Javascript
Toolkit
It uses three
general
properties:
label
length
id
Sample file
the
JSON-stat
Javascript
Toolkit
This URL returns
a JSON-stat dataset
document.
(Collections can contain
sever...
var ds = JSONstat(
"http://json-stat.org/samples/canada.json"
);
if ( ds.length > 0 ) {
…
}
Retrieve a JSON-stat document....
JSONstat(
"http://json-stat.org/samples/canada.json",
function () {
if ( this.length > 0 ) {
…
}
}
);
Retrieve a JSON-stat...
$.getJSON(
"http://json-stat.org/samples/canada.json",
function ( obj ) {
var ds = JSONstat( obj );
if ( ds.length > 0 ) {...
var ds = JSONstat(
"http://json-stat.org/samples/canada.json"
);
var cl = ds.class;
It contains a dataset (a cube).
ds.cla...
var ds = JSONstat(
"http://json-stat.org/samples/canada.json"
);
var cl = ds.class;
(Because it’s a dataset response
you d...
var dslabel = ds.label;
Get the dataset label.
ds.label → "Population by sex and age group. Canada. 2012"
var dslabel = ds.label;
var nobs = ds.n;
var upd = ds.updated; // new Date(upd) to convert into date
Get the number of dat...
var dslabel = ds.label;
var nobs = ds.n;
var upd = ds.updated;
var ndim = ds.length;
var dimid = ds.id;
Get the number of ...
var dslabel = ds.label;
var nobs = ds.n;
var upd = ds.updated;
var ndim = ds.length;
var dimid = ds.id;
var sex = ds.Dimen...
var dslabel = ds.label;
var nobs = ds.n;
var upd = ds.updated;
var ndim = ds.length;
var dimid = ds.id;
var sex = ds.Dimen...
var dslabel = ds.label;
var nobs = ds.n;
var upd = ds.updated;
var ndim = ds.length;
var dimid = ds.id;
var sex = ds.Dimen...
var dslabel = ds.label;
var nobs = ds.n;
var upd = ds.updated;
var ndim = ds.length;
var dimid = ds.id;
var sex = ds.Dimen...
var dslabel = ds.label;
var nobs = ds.n;
var upd = ds.updated;
var ndim = ds.length;
var dimid = ds.id;
var sex = ds.Dimen...
var yearrole = ds.Dimension( "year" ).role;
var countryrole = ds.Dimension( "country" ).role;
Special roles are time, geo ...
var yearrole = ds.Dimension( "year" ).role;
var countryrole = ds.Dimension( "country" ).role;
var timedims = ds.role.time;...
var sexlabel2 = sex.Category( 2 ).label;
var sexunit2 = sex.Category( 2 ).unit;
var sexcoord2 = sex.Category( 2 ).coordina...
var sexlabel2 = sex.Category( "F" ).label;
var sexunit2 = sex.Category( "F" ).unit;
var sexcoord2 = sex.Category( "F" ).co...
var dimarray = ds.Dimension( );
var sexarray = sex.Category( );
All methods can be called without arguments.
They will ret...
var dimarray = ds.Dimension( );
var sexarray = sex.Category( );
var malelabel = ds
.Dimension( )[4]
.Category( )[1]
.label...
var dimarray = ds.Dimension( );
var sexarray = sex.Category( );
var malelabel = ds
.Dimension( 4 )
.Category( 1 )
.label;
...
var dimarray = ds.Dimension( );
var sexarray = sex.Category( );
var malelabel =
sex
.Category( 1 )
.label;
If you must, st...
the
JSON-stat
Javascript
Toolkit
It offers methods
to easily traverse
the JSON-stat
tree:
Dataset
Dimension
Category
Data
var cell44 = ds.Data( 44 ).value;
var cell44 = ds.Data( [0,0,7,0,2] ).value;
Get the value in cell 44.
By value index and ...
var cell44 = ds.Data( 44 ).value;
var cell44 = ds.Data( [0,0,7,0,2] ).value;
var cell44 = ds.Data( {
country: "CA",
year :...
var cell44 = ds.Data( 44 ).value;
var cell44 = ds.Data( [0,0,7,0,2] ).value;
var cell44 = ds.Data( {
country: "CA",
year :...
var cell44 = ds.Data( 44 ).status;
var cell44 = ds.Data( [0,0,7,0,2] ).status;
var cell44 = ds.Data( {
country: "CA",
year...
var pop34 = ds.Data( {
country: "CA",
year : "2012",
concept : "POP",
age: "34",
sex: "F"
} );
By removing one (and only o...
var data = ds.Data( );
Get an array with information for every cell.
(“Information” currently means value and status.)
var data = ds.Data( );
// It allows you to rebuild the value array like this:
var value = ds.Data( ).map(
function( e ){
r...
J.Dataset( )
.Dimension( )
.Category( )
.Data( )
Chainable traversing methods
J.Dataset( )
.toTable( )
Chainable transform...
J.Dataset( )
.Dimension( )
.Category( )
.Data( )
Chainable traversing methods
J.Dataset( )
.toTable( )
Chainable transform...
J.Dataset( )
.toTable( )
Chainable transformation methods
Get data and main metadata
in tabular form.
Useful to export the...
var tbl = ds.toTable( { type : "arrobj" } );
[
{
age : "Total",
concept : "Persons (thousands)",
country : "Canada",
sex :...
var tbl = ds.toTable( { type : "arrobj", status : true } );
[
{
age : "Total",
concept : "Persons (thousands)",
country : ...
var tbl = ds.toTable( { type : "arrobj", content : "id" } );
[
{
age : "T",
concept : "POP",
country : "CA",
sex : "T",
va...
var tbl = ds.toTable(
{
type : "arrobj",
content : "id",
function ( d, i ){
if ( d.sex === "F" && d.concept === "POP" ){
r...
var tbl = ds.toTable( { type : "object" } );
{
cols : [
{
id : "country",
label : "Country",
type : "string",
},
{
id : "y...
var tbl = ds.toTable( { type : "array" } );
[
[
"Country",
"Year",
"Age group",
"Population and %",
"Sex",
"Value"
],
[
"C...
These are just
the main features of
the
JSON-stat
Javascript
Toolkit
json-stat.com
JJT is also available
on the server as
a Node.js module.
npm install jsonstat
https://www.npmjs.com/package/jsonstat
Built on top of JJT
the
JSON-stat
Javascript
Utilities
Suite
Built on top of JJT
the
JSON-stat
Javascript
Utilities
Suite
High level utilities
tbrowser: interactive,
pivotal table
dat...
thank you
all pictures from
Blocks picture in slide 1: Soma, by Dru! (CC BY-NC)
Atomium in slide 2: Fighting Gravity –
Atomium, Brus...
Upcoming SlideShare
Loading in …5
×

JSON-stat & JS: the JSON-stat Javascript Toolkit

11,035 views

Published on

This presentation was part of the introductory JSON-stat presentation (July, 2013):

http://www.slideshare.net/badosa/json-stat

That presentation was split into three presentations between December 2015 and January 2016 and mainly updated to reflect the latest changes in the format (v. 2.0).

Published in: Data & Analytics
  • Beginning JSON --- http://amzn.to/1MipDqY
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Introduction to JavaScript Object Notation: A To-the-Point Guide to JSON --- http://amzn.to/1T2JWdz
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • JSON: Learn JSON In A DAY! - The Ultimate Crash Course to Learning the Basics of JSON In No Time (JSON, JSON Course, JSON Development, JSON Books) --- http://amzn.to/1Ut8n55
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

JSON-stat & JS: the JSON-stat Javascript Toolkit

  1. 1. JSON-stat & JS the JSON-stat Javascript Toolkit Xavier Badosa @badosa https://xavierbadosa.com https://json-stat.org July, 2013 (updated to JSON-stat 2.0 in January, 2016)
  2. 2. The JSON-stat Ecosystem format libs conn. schema
  3. 3. Introducing the JSON-stat Javascript Toolkit json-stat.com
  4. 4. Introducing the JSON-stat Javascript Toolkit It’s a Javascript library that helps you dealing with JSON-stat responses.
  5. 5. Introducing the JSON-stat Javascript Toolkit It offers methods to easily traverse the JSON-stat tree: Dataset Dimension Category Data
  6. 6. Introducing the JSON-stat Javascript Toolkit It uses three general properties: label length id
  7. 7. Sample file the JSON-stat Javascript Toolkit This URL returns a JSON-stat dataset document. (Collections can contain several datasets.) json-stat.org/samples/canada.json
  8. 8. var ds = JSONstat( "http://json-stat.org/samples/canada.json" ); if ( ds.length > 0 ) { … } Retrieve a JSON-stat document. Check the number of elements. If zero, the service didn’t return a valid JSON-stat response. Sync
  9. 9. JSONstat( "http://json-stat.org/samples/canada.json", function () { if ( this.length > 0 ) { … } } ); Retrieve a JSON-stat document. Check the number of elements. If zero, the service didn’t return a valid JSON-stat response. Async
  10. 10. $.getJSON( "http://json-stat.org/samples/canada.json", function ( obj ) { var ds = JSONstat( obj ); if ( ds.length > 0 ) { … } } ); You can also retrieve a JSON-stat document with your usual bullet-proof framework and use JSONstat() for what is good for: dealing with the resulting object.
  11. 11. var ds = JSONstat( "http://json-stat.org/samples/canada.json" ); var cl = ds.class; It contains a dataset (a cube). ds.class → "dataset"
  12. 12. var ds = JSONstat( "http://json-stat.org/samples/canada.json" ); var cl = ds.class; (Because it’s a dataset response you don’t need to use the Dataset() method.) ds === ds.Dataset( 0 ) → true
  13. 13. var dslabel = ds.label; Get the dataset label. ds.label → "Population by sex and age group. Canada. 2012"
  14. 14. var dslabel = ds.label; var nobs = ds.n; var upd = ds.updated; // new Date(upd) to convert into date Get the number of data in the dataset and the update information. ds.n → 120 ds.updated → "2012-09-27"
  15. 15. var dslabel = ds.label; var nobs = ds.n; var upd = ds.updated; var ndim = ds.length; var dimid = ds.id; Get the number of dimensions and the dimensions’ IDs. ds.length → 5 ds.id → ["country", "year", "age", "concept", "sex"]
  16. 16. var dslabel = ds.label; var nobs = ds.n; var upd = ds.updated; var ndim = ds.length; var dimid = ds.id; var sex = ds.Dimension( 4 ); Let’s analyze dimension “sex”. Selected by index.
  17. 17. var dslabel = ds.label; var nobs = ds.n; var upd = ds.updated; var ndim = ds.length; var dimid = ds.id; var sex = ds.Dimension( "sex" ); Let’s analyze dimension “sex”. Selected by ID.
  18. 18. var dslabel = ds.label; var nobs = ds.n; var upd = ds.updated; var ndim = ds.length; var dimid = ds.id; var sex = ds.Dimension( "sex" ); var sexsize = sex.length; var sexid = sex.id; sex.length is not what it seems: it’s just the number of categories of dimension“sex”. sex.length → 3 sex.id → ["T", "M", "F"]
  19. 19. var dslabel = ds.label; var nobs = ds.n; var upd = ds.updated; var ndim = ds.length; var dimid = ds.id; var sex = ds.Dimension( "sex" ); var sexsize = sex.length; var sexid = sex.id; var sexlabel = sex.label; As you can see, properties length, id and label are everywhere. sex.label → "sex"
  20. 20. var dslabel = ds.label; var nobs = ds.n; var upd = ds.updated; var ndim = ds.length; var dimid = ds.id; var sex = ds.Dimension( "sex" ); var sexsize = sex.length; var sexid = sex.id; var sexlabel = sex.label; var sexrole = sex.role; sex is considered a classification variable because the provider didn’t attach any special role to it. sex.role → classification
  21. 21. var yearrole = ds.Dimension( "year" ).role; var countryrole = ds.Dimension( "country" ).role; Special roles are time, geo and metric. ds.Dimension( "year" ).role → "time" ds.Dimension( "country" ).role → "geo"
  22. 22. var yearrole = ds.Dimension( "year" ).role; var countryrole = ds.Dimension( "country" ).role; var timedims = ds.role.time; var geodims = ds.role.geo; Likewise, you can ask the other way around. Get dimensions with role time and role geo. ds.role.time → ["year"] ds.role.geo → ["country"]
  23. 23. var sexlabel2 = sex.Category( 2 ).label; var sexunit2 = sex.Category( 2 ).unit; var sexcoord2 = sex.Category( 2 ).coordinates; Get information about a particular sex category. By index. sex.Category( 2 ).label → "female" .unit, .coordinates (only if role metric / geo) → null
  24. 24. var sexlabel2 = sex.Category( "F" ).label; var sexunit2 = sex.Category( "F" ).unit; var sexcoord2 = sex.Category( "F" ).coordinates; Get information about a particular sex category. By ID. sex.Category( "F" ).label → "female" .unit, .coordinates (only if role metric / geo) → null
  25. 25. var dimarray = ds.Dimension( ); var sexarray = sex.Category( ); All methods can be called without arguments. They will return an array of results.
  26. 26. var dimarray = ds.Dimension( ); var sexarray = sex.Category( ); var malelabel = ds .Dimension( )[4] .Category( )[1] .label; Use responsibly! Always minimize calling methods without arguments. // sex (5th dimension) // male (2nd category)
  27. 27. var dimarray = ds.Dimension( ); var sexarray = sex.Category( ); var malelabel = ds .Dimension( 4 ) .Category( 1 ) .label; Simpler. Still, you should minimize calling the same method with the same argument several times. // sex (5th dimension) // male (2nd category)
  28. 28. var dimarray = ds.Dimension( ); var sexarray = sex.Category( ); var malelabel = sex .Category( 1 ) .label; If you must, store the result in a variable. // sex (5th dimension) // male (2nd category)
  29. 29. the JSON-stat Javascript Toolkit It offers methods to easily traverse the JSON-stat tree: Dataset Dimension Category Data
  30. 30. var cell44 = ds.Data( 44 ).value; var cell44 = ds.Data( [0,0,7,0,2] ).value; Get the value in cell 44. By value index and by dimensions’ indexes. ds.Data( 44 ).value → 1202.8 ds.Data( [0,0,7,0,2] ).value → 1202.8
  31. 31. var cell44 = ds.Data( 44 ).value; var cell44 = ds.Data( [0,0,7,0,2] ).value; var cell44 = ds.Data( { country: "CA", year : "2012", concept : "POP", age: "34", sex: "F" } ).value; Get the value in cell 44. By dimension/category ID. ds.Data( {…} ).value → 1202.8
  32. 32. var cell44 = ds.Data( 44 ).value; var cell44 = ds.Data( [0,0,7,0,2] ).value; var cell44 = ds.Data( { country: "CA", year : "2012", concept : "POP", age: "34", sex: "F" } ).value; Single category dimensions are not required. By dimension/category ID. ds.Data( {…} ).value → 1202.8
  33. 33. var cell44 = ds.Data( 44 ).status; var cell44 = ds.Data( [0,0,7,0,2] ).status; var cell44 = ds.Data( { country: "CA", year : "2012", concept : "POP", age: "34", sex: "F" } ).status; Get cell status, if available. By dimension/category ID. ds.Data( {…} ).status → "a"
  34. 34. var pop34 = ds.Data( { country: "CA", year : "2012", concept : "POP", age: "34", sex: "F" } ); By removing one (and only one) required dimension, you get an array of results (slice). (In the example, population of age 30-34 by sex in Canada in 2012.)
  35. 35. var data = ds.Data( ); Get an array with information for every cell. (“Information” currently means value and status.)
  36. 36. var data = ds.Data( ); // It allows you to rebuild the value array like this: var value = ds.Data( ).map( function( e ){ return e.value; } ); // But you can directly access the original value and status // like this: var value = ds.value; var status = ds.status;
  37. 37. J.Dataset( ) .Dimension( ) .Category( ) .Data( ) Chainable traversing methods J.Dataset( ) .toTable( ) Chainable transformation methods
  38. 38. J.Dataset( ) .Dimension( ) .Category( ) .Data( ) Chainable traversing methods J.Dataset( ) .toTable( ) Chainable transformation methods Get sections of the dataset. Get data and main metadata in tabular form.
  39. 39. J.Dataset( ) .toTable( ) Chainable transformation methods Get data and main metadata in tabular form. Useful to export the dataset content to other table-based structures
  40. 40. var tbl = ds.toTable( { type : "arrobj" } ); [ { age : "Total", concept : "Persons (thousands)", country : "Canada", sex : "Total", value : 34880.5, year : "2012" }, { age : "Total", concept : "Persons (thousands)", country : "Canada", sex : "Male", value : 17309.1, year : "2012" }, … ] Get an array of objects describing every cell.
  41. 41. var tbl = ds.toTable( { type : "arrobj", status : true } ); [ { age : "Total", concept : "Persons (thousands)", country : "Canada", sex : "Total", value : 34880.5, status : "a", year : "2012" }, { age : "Total", concept : "Persons (thousands)", country : "Canada", sex : "Male", value : 17309.1, status : "a", year : "2012" }, … ] It can include status information.
  42. 42. var tbl = ds.toTable( { type : "arrobj", content : "id" } ); [ { age : "T", concept : "POP", country : "CA", sex : "T", value : 34880.5, year : "2012" }, { age : "T", concept : "POP", country : "CA", sex : "M", value : 17309.1, year : "2012" }, … ] It can use categories’ IDs instead of labels.
  43. 43. var tbl = ds.toTable( { type : "arrobj", content : "id", function ( d, i ){ if ( d.sex === "F" && d.concept === "POP" ){ return { age : d.age, population : d.value*1000 }; } } } ); // Get only slice females, persons (in thousands), transform // thousands into persons and keep age and population only. It can be post-processed with a callback function.
  44. 44. var tbl = ds.toTable( { type : "object" } ); { cols : [ { id : "country", label : "Country", type : "string", }, { id : "year", label : "Year", type : "string", }, ... ], rows : [ ... ] } Get an object of arrays (Google DataTable format).
  45. 45. var tbl = ds.toTable( { type : "array" } ); [ [ "Country", "Year", "Age group", "Population and %", "Sex", "Value" ], [ "Canada", "2012", "Total", "Persons (thousands)", "Total", 34880.5 ], ... ] Get an array of arrays (CSV-like format).
  46. 46. These are just the main features of the JSON-stat Javascript Toolkit json-stat.com
  47. 47. JJT is also available on the server as a Node.js module. npm install jsonstat https://www.npmjs.com/package/jsonstat
  48. 48. Built on top of JJT the JSON-stat Javascript Utilities Suite
  49. 49. Built on top of JJT the JSON-stat Javascript Utilities Suite High level utilities tbrowser: interactive, pivotal table datalist: unidimensional table fromTable: import from JSON tabular formats fromCSV/toCSV: import/export from/to CSV
  50. 50. thank you
  51. 51. all pictures from Blocks picture in slide 1: Soma, by Dru! (CC BY-NC) Atomium in slide 2: Fighting Gravity – Atomium, Brussels, by Jan Faborsky (CC BY-NC-ND) Sculture in slide 3: Cubes, by Alex [Fino] LA (CC BY-SA) Egg in slide 50: Egg, by Auntie P (CC BY-NC-SA)

×