I have the following code. Which if you click the run button you can find two histogram plot side by side.
But the scale of the two is different. First panel has scale 10^80
and another one 0 to 1. Now, how can I make panel 1 to show the value
in y-axis. It is hidden because it uses same scale for both panel.
"use strict";
var histograms,
thresholds = [];
var input_data = [
{
"threshold": 1.5,
"histograms": [
{
"sample": "Sample1",
"nof_genes": 19129,
"values": [
{
"score": 5.2839221064745636e+81,
"celltype": "Bcells"
},
{
"score": 2.872412166929766e+81,
"celltype": "DendriticCells"
},
{
"score": 4.82196178030352e+82,
"celltype": "Macrophages"
},
{
"score": 3.0208554096649809e+81,
"celltype": "Monocytes"
},
{
"score": 4.3508855197536809e+81,
"celltype": "NKCells"
},
{
"score": 1.5968403865969863e+81,
"celltype": "Neutrophils"
},
{
"score": 1.3068775298727331e+81,
"celltype": "StemCells"
},
{
"score": 3.2760591738950675e+81,
"celltype": "StromalCells"
},
{
"score": 4.3269886854125076e+81,
"celltype": "abTcells"
},
{
"score": 2.3123698863774207e+81,
"celltype": "gdTCells"
}
]
},
{
"sample": "Sample2",
"nof_genes": 18438,
"values": [
{
"score": 0.023526831259537202,
"celltype": "Bcells"
},
{
"score": 0.031062202944392724,
"celltype": "DendriticCells"
},
{
"score": 0.50894644580920867,
"celltype": "Macrophages"
},
{
"score": 0.042631083422661434,
"celltype": "Monocytes"
},
{
"score": 0.025050910895619175,
"celltype": "NKCells"
},
{
"score": 0.049479227373385677,
"celltype": "Neutrophils"
},
{
"score": 0.024014917699970516,
"celltype": "StemCells"
},
{
"score": 0.09955841150737077,
"celltype": "StromalCells"
},
{
"score": 0.024245068851487257,
"celltype": "abTcells"
},
{
"score": 0.024223805083276869,
"celltype": "gdTCells"
}
]
},
]
},
{
"threshold": 2,
"histograms": [
{
"sample": "Sample1",
"nof_genes": 19129,
"values": [
{
"score": 1.2839221064745636e+81,
"celltype": "Bcells"
},
{
"score": 1.872412166929766e+81,
"celltype": "DendriticCells"
},
{
"score": 4.82196178030352e+82,
"celltype": "Macrophages"
},
{
"score": 3.0208554096649809e+81,
"celltype": "Monocytes"
},
{
"score": 1.3508855197536809e+81,
"celltype": "NKCells"
},
{
"score": 3.5968403865969863e+81,
"celltype": "Neutrophils"
},
{
"score": 1.3068775298727331e+81,
"celltype": "StemCells"
},
{
"score": 8.2760591738950675e+81,
"celltype": "StromalCells"
},
{
"score": 1.3269886854125076e+81,
"celltype": "abTcells"
},
{
"score": 1.3123698863774207e+81,
"celltype": "gdTCells"
}
]
},
{
"sample": "Sample2",
"nof_genes": 18438,
"values": [
{
"score": 0.013526831259537202,
"celltype": "Bcells"
},
{
"score": 0.021062202944392724,
"celltype": "DendriticCells"
},
{
"score": 0.20894644580920867,
"celltype": "Macrophages"
},
{
"score": 0.042631083422661434,
"celltype": "Monocytes"
},
{
"score": 0.025050910895619175,
"celltype": "NKCells"
},
{
"score": 0.049479227373385677,
"celltype": "Neutrophils"
},
{
"score": 0.024014917699970516,
"celltype": "StemCells"
},
{
"score": 0.09955841150737077,
"celltype": "StromalCells"
},
{
"score": 0.024245068851487257,
"celltype": "abTcells"
},
{
"score": 0.024223805083276869,
"celltype": "gdTCells"
}
]
},
]
},
];
processData(input_data);
function processData(data) {
histograms = data[0].histograms.map(function(data) {
return {
title: data.sample,
dataset: new Plottable.Dataset(),
axisLabel: new Plottable.Components.AxisLabel(),
dataByThreshold: {},
nofGenesByThreshold: {},
load_nof_genes: function (threshold) {
this.axisLabel.text(this.nofGenesByThreshold[threshold] + 'genes');
},
load: function(threshold) {
this.dataset.data(this.dataByThreshold[threshold]);
}
};
});
data.forEach(function(data) {
var threshold = data.threshold;
thresholds.push(threshold);
data.histograms.forEach(function(histogram, i) {
histograms[i].dataByThreshold[threshold] = histogram.values;
histograms[i].nofGenesByThreshold[threshold] = histogram.nof_genes;
});
});
// Here we generalize the slide bar maximum threshold
$('#threshold').attr('max', thresholds.length - 1);
updateDatasets(thresholds[0]);
updateNofGenes(thresholds[0]);
buildPlots();
updateThreshold();
}
$('#threshold').change(updateThreshold);
function updateThreshold() {
// This is where the user input updating slider
// takes place and where the QTIP is in action.
var thresholdIndex = parseInt($('#threshold').val(), 10);
$("#foldchange_threshold").html(thresholds[thresholdIndex]);
updateDatasets(thresholds[thresholdIndex]);
updateNofGenes(thresholds[thresholdIndex]);
$(".tooltipped .content rect").qtip({
overwrite: true,
position: {
my: "bottom middle",
at: "top middle"
},
style: {
classes: "qtip-light"
},
content: {
text: function() {
return $(this).attr("qtip2-title");
}
}
});
}
function updateDatasets(threshold) {
histograms.forEach(function(histogram) {
histogram.load(threshold);
});
}
function updateNofGenes (threshold) {
histograms.forEach(function (histogram) {
histogram.load_nof_genes(threshold);
});
}
function buildPlots() {
var $histogramContainer = $('#sample-histograms');
histograms.forEach(function(histogram, index) {
var elementId = "sample-histogram-" + index;
$(document.createElementNS('http://www.w3.org/2000/svg', 'svg'))
.css({
width: '200px',
height: '200px',
display: 'inline-block'
})
.attr('id', elementId)
.appendTo($histogramContainer);
plotSampleHistogram(histogram, '#' + elementId);
});
}
function plotSampleHistogram(histogram, targetElement) {
var xScale = new Plottable.Scales.Category(),
yScale = new Plottable.Scales.Linear(),
colorScale = new Plottable.Scales.Color();
var xAxis = new Plottable.Axes.Category(xScale, "bottom"),
yAxis = new Plottable.Axes.Numeric(yScale, "left"),
titleLabel = new Plottable.Components.TitleLabel(histogram.title);
xAxis.tickLabelAngle(-90)
yScale.domainMin(0);
var plot = new Plottable.Plots.Bar()
.addDataset(histogram.dataset)
.x(function(d) { return d.celltype; }, xScale)
.y(function(d) { return d.score; }, yScale)
.attr("fill", function(d) { return d.celltype; }, colorScale)
.attr("qtip2-title", function(d) { return '<div class="bartip">' + d.celltype + " (" + d.score.toFixed(2) + ') </div>'; })
.addClass("tooltipped");
new Plottable.Components.Table([
[null, titleLabel],
[null, histogram.axisLabel],
[yAxis, plot],
[null, xAxis]
]).renderTo(targetElement);
}
function drawHistogramLegend(targetElement) {
new Plottable.Components.Legend(colorScale)
.renderTo(targetElement);
}<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.15.0/plottable.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.1/basic/jquery.qtip.css" rel="stylesheet" />
</head>
<body>
<!-- Display the sliding bar -->
<input id="threshold" type="range" min="0" max="1" step="1" value="0" />
<br>
<!-- Show foldchange threshold -->
<div id="foldchange_threshold" style="display: inline-block; align:center;"></div>
<!-- Show histograms -->
<div id="sample-histograms"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.15.0/plottable.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.1/basic/jquery.qtip.js"></script>
</body>
</html>
