dashboard = html`
<div id='dashboard' style="height: 1050px; border:1px;">
<div style="display: flex;">
<div style="width: 600px; margin-right: 100px; margin-top: 25px;">
<div style="margin-top:20px; ">${viewof num_enr_terms}</div>
<div style="margin-top:20px; ">${viewof inst_lib}</div>
<div style="margin-top:20px; ">${viewof new_chart}</div>
<div style="margin-top:20px; max-height: ${gene_list_height}px; overflow: scroll; border: 1px solid rgba(0, 0, 0, 0.3);">${viewof gene_of_interest}</div>
<div style="margin-top:20px; max-height: ${refseq_height}px; overflow: scroll; border: 1px solid rgba(0, 0, 0, 0.3);">${gene_info}</div>
</div>
<div style="margin-top:-10px; ">
${viewof cgm}
</div>
</div>
</div>
`
mutable latest_inst_gene_name = md`
### ${gene_of_interest}: ${inst_gene_name}
${inst_gene_description}
`
typeof(inst_gene_name)
ini_gene = network.row_nodes[0].name
// mutable gene_info = md`something`
gene_list_height = 300
refseq_height = 300
viewof new_chart = {
const svg = d3.create("svg")
.attr("width", width)
.attr("height", y_new.range()[1])
.attr("font-family", "sans-serif")
.attr("font-size", "16")
.attr("text-anchor", "end");
// initialized
svg.property('value', {
'term_name': 'Select Term',
'term_genes': []
})
const bar = svg.selectAll("g")
.data(bar_data)
.join("g")
.attr("transform", (d, i) => `translate(0,${y_new(i)})`)
.on('click', function(d){
// from https://twitter.com/darth_mall/status/961770045826371584?s=20
let term_genes = d.genes.map(x => x.toLowerCase())
let value_dict = {}
value_dict.term_genes = term_genes
value_dict.term_name = d.name
value_dict.score = d.value
svg.property("value", value_dict)
.dispatch("input");
svg.selectAll("g")
.attr('font-weight', 'normal')
d3.select(this)
.attr('font-weight', 'bold')
})
bar.append("rect")
.attr("fill", "steelblue")
.attr('opacity', 0.25)
.attr("width", function(d){return x_new(d.value)})
.attr("height", y_new.bandwidth() - 1);
bar.append("text")
.attr("fill", 'black')
//.attr("x", d => x_new(d.value) - 3)
.attr("x", '5px')
.attr("y", y_new.bandwidth() / 2)
.attr("dy", "0.35em")
.attr('text-anchor', 'start')
.text(d => d.name);
return svg.node();
}
viewof gene_of_interest = {
const element = html`
<div style="display: inline-block; user-select: none;"></div>`;
d3.select(element)
.append('h3')
.text(new_chart.term_name)
d3.select(element)
.append('h5')
.text('Combined Score ' + new_chart.score)
// element.value = 'Click on a gene to obtain detailed information'
element.value = ini_gene
// d3.select(element)
d3.select(element)
.selectAll('div')
.data(gene_list.map(x=>x + ', '))
.join('span')
.text(d => d)
.style('font-weight', '550')
.style('color', function(d){
let inst_gene = d.toLowerCase().replace(', ','')
let inst_color
if (common_genes.length > 0){
if (common_genes.includes(inst_gene)){
inst_color = 'blue'
} else {
inst_color = '#2F4F4F'// '#808080'
}
} else {
inst_color = 'black'
}
return inst_color
})
.on('click', function(d){
d3.select(element).selectAll('span')
.style('font-weight', '550')
d3.select(this)
.style('font-weight', 'bold')
element.value = d.replace(', ', '')
element.dispatchEvent(new CustomEvent("input"));
})
return element;
}
inst_gene_name
inst_gene_description
available_libs = [
'Azimuth_Cell_Types_2021',
'Descartes_Cell_Types_and_Tissue_2021',
'GO_Biological_Process_2018',
'GO_Cellular_Component_2018',
'GO_Molecular_Function_2018',
'KEGG_2019_Human',
'ARCHS4_Tissues',
'ChEA_2016',
'MGI_Mammalian_Phenotype_Level_4_2019',
'Disease_Perturbations_from_GEO_up',
'Ligand_Perturbations_from_GEO_up',
'LINCS_L1000_Chem_Pert_down',
'Ligand_Perturbations_from_GEO_down',
'GTEx_Tissue_Expression_Up',
]
// list_id = JSON.parse(new_post_response.body).userListId.toString()
// network = FileAttachment("pre-calc-viz.json").json()
mutable inst_gene_name = {
return JSON.parse(fetch_hzome.body).name
}
fetch_hzome = {
let base_url = 'https://amp.pharm.mssm.edu/Harmonizome/api/1.0/gene/' ;
let full_url = base_url + gene_of_interest;
const response = await fetch(
full_url, {
method: 'GET'
}
);
return {
ok: response.ok,
body: await response.text()
};
}
max_bar_width = 500
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.
