DC.js series chart does not respond to colorAccessor logic

Question

I have been trying to setup a common coloring scheme between a DC js pie chart and a series chart. I have created the coloring scale based on my requirement(need 20 colors for 20 topics) and then I tried to return the domain value through the colorAccessor function from the series chart. However, the colorAccessor function does not seem to work with the series chart as I tried to console.log(d) from within the colorAccesor function but nothing was logged on the console screen. And I guess that is the reason the colors are not being shared for same values across the pie chart and the series chart.

Here's my code

var TopicColorScale = d3.scale.ordinal().domain(["0","1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","default"])
.range(["#18a3ad", "#b85436", "#3fe825","#e82825","#8793a5","#577c77","#c1f9a2","#f2c4cd","#a4f4f9","#003366","#fff4d8","#00245e","#e5ffd8","#471b1b","#ff6666","#ff9811","#11c7ff","#8fbec9","#b5b7e0","#ffc4d9","#f6ff02"]);

//d.key sample value : "topic6,internet,advertising,online" I am extracting the topic number for the domain and want a different color for each topic

topicChart.width(350)
.height(350)
.radius(160)
.innerRadius(30)
.dimension(maxtopicVal)
.title(function(d){ return "Topic : "+d.key+"\n Maxweight sum: "+d.value+'\n Percentage:  '+ Math.round((d.endAngle - d.startAngle) / Math.PI * 50) + '%';})
.group(maxtopicValGroup)
.colorAccessor(function(d){
  return d.key.split(",")[0].slice(5);
})
.colors(TopicColorScale);

This works fine and I get the desired colors on the pie chart. However, when I try to plot the same with the series chart, I get the colors from the scale but same value does not map to same color across the two charts. For example topic 1 has color red on the pie chart and has color blue on the series chart. The code for the series chart is as follows and was implemented after referring to this example : http://dc-js.github.io/dc.js/examples/range-series.html

focusChart
.width(920)
.height(380)
.chart(function(c) { return dc.lineChart(c).interpolate('cardinal').evadeDomainFilter(true); })
.x(d3.scale.linear().domain([1995,2017]))
.brushOn(false)
.yAxisLabel("Topic Weight")
.xAxisLabel("Year")
.elasticY(true)
.dimension(series1Dimension)
.group(series1Group)
.colorAccessor(function(d){
  return d.key.split(",")[0].slice(5);
})
.colors(TopicColorScale)
focusChart.seriesAccessor(function(d) {return " " + d.key[0];})
.keyAccessor(function(d) {return +d.key[1];})
.valueAccessor(function(d) {return +d.value;})

.legend(dc.legend().x(400).itemHeight(13).gap(1).horizontal(10).legendWidth(540).itemWidth(210));focusChart.yAxis().tickFormat(function(d) {return d3.format('d')(d);});
focusChart.xAxis().tickFormat(function(d) {return d3.format('d')(d);});
focusChart.margins().left += 20;

I am unable to figure out what the problem is(Whether there is a problem in my code or not.) It would be great if any of you could help me with the common coloring scheme between the series chart and the pie chart or nudge me in the right direction! Thank you :)

André Carvalho André Carvalho · Accepted Answer · 2017-10-20T16:48:00

I did have a similar problem when i did try to use the colorAccessor. My solution use the same color pallet to ordinalColors and in the series chart i create the sort function to seriesSort.

// code ...
graph.ufDimension =  ndx.dimension(function(d) {
        return d.uf;
    });
graph.stateYearDimension = ndx.dimension(function(d) {
        return [d.uf, +d.year];
    });
graph.ufRateGroup = graph.ufDimension.group().reduceSum(function(d) {
        return +d.rate;
    });
graph.stateYearRateGroup = graph.stateYearDimension.group().reduceSum(function(d) {
        return +d.rate;
    });
// more code ...

graph.pallet=["#FF0000","#FF6A00","#FF8C00","#FFA500","#FFD700","#FFFF00","#DA70D6","#BA55D3","#7B68EE"]

// more code ...

this.lineRateStatesByYear
        .width(fw)
        .height(fh)
        .margins({top: 0, right: 10, bottom: 45, left: 45})
        .chart(function(c) { return dc.lineChart(c).interpolate('cardinal'); })
        .x(d3.scale.ordinal())
        .xUnits(dc.units.ordinal)
        .brushOn(false)
        .yAxisLabel("km²/year")
        .xAxisLabel(years[0].key + " - " + years[years.length-1].key)
        .renderHorizontalGridLines(true)
        .renderVerticalGridLines(true)
        .title(function(d) {
            return "Area/"+d.key[1]+": " + Math.abs(+(d.value.toFixed(2))) + " km²";
        })
        .elasticY(true)
        .yAxisPadding('10%')
        .dimension(this.stateYearDimension)
        .group(this.stateYearRateGroup)
        .mouseZoomable(false)
        .seriesAccessor(function(d) {
            return d.key[0];
        })
        .keyAccessor(function(d) {
            return +d.key[1];
        })
        .valueAccessor(function(d) {
            return +d.value;
        })
        .ordinalColors(graph.pallet)
        .seriesSort(function(a,b) {
            var rank=graph.ufRateGroup.top(Infinity);
            var sr=[];
            rank.forEach(function(d){
                sr[d.key]=+d.value;
            });
            return d3.descending(sr[a], sr[b]);
        })
        .legend(dc.legend().x(fw - graph.lineRateStatesByYear.margins().right - 40).y(5).itemHeight(13).gap(7).horizontal(0).legendWidth(50).itemWidth(40));

    this.pieTotalizedByState
        .height(fh)
        .width(parseInt(fw/4))
        .innerRadius(10)
        .externalRadiusPadding(30)
        .dimension(this.ufDimension)
        .group(this.ufRateGroup)
        .title(function(d) {
            return "Area: " + Math.abs(+(d.value.toFixed(2))) + " km²";
        })
        .label(function(d) {
            return d.key + ":" + parseInt(Math.round(+d.value));
        })
        .ordinalColors(graph.pallet)
        .legend(dc.legend().x(1).y(5).itemHeight(13).gap(7).horizontal(0).legendWidth(50).itemWidth(40));

I have a github repository to test and create my prototypes and the complete code is compound by files included in the entry point dashboard-prodes-rates.html. The main JS file is dashboard-prodes-rates-datatable.js where i put the charts implementation.

DC.js series chart does not respond to colorAccessor logic

1 Answers