Issue in plotting points properly using Heatmap Canvas d3
0
I am trying to plot the data. See the following images:
And also the second image:
The following is the code that I have tried to manipulte:
private updateCircles(container, points: Example2D) {
let selection = container.selectAll("circle").data(points);
selection.enter().append("circle").attr("r", 3);
selection
.attr({
cx : (d: Example2D,i) => (i),
cy : (d: Example2D) => this.yScale(d.x1),
})
.style("fill", d => this.color(d.label));
}
}
The yScale is defined as:
this.yScale = d3.scale.linear()
.domain(yDomain)
.range([height - 1 * padding, 0]);
the yDomain = [-1,1]
What I am looking for is that the data must get reflected the exact way as it is in the thumbnail.
Let me know what I am missing to improve.
javascript html d3.js canvas
edited Jan 1 at 20:00
Nandini Venkateshan
26228
asked Jan 1 at 13:37
Jaffer WilsonJaffer Wilson
2,94232550
add a comment |
0
I am trying to plot the data. See the following images:
And also the second image:
The following is the code that I have tried to manipulte:
private updateCircles(container, points: Example2D) {
let selection = container.selectAll("circle").data(points);
selection.enter().append("circle").attr("r", 3);
selection
.attr({
cx : (d: Example2D,i) => (i),
cy : (d: Example2D) => this.yScale(d.x1),
})
.style("fill", d => this.color(d.label));
}
}
The yScale is defined as:
this.yScale = d3.scale.linear()
.domain(yDomain)
.range([height - 1 * padding, 0]);
the yDomain = [-1,1]
What I am looking for is that the data must get reflected the exact way as it is in the thumbnail.
Let me know what I am missing to improve.
javascript html d3.js canvas
edited Jan 1 at 20:00
Nandini Venkateshan
26228
asked Jan 1 at 13:37
Jaffer WilsonJaffer Wilson
2,94232550
1
You mean that graphs on right is what you want? Or do you mean that graphs on right are the ones that are currently being made by you?
– Shubham Sharma
Jan 1 at 15:20
I wanted to have the graph on Right get reflected on the left. Say if the value is one on top, zeroes in middle and -1 's at bottom. You know the scaling thing.
– Jaffer Wilson
Jan 3 at 6:19
add a comment |
0
0
0
I am trying to plot the data. See the following images:
And also the second image:
The following is the code that I have tried to manipulte:
private updateCircles(container, points: Example2D) {
let selection = container.selectAll("circle").data(points);
selection.enter().append("circle").attr("r", 3);
selection
.attr({
cx : (d: Example2D,i) => (i),
cy : (d: Example2D) => this.yScale(d.x1),
})
.style("fill", d => this.color(d.label));
}
}
The yScale is defined as:
this.yScale = d3.scale.linear()
.domain(yDomain)
.range([height - 1 * padding, 0]);
the yDomain = [-1,1]
What I am looking for is that the data must get reflected the exact way as it is in the thumbnail.
Let me know what I am missing to improve.
javascript html d3.js canvas
edited Jan 1 at 20:00
Nandini Venkateshan
26228
asked Jan 1 at 13:37
Jaffer WilsonJaffer Wilson
2,94232550
I am trying to plot the data. See the following images:
And also the second image:
The following is the code that I have tried to manipulte:
private updateCircles(container, points: Example2D) {
let selection = container.selectAll("circle").data(points);
selection.enter().append("circle").attr("r", 3);
selection
.attr({
cx : (d: Example2D,i) => (i),
cy : (d: Example2D) => this.yScale(d.x1),
})
.style("fill", d => this.color(d.label));
}
}
The yScale is defined as:
this.yScale = d3.scale.linear()
.domain(yDomain)
.range([height - 1 * padding, 0]);
the yDomain = [-1,1]
What I am looking for is that the data must get reflected the exact way as it is in the thumbnail.
Let me know what I am missing to improve.
javascript html d3.js canvas
javascript html d3.js canvas
edited Jan 1 at 20:00
Nandini Venkateshan
26228
asked Jan 1 at 13:37
Jaffer WilsonJaffer Wilson
2,94232550
edited Jan 1 at 20:00
Nandini Venkateshan
26228
asked Jan 1 at 13:37
Jaffer WilsonJaffer Wilson
2,94232550
edited Jan 1 at 20:00
Nandini Venkateshan
26228
edited Jan 1 at 20:00
Nandini Venkateshan
26228
edited Jan 1 at 20:00
Nandini Venkateshan
26228
26228
asked Jan 1 at 13:37
Jaffer WilsonJaffer Wilson
2,94232550
asked Jan 1 at 13:37
Jaffer WilsonJaffer Wilson
2,94232550
asked Jan 1 at 13:37
Jaffer WilsonJaffer Wilson
2,94232550
2,94232550
1
You mean that graphs on right is what you want? Or do you mean that graphs on right are the ones that are currently being made by you?
– Shubham Sharma
Jan 1 at 15:20
I wanted to have the graph on Right get reflected on the left. Say if the value is one on top, zeroes in middle and -1 's at bottom. You know the scaling thing.
– Jaffer Wilson
Jan 3 at 6:19
add a comment |
1
You mean that graphs on right is what you want? Or do you mean that graphs on right are the ones that are currently being made by you?
– Shubham Sharma
Jan 1 at 15:20
I wanted to have the graph on Right get reflected on the left. Say if the value is one on top, zeroes in middle and -1 's at bottom. You know the scaling thing.
– Jaffer Wilson
Jan 3 at 6:19
1
1
You mean that graphs on right is what you want? Or do you mean that graphs on right are the ones that are currently being made by you?
– Shubham Sharma
Jan 1 at 15:20
You mean that graphs on right is what you want? Or do you mean that graphs on right are the ones that are currently being made by you?
– Shubham Sharma
Jan 1 at 15:20
I wanted to have the graph on Right get reflected on the left. Say if the value is one on top, zeroes in middle and -1 's at bottom. You know the scaling thing.
– Jaffer Wilson
Jan 3 at 6:19
I wanted to have the graph on Right get reflected on the left. Say if the value is one on top, zeroes in middle and -1 's at bottom. You know the scaling thing.
– Jaffer Wilson
Jan 3 at 6:19
add a comment |
1 Answer
1
active
oldest
votes
1
Try this
your tumbnail have differend height and width with new image
You get the data by doing
container.selectAll("circle").data(points);
Append it on selection by
selection.enter().append("circle").attr("r", 3);
but your svg container (width and height) on tumbnail and new image is different
Please try reformat the scale :
private updateCircles(container, points: Example2D) {
//get data
let selection = container.selectAll("circle").data(points);
// this is new image on the right width and hight
let rangeX = [ ] //find width [min,max] of your new image on the right
let rangeY = [ ] //find height [min,max] of your new image on the right
//try set new scale
let newxScale = d3.scale.linear()
.domain(xDomain)
.range(rangeX);
let newyScale = d3.scale.linear()
.domain(yDomain)
.range(rangeY);
//append with new scale
selection.enter().append("circle").attr("r", 3);
selection
.attr({
cx : (d: Example2D,i) => newxscale(i),
cy : (d: Example2D) => newyscale(d.x1),
})
.style("fill", d => this.color(d.label));
}
}
If you want to reflect the data same as the thumbnail. make sure your scaleX and scaleY is in the proper format.
answered Jan 2 at 9:16
KEKUATANKEKUATAN
671518
Sure let me check it out I will let you know.
– Jaffer Wilson
Jan 3 at 6:21
It is saying some ,(comma) issue. Can you help, what might be the issue? I thought and tried: changed this to[new height min, new height max]to[new height.min, new height.max], then it started giving issue with the variablexDomain
– Jaffer Wilson
Jan 3 at 10:11
I am not getting way how I can get the scaling to proper what I am willing to have. Please let me know if there a way out.
– Jaffer Wilson
Jan 3 at 14:20
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
});
}
});
draft saved
draft discarded
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%2f53995903%2fissue-in-plotting-points-properly-using-heatmap-canvas-d3%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
1
Try this
your tumbnail have differend height and width with new image
You get the data by doing
container.selectAll("circle").data(points);
Append it on selection by
selection.enter().append("circle").attr("r", 3);
but your svg container (width and height) on tumbnail and new image is different
Please try reformat the scale :
private updateCircles(container, points: Example2D) {
//get data
let selection = container.selectAll("circle").data(points);
// this is new image on the right width and hight
let rangeX = [ ] //find width [min,max] of your new image on the right
let rangeY = [ ] //find height [min,max] of your new image on the right
//try set new scale
let newxScale = d3.scale.linear()
.domain(xDomain)
.range(rangeX);
let newyScale = d3.scale.linear()
.domain(yDomain)
.range(rangeY);
//append with new scale
selection.enter().append("circle").attr("r", 3);
selection
.attr({
cx : (d: Example2D,i) => newxscale(i),
cy : (d: Example2D) => newyscale(d.x1),
})
.style("fill", d => this.color(d.label));
}
}
If you want to reflect the data same as the thumbnail. make sure your scaleX and scaleY is in the proper format.
answered Jan 2 at 9:16
KEKUATANKEKUATAN
671518
Sure let me check it out I will let you know.
– Jaffer Wilson
Jan 3 at 6:21
It is saying some ,(comma) issue. Can you help, what might be the issue? I thought and tried: changed this to[new height min, new height max]to[new height.min, new height.max], then it started giving issue with the variablexDomain
– Jaffer Wilson
Jan 3 at 10:11
I am not getting way how I can get the scaling to proper what I am willing to have. Please let me know if there a way out.
– Jaffer Wilson
Jan 3 at 14:20
add a comment |
1
Try this
your tumbnail have differend height and width with new image
You get the data by doing
container.selectAll("circle").data(points);
Append it on selection by
selection.enter().append("circle").attr("r", 3);
but your svg container (width and height) on tumbnail and new image is different
Please try reformat the scale :
private updateCircles(container, points: Example2D) {
//get data
let selection = container.selectAll("circle").data(points);
// this is new image on the right width and hight
let rangeX = [ ] //find width [min,max] of your new image on the right
let rangeY = [ ] //find height [min,max] of your new image on the right
//try set new scale
let newxScale = d3.scale.linear()
.domain(xDomain)
.range(rangeX);
let newyScale = d3.scale.linear()
.domain(yDomain)
.range(rangeY);
//append with new scale
selection.enter().append("circle").attr("r", 3);
selection
.attr({
cx : (d: Example2D,i) => newxscale(i),
cy : (d: Example2D) => newyscale(d.x1),
})
.style("fill", d => this.color(d.label));
}
}
If you want to reflect the data same as the thumbnail. make sure your scaleX and scaleY is in the proper format.
answered Jan 2 at 9:16
KEKUATANKEKUATAN
671518
Sure let me check it out I will let you know.
– Jaffer Wilson
Jan 3 at 6:21
It is saying some ,(comma) issue. Can you help, what might be the issue? I thought and tried: changed this to[new height min, new height max]to[new height.min, new height.max], then it started giving issue with the variablexDomain
– Jaffer Wilson
Jan 3 at 10:11
I am not getting way how I can get the scaling to proper what I am willing to have. Please let me know if there a way out.
– Jaffer Wilson
Jan 3 at 14:20
add a comment |
1
1
1
Try this
your tumbnail have differend height and width with new image
You get the data by doing
container.selectAll("circle").data(points);
Append it on selection by
selection.enter().append("circle").attr("r", 3);
but your svg container (width and height) on tumbnail and new image is different
Please try reformat the scale :
private updateCircles(container, points: Example2D) {
//get data
let selection = container.selectAll("circle").data(points);
// this is new image on the right width and hight
let rangeX = [ ] //find width [min,max] of your new image on the right
let rangeY = [ ] //find height [min,max] of your new image on the right
//try set new scale
let newxScale = d3.scale.linear()
.domain(xDomain)
.range(rangeX);
let newyScale = d3.scale.linear()
.domain(yDomain)
.range(rangeY);
//append with new scale
selection.enter().append("circle").attr("r", 3);
selection
.attr({
cx : (d: Example2D,i) => newxscale(i),
cy : (d: Example2D) => newyscale(d.x1),
})
.style("fill", d => this.color(d.label));
}
}
If you want to reflect the data same as the thumbnail. make sure your scaleX and scaleY is in the proper format.
answered Jan 2 at 9:16
KEKUATANKEKUATAN
671518
Try this
your tumbnail have differend height and width with new image
You get the data by doing
container.selectAll("circle").data(points);
Append it on selection by
selection.enter().append("circle").attr("r", 3);
but your svg container (width and height) on tumbnail and new image is different
Please try reformat the scale :
private updateCircles(container, points: Example2D) {
//get data
let selection = container.selectAll("circle").data(points);
// this is new image on the right width and hight
let rangeX = [ ] //find width [min,max] of your new image on the right
let rangeY = [ ] //find height [min,max] of your new image on the right
//try set new scale
let newxScale = d3.scale.linear()
.domain(xDomain)
.range(rangeX);
let newyScale = d3.scale.linear()
.domain(yDomain)
.range(rangeY);
//append with new scale
selection.enter().append("circle").attr("r", 3);
selection
.attr({
cx : (d: Example2D,i) => newxscale(i),
cy : (d: Example2D) => newyscale(d.x1),
})
.style("fill", d => this.color(d.label));
}
}
If you want to reflect the data same as the thumbnail. make sure your scaleX and scaleY is in the proper format.
answered Jan 2 at 9:16
KEKUATANKEKUATAN
671518
edited Jan 4 at 3:22
answered Jan 2 at 9:16
KEKUATANKEKUATAN
671518
answered Jan 2 at 9:16
KEKUATANKEKUATAN
671518
answered Jan 2 at 9:16
KEKUATANKEKUATAN
671518
671518
Sure let me check it out I will let you know.
– Jaffer Wilson
Jan 3 at 6:21
It is saying some ,(comma) issue. Can you help, what might be the issue? I thought and tried: changed this to[new height min, new height max]to[new height.min, new height.max], then it started giving issue with the variablexDomain
– Jaffer Wilson
Jan 3 at 10:11
I am not getting way how I can get the scaling to proper what I am willing to have. Please let me know if there a way out.
– Jaffer Wilson
Jan 3 at 14:20
add a comment |
Sure let me check it out I will let you know.
– Jaffer Wilson
Jan 3 at 6:21
It is saying some ,(comma) issue. Can you help, what might be the issue? I thought and tried: changed this to[new height min, new height max]to[new height.min, new height.max], then it started giving issue with the variablexDomain
– Jaffer Wilson
Jan 3 at 10:11
I am not getting way how I can get the scaling to proper what I am willing to have. Please let me know if there a way out.
– Jaffer Wilson
Jan 3 at 14:20
Sure let me check it out I will let you know.
– Jaffer Wilson
Jan 3 at 6:21
Sure let me check it out I will let you know.
– Jaffer Wilson
Jan 3 at 6:21
It is saying some ,(comma) issue. Can you help, what might be the issue? I thought and tried: changed this to
[new height min, new height max] to [new height.min, new height.max], then it started giving issue with the variable xDomain– Jaffer Wilson
Jan 3 at 10:11
It is saying some ,(comma) issue. Can you help, what might be the issue? I thought and tried: changed this to
[new height min, new height max] to [new height.min, new height.max], then it started giving issue with the variable xDomain– Jaffer Wilson
Jan 3 at 10:11
I am not getting way how I can get the scaling to proper what I am willing to have. Please let me know if there a way out.
– Jaffer Wilson
Jan 3 at 14:20
I am not getting way how I can get the scaling to proper what I am willing to have. Please let me know if there a way out.
– Jaffer Wilson
Jan 3 at 14:20
add a comment |
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f53995903%2fissue-in-plotting-points-properly-using-heatmap-canvas-d3%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
1
You mean that graphs on right is what you want? Or do you mean that graphs on right are the ones that are currently being made by you?
– Shubham Sharma
Jan 1 at 15:20
I wanted to have the graph on Right get reflected on the left. Say if the value is one on top, zeroes in middle and -1 's at bottom. You know the scaling thing.
– Jaffer Wilson
Jan 3 at 6:19