In sequences sunburst, how to give a child the same color of parent?

Question

What to do to give a child the same colour of parent but lighter, I used the following to generate colour

  var color = d3.scale.category20b();

 .style("fill", function(d) { return color((d.children ? d : d.parent).name); })

this code gives a random colour for each node. first image : random colour

the next image is what I need, my code produce it randomly. Gradient colour

I want to make the colour of child is lighter than the colour of parent.

Sorry, I put my result images as a link because I do not have enough reputation. thank you

Floriculture

Answer 1

This was an interesting one. The bulk of the work was in setting up the colors and associated web page types. I had weird issues when trying to use d3.interpolateString() and have shelved that for later investigation. In any case, here is the preparation piece:

var brewerColors = d3.entries(colorbrewer);
// offsets 1-5 look too similar
// offsets 6-13 offer the greatest contrast
// offsets 4 and above are no good
var brewerOffset = 9;
var pageTypes = ["home","product","search","account","other","end"];
var colors = [];
var pages = [];
for (var ct=0; ct<pageTypes.length; ct++) {
    var colorBucket = brewerColors[ct + brewerOffset].value[pageTypes.length];
    for (var ct2=0; ct2<colorBucket.length; ct2++) {
        pages.push(pageTypes[ct] + (ct2 + 1));
        colors.push(colorBucket[ct2]);
    }
}

var ramps = d3.scale.ordinal()
    // do not reverse if center colors are lighter than edge colors
    .domain(pages.reverse())
    .range(colors);

After that, filling the shapes with the appropriate colors was simple:

var path = vis.data([json]).selectAll("path")
    .data(nodes)
    .enter().append("svg:path")
    ...
    .style("fill", function(d) {
        return ramps(d.name + d.depth); // e.g. product1, home2, etc.
    })
    ...

Here is a complete working PLUNK.

NOTE: I suggest you fork the plunk so all is not lost if it gets inadvertently deleted later.

Swiftlet

Thank you for your reply I saw this example but it is not useful with my code, because I don't know the database contents , I want to give the child the same colour of its parent. – Floriculture

You will need to know the types of events you are sequencing. If you list them as pageTypes in the example above, the rest should fall into place. Have you tried that? – Swiftlet

could you please check my sunburst, because I can not do your advice plnkr.co/edit/XrIMel857leFN79zoHor?p=preview – Floriculture

As you noted previously, the solution I presented does not scale beyond a relatively small number of event types. The only way to adapt it to your situation would be to combine your event types into a few generalized categories. But depending on your use case, this might not be desirable. – Swiftlet