scatterPlot gets wrong colors using ordinal scale and legend

[alexnb]

dc 2.0.0-beta.27: when setting custom ordinalColors, the return values of the colorAccessor are interpreted not as the index inside the ordinalColor array which leads to wrong colors of points/legend.

Example see: http://jsfiddle.net/bourbert/uvoL3tnc/1/ (indices 0 and 1 are green and red, but points are red and blue).

[gordonwoodhull]

Odd.

I agree it's a bug. And thanks for reporting it, @alexnb!

However, what is your use case for using a scatter series? I know we have an example of this, but a scatter series doesn't offer any additional functionality over an ordinary scatter plot, so it always seemed kind of strange to me.

Recommended workaround: set the colors on the individual charts, in your subChart function, instead of using shareColors. If you need the key or index, those are the fourth and fifth arguments.

[alexnb]

@gordonwoodhull, thanks for your quick replies and your work on dc (great framework!)

I use scatter series because that is the way to represent several series in a single chart, as I understood. The example only contains one series to keep it as simple as possible. In fact we would like to give every series its own custom color (not every point). What would be an alternative to that (if any)?

I tried to set the colors on the individual charts (http://jsfiddle.net/bourbert/st7o0g03/1/), but the result is the same, the color index is interpreted not as the index inside the colorArray, this is the real problem which I tried to demostrate.

Regarding https://github.com/dc-js/dc.js/blob/develop/src/series-chart.js#L52 - I understand, haven't tried that yet, but expect the same problem with the interpretation of the colorAccessor's return value.

[gordonwoodhull]

Thanks for the jsFiddle - I should have looked more closely before making guesses.

It appears that this problem has nothing to do with the series chart but has to do with the implementation of legends for the scatter plot. For some unknown reason, it is calling _chart.getColor() which seems, um, reprehensible? Since getColor takes arguments.

https://github.com/dc-js/dc.js/blob/develop/src/scatter-plot.js#L260

I blame 719bed2 and it looks like I have fixed this in a couple of other places.

This ends up registering a value undefined in the domain, thus offsetting the other colors. Disabling the legend fixes this, or you could try changing the line source linked above (and doing a PR 😉).

[gordonwoodhull]

I can see how the scatter series could be useful for assigning attributes as a group, thanks for explaining.

[CalebSW]

Adding a domain to the scale in _chart.ordinalColors seems to fix this problem.

I ran into a similar issue with bar charts (no legends either). I noticed it when the number of colors shown was less than the number of colors provided to ordinalColors, but it may also cause issues in other situations (e.g. the blue and red points should swap colors in this fiddle). From d3's docs:

Setting the domain on an ordinal scale is optional if the unknown value is implicit (the default). In this case, the domain will be inferred implicitly from usage by assigning each unique value passed to the scale a new value from the range. Note that an explicit domain is recommended to ensure deterministic behavior, as inferring the domain from usage will be dependent on ordering.

Here's the original ordinalColors function:

_chart.ordinalColors = function (r) {
    return _chart.colors(d3.scale.ordinal().range(r));
};

Here's a ordinalColors function with a domain that is an array of integers from 0 to the length of r. I think this is the best domain to use, but I don't know enough about d3 scales to be sure:

_chart.ordinalColors = function (r) {
    return _chart.colors(d3.scale.ordinal().domain(d3.range(r.length)).range(r));
};

And here is the original fiddle with the fix (please excuse my jamming of dc.js code into the javascript frame, the changed function is at 2587).

[gordonwoodhull]

The d3 ordinal scale will automatically assign range values for any domain values it does not know - so if it encounters incorrect values before it encounters correct values, that causes the offset.

For anyone who runs across this, you can apply @CalebSW's fix without modifying dc.js. Just call .colors() instead of .ordinalColors (which is just a convenience method).

If r is your range of colors, i.e. ['red','green','blue'], and your colorAccessor is returning the numbers 0..(r.length-1), just call

scatterPlot.colors(d3.scale.ordinal().domain(d3.range(r.length)).range(r))

instead of

scatterPlot.ordinalColors(r)

[alexnb]

@gordonwoodhull thanks a lot for this suggestion. It works (http://jsfiddle.net/bourbert/3Lh7wzse/7/)

I think this is not a bug then: if the range is configured correclty, the colors are properly assigned, so this issue is resolved?

[gordonwoodhull]

Still looks like a crazy workaround to me, rather than "configured correctly"! Unless I'm missing something.

If the scatter plot is calling getColor without arguments, causing undefined to be added to the domain, I think that qualifies as a bug.

[gordonwoodhull]

Looks like the code was debugged for only the scatter series use case - if the colorAccessor doesn't use d or i but just fetches (say) the chart group name, which is the default for the scatter plot, then getColor is happy with no arguments.

The larger problem is that legendables needs to walk the data to find out which colors are being used, and then build a list of legend items out of that. One solution, as shown in my answer to this SO question

https://stackoverflow.com/questions/53653267/add-legend-to-dc-js-scatterplot

is to project all points by color, build a map keyed by those colors, and then produce legendables with that:

myChart.legendables = function () {
    var byColor = {};
    myChart.group().all().forEach(function(d) {
        var color = myChart.colors()(myChart.colorAccessor()(d));
        byColor[color] = {
            chart: myChart,
            name: 'color ' + myChart.colorAccessor()(d),
            color: color
        };
    })
    return Object.values(byColor);
};

Remaining problem is that, in order to add this to the scatter plot as a reasonable default, we'd need another accessor to produce the names for legend items. I think that the only chart which implements legendables for its data points (rather than for series, composite, or stack), is the pie chart, and it doesn't make sense to use the key for the legend item name as that chart does.

A deeper problem is that it's ambiguous what the legend items should represent. I guess the ideal inference would be

• if it's a composite or series, legend should show the "group name", which is an optional argument to chart.group()
• else if it's a stacked chart and there is more than one stack, use the layer name, which is a similar argument to chart.stack()
• otherwise, catalog the colors used (but we need names for them)

Although it's nice and clever, such an algorithm would be confusing unless prominently documented.