1

I'm getting weird clipping behavior when using d3.js and conrec.js to plot contours:

This is a contour plot that is correctly depicted This is a contour plot that is correctly depicted

This is a plot with clipping. The paths are filling incorrectly This is a plot with clipping. The paths are filling incorrectly

Another example of a plot with unwanted behavior Another example of a plot with unwanted behavior

Here is my code and approach. Data is a 31x31 value array. I make the contour and then data-bind the contour's contourList. I'm guessing something weird with the pathing is happening there!

            var cliff = -1000;
            data.push(d3.range(data[0].length).map(function() {
                return cliff;
            }));
            data.unshift(d3.range(data[0].length).map(function() {
                return cliff;
            }));
            data.forEach(function(d) {
                d.push(cliff);
                d.unshift(cliff);
            });

            var c = new Conrec,
                xs = d3.range(0, data.length),
                ys = d3.range(0, data[0].length),
                zs = [0],
                width = 300,
                height = 300,
                x = d3.scale.linear().range([0, width]).domain([0,
                    data.length
                ]),
                y = d3.scale.linear().range([height, 0]).domain([0,
                    data[0].length
                ]);

            c.contour(data, 0, xs.length - 1, 0, ys.length - 1, xs,
                ys, zs.length, zs);

            contourDict[key] = c;
            d3.select("svg").remove();
            var test = d3.select("#contour").append("svg")
                .attr("width", width)
                .attr("height", height)
                .selectAll("path")
                .data(c.contourList())
                .enter().append("path")
                .style("stroke", "black")
                .attr("d", d3.svg.line()
                    .x(function(d) {
                        return x(d.x);
                    })
                    .y(function(d) {
                        return y(d.y);
                    }));

Thank you for your time!

txizzle
  • 820
  • 7
  • 19
  • 1
    It looks like some of the points are in the wrong order, which causes problems for d3 when it tries to work out where the inside/outside of your object is. – Roland Heath Oct 06 '15 at 03:25
  • Hm, that makes sense. Any advice on how to fix this? Or is this an issue with conrec.js – txizzle Oct 06 '15 at 15:57
  • Unfortunately, I haven't used conrec.js before - but when you create your contour with `c.contour(data,0,xs.length-1,0,ys.length-1,xs,ys,zs.length,zs);` The variable `data` could be the source of your trouble. Try changing the order of point pairs in that, and you might see a change in behaviour. – Roland Heath Oct 06 '15 at 22:29
  • Although taking a quick look at conrec, I don't see anything you're doing wrong in the way you're calling it. – Roland Heath Oct 06 '15 at 22:34
  • Thanks! I'll see what I can do. Thank you for the advice – txizzle Oct 06 '15 at 23:24
  • @txizzle Did you find a solution to this? I am having a similar problem. – ccbunney Jul 21 '16 at 09:29
  • Unfortunately not. I ended up calculating the contours independently (in MATLAB) and then exporting the contour's path for D3 to plot. A fix for this conrec behavior may be to manually switch the order of points or to add on an extra point. For example, maybe you could try detecting if a point is on an 'edge' of the contour, and if it is, to treat it specially to verify if it actually should cut 'across' the shape or stick on the edge. – txizzle Jul 21 '16 at 20:51

0 Answers0