I have a annotated heatmap using plotly in the following fiddle https://jsfiddle.net/9ds7mryr/5/
My intention is to have three colours for three individual ranges
<0.75 #FFA500
>0.75 and <0.90 rgb(255,0,0)
>0.90 #F0E7E7
However, right now I get the same colour for some of the values even though they are different if slightly.
How can I ensure values of the same range have the same colour?
Try changing your colorscale to
[
[0, '#FFA500'],
[0.1, '#FFA500'],
[0.2, '#FFA500'],
[0.3, '#FFA500'],
[0.4, '#FFA500'],
[0.74,'#FFA500'],
[0.75, 'rgb(255,0,0)'],
[0.89, 'rgb(255,0,0)'],
[0.90, '#F0E7E7'],
[0.95, '#F0E7E7'],
[1, '#F0E7E7']
]
The colorscale needs to be between 0 and 1, i.e. your values will be automatically normalized to be between those values. Since your values start higher than 0 and lower than 1 they will be shifted. You can change this behavior with zmin and zmax.
var xValues = ['A', 'B', 'C', 'D', 'E', 'max', 'min'];
var yValues = ['W'];
var zValues = [
[0.80, 0.110, 0.220, 0.74, 0.90, 1, 0]
];
var colorscaleValue = [
[0, '#FFA500'],
[0.1, '#FFA500'],
[0.2, '#FFA500'],
[0.3, '#FFA500'],
[0.4, '#FFA500'],
[0.74,'#FFA500'],
[0.75, 'rgb(255,0,0)'],
[0.89, 'rgb(255,0,0)'],
[0.90, '#F0E7E7'],
[0.95, '#F0E7E7'],
[1, '#F0E7E7']
];
var data = [{
x: xValues,
y: yValues,
z: zValues,
type: 'heatmap',
colorscale: colorscaleValue,
showscale: true,
}];
var layout = {
title: 'Annotated Heatmap',
annotations: [],
xaxis: {
ticks: '',
side: 'top'
},
yaxis: {
ticks: '',
ticksuffix: ' ',
width: 700,
height: 700,
autosize: true
}
};
Plotly.newPlot('myDiv', data, layout);
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myDiv">
Related
I was trying with the below code which is given here.
var trace1 = {
x: [1, 2, 3, 4, 5],
y: [1, 6, 3, 6, 1],
mode: 'markers',
type: 'scatter',
name: 'Team A',
text: ['A-1', 'A-2', 'A-3', 'A-4', 'A-5'],
marker: { size: 12 }
};
var trace2 = {
x: [1.5, 2.5, 3.5, 4.5, 5.5],
y: [4, 1, 7, 1, 4],
mode: 'markers',
type: 'scatter',
name: 'Team B',
text: ['B-a', 'B-b', 'B-c', 'B-d', 'B-e'],
marker: { size: 12 }
};
var data = [ trace1, trace2 ];
var layout = {
xaxis: {
range: [ 0.75, 5.25 ]
},
yaxis: {
range: [0, 8]
},
title:'Data Labels Hover'
};
Plotly.newPlot('myDiv', data, layout);
I want to disable the default plotly feature double clicking to zoom in the markers. But I want to keep the zoom out feature on double clicking.
Is it anyhow possible?
Please check this. I have used doubleClick: 'reset' to fulfill my objective.
I want to change the z-index label in plotlyjs
I am using the following code. It currently shows X,Y,Z on hover. X, Y values are good. I want to know if there is some way where we can change the value label of Z?
On hover on the graph I want Z to be shown as 'Value'. How to get that?
var data = [ {
z: [[10, 10.625, 12.5, 15.625, 20],
[5.625, 6.25, 8.125, 11.25, 15.625],
[2.5, 3.125, 5., 8.125, 12.5],
[0.625, 1.25, 3.125, 6.25, 10.625],
[0, 0.625, 2.5, 5.625, 10]],
type: 'contour',
colorscale: [[0, 'rgb(166,206,227)'], [0.25, 'rgb(31,120,180)'], [0.45, 'rgb(178,223,138)'], [0.65, 'rgb(51,160,44)'], [0.85, 'rgb(251,154,153)'], [1, 'rgb(227,26,28)']]
}
];
var layout = {
title: 'Custom Contour Plot Colorscale'
};
Plotly.newPlot('myDiv', data, layout);
Try the hovertemplate option (https://plot.ly/javascript/reference/#contour-hovertemplate):
var data = [ {
z: [[10, 10.625, 12.5, 15.625, 20],
[5.625, 6.25, 8.125, 11.25, 15.625],
[2.5, 3.125, 5., 8.125, 12.5],
[0.625, 1.25, 3.125, 6.25, 10.625],
[0, 0.625, 2.5, 5.625, 10]],
type: 'contour',
colorscale: [[0, 'rgb(166,206,227)'], [0.25, 'rgb(31,120,180)'], [0.45, 'rgb(178,223,138)'], [0.65, 'rgb(51,160,44)'], [0.85, 'rgb(251,154,153)'], [1, 'rgb(227,26,28)']],
hovertemplate: 'x: %{x}, y: %{y}, Value: %{z}<extra></extra>'
}
];
var layout = {
title: 'Custom Contour Plot Colorscale'
};
Plotly.newPlot('myDiv', data, layout);
<script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/1.49.5/plotly.min.js"></script>
<div id=myDiv>
</div>
I am creating a simple line graph using plotly JS. The code is something like below:
var trace1 = {
x: [1, 2, 3, 4],
y: [10, 15, 13, 17],
type: 'scatter'
};
var layout = {
xaxis:{
title:"X-Axis",
tickangle:45,
rangemode:'nonnegative',
autorange:true,
exponentformat: "none"
},
yaxis:{
title: "Time",
tickangle:45,
rangemode:'nonnegative',
autorange:false
}
}
Plotly.newPlot(myDiv,[trace1],layout);
Now I want to create a horizontal line across the graph, parallel to x-axis which I want to span the entire graph. For this I added 'shapes' in layout something like below:
var layout = {
xaxis:{
title:"X_Axis",
tickangle:45,
rangemode:'nonnegative',
autorange:true,
exponentformat: "none"
},
yaxis:{
title: "Time",
tickangle:45,
rangemode:'nonnegative',
autorange:false
},
shapes: [
{
type: 'line',
x0: 2,
y0: 12.0,
x1: 3,
y1: 12.0,
line:{
color: 'rgb(255, 0, 0)',
width: 4,
dash:'dot'
}
}
]
};
Adding the 'shapes' parameter creates a horizontal value only between point 2 and 3 on the x-axes which I have specified .
My question is how to get the horizontal line span the entire graph without depending on x-axis value? Any help will be appreciated.
You could set xref to paper which tells Plotly not to rely on the x-axis coordinates but relative to the whole graph, i.e. 0 to 1.
var trace1 = {
x: [1, 2, 3, 4],
y: [10, 15, 13, 17],
type: 'scatter'
};
var layout = {
shapes: [
{
type: 'line',
xref: 'paper',
x0: 0,
y0: 12.0,
x1: 1,
y1: 12.0,
line:{
color: 'rgb(255, 0, 0)',
width: 4,
dash:'dot'
}
}
]
}
Plotly.newPlot(myDiv,[trace1],layout);
<script src="//cdn.plot.ly/plotly-latest.min.js"></script>
<div id='myDiv'></div>
Whenever I fill a scatter its drawn over the top of the bars on a multi chart type graph.
See example here
http://codepen.io/anon/pen/JXgNBG
var trace1 = {
x: [0, 1, 2, 3, 4, 5],
y: [1.5, 1, 1.3, 0.7, 0.8, 0.9],
type: 'scatter',
fill: 'tozeroy'
};
var trace2 = {
x: [0, 1, 2, 3, 4, 5],
y: [1, 0.5, 0.7, -1.2, 0.3, 0.4],
type: 'bar'
};
var data = [trace1, trace2];
Plotly.newPlot('myDiv', data);
Any ideas how to draw the bars over the filled area on the scatter? I would like the bars drawn over the top of the filled area to make them stand out.
I am using d3.js to plot the histograms. I want to remove the vertical lines that are connected to the plot at the start point and end point of the plot:
http://i.stack.imgur.com/CpP6C.png
Thank you in advance ;)
(function(window, document, undefined) {
'use strict';
// Create an SVG element and create an AxesChart inside it
var makeChart = function(container) {
return container.append('svg')
.chart('AxesChart')
.width(450)
.height(400);
};
// Manipulate the input data to a format accepted by the Histogram chart
var formatData = function(data) {
var rtn = [];
for (var i = 0; i < data['values'].length; i++) {
var bins = data['binning'][i];
rtn.push({
xlow: bins[0],
xhigh: bins[1],
y: data['values'][i],
yerr: data['uncertainties'][i]
});
}
return rtn;
};
// Return an array of objects suitable for d3.plotables.LineChart, filled
// with data generated from the function f, which should return a single
// number when passed a single number.
// The function is evaluated from domain[0] to domain[1] (domain[1] > domain[0])
// in the given number of steps (default: 100).
var dataFromFunction = function(f, domain, steps) {
if (steps === undefined) {
steps = 100;
}
var step = (domain[1] - domain[0])/(1.0*steps),
x = domain[0],
data = [];
for (var i = 0; i <= steps; i++) {
data.push({
x: x,
y: f(x),
xerr: [0, 0],
yerr: [0, 0]
});
x = i*step + domain[0];
}
return data;
};
// Define histogram datasets
var gaussian = formatData(gaussianData),
landau = formatData(landauData),
steps = formatData({
'values': [0, 1, 2, 3, 4, 5],
'binning': [[0, 1], [1, 2], [2, 3], [3, 4], [4, 5], [5, 6]],
'uncertainties': [[0, 0.2], [0.2, 0.7], [0.3, 0.2], [0.2, 0.2], [0.2, 0.3], [0.2, 0.6]]
});
// Generate some line chart data
var sinc = dataFromFunction(function(x) {
return x == 0 ? 1 : Math.sin(Math.PI*x)/(Math.PI*x);
}, [-2*Math.PI, 2*Math.PI]),
line = [
{x: -6, y: 0.4, xerr: [0.3, 0.3], yerr: [0.1, 0.1]},
{x: -4, y: 0.6, xerr: [0.3, 0.3], yerr: [0.1, 0.1]},
{x: -2, y: 0.4, xerr: [0.3, 0.3], yerr: [0.1, 0.1]},
{x: 0, y: 0.0, xerr: [0.3, 0.3], yerr: [0.1, 0.1]},
{x: 2, y: 0.2, xerr: [0.3, 0.3], yerr: [0.1, 0.1]},
{x: 4, y: 0.8, xerr: [0.3, 0.3], yerr: [0.1, 0.1]},
{x: 6, y: 0.6, xerr: [0.3, 0.3], yerr: [0.1, 0.1]}
];
// Define our charts
var hGauss = makeChart(d3.select('#h1'))
.xAxisLabel('Vertex position [mm]')
.yAxisLabel('Frequency');
var h2DGauss = makeChart(d3.select('#h2'))
.xAxisLabel('x')
.yAxisLabel('y')
.animate(false);
var lineChart = d3.select('#h3').append('svg')
.chart('AxesChart')
.width(450)
.height(400);
var gaussianInfo = [
['Name', 'Gaussian'],
['Entries', '10000'],
['Mean', '0.0'],
['RMS', '1.0']
];
// Draw plotables on to charts
hGauss.addPlotable(d3.plotable.Histogram('steps', steps, {showUncertainties: true}));
hGauss.addPlotable(d3.plotable.Histogram('gaussian', gaussian));
hGauss.addPlotable(d3.plotable.Histogram('landau', landau));
hGauss.addOrnament(d3.plotable.TextBox('gaussianInfo', gaussianInfo));
h2DGauss.addPlotable(d3.plotable.Histogram2D('gaussian2d', data2d.data));
lineChart.addPlotable(d3.plotable.LineChart('sinc', sinc));
lineChart.addPlotable(d3.plotable.LineChart('line', line, {showPoints: true, showUncertainties: true, interpolation: 'linear', color: 'green'}));
})(window, window.document);
https://github.com/alexpearce/histograms/commit/f9b5b364153ee9ff151794aa93744681103c955f
This is the answer - you need to make some changes and then you have option if you want this lines or not. Cheers ;)