Published
Edited
Apr 18, 2019
Importers
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
html`
<h3>Computation</h3>
<p>The computation of the age distributions requires an authenticated bearar token to have access to the private data. That function is defined here and can be imported by itself in other Observable Notebooks, where it will produce the same plot for the data accessible with the bearer token of the remote user.</p>
`
Insert cell
html`
<h3>Data</h3>
<p>If we do it right, the global data variable will be populated here after authentication but it won't be available for importing elsewhere.</p>
`
Insert cell
data={return {dt:{}}}
Insert cell
html`
<h3>Ploting age distribution</h3>
<p>plotly will be used...</p>
`
Insert cell
Insert cell
plotIt=async function(trace,layout){
if(typeof(plotly)=="undefined"){
let plotly= await require("https://cdn.plot.ly/plotly-latest.min.js")
}
let div = DOM.element('div')
trace=trace||false
return plotly.plot(div,trace,layout)
}
Insert cell
ageDistribution=async function(auth,div){
div=div||document.getElementById('computationDiv') // notice target div is the second variable, with a default value
div.textContent='retrieving raw files ...'
let getFile=async function(id){
return (await fetch(`https://api.box.com/2.0/files/${id}/content`,{
method:'GET',
headers:{
Authorization:"Bearer "+auth.access_token
}
})).text()
}
function txt2json(txt){
let arr = txt.split(/\n/).map(r=>r.split(/\s/))
let aa = arr[0] // fieldnames / attributes
let dt ={} // data
aa.forEach(a=>{dt[a]=[]}) //
arr.slice(1).forEach((vv,i)=>{
aa.forEach((a,j)=>{dt[a][i]=vv[j]})
})
//data.dt[k]=dt
return dt
}
let cores={
USRT:'418080151298',
PLCO:'418097175569',
//PBCS:'418087762189',
//AHS:'418088787178'
}
Object.keys(cores).forEach(k=>{
console.log('reading '+k)
getFile(cores[k])
.then(txt2json)
.then(dt=>{
data.dt[k]=dt
plotIt(dt,k)
})
})

}
Insert cell
Insert cell
Insert cell
Insert cell
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