Public
Edited
May 8, 2024
viewof gene_of_interest = {
const element = html`
<div style="display: inline-block; user-select: none;"></div>`;
// d3.select(element)
// .append('h4')
// .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'
// d3.select(element)
d3.select(element)
.selectAll('div')
.data(gene_list.map(x=>x + ', '))
.join('span')
.text(d => d)
.style('font-weight', '150')
.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){
console.log('clicking gene in paragraph', this)
d3.select(element).selectAll('span')
.style('font-weight', '150')
d3.select(this)
.style('font-weight', 'bold')
element.value = d.replace(', ', '')
element.dispatchEvent(new CustomEvent("input"));
// // running into async issues
/////////////////////////////////
// // get information from Uniprot via Clustergrammer-gl
// let inst_gene = d.replace(', ','')
// cgm.params.hzome.gene_info(inst_gene)
// mutable inst_gene_name = cgm.params.hzome.gene_data[inst_gene]['name']
// mutable inst_gene_description = cgm.params.hzome.gene_data[inst_gene]['description']
})
return element;
}
available_libs = Object.keys(gene_set_collections)
mutable inst_gene_name = ''
mutable inst_gene_description = ''
common_genes = new_chart.term_genes
term_list = bar_data.map(x => x.name)
bar_data_values = bar_data.map(x => x.value)
score_list = bar_data.map(x => x.value)
// num_enr_terms = 10
bar_data = enrich_data.filter(d => d['p-val'] < 0.5).slice(0, num_enr_terms)
gene_list
bar_chart_height = 210
description_height = 285
gene_list_height = 315
// number of successes
k = 16
// number of trials
n = 20
// success probability
p = 0.1
binomialProbability(n, k, p)
function binomialProbability(n, k, p) {
// calculate the probability of failure, q, as 1 - p
let q = 1 - p;
// initialize the result to 0
let result = 0;
// loop from k to n
for (let i = k; i <= n; i++) {
// add the probability of having exactly i successes to the result
result += binomialCoefficient(n, i) * Math.pow(p, i) * Math.pow(q, n - i);
}
// return the final result
return result;
}
// the number of ways to choose k successes from a set of n trials
function binomialCoefficient(n, k) {
// initialize the result to 1
let result = 1;
// loop from 1 to k
for (let i = 1; i <= k; i++) {
// multiply the result by (n-(k-i))/i
result = result * (n - (k - i)) / i;
}
// return the final result
return result;
}
// library_name = 'GO_Biological_Process_2021'
// library_name = 'go_biological_process_2021_enrichr'
go_biological_process_2021_enrichr = FileAttachment("go_biological_process_2021_enrichr.json").json()
go_cellular_component_2021_enrichr = FileAttachment("go_cellular_component_2021_enrichr.json").json()
gene_set_collections = ({
go_biological_process_2021_enrichr,
go_cellular_component_2021_enrichr
})
gene_sets = gene_set_collections[inst_lib]
inst_term = 'cellular response to topologically incorrect protein (GO:0035967)'
list_type = Generators.observe(notify => {
const mousemove = () => notify(cgm.params.tooltip.tooltip_type);
viewof cgm.addEventListener("click", mousemove);
notify(cgm.params.tooltip.tooltip_type);
return () => viewof cgm.removeEventListener("mousemove", mousemove);
})
max_bar_width = 490
x_new = d3.scaleLinear()
.domain([0, d3.max(bar_data_values)])
.range([0, max_bar_width])
y_new = d3.scaleBand()
.domain(d3.range(bar_data_values.length))
.range([0, 22 * bar_data_values.length])
function define_gene_list(dendro_gene_list, viz_gene_list){
let gene_list
if (list_type === 'row-dendro'){
gene_list = dendro_gene_list
}
else if (list_type === 'matrix-cell'){
gene_list = viz_gene_list
} else {
// default to all visible genes
gene_list = viz_gene_list
}
return gene_list
}
gene_sets_filt = {
var gene_sets_filt = {}
Object.keys(gene_sets)
.filter(d => gene_sets[d].filter(x => all_genes.includes(x)).length > 0)
.forEach(d => gene_sets_filt[d] = gene_sets[d].filter(x => all_genes.includes(x)))
return gene_sets_filt
}
enrich_data = Object.keys(gene_sets_filt).map(d => {
var matching_genes = gene_sets_filt[d].filter(x => gene_list.includes(x))
// not needed since we've already filtered the genes in the gene list
var matching_genes_all = gene_sets_filt[d].filter(x => all_genes.includes(x))
var k = matching_genes.length
var n = gene_list.length
var p = matching_genes_all.length / all_genes.length
var binom_prob = binomialProbability(n, k, p)
var neg_log_pval
if (binom_prob === 0){
neg_log_pval = 100
} else {
neg_log_pval = -Math.log10(binom_prob)
}
return {
'name': d,
'value': neg_log_pval,
'p-val': binom_prob,
'genes': matching_genes
}
}).sort((a, b) => b.value - a.value)
gene_list = define_gene_list(dendro_gene_list, viz_gene_list).sort()
viz_json_url = 'https://raw.githubusercontent.com/ismms-himc/covid-19_tenoever/master/jsons/A549_diff_genes.json'
network = JSON.parse(viz_json_response.body)
// network = FileAttachment("pbmc_2700.json").json()
all_genes = network.row_nodes.map(d => d.name)
CGM = require(await FileAttachment("clustergrammer-gl.0.24.1.packd.js").url())
// cgm = require(await FileAttachment("clustergrammer-gl.0.24.0.packd.js").url())
d3 = {
// const d3 = require('d3')
const d3 = await require("d3@5", "d3-array@2");
// d3.cloud = await require("d3-cloud@1");
return d3
}
cgm.params
cgm.params.hzome.gene_data
cgm.params.hzome.gene_info('TP53')
organism = 'human'
num_return = 100
d3format = require("d3-format@1")
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.
