How to set d3 color scale for each element in object array?

Question

I am generating a HTML table using d3 for an object array. I want to color background with gradient level depending on the value range.

I used a category10 domain scale colors applied for columns without gradient. Is there anyway to specify min max to d3 and set gradient. This is the result I am getting I need make linear values of engine torque with gradient and categorical Engine Type with different colors depending on value

Data array looks like this

 [{ EngineType="Piston",  torque=10,  rpm=1}, { EngineType="Piston",  torque=10,  rpm=1}]

Javascript code

var color = d3.scale.category10()
    .domain([d3.min(data), d3.max(data)]);

var rows = d3.select('tbody')
    .selectAll('tr')
    .data(data, function(d) { return d[config.key]})

var entertd = rows.enter()
    .append('tr')
        .selectAll('td')
            .data(function(d) { return d3.map(d).values() })
        .enter()
            .append('td')
            .attr('bgcolor',color)

entertd.append('span')
var td = rows.selectAll('td')
.style({"padding": "0px 10px 0px 10px"})
    .data(function(d) { return d3.map(d).entries() })
    .attr('class', function (d) { return d.key })

td.select('span')
    .text(function(d) {
        return d.value
    })

Similar scenario in fiddle

Answer 1

If I understand you correctly, you want to convert the color from category10() to a gradient based on this color.

If so:

1. you can use the function .ColorLuminance() I found here to get a lighter color so we can create a gradient by the both colors.
2. Set the background as gradient using .attr() like you did, but instead of bgcolor , set style:backougrnd like this: attr('style','background:linear-gradient(to bottom, ' + color(0) + ' 0%,' + ColorLuminance(color(0), 0.5) + ' 100%)');

The full code:

 function tabulate(data, columns) { var table = d3.select("#container").append("table"), thead = table.append("thead"), tbody = table.append("tbody"); // append the header row thead.append("tr") .selectAll("th") .data(columns) .enter() .append("th") .text(function(column) { return column; }); // create a row for each object in the data var rows = tbody.selectAll("tr") .data(data) .enter() .append("tr"); //Color scale var color = d3.scale.category10() .domain([d3.min(data), d3.max(d3.values(data))]); // create a cell in each row for each column var cells = rows.selectAll("td") .data(function(row) { return columns.map(function(column) { return {column: column, value: row[column]}; }); }) .enter() .append("td") .text(function(d) { return d.value; }).attr('style','background:linear-gradient(to bottom, ' + color(0) + ' 0%,' + ColorLuminance(color(0), 0.5) + ' 100%)'); return table; } var people = [ {EngineType: "Rotary", torque: 30, rpm: 21}, {EngineType: "Piston", torque: 32, rpm: 23}, {EngineType: "Rotary", torque: 29, rpm: 21}, {EngineType: "Piston", torque: 31, rpm: 12} ]; // render the table var peopleTable = tabulate(people, ["EngineType", "torque", "rpm"]); // uppercase the column headers peopleTable.selectAll("thead th") .text(function(column) { return column.charAt(0).toUpperCase() + column.substr(1); }); // sort by age peopleTable.selectAll("tbody tr") .sort(function(a, b) { return d3.descending(a.age, b.age); }); function ColorLuminance(hex, lum) { // validate hex string hex = String(hex).replace(/[^0-9a-f]/gi, ''); if (hex.length < 6) { hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2]; } lum = lum || 0; // convert to decimal and change luminosity var rgb = "#", c, i; for (i = 0; i < 3; i++) { c = parseInt(hex.substr(i*2,2), 16); c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16); rgb += ("00"+c).substr(c.length); } return rgb; } 

 td, th { padding: 2px 4px; } th { font-weight: bold; } 

 <script type="text/javascript" src="http://mbostock.github.com/d3/d3.min.js"></script> <div id="container"></div> 

http://jsbin.com/qalaxu/edit?js