zooming in a scatterplot with the density contour added (V4)

[guillaume.cha...@gmail.com]

Hi,

I have realized this kind of plot: 

https://bl.ocks.org/mbostock/e3f4376d54e02d5d43ae32a7cf0e6aa9

and I have added this zoom: 

https://bl.ocks.org/mbostock/f48fcdb929a620ed97877e4678ab15e6

However, I don't know how to 'redraw' the contour part of the plot.

    function zoom() {

      var t = svg.transition().duration(750);

      svg.select(".axis--x").transition(t).call(xAxis);

      svg.select(".axis--y").transition(t).call(yAxis);

      svg.selectAll(".dot").transition(t)

        .attr("cx", function(d) {

          return x(d.x);

        })

        .attr("cy", function(d) {

          return y(d.y);

        });

      svg.selectAll("path").transition(t) 

        .attr("d", d3.geoPath());

    }

Thanks

[guillaume.cha...@gmail.com]

Here the fiddle:

https://jsfiddle.net/m7vr0q46/1/

[steve rickus]

I think you need a projection scales x,y data points -- something like this:

    var xyPath = d3.geoTransform({
      point: function(ptx, pty) {
        this.stream.point(x(ptx), y(pty));
      }
    });

Then, where you define your path generator for the initial plot, pass the projection as the first arg, instead of overriding the contourDensity.x and .y functions:

    .selectAll("path")
    .data(d3.contourDensity()
        .x(function(d) { return d.x; })
        .y(function(d) { return d.y; })
        .size([width, height])
        .bandwidth(20)
      (plotdata))
    .enter().append("path")
      .attr("d", d3.geoPath(xyPath));

You also need to use the same projection for the path generator during the zoom transition:

      svg2.selectAll(".levelLine path").transition(t)
        .attr("d", d3.geoPath(xyPath));

Notice that the selectAll needs to get the "path" elements under the div.levelLine... Also, I needed to move your data array definition to the top of the script to avoid referencing it before it was defined.

--

Steve

[guillaume.cha...@gmail.com]

In this updated fiddle https://jsfiddle.net/ja4qnLnt/  thanks to your advice, I think there is 'scale' issue in the projection scales xyPath.

Thanks Steve for your awesome contribution