Notebooks 2.0 is here.

Read the preview announcement
The avatar for @anuki11
Anuki
Published
Edited
May 19, 2019
Fork of WebGen
Insert cell
Insert cell
Insert cell
Insert cell
import {plotData} from '@jonasalmeida/webgen'
Insert cell
html`
<h2 style="color:maroon">05/10</h2>`

Insert cell
Insert cell
Firebrowseurl='http://firebrowse.org/api/v1/Samples/mRNASeq?format=json&cohort=CESC&protocol=RSEM&page=1&page_size=250&sort_by=cohort'
Insert cell
html`
<h5 style="color:black">"Failed to fetch..??</h5>`
Insert cell
Data=(await fetch(Firebrowseurl)).json();
Insert cell
Insert cell
import {mafHistData} from "@rmoffitt/webgen"
Insert cell
{
let plotData = {
x: Object.keys(mafHistData),
y: Object.keys(mafHistData).map(x => {
let y = mafHistData[x]
return(Object.keys(y).length)
}),
type: 'bar',
}

let layout = {
autosize:false,
width:700,
height:250,
margin:{
l:50,
r:200,
b:100,
t:25,
pad:4
},
}

const div = DOM.element('div')
Plotly.newPlot(div, [plotData],layout);
return div
}
Insert cell
{
let plotData = {
labels: caseCounts.map(x=>x["label"]),
values: caseCounts.map(x=>x["y"]),
type: 'pie',
}
let layout = {
autosize:true
}
const div = DOM.element('div')
Plotly.newPlot(div, [plotData],layout);
return div
}
Insert cell
Insert cell
n=200
Insert cell
Insert cell
malesUrl=`https://api.gdc.cancer.gov/files?from=0&size=${n}&filters={"op":"=","content":{"field":"cases.demographic.gender","value":["female"]}}`
Insert cell
Plotly=require("https://cdn.plot.ly/plotly-latest.min.js")
//plotly is imported using this
Insert cell
DataPlot={
let array={}
let y = femaleData.data.hits.map(x=>
{
if(!array[x.data_type])
{array[x.data_type]=0}
array[x.data_type]+=1
})
return array
}
Insert cell
Object.keys(DataPlot).map(tp=>DataPlot[tp])
Insert cell
plot= {
let div = DOM.element('div')
let trace={
x:Object.keys(DataPlot),
y:Object.keys(DataPlot).map(tp=>DataPlot[tp]),
type:'scatter'
}
return Plotly.plot(div,[trace])
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
TESTER = document.getElementById('tester');

Plotly.plot( TESTER, [{
x: [1, 2, 3, 4, 5],
y: [1, 2, 4, 8, 16] }], {
margin: { t: 0 } }, {showSendToCloud:true} );

/* Current Plotly.js version */
console.log( Plotly.BUILD );
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
projectData=(await fetch('https://api.gdc.cancer.gov/projects?fields=disease_type,name,program.name,project_id,summary.case_count&from=0&size=1000&sort=disease_type:asc')).json()
Insert cell
{
let div = DOM.element('div')
div.innerHTML='<h3 style="color:green">TCGA cancer project types (<span id="caseCountSpan"></span>)</h3>'
let ol=DOM.element('ol')
div.appendChild(ol)
let caseCount=0
projectData.data.hits.forEach(function(prj,i){
let ul=DOM.element('ul')
let li = DOM.element('li')
li.innerHTML=`<b style="color:blue">${prj.id}</b>: ${prj.name} (<span style="color:green">${prj.summary.case_count}</span>)`
caseCount=caseCount+prj.summary.case_count
ol.appendChild(li)
li.appendChild(ul)
prj.disease_type.forEach(function(dtp){
let li = DOM.element('li')
li.style.fontSize='small'
li.innerHTML=dtp
ul.appendChild(li)
})
div
//if(i==1){debugger}
})
div.querySelector('#caseCountSpan').textContent=caseCount
return div
}

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