Plan, design and develop idea to prototype to production of new tools.
// Second last number from the slider scale array is eqal to the one portion of the data points. If we divide the slider value by the one portion, we will get the qnorm value for given slider value.
selected_corr=reverse?(Math.abs(qnorm(1/Math.pow(10,(((data.length-1)-slider_value/Math.abs(data[data.length-2].xvalue))*10))))):(Math.abs(qnorm(1/Math.pow(10,((slider_value/Math.abs(data[1].xvalue))*10)))))
// Here is the number of edges in the network
edges=getNetwork.max_conn
//Area chart settings
chart = {
const svg = d3.select("#area_chart").html("")
.append("svg")
.attr("viewBox", [0, 0, width, height])
.attr("id", 'slider_chart')
const defs= svg.append("defs")
svg.append("path")
.datum(data)
.attr("fill", "url(#mask)")
.attr("d", area)
const mask = defs.append("pattern").attr("id", "mask").attr("x", 0)
.attr("y", 0) .attr("width",1)
.attr("height", 1) .attr("patternUnits", 'objectBoundingBox')
mask.selectAll('#test')
.data(result)
.join('rect')
.attr("id", 'test')
.attr("x", d => d.x)
.attr("y", 0)
.attr("width", d => d.w)
.attr("height", height)
.attr("fill", d=>d.color)
.attr("stroke", "white")
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
return svg;
}
// Cytsocape settings
settings = cy({
width: width,
container: container, // container to render in
elements: getNetwork["network"],
boxSelectionEnabled: true,
hideEdgesOnViewport: true,
hideLabelsOnViewport: true,
panningEnabled: true,
minZoom: 0.1,
maxZoom: 5,
selectionType: 'single',
renderer: {
name: 'canvas',
showFps: false // show debugging approx. fps
},
pixelRatio: 1, // default:'auto', normalise pixel ratio to 1 here so different screens don't alter performance
hideEdgesOnViewport: false,
style: [ // the stylesheet for the graph
{
selector: 'node',
style: {
'background-color': 'data(clr)',
'border-width': 'data(bw)',
'border-style': 'solid',
'border-color': 'data(b)',
'label': 'data(name)',
'shape': 'data(shape)',
'width': '15',
'height': '15',
'font-size': 6,
}
},
{
selector: 'edge',
style: {
'width': 'mapData(width, 5, 9, 1, 5)',
'line-color': 'data(clr)',
'opacity': 0.7,
'min-zoomed-font-size': 1,
'curve-style': 'haystack',
}
}
],
layout: {
name: 'cose',
directed: true,
padding: 10
}
})
// Color range of the area chart based on the slider value
range=!reverse?[
{color:'lightgray',point:[slider_value-.032,0]},
{color:'lightblue',point:[slider_value,0]}
]:[
{color:'lightblue',point:[slider_value-.032,0]},
{color:'lightgray',point:[slider_value,0]}
]
// Result array for the area chart using marktheRegion function
result=marktheRegion(range)
// This function determine the color scale cordinate based on the slider
marktheRegion=(data)=>
{return data.map((datum,index)=>{
const next=data[index+1]
const previous=data[index-1]
if(!previous){
//console.log("datum",datum)
const x1=0
const w= x(datum.point[0])
const h=datum.point[1]
return {x:x1,w,h,color:datum.color}
}
//console.log(next,datum)
if(!next){
// console.log("datumx",datum)
const x1=x(previous.point[0])
const w= width
const h=datum.point[1]
return {x:x1,w,h,color:datum.color}
}
const x1=x(previous.point[0])
const w=x(datum.point[0])-x(previous.point[0])
const h=datum.point[1]
return{x:x1,w,h,color:datum.color}
})
}
// Height of the area chart
height = 500
// Margin of the area chart
margin = ({top: 20, right: 20, bottom: 30, left: 30})
// X scale
x = d3.scaleLinear()
.domain(d3.extent(data, d => d.xvalue))
.range([margin.left, width - margin.right])
//.range([0,19])
// Y scale
y = d3.scaleLinear()
.domain([0, d3.max(data, d => d.value)]).nice()
.range([height - margin.bottom, margin.top])
// X axis
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))
// Y axis
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y))
.call(g => g.select(".domain").remove())
.call(g => g.select(".tick:last-of-type text").clone()
.attr("x", 3)
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.text(data.y))
// Initialize area chart
area = d3.area()
.curve(curve)
.x(d => x(d.xvalue))
.y0(y(0))
.y1(d => y(d.value))
// Bind the curveLinear
curve = d3.curveLinear
// Qnorm Array for first 30 data points filtered by max value
qnormArray={
let tmpArr=[];
for(let i=0;i<30;i++){let j=parseFloat(1/Math.pow(10,(i==0)?1:i*10));tmpArr.push(-1*qnorm(j));}
if(max_value<tmpArr[1]){tmpArr.push(0)}
tmpArr=tmpArr.filter(item => item < max_value+1);
return tmpArr;
}
// Filter the qnorm array and caclulate the input data for area chart
data={
let tmpArr=[];
for(let i=0;i<qnormArray.length;i++){
let j=parseFloat(1/Math.pow(10,(i==0)?1:i*10));
let k=qnormArray.length-1-i;
tmpArr.push({xvalue:reverse?k/(qnormArray.length-1):1-k/(qnormArray.length-1),value:Math.abs(1*qnorm(j))});
}
return tmpArr;
}
// Minimum value for the entire network
min_value=getRange.minimum;
// Maximum value for the entire network
max_value=getRange.maximum
// Get url valiables
fingerprint={
if($_GET('fp')!= undefined) {
return $_GET('fp');
}
}
// Get URL function
$_GET = (q, s) => {
s = s ? s : window.location.search;
var re = new RegExp('&' + q + '(?:=([^&]*))?(?=&|$)', 'i');
return (s = s.replace('?', '&').match(re)) ? (typeof s[1] == 'undefined' ? '' : decodeURIComponent(s[1])) : undefined;
}
// Initialize GenIE object
GenIE =({
allGenelists: {},
activeGenelist: {},
allExperiments: {},
activeExperiment: {},
genelistDatabase: '',
speciesDatabase: '',
userID: userID,
selectedspeciesAbbreviation: selectNetwork[0].abbreviation,
genelistDatabase: "plantgenie_genelist",
databaseURL : "https://api.plantgenie.org/db",
genelistURL : "https://api.plantgenie.org/genelist/get_active_list",
experimentURL : "https://api.plantgenie.org/experiment",
expressionURL : "https://api.plantgenie.org/experiment/expression",
networkURL : "https://api.plantgenie.org/experiment/network"
})
// Set text if needed
setText = (text) => {
div.innerHTML = text
}
// Pull genelist from the database
getGeneList = {
let database_name = await plantgenieRequest(GenIE.databaseURL + "/" + GenIE.selectedspeciesAbbreviation)
GenIE.selectedspeciesDatabase = database_name[0].db
let genelist = null;
if (database_name) {
genelist = await plantgenieRequest(GenIE.genelistURL + "?name=" + GenIE.genelistDatabase + "&fingerprint=" + GenIE.userID + "&table=" + GenIE.selectedspeciesDatabase)
}
let experiments = null;
if (genelist) {
experiments = await plantgenieRequest(GenIE.experimentURL + "/get_all?name=" + GenIE.selectedspeciesDatabase)
}
GenIE.allExperiments = experiments;GenIE.activeGenelist = genelist;
setText("Species: <b>" + database_name[0].species+" "+database_name[0].version + "</b> <br> Database Name: <b>" + database_name[0].db + "</b> <br> Name of the active GeneList: <b>" + genelist[0].gene_basket_name + "</b> <br>Number of genes in the active GeneList: <b>" + (genelist[0].gene_list.split(",")).length)+"</b>";
return genelist
}
// Pull network from the database
getNetwork={
let mainObj={};
const networkURL="https://api.plantgenie.org/network/network?name="+selectNetwork[0].db.toLowerCase()+"&table="+selectNetwork[0].table.toLowerCase()+"&network="+selectNetwork[0].experiment_value.toLowerCase()+"&fingerprint="+userID+"&max_connections=1000&expand="+(selected_corr)+"&genes_expand=false&reload=false&private_default_gene_ids="+getGeneList[0].gene_list;
let networkInfo = await plantgenieRequest(networkURL)
if(networkInfo) {
return networkInfo;
}
}
// Get max min value for the given network
getRange={
selectNetwork;
const networkURL="https://api.plantgenie.org/network/range?name="+selectNetwork[0].db.toLowerCase()+"&table="+selectNetwork[0].table.toLowerCase()+"&network="+selectNetwork[0].experiment_value.toLowerCase()
let range = await plantgenieRequest(networkURL)
if(range) {
}
return range;
}
// Pull all the experiment and species names for networks
allExperiments={
const databaseURL="https://api.plantgenie.org/db";
const experimentURL="https://api.plantgenie.org/network";
let treeParent = [];
let mainObj={};
let k=1;
let databasesName = await plantgenieRequest(databaseURL+"/")
if(databasesName) {
for(let j=0;j<databasesName.length;j++){
let experimentName = await plantgenieRequest(experimentURL+"/get_all?name="+databasesName[j].db)
let treeChild=[];
if( experimentName && experimentName.length>0){
for(let i=0;i<experimentName.length;i++){
if(experimentName[i].visibility=="true" && databasesName[j].abbreviation.match(/^(potrav1|potra|artha|piabi|eugra)$/) ){
if(experimentName[i].experiment_name=="P. abies exatlas"){continue;}
let tmptoolsArray=[];
let tmptoolsStr=experimentName[i].tools;
let tempVersion;
(databasesName[j].version!=null)?tempVersion=databasesName[j].version:tempVersion="v1.0"
(experimentName[i].tool_category=="network")?tmptoolsArray=["exNet"]:tmptoolsArray=tmptoolsStr.split(/[ ,]+/)
treeParent.push({"abbreviation":databasesName[j].abbreviation, "experiment":experimentName[i].experiment_name,"experiment_value":experimentName[i].experiment_value,"table":experimentName[i].experiment_table,"db":databasesName[j].db,"species":databasesName[j].species+" "+tempVersion,"experiment_value":experimentName[i].experiment_value,"tool_category":experimentName[i].tool_category});
k++;
}
}
}
}
return treeParent;
}
}
// Ajax request
plantgenieRequest=(e=>new Promise((t,s)=>{const n=new XMLHttpRequest;n.open("POST",e,!0),n.send(),n.onreadystatechange=(()=>{if(4===n.readyState)if(200===n.status)t(JSON.parse(n.responseText));else{const e=n.statusText||"error";s(e)}})}));
import {pnorm} from '@irusri/how-i-bind-network-slider-with-the-area-chart'
import { toggleSwitch } from '@irusri/how-i-bind-network-slider-with-the-area-chart'
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.
