Search code examples
javascriptd3.jsdc.jscrossfilter

using a multi array for plotting data on a scatter with dc.js, d3 and crossfilter

I want to plot some values on a scatterplot, but i have no idea how to get the needed values out of the data and onto the scatterplot. I've tried various things but i am new to d3 so it's a bit confusing.

I just prepared a fiddle, maybe someone wants to take a look at it?

The structure of data is

var data = [
    {"name":"comp","arr":[[1493301233000, 123, 456], [1493301234000, 3, 4], [1493301235000, 5, 6]]},
    {"name":"comp","arr":[[1493301236000, 11, 22]]},
    {"name":"dogg","arr":[[1493301238000, 33, 55], [1493301239000, 66, 88]]}];

hit me to get to the fiddle

Solution

  • Hopefully this gets you started. I updated your Crossfilter and dc versions so that you can use Crossfilter's new array dimension feature in 1.4, and so that dc behaves in a more predictable way.

    Setup that you had in your fiddle (please put all the code in your question in the future):

    var data = [
    {"name":"comp","arr":[[1493301233000, 123, 456], [1493301234000, 3, 4], [1493301235000, 5, 6]]},
    {"name":"comp","arr":[[1493301236000, 11, 22]]},
    {"name":"dogg","arr":[[1493301238000, 33, 55], [1493301239000, 66, 88]]}
];
//arr[x][0] = 1493301233000         comes from getTime(), i guess it should be on the x-axis
//arr[x][1] = 123                               is not really important, would be nice if you see this value if you hover over a point
//arr[x][2] = 456                           is the value, i guess it should be on the y-axis

    Set up your dimension and group. The array elements (which are arrays themselves) will be your dimension keys.

    var cf = crossfilter(data);

var arrDim = cf.dimension(function(d){ return d.arr;}, true);
var arrGroup = arrDim.group();

    Set up your scatterplot. I hard-coded the x and y domains, and I did not convert your values to Dates. dc.js will behave much more nicely if you convert those to Date objects. Use accessor functions (at the bottom) to tell the scatter plot what values to use for x (keyAccessor), y (valueAccessor) and the hover label (title).

    Hover labels will not display unless you set brushOn(false), I believe, so you can't currently brush this chart to filter.

    var scatter = dc.scatterPlot("#chart");

scatter
            .width(300)
            .height(300)
            .x(d3.scale.linear().domain([1493301233000, 1493301239000]))
      .y(d3.scale.linear().domain([0, 456]))
            .yAxisLabel("y")
            .xAxisLabel("x")
      .brushOn(false)
            .clipPadding(10)
            .dimension(arrDim)
            .excludedOpacity(0.5)
            .group(arrGroup)
      .valueAccessor(function(d) { return d.key[2]; })
      .keyAccessor(function(d) { return d.key[0]; })
      .title(function(d) { return d.key[1]; });

dc.renderAll();

    Working example: http://jsfiddle.net/esjewett/vunftfdn/1/