利用d3.js做差异表达火山图

Submitted by admin on Sat, 09/27/2025 - 02:24

<html>

<head>

<title>MouseOmics - a portal of mouse multi-omics data</title>

// Function to check if the result is displayed

function isResultDisplayed() {

// Example: Check if a specific element contains the expected result

// Adjust the selector and condition as needed

var resultElement = document.getElementById('result');

return resultElement && resultElement.textContent.trim() !== '';

}

// Function to refresh the page if the result is not displayed

function checkAndRefresh() {

if (!isResultDisplayed()) {

// Refresh the page after a delay (e.g., 5 seconds)

setTimeout(function() {

location.reload();

}, 3000); // 3000 milliseconds = 5 seconds

}

// Add an event listener to run the check when the page loads

window.onload = function() {

checkAndRefresh();

};

</script>

</head>

<body>

</td></tr>

<tr>

<tbody>

<tr>

<ul>

<li><strong><a href="../../MouseOmics/genome.htm"><font color="white">Genome</font></a></strong></li>

<li><strong><a href="../../MouseOmics/transcriptomics.htm"><font color="white">Transcriptome</font></a></strong></li>

<li><strong><a href="../../MouseOmics/proteomics.htm"><font color="white">Proteome</font></a></strong></li>

<li><strong><a href="../../MouseOmics/metabolomics.htm"><font color="white">Metabolome</font></a></strong></li>

<li><strong><a href="../../MouseOmics/metalConcentration.htm"><font color="white">Metallome</font></a></strong></li>

<li><strong><a href="../../MouseOmics/variomics.htm"><font color="white">Variome</font></a></strong></li>

<li onMouseOver="displaySubMenu(this)" onMouseOut="hideSubMenu(this)"><strong><a href="#"><font color="white">Tools</font></a>

<ul>

<li><a href="../../MouseOmics/search.htm">Basic Search</a></li>

<li><a href="../../MouseOmics/blast/blast.html">Advanced Search</a></li>

<li><a href="../../MouseOmics/jbrowse.htm">Genome Browse</a></li>

<li><a href="../../MouseOmics/MISAweb.htm">MISAtool</a></li>

<li><a href="../../MouseOmics/synview.htm">Synteny Viewer</a></li>

<li><a href="../../MouseOmics/InterProEnrich.htm">InterPro enrichment</a></li>

<li><a href="../../MouseOmics/GeneClassify.htm">Gene Ontology enrichment</a></li>

<li><a href="../../MouseOmics/pathwayenrich.htm">Pathway enrichment</a></li>

</ul>

</strong></li>

<ul>

<li><a href="../../MouseOmics/statistics.htm">Statistics</a></li>

<li><a href="../../MouseOmics/link.htm">Resources</a></li>

<li><a href="../../MouseOmics/manual.htm">Manual</a></li>

<li><a href="../../MouseOmics/download.htm">Download</a> </li>

</ul>

</strong></li>

</ul>

</div></td>

</tr>

</tbody>

</table>

</td>

</tr>

<tr><td height="50" align="center"><h2 align="center">Pairwise Comparison Atlas</h2></td></tr>

<tr><td height=30px><b>Reference Genome:</b></td><td><a href="genome.cgi?ID=GRCm39"><i>Mus musculus</i> (house mouse), strain: C57BL6J</a></td></tr>

<tr><td width="25%" height=30px><b>RNA-seq Project:</b></td><td>Selenium deficiency is associated with prolongevity mechanisms</td></tr>

<tr><td height=30px><b>Query Sample:</b></td><td>Liver with 0.1 ppm</td></tr>

<tr><td height=30px><b>Subject Sample:</b></td><td>Brain with 0.4 ppm</td></tr>

<tr><td height=30px><b>DEG Analysis Program:</b></td><td>DESeq2</td></tr>

<tr><td height=30px><b>Fold Change Cutoff:</b></td><td>1</td></tr>

<tr><td height=30px><b>P value Cutoff:</b></td><td>0.05</td></tr><tr><td height=30px><b>DEG analysis result for all genes: </b></td><td><a target="_blank" href="../../MouseOmics/RNA/P01_All_results.csv">Tab-delimited Format</a></td></tr>

<tr><td height=30px><b>Heatmap of DEG genes: </b></td><td><a target="_blank" href="../../MouseOmics/RNA/P01_heatmap_output.pdf">PDF</a></td></tr>

<tr><td><b>Volcano plot of DEG genes:</b></td><td> </td></tr>

d3.csv("https://varnatech.cn/MouseOmics/RNA/P01_All_results.csv").then(function(data){

const pCut = 0.05, fcCut = 1;

const log10 = x => -Math.log10(+x);

const up = {x:[], y:[], text:[], mode:'markers', type:'scatter',

marker:{color:'#E64B35', size:6}, name:'Up-regulated'};

const down = {x:[], y:[], text:[], mode:'markers', type:'scatter',

marker:{color:'#4DBBD5', size:6}, name:'Down-regulated'};

const none = {x:[], y:[], text:[], mode:'markers', type:'scatter',

marker:{color:'#BABABA', size:4}, name:'Not Significant'};

data.forEach((r,i)=>{

const fc = +r.log2FoldChange;

const pv = +r.pvalue;

if (isNaN(fc) || isNaN(pv)) return;

const geneName = r.gene || r.id || r.symbol || `Gene_${i+1}`;

const log = log10(pv);

const txt = `${geneName}<br>log2FC=${fc.toFixed(2)}<br>p=${pv.toExponential(1)}`;

if (pv < pCut && fc >= fcCut) { up.x.push(fc); up.y.push(log); up.text.push(txt); }

else if (pv < pCut && fc <= -fcCut) { down.x.push(fc); down.y.push(log); down.text.push(txt); }

else { none.x.push(fc); none.y.push(log); none.text.push(txt); }

});

const xRange = [Math.min(...up.x,...down.x,...none.x),

Math.max(...up.x,...down.x,...none.x)];

const yRange = [0, Math.max(...up.y,...down.y,...none.y)];

const layout = {

xaxis: { title: 'log2 Fold Change', range: xRange },

yaxis: { title: '-log10 p-value', range: yRange },

hovermode: 'closest',

shapes: [

{ type: 'line', x0: xRange[0], x1: xRange[1], y0: -Math.log10(0.05), y1: -Math.log10(0.05),

line: { color: 'red', width: 1, dash: 'dash' } },

{ type: 'line', x0: 1, x1: 1, y0: 0, y1: 1, yref: 'paper',

line: { color: 'red', width: 2, dash: 'dash' } },

{ type: 'line', x0: -1, x1: -1, y0: 0, y1: 1, yref: 'paper',

line: { color: 'red', width: 2, dash: 'dash' } }

]

};

Plotly.newPlot('volcano', [up, down, none], layout);

});

</script>

</div>

// Simulate result appearing after some time

setTimeout(function() {

var resultElement = document.getElementById('result');

resultElement.style.display = 'block';

resultElement.textContent = '';

}, 5000); // 5000 milliseconds = 10 seconds

</script>

</td></tr></table></td></tr></table></td></tr></table></td></tr>

<tr>

</td></tr>

</table>

</body>

</html>

Main menu

You are here

User login

利用d3.js做差异表达火山图