Published
Edited
Feb 23, 2018
Insert cell
Insert cell
data = [
{name:'pathwayA', gene:['a','b','c']},
{name:'pathwayB', gene:['b','f']},
{name:'pathwayC', gene:['d','k','s']}
]

Insert cell
Insert cell
gene_info = [{'gene':'a', 'p':Math.random(), 'expression':Math.random()},
{'gene':'b', 'p':Math.random(), 'expression':Math.random()},
{'gene':'c', 'p':Math.random(), 'expression':Math.random()},
{'gene':'f', 'p':Math.random(), 'expression':Math.random()},
{'gene':'k', 'p':Math.random(), 'expression':Math.random()},
{'gene':'s', 'p':Math.random(), 'expression':Math.random()}
]
Insert cell
sortdata={
return data.map(item => item.gene)

}
Insert cell
result=sortdata.map((item,i,j) => gene_info.filter(i_item => item.includes(i_item.gene)))
Insert cell
revise_data=data.map((obj,i)=> {return { name:obj.name, genes:result[i].sort(compareP) }})
Insert cell
{
const svg = d3.select(DOM.svg(500, 500));
const rect_back = svg.selectAll('g back')
.data(revise_data)
.enter()
.append('g')
.classed('back', true)
.attr("transform", "translate(100,10)");
rect_back.append('rect')
.attr("fill", "red")
.attr("stroke", "black")
.attr("x", (d,i)=>{return 0})
.attr("y", (d,i)=>{return i*120})
.attr("width", 500)
.attr("height", 100);
const react_back_genes = rect_back.selectAll('g genes')
.data(function(d,i){
var temp = [...d.genes.keys()].map((item)=> [d.genes[item],i]);
console.log(temp);
return temp
})
.enter()
.append('g')
.classed('genes', true)
.append('rect')
.attr("fill", "grey")
.attr("stroke", "black")
.attr("x", (d,i)=> i*100 )
.attr("y", (d,i)=> d[1]*120 )
.attr("width", 100)
.attr("height", 100);
svg.selectAll('text.upper')
.data(revise_data)
.enter()
.append('text')
.text((d,i)=> "Pathway "+ i)
.attr("x", (d,i)=> 0)
.attr("y", (d,i)=> 30+i*120 )
.attr("font-family", "sans-serif")
.attr("font-size", "20px")
.attr("fill", "black")
.classed('upper', true);
const gene_text = rect_back.selectAll('g.genename')
.data((d,i)=> [...d.genes.keys()].map((item)=> [d.genes[item],i]))
.enter()
.append('g')
.classed('genename',true)
.append('text')
.text((d,i)=> {
console.log(d);
return d[0].gene
} )
.attr("x", (d,i)=> 30+i*120 )
.attr("y", (d,i)=> 30+d[1]*120 )
.attr("font-family", "sans-serif")
.attr("font-size", "20px")
.attr("fill", "black")
.classed('genename', true);
console.log(gene_text);
return svg.node()
}
Insert cell
function compareP(a,b){

if ( a.p > b.p ){
//a is less than b by some ordering criterion
return -1;
}
if (a.p < b.p ) {
//a is greater than b by the ordering criterion
return 1;
}
// a must be equal to b
return 0;
}
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