Redraw scatterplot with new x and y coordinates

[danielhomola]

Hi,

Thanks so much for your wonderful work with this package. I've managed to build some really nice dashboards with it. I've been using the scatterChart and managed to change the positions of the points by redefining the chart's dimension, redefining it's group, and calling the redraw method. I also managed to save the selection of the brushOn method and redraw it in the new coordinates, see below:

    $('#dataset1_pcy').change(dataset1_pc_xy);
    function dataset1_pc_xy (){
        // column of new x coordinates in csv data file
        var x = $('#dataset1_pcx').val();
        // column of new y coordinates in csv data file
        var y = $('#dataset1_pcy').val();
        var filteredPCA = dataset1Dim.top(Infinity);
        var new_pcx = filteredPCA.map(function(obj){return obj['dataset1_pc'+x]});
        var new_pcy = filteredPCA.map(function(obj){return obj['dataset1_pc'+y]});

        var resizeTimer2;
        if(filteredPCA.length != 173 && filteredPCA.length != 0){
            var new_pcx_max = Math.max.apply(null, new_pcx);
            var new_pcx_min = Math.min.apply(null, new_pcx);
            var new_pcy_max = Math.max.apply(null, new_pcy);
            var new_pcy_min = Math.min.apply(null, new_pcy);
            new_pcx_max = new_pcx_max + Math.abs(new_pcx_max)*.1;
            new_pcx_min = new_pcx_min - Math.abs(new_pcx_min)*.1;
            new_pcy_max = new_pcy_max + Math.abs(new_pcy_max)*.1;
            new_pcy_min = new_pcy_min - Math.abs(new_pcy_min)*.1;

            dataset1Dim.dispose();
            dataset1Dim = ndx.dimension(function (d) {return [d['dataset1_pc' + x], d['dataset1_pc' + y]];});
            countPerDataset1 = dataset1Dim.group().reduce(rAdd,rRemove,rInit);
            dataset1Chart
                .dimension(dataset1Dim)
                .group(countPerDataset1)
                .x(d3.scale.linear().domain([dataset1_pcs['min_pc' + x], dataset1_pcs['max_pc' + x]]))
                .y(d3.scale.linear().domain([dataset1_pcs['min_pc' + y], dataset1_pcs['max_pc' + y]]))
                .xAxisLabel(dataset1_pcs['var_pc' + x])
                .yAxisLabel(dataset1_pcs['var_pc' + y])
                .filter(null)
                .filter(dc.filters.RangedTwoDimensionalFilter([[new_pcx_min, new_pcy_min], [new_pcx_max, new_pcy_max]]))
                .redraw();
            clearTimeout(resizeTimer2);
            resizeTimer2 = setTimeout(function() {
                dc.redrawAll();
            }, 100)

My problem is, when I change the second / Y coordiantes so key[1] the redraw nicely moves each point with it's appropriate colours to its new position. But when I change the first / X coordinates (which is internally set as key[0]), the transition is all mixed up. What I mean is, all points end up where they should be, and all colours are right, the cross filtering with other charts works nicely as well but during the transition each point fades away and reappears from new places. I guess this is because the keys are internally sorted by key[0].

Is there any way to overcome this? I tried adding

function keyAcc(d) { return d.key[1]; };
function valAcc(d) { return d.key[0]; };

and then

.keyAccessor(keyAcc)
.valueAccessor(valAcc)

but it didn't work.

Thank a lot for your help in advance!

[gordonwoodhull]

Hi @danielhomola, I agree that the design choice of keying on position pair in the group, and by index when joining the data, is kind of a strange one. We've previously discussed this in #621 and #702.

If your points are changing position, you might be better off with the bubble chart, which uses a key you specify, and joins by this key rather than by index.

Going forward, we might need to make a breaking change on the scatter plot. Joining by index almost never produces good transitions, and using the position as a group key is of limited value as well.

[danielhomola]

Hey @gordonwoodhull , thanks for getting back to me. I know about the bubble chart but I'd need brushing and last time I checked bubble charts don't support that.. am I wrong?

[gordonwoodhull]

Got it. Yes, you are correct about that.

[danielhomola]

Thanks for confirming.. Also thanks for your answer in #621 .

btw I'm working on a large project with automatically generated, respomsive dashboards, which I will open source soon, once it we published it, so I hope to pay back the community for this amazing package :)

[gordonwoodhull]

Fantastic, looking forward to seeing that. That's kind of the holy grail in this space (with all the attendant risks).

[robokozo]

Just ran into this myself. As I'm re-rendering after adding new scatter plot items to the chart the nodes all move around improperly as if the keyAccessor isnt working or recognizing which rendered nodes correspond to the data. Not sure how to move forward here.

I'm currently using 4.2.7 and using the 'scatterPlot function' to create the instance of the chart.