Colorbrewer is not defined with angularjs and d3

Question

I am trying to apply gradient colors to the slices of sunburst chart. With reference to the answers on this question , i did some research and started to use the colorbrewer within my code.

Note: I have referenced both d3 and colorbrewer in my app

Code:

  var path = g.append("path")
            .attr("d", arc)
            .style("fill", function(d) {
              var colorPicked =  color((d.children ? d : d.parent).name);
              console.log("ColorPicked",colorPicked)
              return d3.scale.quantize().range(colobrewer.OrRd[8]).domain([0, 16000]);
            })
            .on("click", click);

It says colobrewer is not defined. Probably i am missing something here. How can i apply the gradient to the slices?

Full Application

Answer 1

You are returning a function:

return d3.scale.quantize().range(colobrewer.OrRd[8]).domain([0, 16000]);

you must return a color:

return colorPicked

If you want change color scale. Change here:

83      var color = d3.scale.category10();

From D3 Wiki:

d3.scale.quantize()

Constructs a new quantize scale with the default domain [0,1] and the default range [0,1]. Thus, the default quantize scale is equivalent to the round function for numbers; for example quantize(0.49) returns 0, and quantize(0.51) returns 1.

var q = d3.scale.quantize().domain([0, 1]).range(['a', 'b', 'c']); 
//q(0.3) === 'a', q(0.4) === 'b', q(0.6) === 'b', q(0.7) ==='c'; 
//q.invertExtent('a') returns [0, 0.3333333333333333]

quantize(x)

Given a value x in the input domain, returns the corresponding value in the output range.

Replace your color definition:

var color = d3.scale.category10();

by

  var color=d3.scale.quantize()
            .range(colorbrewer.OrRd[8])
            .domain([0, 160]);

then assign the colors by "value" not "name":

  var path = g.append("path")
    .attr("d", arc)
    .style("fill", function(d) {
      var colorPicked =  color((d.children ? d : d.parent).value);
      return colorPicked
    })
    .on("click", click);