How to have un-even tick value for color-bar in plotly
In plotly how can I render this type of color-bar for the contour plot? Just trying to figure out if the contour support un-even tick value for color-bar of the contour plot.
The image above is what I am looking for to get within plotly.
The tickvals and ticktext does not work as expected.
javascript plot plotly plotly.js
asked Nov 22 at 20:25
Rod_Algonquin
22.8k43851
add a comment |
In plotly how can I render this type of color-bar for the contour plot? Just trying to figure out if the contour support un-even tick value for color-bar of the contour plot.
The image above is what I am looking for to get within plotly.
The tickvals and ticktext does not work as expected.
javascript plot plotly plotly.js
asked Nov 22 at 20:25
Rod_Algonquin
22.8k43851
add a comment |
In plotly how can I render this type of color-bar for the contour plot? Just trying to figure out if the contour support un-even tick value for color-bar of the contour plot.
The image above is what I am looking for to get within plotly.
The tickvals and ticktext does not work as expected.
javascript plot plotly plotly.js
asked Nov 22 at 20:25
Rod_Algonquin
22.8k43851
In plotly how can I render this type of color-bar for the contour plot? Just trying to figure out if the contour support un-even tick value for color-bar of the contour plot.
The image above is what I am looking for to get within plotly.
The tickvals and ticktext does not work as expected.
javascript plot plotly plotly.js
javascript plot plotly plotly.js
asked Nov 22 at 20:25
Rod_Algonquin
22.8k43851
asked Nov 22 at 20:25
Rod_Algonquin
22.8k43851
edited Nov 22 at 20:44
asked Nov 22 at 20:25
Rod_Algonquin
22.8k43851
asked Nov 22 at 20:25
Rod_Algonquin
22.8k43851
asked Nov 22 at 20:25
Rod_Algonquin
22.8k43851
22.8k43851
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Try this Stackoverflow Question:
Plotly axis as exponential format
Direct Text-Form: ALL CREDIT TO: @MaximilianPeters
1: How to make it work on subplots. I tried calling java in the build
of each subplot, but all plots came out without exponential then.
The ticks of the 2nd/3rd/etc. subplot have class names like y2tick/y3tick/etc. We could make our d3 selector less specific and then use each to change all ticks.
ticks = Plotly.d3.selectAll('g.yaxislayer-above').selectAll('text');
ticks.each(function(d, i)
{
var num = parseInt(d.text).toExponential();
Plotly.d3.select(this).text(num);
})
2: make it work for both x an y axis (I tried, failed and cried a
little)
Just change the selectAll statement to Plotly.d3.selectAll('g.xaxislayer-above').selectAll('text')
3: Make it not destroy the universe when the axis turns out to not be
a numerical (My app can plot date columns too, so it needs to check
whether it actually is a numerical input)
You could change your fixTicks functions to check if the input value is numeric, e.g. by using typeof or a regex. With values like 1999, 2000, etc. it might be tricky and you would need to manually address it.
4: If possible print as 1.23E+1 rather than 1E+1
toExponential takes one parameter which is the "number of digits in the notation after the decimal point", i.e. num.toExponential(3) would do the trick in your case.
From the comment: I seem to get NaN when the values on the ticks are negative values
Plotly uses an Unicode minus sign instead of a regular dash. You can replace it with the following JavaScript line:
var num = parseInt(tick[0].innerHTML.replace(/\u2013|\u2014|\u2212/g, '-'));
Note: the double backslash \ is required in R, pure JavaScript would require only a single .
answered Nov 25 at 2:42
Timothy Lukas H.
17610
When changing the values will this reflect the values within the plot or does this only change the text of the color bar? Havent tried it yet since I am not in my place right now.
– Rod_Algonquin
Nov 25 at 3:02
@Rod_Algonquin Honestly, I don't know. You'll need to test that :/ Sorry.
– Timothy Lukas H.
Nov 25 at 3:05
This does not actually reflect the colors of the color-bar within the contour plot. So when the above solution is executed it only changes the values of the color bar which you can already do within the library.
– Rod_Algonquin
Dec 1 at 23:57
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53437634%2fhow-to-have-un-even-tick-value-for-color-bar-in-plotly%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Try this Stackoverflow Question:
Plotly axis as exponential format
Direct Text-Form: ALL CREDIT TO: @MaximilianPeters
1: How to make it work on subplots. I tried calling java in the build
of each subplot, but all plots came out without exponential then.
The ticks of the 2nd/3rd/etc. subplot have class names like y2tick/y3tick/etc. We could make our d3 selector less specific and then use each to change all ticks.
ticks = Plotly.d3.selectAll('g.yaxislayer-above').selectAll('text');
ticks.each(function(d, i)
{
var num = parseInt(d.text).toExponential();
Plotly.d3.select(this).text(num);
})
2: make it work for both x an y axis (I tried, failed and cried a
little)
Just change the selectAll statement to Plotly.d3.selectAll('g.xaxislayer-above').selectAll('text')
3: Make it not destroy the universe when the axis turns out to not be
a numerical (My app can plot date columns too, so it needs to check
whether it actually is a numerical input)
You could change your fixTicks functions to check if the input value is numeric, e.g. by using typeof or a regex. With values like 1999, 2000, etc. it might be tricky and you would need to manually address it.
4: If possible print as 1.23E+1 rather than 1E+1
toExponential takes one parameter which is the "number of digits in the notation after the decimal point", i.e. num.toExponential(3) would do the trick in your case.
From the comment: I seem to get NaN when the values on the ticks are negative values
Plotly uses an Unicode minus sign instead of a regular dash. You can replace it with the following JavaScript line:
var num = parseInt(tick[0].innerHTML.replace(/\u2013|\u2014|\u2212/g, '-'));
Note: the double backslash \ is required in R, pure JavaScript would require only a single .
answered Nov 25 at 2:42
Timothy Lukas H.
17610
When changing the values will this reflect the values within the plot or does this only change the text of the color bar? Havent tried it yet since I am not in my place right now.
– Rod_Algonquin
Nov 25 at 3:02
@Rod_Algonquin Honestly, I don't know. You'll need to test that :/ Sorry.
– Timothy Lukas H.
Nov 25 at 3:05
This does not actually reflect the colors of the color-bar within the contour plot. So when the above solution is executed it only changes the values of the color bar which you can already do within the library.
– Rod_Algonquin
Dec 1 at 23:57
add a comment |
Try this Stackoverflow Question:
Plotly axis as exponential format
Direct Text-Form: ALL CREDIT TO: @MaximilianPeters
1: How to make it work on subplots. I tried calling java in the build
of each subplot, but all plots came out without exponential then.
The ticks of the 2nd/3rd/etc. subplot have class names like y2tick/y3tick/etc. We could make our d3 selector less specific and then use each to change all ticks.
ticks = Plotly.d3.selectAll('g.yaxislayer-above').selectAll('text');
ticks.each(function(d, i)
{
var num = parseInt(d.text).toExponential();
Plotly.d3.select(this).text(num);
})
2: make it work for both x an y axis (I tried, failed and cried a
little)
Just change the selectAll statement to Plotly.d3.selectAll('g.xaxislayer-above').selectAll('text')
3: Make it not destroy the universe when the axis turns out to not be
a numerical (My app can plot date columns too, so it needs to check
whether it actually is a numerical input)
You could change your fixTicks functions to check if the input value is numeric, e.g. by using typeof or a regex. With values like 1999, 2000, etc. it might be tricky and you would need to manually address it.
4: If possible print as 1.23E+1 rather than 1E+1
toExponential takes one parameter which is the "number of digits in the notation after the decimal point", i.e. num.toExponential(3) would do the trick in your case.
From the comment: I seem to get NaN when the values on the ticks are negative values
Plotly uses an Unicode minus sign instead of a regular dash. You can replace it with the following JavaScript line:
var num = parseInt(tick[0].innerHTML.replace(/\u2013|\u2014|\u2212/g, '-'));
Note: the double backslash \ is required in R, pure JavaScript would require only a single .
answered Nov 25 at 2:42
Timothy Lukas H.
17610
When changing the values will this reflect the values within the plot or does this only change the text of the color bar? Havent tried it yet since I am not in my place right now.
– Rod_Algonquin
Nov 25 at 3:02
@Rod_Algonquin Honestly, I don't know. You'll need to test that :/ Sorry.
– Timothy Lukas H.
Nov 25 at 3:05
This does not actually reflect the colors of the color-bar within the contour plot. So when the above solution is executed it only changes the values of the color bar which you can already do within the library.
– Rod_Algonquin
Dec 1 at 23:57
add a comment |
Try this Stackoverflow Question:
Plotly axis as exponential format
Direct Text-Form: ALL CREDIT TO: @MaximilianPeters
1: How to make it work on subplots. I tried calling java in the build
of each subplot, but all plots came out without exponential then.
The ticks of the 2nd/3rd/etc. subplot have class names like y2tick/y3tick/etc. We could make our d3 selector less specific and then use each to change all ticks.
ticks = Plotly.d3.selectAll('g.yaxislayer-above').selectAll('text');
ticks.each(function(d, i)
{
var num = parseInt(d.text).toExponential();
Plotly.d3.select(this).text(num);
})
2: make it work for both x an y axis (I tried, failed and cried a
little)
Just change the selectAll statement to Plotly.d3.selectAll('g.xaxislayer-above').selectAll('text')
3: Make it not destroy the universe when the axis turns out to not be
a numerical (My app can plot date columns too, so it needs to check
whether it actually is a numerical input)
You could change your fixTicks functions to check if the input value is numeric, e.g. by using typeof or a regex. With values like 1999, 2000, etc. it might be tricky and you would need to manually address it.
4: If possible print as 1.23E+1 rather than 1E+1
toExponential takes one parameter which is the "number of digits in the notation after the decimal point", i.e. num.toExponential(3) would do the trick in your case.
From the comment: I seem to get NaN when the values on the ticks are negative values
Plotly uses an Unicode minus sign instead of a regular dash. You can replace it with the following JavaScript line:
var num = parseInt(tick[0].innerHTML.replace(/\u2013|\u2014|\u2212/g, '-'));
Note: the double backslash \ is required in R, pure JavaScript would require only a single .
answered Nov 25 at 2:42
Timothy Lukas H.
17610
Try this Stackoverflow Question:
Plotly axis as exponential format
Direct Text-Form: ALL CREDIT TO: @MaximilianPeters
1: How to make it work on subplots. I tried calling java in the build
of each subplot, but all plots came out without exponential then.
The ticks of the 2nd/3rd/etc. subplot have class names like y2tick/y3tick/etc. We could make our d3 selector less specific and then use each to change all ticks.
ticks = Plotly.d3.selectAll('g.yaxislayer-above').selectAll('text');
ticks.each(function(d, i)
{
var num = parseInt(d.text).toExponential();
Plotly.d3.select(this).text(num);
})
2: make it work for both x an y axis (I tried, failed and cried a
little)
Just change the selectAll statement to Plotly.d3.selectAll('g.xaxislayer-above').selectAll('text')
3: Make it not destroy the universe when the axis turns out to not be
a numerical (My app can plot date columns too, so it needs to check
whether it actually is a numerical input)
You could change your fixTicks functions to check if the input value is numeric, e.g. by using typeof or a regex. With values like 1999, 2000, etc. it might be tricky and you would need to manually address it.
4: If possible print as 1.23E+1 rather than 1E+1
toExponential takes one parameter which is the "number of digits in the notation after the decimal point", i.e. num.toExponential(3) would do the trick in your case.
From the comment: I seem to get NaN when the values on the ticks are negative values
Plotly uses an Unicode minus sign instead of a regular dash. You can replace it with the following JavaScript line:
var num = parseInt(tick[0].innerHTML.replace(/\u2013|\u2014|\u2212/g, '-'));
Note: the double backslash \ is required in R, pure JavaScript would require only a single .
answered Nov 25 at 2:42
Timothy Lukas H.
17610
answered Nov 25 at 2:42
Timothy Lukas H.
17610
answered Nov 25 at 2:42
Timothy Lukas H.
17610
answered Nov 25 at 2:42
Timothy Lukas H.
17610
17610
When changing the values will this reflect the values within the plot or does this only change the text of the color bar? Havent tried it yet since I am not in my place right now.
– Rod_Algonquin
Nov 25 at 3:02
@Rod_Algonquin Honestly, I don't know. You'll need to test that :/ Sorry.
– Timothy Lukas H.
Nov 25 at 3:05
This does not actually reflect the colors of the color-bar within the contour plot. So when the above solution is executed it only changes the values of the color bar which you can already do within the library.
– Rod_Algonquin
Dec 1 at 23:57
add a comment |
When changing the values will this reflect the values within the plot or does this only change the text of the color bar? Havent tried it yet since I am not in my place right now.
– Rod_Algonquin
Nov 25 at 3:02
@Rod_Algonquin Honestly, I don't know. You'll need to test that :/ Sorry.
– Timothy Lukas H.
Nov 25 at 3:05
This does not actually reflect the colors of the color-bar within the contour plot. So when the above solution is executed it only changes the values of the color bar which you can already do within the library.
– Rod_Algonquin
Dec 1 at 23:57
When changing the values will this reflect the values within the plot or does this only change the text of the color bar? Havent tried it yet since I am not in my place right now.
– Rod_Algonquin
Nov 25 at 3:02
When changing the values will this reflect the values within the plot or does this only change the text of the color bar? Havent tried it yet since I am not in my place right now.
– Rod_Algonquin
Nov 25 at 3:02
@Rod_Algonquin Honestly, I don't know. You'll need to test that :/ Sorry.
– Timothy Lukas H.
Nov 25 at 3:05
@Rod_Algonquin Honestly, I don't know. You'll need to test that :/ Sorry.
– Timothy Lukas H.
Nov 25 at 3:05
This does not actually reflect the colors of the color-bar within the contour plot. So when the above solution is executed it only changes the values of the color bar which you can already do within the library.
– Rod_Algonquin
Dec 1 at 23:57
This does not actually reflect the colors of the color-bar within the contour plot. So when the above solution is executed it only changes the values of the color bar which you can already do within the library.
– Rod_Algonquin
Dec 1 at 23:57
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53437634%2fhow-to-have-un-even-tick-value-for-color-bar-in-plotly%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
