Color code a data table in dc.js

2
votes

I have a vary basic question and very little understanding of dc.js. I am trying to create a score card using the data that i have and display it as a data table using dc.js.I am processing the data through crossfilter.

How can i color code the entries in the data table. Say my table will have values from -1 to 1 and i want to color the cells as follows: -1 to 0 : decreasing gradient of red 0 : white 0 to 1 : increasing gradient of green

I know i am not able to provide any code but thats because i am at a total loss on how to achieve this. Help will be really appreciated.

Thank you.

1
dc.jscrossfilter
Another, more hacky, but d3-based answer here: stackoverflow.com/questions/29156839/… - Gordon
This is great Gordon :) Thanks a ton - anmol koul
@Gordon: Hey Gordon, Sorry for calling you out but could you please take a look at this stackoverflow.com/questions/29266793/… Its been a week and i have tried almost everything. FInally had to replace choropleth with a leaflet based dc chart but why choropleth didnt work is still bugging me. Thanks and regards. - anmol koul

1 Answers

2
votes

You can do that with css.

I'm using datatables jquery plugin.

{ targets: 3, 
data: function (d) {
    if (d.Rating<5) {       return '<span class="red">'+d.Rating+'</span>' ;}
    else if (d.Rating<7) {  return '<span class="yellow">'+d.Rating+'</span>' ;}
    else if (d.Rating<=10) {return '<span class="green">'+d.Rating+'</span>' ;}
    else {                  return '<span class="grey">'+d.Rating+'</span>' ;}
}}

you can make as much categories as you want.
And modify appearence with css like this. 

.red{ background-color:red; }
.yellow{ background-color:yellow; }
.green{ background-color:green; }