dc.js line chart with range of colors

Question

I have a composite graph of two line charts. For one of them i'm attempting to apply a custom color range based on the value of each point on the line:

.colors(['rgb(215,48,39)','rgb(244,109,67)','rgb(253,174,97)','rgb(254,224,144)'])
.colorDomain ([0,3])
.colorAccessor (d,i) ->
  if d.points[i].data.value.avg > 50
     return 0
  else  
    return 3

The problem is I keep getting only one color for the entire graph... Not to mention d returns as an object of all the points instead of a single point... (maybe a hint of the problem?)

Am i doing something wrong here and/or is there an easier way to do this?

Trophy

just FYI, I gave the other line an opacity of 0 so not to confuse it with this one. – Trophy

The issue at github.com/dc-js/dc.js/issues/469 might be relevant to this. – Croat

If you're trying to change the color of different segments of a single line, that's definitely not supported and you'll have to do it with a renderlet. The stacked charts (bar and line) assume that a color will be assigned per stack; that is why all the data points are passed in. – Ventilator

Not that I necessarily agree with this, but it'll take some thinking to figure out a better way to do this. ;-) – Ventilator

@Ventilator thanks for the response.. and yes this is what i'm trying to achieve – Trophy

@Ventilator I meant to add at the end of my last comment "... except I would like the threshold values to be determined by a different value than the y axis (as in via the valueAcessor)" – Trophy

Answer 1

You didn't get an answer so I'll try to look into it with you.

First, I created a fiddle at http://jsfiddle.net/djmartin_umich/4ZwaG/.

.colors( ['rgb(215,48,39)', 'rgb(244,109,67)', 'rgb(253,174,97)', 'rgb(254,224,144)' ] )
.colorDomain ([0,3])
.colorAccessor(function(d, i){
  if(d[i] && d[i].data.value > 150)
     return 3;
  else if(d.data.value > 150)
    return 2;
  else return 1;
});

I had to play around with the color accessor to get it to stop throwing errors. The method was called twice with an array of elements and twice for each element in the array (24 times total).

Once I got it compiling I inspected the chart and saw this:

The chart has a path element that defines the line and a bunch of circles that define the points on the line. The points are part of the tool-tip that display when you hover over the different points on the line.

The path seems to be colored by the value returned when the array of values was passed in and the hover-points on the line are each colored by the value returned for that element.

So the path of the line is given a single color. It sounds like your expectation is for different portions of the line to be colored differently based on their y-value, but this is not how the line is rendered.

The article at http://www.d3noob.org/2013/01/applying-colour-gradient-to-graph-line.html describes how you can use gradients to achieve the effect you desire. I believe the author is "hard-coding" the start and stop points for each gradient, so it won't get you all the way to your answer but it should help you get started.

I hope this helps! -DJ

Croat

Yeah, I think this is closer. But still, the gradient changes along canvas coordinates (a "redundant encoding" as Mike says)... I don't see a way to have a gradient vary along some other dimension which is not one of the canvas coordinates. I think what you would have to do is break the line into segments and then apply separate gradients to each segment. Right now dc.js does not allow you to break up the lines. – Ventilator

@Ventilator how about attempt the offset of gradient? like 0% till 50% segment 1 and 50.001% to 100% is segment2, i dont get this question well, what this men want to achieve, if this bl.ocks.org/mbostock/3969722 one he want to achieve, play scale to determinate the offset, scale(0,100) to your y point ,draw gradient – Southeaster

Yeah, I feel bad about the bounty expiring, but I don't see how to do this. If the gradient is not in sync with Y, then you'd definitely have to break the line up into separate objects for each segment because the colors would not necessarily be consistent between the segments. That's a lot of work as you're pretty much undoing everthing dc.js did and starting over from scratch. – Ventilator