How to use crossfilter.js for adding data to a reusable scatterplot?

Question

I have implemented a reusable chart (scatterplot) using d3.js. I get x and y coordinates from a csv file output.csv.

How I initialize the chart:

var chart = scatterPlot()
        .width(400)
        .height(400)
        .x(function (d) { return d.x; }) // x is the first coordinate, located in the csv file
        .y(function (d) { return d.y; }); // y is second coordinate



d3.csv("output.csv", function (data) {
        d3.select(".scatterplot")
            .datum(data)
            .call(chart)
    });

Now I want to use the crossfilter library to provide linking and brushing, but I'm having trouble with the implementation. What I tried:

var csData = crossfilter(data);
csData.dimXY = csData.dimension(function(d){
    return d.x + d.y;
});

csData.byXY = csData.dimX.group();
d3.select(".scatterplot")
        .datum(csData.dimXY)
        .call(chart)

How can I incorporate crossfilter into this problem?

Fiddle - JSFiddle

Answer 1

What worked for me:

var chart = scatterPlot()
        .width(400)
        .height(400)
        .x(function (d) { return d.key[0]; }) // x is the first coordinate, located in the csv file
        .y(function (d) { return d.key[0]; }); // y is second coordinate

var csData = crossfilter(data);
csData.dimXY = csData.dimension(function(d){
        return [parseFloat(d.x1),parseFloat(d.y1)];
    });

csData.byXY = csData.dimXY.group();

d3.select("#scatterplot1")
            .datum(csData.byScatter.all())
            .call(chart);