Dynamic colors in DC charts

Question

I'm building a data dashboard using DC.js and was wondering if it was possible to change the color of the slices in a pie chart dynamically based on the value in the field it is referring to.

Basically I've built a pie chart aggregating the costume colors of different superheroes and I'd love to be able to color each slice with the color it is referring to - so the slice for 'Black' is colored black, the slice for 'Green' is colored green and so forth.

I'm fairly new to DC.js so accept that it may not be possible, but wanted to throw it out there and see if it could be done!

I tried including an array within .ordinalColors but couldn't figure out if there was a way to pull in the data from the field dynamically. I'm assuming that I'd have to change the data in the .csv file to a string that could be recognised as a color reference, but not sure how to go about doing that.

function show_costume_color(ndx) {
   var costume_color_dim = ndx.dimension(dc.pluck('Costume Colour'));
   var costume_color = costume_color_dim.group();

dc.pieChart('#costume-color')
    .width(500)
    .height(500)
    .radius(500)
    .innerRadius(100)
    .slicesCap([7])
    .transitionDuration(1500)
    .dimension(costume_color_dim)
    .group(costume_color);
}

CSV data comes in the below format

ID,name,Gender,Eye color,Race,Hair color,Publisher,Alignment,Superpower,Superpower Strength Level,Costume 
Colour
0,A-Bomb,Male,Yellow,Human,No Hair,Marvel Comics,Good,Superhuman 
Strength,10,None
1,Abin Sur,Male,Blue,Ungaran,No Hair,DC Comics,Good,Cosmic Power,40,Green

Answer 1

Yes, of course. Everything is specified dynamically in dc.js.

Assuming you are using dc.js v3 (and d3 v4+) the way I would suggest doing this is by creating another CSV file with the color assignments you want, something like

Name, RGB
Red, #ff1122
Blue, #1133ff
...

Then you can load the second file in parallel with your data using Promise.all(),

Promise.all([d3.csv('data.csv'), d3.csv('colors.csv')])
    .then(function(data, colors) {
  // rest of code will go here
});

ordinalColors is a nice convenience method, but if you want complete control, and to understand exactly what's going on, it's better to supply your own color scale. In this case, we want an ordinal scale, which maps specific discrete values to specific colors.

Under the covers, dc.js always deals with colors by using the colorAccessor to fetch a value for the the item, and then mapping this value using a color scale. You can think of the value that the accessor returns as a "color name", which is pretty convenient because it's exactly what you want here.

So you can populate a d3.scaleOrdinal with the domain of color names and the range of RGB colors:

var colorScale = d3.scaleOrdinal()
    .domain(colors.map(row => row.Name))
    .range(colors.map(row => row.RGB));

Now supply it to your chart using .colors():

chart.colors(colorScale);

What's really handy about this approach is that you can supply the same color scale for multiple charts, in order to make sure they are consistent. This is something that you don't get automatically in dc.js, because charts don't know very much about each other.

Answer 2

So, I managed to figure it out through an extensive period of trial and error and now I'm off and away with my dashboard. Thanks for your help, Gordon - it really made the difference! It needs a bit of tidying up but my working test code is below.

// Bring in data from both csv files

Promise.all([d3.csv("../data/heroes_information.csv"), 
d3.csv("../data/costume_colors.csv")])
    .then(function(data) {

        // Tidy up data before use

        data.forEach(function(d) {
            d.Height = +d.Height;
            d.Weight = +d.Weight;
            d.Strength = +d.Strength;
        });

        // Bring in colorScale to dynamically color pie chart slices

        var ndxcol = crossfilter(data[1]);

        var colorScale = d3.scaleOrdinal()
            .domain(data[1].map(row => row.Name))
            .range(data[1].map(row => row.RGB));

        // Bring in superhero data

        var ndx = crossfilter(data[0]);

        // Define chart types

        var publisherSelector = dc.selectMenu('#publisher-selector')
        var genderChart = dc.rowChart('#gender-balance');

        // Define chart dimensions

        var publisherChoice = ndx.dimension(dc.pluck('Publisher'));
        var genderBalance = ndx.dimension(dc.pluck('Gender'));

        // Define chart groups

        var genderNumber = genderBalance.group();
        var publisherNumber = publisherChoice.group();

        // Draw charts

        publisherSelector
            .dimension(publisherChoice)
            .group(publisherNumber);

        genderChart
            .width(500)
            .height(200)
            .margins({ top: 30, right: 30, bottom: 30, left: 30 })
            .dimension(genderBalance)
            .group(genderNumber)
            .gap(6)
            .colors(colorScale)
            .transitionDuration(500)
            .x(d3.scaleOrdinal())
            .elasticX(true);

        dc.renderAll();

    });