diff --git a/heatmap.php b/heatmap.php index d811fc1..544d459 100644 --- a/heatmap.php +++ b/heatmap.php @@ -48,7 +48,15 @@

N.B. - 1) A cutoff of log10(LDA score) ≥ 3 was used to determine the differential markers. 2) The normalized abundance - values in the heatmap are rounded off to 3 digits after the decimal point. + values in the heatmap are rounded off to 3 digits after the decimal point. 3) + The data can be downloaded by clicking on the "Download data" button located + at the top of the page. 4) The heatmap can be downloaded as a SVG image by + clicking on the "Export as SVG" + + + + button in the menubar located at the top + right corner of the plot.


@@ -71,7 +79,7 @@ function getHeatmapData(queryType, bioproject, diseasePair, assayType, biome, is if (this.readyState == 4 && this.status == 200) { document.getElementById('display_text').innerHTML = '

' + display + '

'; document.getElementById('download_div').innerHTML = ''; - plotHeatmap('plot_container', this.responseText, assayType, score); + plotHeatmap('plot_container', this.responseText, diseasePair.replace(/_/g,"-"), assayType, biome, isolationSource.replace(/ /g,"_"), score); } }; xmlhttp.open('GET', file, true); diff --git a/js/plot_heatmap.js b/js/plot_heatmap.js index 63407bd..f1fdbe7 100644 --- a/js/plot_heatmap.js +++ b/js/plot_heatmap.js @@ -19,7 +19,7 @@ function extractDataFromCSV(csv) { return [x, y, z]; } -function makePlot(div_id, assayType, heatmapData) { +function makePlot(div_id, disease_pair, assayType, biome, isolation_scource, heatmapData) { var graphDiv = document.getElementById(div_id); var minHeight = 400; var computedHeight = (30*heatmapData[1].length + 100); @@ -50,10 +50,14 @@ function makePlot(div_id, assayType, heatmapData) { height: ((computedHeight < minHeight) ? minHeight : computedHeight), bargap: 10, margin: { - t: 10, + t: 30, l: 220, b: 140 }, + modebar: { + color: '#262626', + activecolor: '#262626' + }, hoverlabel: { font: {size: 16} }, @@ -85,13 +89,36 @@ function makePlot(div_id, assayType, heatmapData) { } }; - Plotly.plot(graphDiv, data, layout, {showSendToCloud:false}); + var config = { + showSendToCloud: false, + displayModeBar: true, + modeBarButtonsToRemove: ['toggleSpikelines', 'zoom2d'], + modeBarButtonsToAdd: [{ + name: 'Export as SVG', + icon: { + width: 600, + height: 600, + path: 'M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z' + }, + click: function(img) { + Plotly.downloadImage( + img, + { + filename: 'heatmap_plot_' + disease_pair + '_' + assayType + '_' + biome + '_' + isolation_scource, + format: 'svg' + } + ); + } + }] + } + + Plotly.plot(graphDiv, data, layout, config); } -function plotHeatmap(div_id, response, assayType, score) { +function plotHeatmap(div_id, response, disease_pair, assayType, biome, isolation_scource, score) { var csv = $.csv.toArrays(response); var data = extractDataFromCSV(csv); - makePlot(div_id, assayType, data); + makePlot(div_id, disease_pair, assayType, biome, isolation_scource, data); } diff --git a/js/plot_lda.js b/js/plot_lda.js index 99715ab..17e83ed 100644 --- a/js/plot_lda.js +++ b/js/plot_lda.js @@ -14,7 +14,7 @@ function getDataMap(csv) { return dataMap; } -function makePlot(div_id, dataMap, assayType) { +function makePlot(div_id, dataMap, disease_pair, assayType, biome, isolation_scource) { var graphDiv = document.getElementById(div_id); var data = []; @@ -40,6 +40,10 @@ function makePlot(div_id, dataMap, assayType) { paper_bgcolor: '#fff0f5',//'#ffe6cc',//'#e6e6e6', height: 800, bargap: 0.2, + modebar: { + color: '#262626', + activecolor: '#262626' + }, hoverlabel: { bgcolor: 'white', font: {size: 18, color: 'black'} @@ -48,7 +52,7 @@ function makePlot(div_id, dataMap, assayType) { font: {color: 'black'} }, margin: { - t: 10 + t: 30 }, xaxis: { visible : true, @@ -90,10 +94,33 @@ function makePlot(div_id, dataMap, assayType) { } }; - Plotly.plot(graphDiv, data, layout, {showSendToCloud:false}); + var config = { + showSendToCloud: false, + displayModeBar: true, + modeBarButtonsToRemove: ['toggleSpikelines', 'zoom2d', 'select2d', 'lasso2d'], + modeBarButtonsToAdd: [{ + name: 'Export as SVG', + icon: { + width: 600, + height: 600, + path: 'M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z' + }, + click: function(img) { + Plotly.downloadImage( + img, + { + filename: 'lda_plot_' + disease_pair + '_' + assayType + '_' + biome + '_' + isolation_scource, + format: 'svg' + } + ); + } + }] + } + + Plotly.plot(graphDiv, data, layout, config); } -function plotLDA(div_id, response, assayType, score) { +function plotLDA(div_id, response, disease_pair, assayType, biome, isolation_scource, score) { var csv = $.csv.toArrays(response); var dataMap = getDataMap(csv); @@ -102,6 +129,6 @@ function plotLDA(div_id, response, assayType, score) { // msg += x + ' => ' + JSON.stringify(dataMap.get(x)) + '
'; // document.getElementById(div_id).innerHTML = msg; - makePlot(div_id, dataMap, assayType); + makePlot(div_id, dataMap, disease_pair, assayType, biome, isolation_scource); } diff --git a/lda.php b/lda.php index 14e4cbf..eda30f8 100644 --- a/lda.php +++ b/lda.php @@ -46,12 +46,18 @@

- N.B. - 1) To view all the differential markers, please hover on the bars of the plot or download the data - using the "Download data" button. 2) A cutoff of log10(LDA score) ≥ 2 was used - to determine the differential markers. 3) All differential markers in the LDA plot were found to be - statistically significant. 4) The statistical significance cutoff used was: p-value < 0.01 - (Kruskal-Wallis test). 5) To check the p-values for each differential marker, please download the - data using the "Download data" button. 6) The downloaded data shows Kruskal-Wallis p-value. + N.B. - 1) To view all the differential markers, please hover on the bars of the plot + or download the data using the "Download data" button. located at the top of the page 2) A + cutoff of log10 (LDA score) ≥ 2 was used to determine the differential markers. + 3) All differential markers in the LDA plot were found to be statistically significant. 4) + The statistical significance cutoff used was: p-value < 0.01 (Kruskal-Wallis test). 5) + To check the p-values for each differential marker, please download the data using the "Download data" + button. 6) The downloaded data shows Kruskal-Wallis p-value. 7) The LDA plot can be + downloaded as a SVG image by clicking on the "Export as SVG" + + + + button in the menubar located at the top right corner of the plot.

@@ -74,7 +80,7 @@ function getLDAData(queryType, bioproject, diseasePair, assayType, biome, isolat if (this.readyState == 4 && this.status == 200) { document.getElementById('display_text').innerHTML = '

' + display + '

'; document.getElementById('download_div').innerHTML = ''; - plotLDA('plot_container', this.responseText, assayType, score); + plotLDA('plot_container', this.responseText, diseasePair.replace(/_/g,"-"), assayType, biome, isolationSource.replace(/ /g,"_"), score); } }; xmlhttp.open('GET', file, true);