Search code examples
javascriptd3.jssunburst-diagram

D3.js v4 colors to names mapping

I am working on a visualization like this one right now:

Sunburst Sequence

In the snippet he is hardcoding the colors like

// Mapping of step names to colors.
var colors = {
  "home": "#5687d1",
  "product": "#7b615c",
  "search": "#de783b",
  "account": "#6ab975",
  "other": "#a173d1",
  "end": "#bbbbbb"
};

I want to define only the colors of the parents. The childrens colors should be a variation of the parents with less opacity. Somehow coded like:

var color = d3.scale.category20();

How would I do this?

Solution

  • d3.heirarchy (https://github.com/d3/d3-hierarchy/blob/master/README.md#hierarchy) returns these properties for each node:

    • node.depth
    • node.parent

    You could use .depth as an input to a function that determines fill opacity, eg higher depth = more opacity. You could use .parent as an input to a function that iterates up to the parent that has parent: null, and set the colour based on that node's value.