On DC.js github , the Lon Riesberg Stock Market Selection Strategy is an example of using the dc.js library.
He was able to colorize the line codes, as shown in the figure below, which I am trying to simulate.

See here for my code: http://codepen.io/chriscruz/pen/myaWvR?editors=101
In particular, how to change the color of the lines so that all lines with the name "Red" are red, and "Blue" is "Blue", and "White" is white.
JavaScript:
items = [
{Id: "01", Name: "Red", Price: "1.00", Quantity: "1",TimeStamp:111},
{Id: "02", Name: "White", Price: "10.00", Quantity: "1",TimeStamp:222},
{Id: "04", Name: "Blue", Price: "9.50", Quantity: "10",TimeStamp:434},
{Id: "03", Name: "Red", Price: "9.00", Quantity: "2",TimeStamp:545},
{Id: "06", Name: "White", Price: "100.00", Quantity: "2",TimeStamp:676},
{Id: "05",Name: "Blue", Price: "1.20", Quantity: "2",TimeStamp:777}
];
var ndx = crossfilter(items);
var Dim = ndx.dimension(function (d) {return d.Name;})
dc.dataTable("#Table")
.width(250).height(800)
.dimension(Dim)
.group(function(d) {return ' '})
.size(100)
.columns([
function(d) { return d.Id;},
function(d) { return d.Name;},
function(d) { return d.Price;},
function(d) { return d.Quantity;},
function(d) { return d.TimeStamp;},
])
.sortBy(function(d){ return d.Price;})
.order(d3.ascending);
dc.renderAll();
HTML:
<table class='table table-hover' id='Table'>
<thead>
<tr class='header'>
<th>ID</th>
<th>Name</th>
<th>Price</th>
<th>Quantity</th>
<th>Timestamp</th>
</tr>
</thead>
</table>
How can this be done, considering only those attributes that dc.js has size, columns, sortBy and order?