Colorscales in JavaScript
How to set colorscales and heatmap colorscales in D3.js-based JavaScript charts in Plotly.js. Divergent, sequential, and qualitative colorscales.
Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Sign up for early access now.
d3.json('https://raw.githubusercontent.com/plotly/datasets/master/custom_heatmap_colorscale.json', function(figure) {
var data = [{
z: figure.z,
colorscale: [
['0.0', 'rgb(165,0,38)'],
['0.111111111111', 'rgb(215,48,39)'],
['0.222222222222', 'rgb(244,109,67)'],
['0.333333333333', 'rgb(253,174,97)'],
['0.444444444444', 'rgb(254,224,144)'],
['0.555555555556', 'rgb(224,243,248)'],
['0.666666666667', 'rgb(171,217,233)'],
['0.777777777778', 'rgb(116,173,209)'],
['0.888888888889', 'rgb(69,117,180)'],
['1.0', 'rgb(49,54,149)']
],
type: 'heatmap'
}];
Plotly.newPlot('myDiv', data);
});
d3.json('https://raw.githubusercontent.com/plotly/datasets/master/custom_heatmap_colorscale.json', function(figure) {
var data = [{
z: figure.z,
colorscale: 'YlOrRd',
type: 'heatmap'
}
];
var layout = {
title: {
text: 'YlOrRd'
}
};
Plotly.newPlot('myDiv', data, layout);
});
d3.json('https://raw.githubusercontent.com/plotly/datasets/master/custom_heatmap_colorscale.json', function(figure) {
var data = [{
z: figure.z,
colorscale: 'YlGnBu',
type: 'heatmap'
}
];
var layout = {
title: {
text: 'YlGnBu'
}
};
Plotly.newPlot('myDiv', data, layout);
});
d3.json('https://raw.githubusercontent.com/plotly/datasets/master/custom_heatmap_colorscale.json', function(figure) {
var data = [{
z: figure.z,
colorscale: 'RdBu',
type: 'heatmap'
}
];
var layout = {
title: {
text: 'RdBu'
}
};
Plotly.newPlot('myDiv', data, layout);
});
d3.json('https://raw.githubusercontent.com/plotly/datasets/master/custom_heatmap_colorscale.json', function(figure) {
var data = [{
z: figure.z,
colorscale: 'Portland',
type: 'heatmap'
}
];
var layout = {
title: {
text: 'Portland'
}
};
Plotly.newPlot('myDiv', data, layout);
});
d3.json('https://raw.githubusercontent.com/plotly/datasets/master/custom_heatmap_colorscale.json', function(figure) {
var data = [{
z: figure.z,
colorscale: 'Picnic',
type: 'heatmap'
}
];
var layout = {
title: {
text: 'Picnic'
}
};
Plotly.newPlot('myDiv', data, layout);
});
d3.json('https://raw.githubusercontent.com/plotly/datasets/master/custom_heatmap_colorscale.json', function(figure) {
var data = [{
z: figure.z,
colorscale: 'Jet',
type: 'heatmap'
}
];
var layout = {
title: {
text: 'Jet'
}
};
Plotly.newPlot('myDiv', data, layout);
});
d3.json('https://raw.githubusercontent.com/plotly/datasets/master/custom_heatmap_colorscale.json', function(figure) {
var data = [{
z: figure.z,
colorscale: 'Hot',
type: 'heatmap'
}];
Plotly.newPlot('myDiv', data);
});
d3.json('https://raw.githubusercontent.com/plotly/datasets/master/custom_heatmap_colorscale.json', function(figure) {
var data = [{
z: figure.z,
colorscale: 'Greys',
type: 'heatmap'
}
];
var layout = {
title: {
text: 'Greys'
}
};
Plotly.newPlot('myDiv', data, layout);
});
d3.json('https://raw.githubusercontent.com/plotly/datasets/master/custom_heatmap_colorscale.json', function(figure) {
var data = [{
z: figure.z,
colorscale: 'Greens',
type: 'heatmap'
}
];
var layout = {
title: {
text: 'Greens'
}
};
Plotly.newPlot('myDiv', data, layout);
});
d3.json('https://raw.githubusercontent.com/plotly/datasets/master/custom_heatmap_colorscale.json', function(figure) {
var data = [{
z: figure.z,
colorscale: 'Electric',
type: 'heatmap'
}];
Plotly.newPlot('myDiv', data);
});
d3.json('https://raw.githubusercontent.com/plotly/datasets/master/custom_heatmap_colorscale.json', function(figure) {
var data = [{
z: figure.z,
colorscale: 'Earth',
type: 'heatmap'
}];
Plotly.newPlot('myDiv', data);
});
d3.json('https://raw.githubusercontent.com/plotly/datasets/master/custom_heatmap_colorscale.json', function(figure) {
var data = [{
z: figure.z,
colorscale: 'Bluered',
type: 'heatmap'
}];
Plotly.newPlot('myDiv', data);
});
d3.json('https://raw.githubusercontent.com/plotly/datasets/master/custom_heatmap_colorscale.json', function(figure) {
var data = [{
z: figure.z,
colorscale: 'Blackbody',
type: 'heatmap'
}
];
var layout = {
title: {
text: 'Blackbody'
}
};
Plotly.newPlot('myDiv', data, layout);
});
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: 'Jet'
}
];
var layout = {
title: {
text: 'Colorscale for Contour Plot'
}
};
Plotly.newPlot('myDiv', data, layout);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: {
text: 'Custom Contour Plot Colorscale'
}
};
Plotly.newPlot('myDiv', data, layout);
var data = [
{
z: [[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]],
colorscale: [
// Let first 10% (0.1) of the values have color rgb(0, 0, 0)
[0, 'rgb(0, 0, 0)'],
[0.1, 'rgb(0, 0, 0)'],
// Let values between 10-20% of the min and max of z
// have color rgb(20, 20, 20)
[0.1, 'rgb(20, 20, 20)'],
[0.2, 'rgb(20, 20, 20)'],
// Values between 20-30% of the min and max of z
//have color rgb(40, 40, 40)
[0.2, 'rgb(40, 40, 40)'],
[0.3, 'rgb(40, 40, 40)'],
[0.3, 'rgb(60, 60, 60)'],
[0.4, 'rgb(60, 60, 60)'],
[0.4, 'rgb(80, 80, 80)'],
[0.5, 'rgb(80, 80, 80)'],
[0.5, 'rgb(100, 100, 100)'],
[0.6, 'rgb(100, 100, 100)'],
[0.6, 'rgb(120, 120, 120)'],
[0.7, 'rgb(120, 120, 120)'],
[0.7, 'rgb(140, 140, 140)'],
[0.8, 'rgb(140, 140, 140)'],
[0.8, 'rgb(160, 160, 160)'],
[0.9, 'rgb(160, 160, 160)'],
[0.9, 'rgb(180, 180, 180)'],
[1.0, 'rgb(180, 180, 180)']
],
type: 'heatmap',
colorbar:{
tickmode: 'linear',
tick0: 0,
dtick: 1
}
}
];
var layout = {
title: {
text: 'CUSTOM DISCRETIZED HEATMAP COLORSCALE'
}
};
Plotly.newPlot('myDiv', data, layout);
