Skip to content

Instantly share code, notes, and snippets.

@badosa

badosa/index.html

Last active November 21, 2019 05:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save badosa/cb78feee21435cb62146 to your computer and use it in GitHub Desktop.
Save badosa/cb78feee21435cb62146 to your computer and use it in GitHub Desktop.
Download ZIP
fromTable()
Raw
readme.md

The fromTable() function is the reverse of the JSON-stat Javascript Toolkit toTable() method: it converts different common flavors of JSON tables (the same flavors supported by toTable()) into the JSON-stat format.

In this experiment, the OECD JSON-stat sample (432 data) is retrieved, a JSON table is created with the toTable() method and then this table is converted back into JSON-stat using the fromTable() function. Finally, the 432 data (values and statuses) in the two JSON-stat documents are compared. This is done three times: one per JSON table type.

If all the icons are blue, everything went ok. Tests about "array" (=CSV-like) tables are represented as squares. Tests about "object" tables (=Google DataTable) are represented as circles. Tests about "arrobj" tables (very common in D3) are represented as leaves.

This page is just a proof of concept. That's why the fromTable() is only provided in minimized form: it's just a very preliminary version (it does not support status or labels, for instance). The final version will be available on GitHub.

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/jsonstat@0.13.13"></script>
<style type="text/css">
span {
display: inline-block;
height: 12px;
width: 12px;
color: #fff;
margin: 2px 3px;
background-color: #f00; /* ko */
}
span.object {
border-radius: 12px;
}
span.arrobj {
border-radius: 10px 0;
}
span.ok {
background-color: #00f;
}
</style>
</head>
<body>
<div></div>
<script type="text/javascript">
//Get some JSON-stat data to play with
JSONstat("https://json-stat.org/samples/oecd-canada-col.json", function(){
var div=document.getElementsByTagName("div")[0];
if(this.length>0){
var
html="",
oecd1=this.Dataset(0),
test=function(t, j1, j2, area, year){
var
o={"area": area, "year": year},
title="Area: "+area+", Year: "+year+" ("+t+")",
oko=(
j1.Data(o).value===j2.Data(o).value
&&
j1.Data(o).status===j2.Data(o).status
) ? "ok" : "ko"
;
return '<span class="'+t+' '+oko+'" title="'+title+'"></span>';
}
;
//Test all types
["arrobj", "array", "object"].forEach(function(t){
//Convert JSON-stat into a JSON table and use fromTable()
//to convert it back into basic JSON-stat
var
oecd2=JSONstat(
fromTable({
table: oecd1.toTable({
type: t,
content: "id",
field: "id",
status: true
}),
type: t
})
).Dataset(0),
area=oecd1.Dimension("area").id,
year=oecd1.Dimension("year").id
;
//Test all data
for(var a=0, alen=area.length; a<alen; a++){
for(var y=0, ylen=year.length; y<ylen; y++){
html+=test(t, oecd1, oecd2, area[a], year[y]);
}
}
div.innerHTML=html;
});
}else{
div.innerHTML="There was an error connecting to the JSON-stat provider.";
}
});
//IE>8 or include polyfills for Array.indexOf and Array.map
function fromTable(r){var e=r.vfield||"value",a=r.sfield||"status",n=r.type||"array",t=r.table,f=[],o=[],s=[],u=[],i={},v={},l=function(r,e){for(var a=1,n=0,t=0;p>t;t++)a*=t>0?e[p-t]:1,n+=a*r[p-t-1];return n};switch(n){case"array":t=function(r){for(var e=r[0],a=r.slice(1),n=[],t=0,f=a.length;f>t;t++){for(var o=0,s=e.length,u={};s>o;o++)u[e[o]]=a[t][o];n.push(u)}return n}(t);break;case"object":t=function(r){for(var e=r.cols.map(function(r){return r.id}),a=r.rows,n=[],t=0,f=a.length;f>t;t++){for(var o=0,s=e.length,u={};s>o;o++)u[e[o]]=a[t].c[o].v;n.push(u)}return n}(t)}var h=t.length;for(var c in t[0])if(c!==e&&c!==a){f.push(c),i[c]=[];for(var d=0;h>d;d++){var g=t[d][c];-1===i[c].indexOf(g)&&i[c].push(g)}o.push(i[c].length),v[c]={category:{index:i[c]}}}for(var p=f.length,b=0;h>b;b++){for(var y=[],m=0;p>m;m++){var x=f[m];y.push(i[x].indexOf(t[b][x]))}s[l(y,o)]=t[b][e],u[l(y,o)]=t[b][a]}return v.id=f,v.size=o,{dataset:{value:s,status:u,dimension:v}}}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment