[dc.js] line chart

check colour is set properly after update (line AND dots)

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.3.3/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.1/crossfilter.min.js"></script>
<script src="http://dc-js.github.io/dc.js/js/dc.js"></script>
<link rel="stylesheet" href="http://dc-js.github.io/dc.js/css/dc.css">
<div id="line-chart"></div>

JavaScript

var data = [
  {date: "2011-11-14T16:17:54Z", quantity: 2, total: 190, tip: 100, type: "tab"},
  {date: "2011-11-14T16:20:19Z", quantity: 2, total: 190, tip: 100, type: "tab"},
  {date: "2011-11-14T16:28:54Z", quantity: 1, total: 300, tip: 200, type: "visa"},
  {date: "2011-11-14T16:30:43Z", quantity: 2, total: 90, tip: 0, type: "tab"},
  {date: "2011-11-14T16:48:46Z", quantity: 2, total: 90, tip: 0, type: "tab"},
  {date: "2011-11-14T16:53:41Z", quantity: 2, total: 90, tip: 0, type: "tab"},
  {date: "2011-11-14T16:54:06Z", quantity: 1, total: 100, tip: 0, type: "cash"},
  {date: "2011-11-14T16:58:03Z", quantity: 2, total: 90, tip: 0, type: "tab"},
  {date: "2011-11-14T17:07:21Z", quantity: 2, total: 90, tip: 0, type: "tab"},
  {date: "2011-11-14T17:22:59Z", quantity: 2, total: 90, tip: 0, type: "tab"},
  {date: "2011-11-14T17:25:45Z", quantity: 2, total: 200, tip: 0, type: "cash"},
  {date: "2011-11-14T17:29:52Z", quantity: 1, total: 200, tip: 100, type: "visa"}
];
var cf = crossfilter(data);

var timeDimension = cf.dimension(function(d){ return new Date(d.date); });
var totalGroup = timeDimension.group().reduceSum(function(d){ return d.total; });
var red = function(){ return 'red'; };
var blue = function(){ return 'blue'; };

var lineChart = dc.lineChart("#line-chart")
    .brushOn(false)
    .width(400)
    .height(200)
    .x(d3.scaleLinear().domain([1000, 251000]))
    .dimension(timeDimension)
    .group(totalGroup)
   .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;
});

dc.renderAll();