[Dev] D3 : using color variation to visualize a HTML table.

[Mohammed Fawsan]

Hi,

I am working on a D3 project . And I'm stuck in creating the

Highlighted Table [1
<http://www.tableau.com/sites/default/files/media/which_chart_v6_final_0.pdf>
]

So far I have Generated the HTML Table for the given 2D array, And added
the style for background color (each row separate color). But I need to
fill each cell in the row with the variation of color assigned to that row.
And I'm quite not sure how to do that. Can anyone help me out here?


var colorSet = [
    ["#6363FF", "#6373FF"],
    ["#6373FF", "#63A3FF"],
    ["#63A3FF", "#63E3FF"],
    [ "#63E3FF", "#63FFFB"],
    ["#63FFFB", "#63FFCB"],
    ["#63FFCB","#63FF9B"],
    ["#63FF6B", "#7BFF63"],
    ["#7BFF63", "#BBFF63"],

];

var table = d3.select("#tableChart").append("table").attr('class','table');

thead = table.append("thead");
tbody = table.append("tbody")


thead.append("tr")
    .selectAll("th")
    .data(parseColumn(dataset,0))
    .enter()
    .append("th")
    .text(function(d){
        //return d;
    });

var rows = tbody.selectAll("tr")
    .data(newData)
    .enter()
    .append("tr")
    .style('background-color', function(d,i) {
        //return  colours[i];
        return  colours[i];
    })
;


var cells = rows.selectAll("td")
        .data(function(d,i){

            d.shift();
            d.unshift(rowLabel[i]);
            return d;
        })
        .enter()
        .append("td")
        .text(function(d){
            return d;
        })

    ;



[1] - Table 11
<http://www.tableau.com/sites/default/files/media/which_chart_v6_final_0.pdf>

-- 
Mohammed Fawsan
Software Engineering Intern,
Faculty of Engineering, University of Peradeniya.
+94771121195

_______________________________________________
Dev mailing list
Dev@wso2.org
http://wso2.org/cgi-bin/mailman/listinfo/dev