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

5,130 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
3 Comments
2 Likes
Statistics
Notes
  • 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
No Downloads
Views
Total views
5,130
On SlideShare
0
From Embeds
0
Number of Embeds
3,897
Actions
Shares
0
Downloads
0
Comments
3
Likes
2
Embeds 0
No embeds

No notes for slide

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)

×