Published
Edited
Mar 1, 2020
4 stars
Insert cell
md`# working with [ganja.js](https://github.com/enkimute/ganja.js): examples, workflow, r/w data files, and [_Promise object_](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise)

* Read text file from [zeit.cc](zeit.cc), extract as text/json
* save/download results files in json locally
* more ganja.js examples on [observablehq.com/@enkimute](https://observablehq.com/@enkimute)
`
Insert cell
md`# about the data

all data are saved in Matlab
* test.json is the first example in Matlab documentation.
> fid = fopen(filename,'w'); value = {'one'; 'two'; 'three'}; jsonencode(value); fclose(fid); (TO read into Matlab: text = fileread(filename); value = jsondecode(text);
* struct_vector.json is a struct.
> value.v1, value.v2, and value.v3 are vector coordinates.
* for mat_cell_vectors,
> value = {v1, v2, v3};
`
Insert cell
md`## await fetch`
Insert cell
(await fetch('https://tempdata.ying17zi.now.sh/test.json')).text()
Insert cell
struct_vector = (await fetch('https://tempdata.ying17zi.now.sh/struct_vector.json')).json()
Insert cell
data = fetch('https://tempdata.ying17zi.now.sh/struct_vector.json')
.then(function(response){return response.json();})
Insert cell
struct_vector.v1
Insert cell
mat_cell_vectors = (await fetch('https://tempdata.ying17zi.now.sh/mat_cell_vectors.json')).json()
.then(m => m[0])
Insert cell
md`## fetch, function and _.then()_`
Insert cell
fetch('https://tempdata.ying17zi.now.sh/struct_vector.json')
.then(function(response){
return response.json();
})
Insert cell
md`# Try to pass data to an inline Algebra enveriment`
Insert cell
Algebra(3,0,()=>{
var test_single_vector_data = fetch('https://tempdata.ying17zi.now.sh/struct_vector.json').then(response=>
response.json()
)
return test_single_vector_data
})
Insert cell
md`# JSON.parse`
Insert cell
name_age = JSON.parse('{ "name":"John", "age":30, "city":"New York"}')
Insert cell
name_age.age
Insert cell
md`# fetch data in Algebra inline function`
Insert cell
Algebra(3,0,()=>{
var data = fetch('https://tempdata.ying17zi.now.sh/test.json').then(function(response){
return response.json();
})
// return data[0] // does not work, it returns a promise
return data
})
Insert cell
md`# manipulate data in _.then()_`
Insert cell
Algebra(3,0,()=>{
var mat_cell_vectors = fetch('https://tempdata.ying17zi.now.sh/mat_cell_vectors.json')
.then(function(response){return response.json();})
var vs = mat_cell_vectors.then(mat => mat[0]*1e1 + mat[1]*1e2 + mat[2]*1e3)
return vs
})
Insert cell
Algebra(3,0,()=>{
var test_single_row_vector_data = fetch('https://tempdata.ying17zi.now.sh/test_single_row_vector_data.txt')
.then(r => {return r.text()})
.then(n => n.split(',').map(Number))
.then(x => x*1e1) // .then(x => x[32])
// .then(x => x[1])
return test_single_row_vector_data
})
Insert cell
md`# function/variables defined outside can be _accessed/processed_ normally inside of _.then()_

* here we name the **.then()** inline function input data "__vs__"
- __vs__.then(__vs__ => cost(1e12, __vs__[1]))
* equivalently
- __vs__.then(__x__ => cost(1e12, __x__[1]))
`
Insert cell
Algebra(3,0,()=>{
// load data via zeit.cc and normalize
var vs = fetch('https://tempdata.ying17zi.now.sh/struct_vector.json')
.then(x => x.json()) // read as json
.then(x => x.v1*1e1+x.v2*1e2+x.v3*1e3) // convert to R3 vector
.then(x => x.map(x=>x.Normalized)) // normalize vector
// ordinary variables without "then" promise
// the cost function
var cost = (plane, v)=>{
var volume = plane.Normalized ^ v; // using normalized plane
return volume.Reverse * volume;
};
// derivative of the cost
var dct = this.Dt(cost); //, delta_x = this.Dt(cost);
var dc = this.D(cost); //, nabla_f = this.D(cost); // not in use, to delete

return vs.then(vs => cost(1e12, vs[1]))
})
Insert cell
md`# workfolow: external data w/r & Algebra inline env
* push data to github
* fetch data in inline env via the link: "https://tempdata.ying17zi.now.sh/file_name" (a service provided by [zeit.cc](zeit.cc))
* return as inline function output
* assign Algebra(...) to a variable
* the variable will be visable for saving in other blocks
* save data into json file
`
Insert cell
data_to_save = Algebra(3,0,()=>{
var data = fetch('https://tempdata.ying17zi.now.sh/struct_vector.json')
.then(function(response){return response.json();})
return data
})
Insert cell
data_to_save.v1
Insert cell
file_to_save = 'test.json'
Insert cell
md`# function: convert data to json`
Insert cell
// import {serialize} from "@palewire/saving-json"
function serialize (data) {
let s = JSON.stringify(data);
return new Blob([s], {type: "application/json"})
}
Insert cell
md`# to download`
Insert cell
DOM.download(serialize(data_to_save), file_to_save, "Download JSON")
Insert cell
md`# load _ganja.js_, at the bottom of the page`
Insert cell
Algebra(3,0,0).describe().basis
Insert cell
Algebra = require('ganja.js')
Insert cell
// 1/2, offline with fetch, zeit.cc
/*
Algebra = require('ganja.js')
global.fetch = require('node-fetch')
global.fs = require('fs')

results = Algebra(3, 0, () => {
var data = fetch(
'https://tempdata.ying17zi.now.sh/test_patch_weights_four_nreighbors.json'
)
.then(x => x.json()) // read as json
.then(x => {
var vs_list = x.map(x => x.v1 * 1e1 + x.v2 * 1e2 + x.v3 * 1e3)
var ps_list = x.map(x => x.p1 * 1e1 + x.p2 * 1e2 + x.p3 * 1e3)
var qs_list = x.map(x => x.q1 * 1e1 + x.q2 * 1e2 + x.q3 * 1e3)
// var ws_list = x.map((x)=> x.w);
var ws_list = x.map(x => x.w * 0 + 1)
return { vs_list, ps_list, qs_list, ws_list }
})

// here we process the data,
// ...
// then return results
return data.then(x => x)
})

results.then(res => {
console.log('res...', res)
fs.writeFile('./reulsts.json', JSON.stringify(res), function(err) {
if (err) console.log('write file failed')
else console.log('write file success')
})
})
*/
Insert cell
// 1/2, offline with Node.js, local file
/*
Algebra = require('ganja.js');
global.fs = require('fs')

results = Algebra(3,0,()=>{
var content = fs.readFileSync("./test_patch_weights_four_nreighbors.json");
var jsonContent = JSON.parse(content);
const jsonStr = JSON.stringify(content);
console.log("v1:", jsonContent[0].v1);
})
*/
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more