Issue in plotting points properly using Heatmap Canvas d3

Question

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.

Answer 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.