Successfully reported this slideshow.
Your SlideShare is downloading. ×

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

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

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).

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).

Advertisement
Advertisement

More Related Content

Advertisement

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)

×