D3: Confidence ellipse, how to orient?
My plan is to draw a 95% confidence ellipse atop my basic d3 scatter plot. I initially thought it would be super easy to draw a confidence ellipse in D3, because there is a dedicated SVG ellipse to work with. However, things proved difficult as I could only create axis-aligned ellipses. While not rocket science, the math for determining the correct orientation for the ellipse is still somewhat involving. Luckily I found this great guide on how to calculate, and also this reference picture:
I wanted to take baby steps first, so I left the math aside for a moment and just tried to eye-ball the ellipse over the scatter plot like so:
graphGroupG.append('ellipse')
.attr('transform', 'translate(' + margins.left + ',' + margins.top + ')')
.attr({cx:xScale(0), cy:yScale(0), rx:xScale(-6), ry:yScale(6)})
.attr('stroke', 'black')
.attr('stroke-width', 3)
.attr('fill', 'none');
And despite tinkering with all cx,cy,rx,ry combinations, all my ellipses were axis-aligned and not oriented diagonally as would be required to serve as a proper confidence ellipse. I wonder if there is some secret orientation attribute that I'm not aware of.
Question: How can I use d3's ellipse svg such that I am able to set the ellipse .attr() to the required confidence ellipse coordinates (implying diagonal orientation). If the dedicated ellipse shape doesn't work, would a path approach be viable?
I would appreciate a plunker or block for proof of concept. I have looked all over the place and didn't find anything of the sort.
d3.js svg
asked Jun 7 '18 at 6:19
Arash Howaida
5811415
add a comment |
My plan is to draw a 95% confidence ellipse atop my basic d3 scatter plot. I initially thought it would be super easy to draw a confidence ellipse in D3, because there is a dedicated SVG ellipse to work with. However, things proved difficult as I could only create axis-aligned ellipses. While not rocket science, the math for determining the correct orientation for the ellipse is still somewhat involving. Luckily I found this great guide on how to calculate, and also this reference picture:
I wanted to take baby steps first, so I left the math aside for a moment and just tried to eye-ball the ellipse over the scatter plot like so:
graphGroupG.append('ellipse')
.attr('transform', 'translate(' + margins.left + ',' + margins.top + ')')
.attr({cx:xScale(0), cy:yScale(0), rx:xScale(-6), ry:yScale(6)})
.attr('stroke', 'black')
.attr('stroke-width', 3)
.attr('fill', 'none');
And despite tinkering with all cx,cy,rx,ry combinations, all my ellipses were axis-aligned and not oriented diagonally as would be required to serve as a proper confidence ellipse. I wonder if there is some secret orientation attribute that I'm not aware of.
Question: How can I use d3's ellipse svg such that I am able to set the ellipse .attr() to the required confidence ellipse coordinates (implying diagonal orientation). If the dedicated ellipse shape doesn't work, would a path approach be viable?
I would appreciate a plunker or block for proof of concept. I have looked all over the place and didn't find anything of the sort.
d3.js svg
asked Jun 7 '18 at 6:19
Arash Howaida
5811415
Why don't you simply userotate?
– Gerardo Furtado
Jun 7 '18 at 6:37
@GerardoFurtado On your suggestion, I am usingrotateto hold me over until I can find a programmatic way to handle it. I have eye-balled it and am fairly happy with it, but in the future if I have a new data set, I will benefit greatly from a method that sets the coordinates / orients the ellipse to enclose 95% of the data. Otherwiserotatewill require me to trial and error all over again.
– Arash Howaida
Jun 7 '18 at 8:34
In that case, create an elliptical arc: w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands
– Gerardo Furtado
Jun 7 '18 at 9:13
You don't need to use trial and error to find the angle of rotation. The algorithm you linked to tells you how to calculate it.
– Paul LeBeau
Jun 7 '18 at 10:34
add a comment |
My plan is to draw a 95% confidence ellipse atop my basic d3 scatter plot. I initially thought it would be super easy to draw a confidence ellipse in D3, because there is a dedicated SVG ellipse to work with. However, things proved difficult as I could only create axis-aligned ellipses. While not rocket science, the math for determining the correct orientation for the ellipse is still somewhat involving. Luckily I found this great guide on how to calculate, and also this reference picture:
I wanted to take baby steps first, so I left the math aside for a moment and just tried to eye-ball the ellipse over the scatter plot like so:
graphGroupG.append('ellipse')
.attr('transform', 'translate(' + margins.left + ',' + margins.top + ')')
.attr({cx:xScale(0), cy:yScale(0), rx:xScale(-6), ry:yScale(6)})
.attr('stroke', 'black')
.attr('stroke-width', 3)
.attr('fill', 'none');
And despite tinkering with all cx,cy,rx,ry combinations, all my ellipses were axis-aligned and not oriented diagonally as would be required to serve as a proper confidence ellipse. I wonder if there is some secret orientation attribute that I'm not aware of.
Question: How can I use d3's ellipse svg such that I am able to set the ellipse .attr() to the required confidence ellipse coordinates (implying diagonal orientation). If the dedicated ellipse shape doesn't work, would a path approach be viable?
I would appreciate a plunker or block for proof of concept. I have looked all over the place and didn't find anything of the sort.
d3.js svg
asked Jun 7 '18 at 6:19
Arash Howaida
5811415
My plan is to draw a 95% confidence ellipse atop my basic d3 scatter plot. I initially thought it would be super easy to draw a confidence ellipse in D3, because there is a dedicated SVG ellipse to work with. However, things proved difficult as I could only create axis-aligned ellipses. While not rocket science, the math for determining the correct orientation for the ellipse is still somewhat involving. Luckily I found this great guide on how to calculate, and also this reference picture:
I wanted to take baby steps first, so I left the math aside for a moment and just tried to eye-ball the ellipse over the scatter plot like so:
graphGroupG.append('ellipse')
.attr('transform', 'translate(' + margins.left + ',' + margins.top + ')')
.attr({cx:xScale(0), cy:yScale(0), rx:xScale(-6), ry:yScale(6)})
.attr('stroke', 'black')
.attr('stroke-width', 3)
.attr('fill', 'none');
And despite tinkering with all cx,cy,rx,ry combinations, all my ellipses were axis-aligned and not oriented diagonally as would be required to serve as a proper confidence ellipse. I wonder if there is some secret orientation attribute that I'm not aware of.
Question: How can I use d3's ellipse svg such that I am able to set the ellipse .attr() to the required confidence ellipse coordinates (implying diagonal orientation). If the dedicated ellipse shape doesn't work, would a path approach be viable?
I would appreciate a plunker or block for proof of concept. I have looked all over the place and didn't find anything of the sort.
d3.js svg
d3.js svg
asked Jun 7 '18 at 6:19
Arash Howaida
5811415
asked Jun 7 '18 at 6:19
Arash Howaida
5811415
asked Jun 7 '18 at 6:19
Arash Howaida
5811415
asked Jun 7 '18 at 6:19
Arash Howaida
5811415
asked Jun 7 '18 at 6:19
Arash Howaida
5811415
5811415
Why don't you simply userotate?
– Gerardo Furtado
Jun 7 '18 at 6:37
@GerardoFurtado On your suggestion, I am usingrotateto hold me over until I can find a programmatic way to handle it. I have eye-balled it and am fairly happy with it, but in the future if I have a new data set, I will benefit greatly from a method that sets the coordinates / orients the ellipse to enclose 95% of the data. Otherwiserotatewill require me to trial and error all over again.
– Arash Howaida
Jun 7 '18 at 8:34
In that case, create an elliptical arc: w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands
– Gerardo Furtado
Jun 7 '18 at 9:13
You don't need to use trial and error to find the angle of rotation. The algorithm you linked to tells you how to calculate it.
– Paul LeBeau
Jun 7 '18 at 10:34
add a comment |
Why don't you simply userotate?
– Gerardo Furtado
Jun 7 '18 at 6:37
@GerardoFurtado On your suggestion, I am usingrotateto hold me over until I can find a programmatic way to handle it. I have eye-balled it and am fairly happy with it, but in the future if I have a new data set, I will benefit greatly from a method that sets the coordinates / orients the ellipse to enclose 95% of the data. Otherwiserotatewill require me to trial and error all over again.
– Arash Howaida
Jun 7 '18 at 8:34
In that case, create an elliptical arc: w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands
– Gerardo Furtado
Jun 7 '18 at 9:13
You don't need to use trial and error to find the angle of rotation. The algorithm you linked to tells you how to calculate it.
– Paul LeBeau
Jun 7 '18 at 10:34
Why don't you simply use
rotate?– Gerardo Furtado
Jun 7 '18 at 6:37
Why don't you simply use
rotate?– Gerardo Furtado
Jun 7 '18 at 6:37
@GerardoFurtado On your suggestion, I am using
rotate to hold me over until I can find a programmatic way to handle it. I have eye-balled it and am fairly happy with it, but in the future if I have a new data set, I will benefit greatly from a method that sets the coordinates / orients the ellipse to enclose 95% of the data. Otherwise rotate will require me to trial and error all over again.– Arash Howaida
Jun 7 '18 at 8:34
@GerardoFurtado On your suggestion, I am using
rotate to hold me over until I can find a programmatic way to handle it. I have eye-balled it and am fairly happy with it, but in the future if I have a new data set, I will benefit greatly from a method that sets the coordinates / orients the ellipse to enclose 95% of the data. Otherwise rotate will require me to trial and error all over again.– Arash Howaida
Jun 7 '18 at 8:34
In that case, create an elliptical arc: w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands
– Gerardo Furtado
Jun 7 '18 at 9:13
In that case, create an elliptical arc: w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands
– Gerardo Furtado
Jun 7 '18 at 9:13
You don't need to use trial and error to find the angle of rotation. The algorithm you linked to tells you how to calculate it.
– Paul LeBeau
Jun 7 '18 at 10:34
You don't need to use trial and error to find the angle of rotation. The algorithm you linked to tells you how to calculate it.
– Paul LeBeau
Jun 7 '18 at 10:34
add a comment |
active
oldest
votes
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%2f50734168%2fd3-confidence-ellipse-how-to-orient%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
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%2f50734168%2fd3-confidence-ellipse-how-to-orient%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
Why don't you simply use
rotate?– Gerardo Furtado
Jun 7 '18 at 6:37
@GerardoFurtado On your suggestion, I am using
rotateto hold me over until I can find a programmatic way to handle it. I have eye-balled it and am fairly happy with it, but in the future if I have a new data set, I will benefit greatly from a method that sets the coordinates / orients the ellipse to enclose 95% of the data. Otherwiserotatewill require me to trial and error all over again.– Arash Howaida
Jun 7 '18 at 8:34
In that case, create an elliptical arc: w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands
– Gerardo Furtado
Jun 7 '18 at 9:13
You don't need to use trial and error to find the angle of rotation. The algorithm you linked to tells you how to calculate it.
– Paul LeBeau
Jun 7 '18 at 10:34