JSFiddle - React, Tailwind, and code Playground

by nishant78

JavaScript

var dummy = [

    ['john', 10, 30, 40, 40, 55, 36, 74, 39, 29],
    ['Alex', 32, 22, 33, 24, 35, 36, 57, 28, 29],
    ['Mark', 34, 13, 43, 43, 25, 46, 67, 48, 59],
    ['Jane', 44, 25, 33, 24, 15, 26, 74, 48, 59],
    ['Tina', 55, 62, 53, 44, 53, 56, 47, 83, 92],
    ['Lane', 67, 23, 23, 34, 56, 26, 77, 78, 79],
    ['Barry', 87, 42, 53, 84, 75, 66, 75, 28, 91],
    ['Clark', 88, 62, 37, 44, 53, 46, 73, 28, 19],
    ['Cisco', 97, 26, 63, 44, 35, 62, 27, 82, 19]

];
var rowLabel = ['-', 'Math', 'Science', 'History', 'English', 'IT', 'Health', 'Social', 'Politics'];


// Using RBG
var colors = [{
    r: 255,
    g: 0,
    b: 0
}, {
    r: 0,
    g: 255,
    b: 0
}, {
    r: 0,
    g: 0,
    b: 255
}, {
    r: 255,
    g: 255,
    b: 0
}, {
    r: 255,
    g: 140,
    b: 0
}, {
    r: 230,
    g: 230,
    b: 250
}, {
    r: 25,
    g: 25,
    b: 25
}, {
    r: 165,
    g: 42,
    b: 42
}, {
    r: 127,
    g: 0,
    b: 255
}, {
    r: 0,
    g: 255,
    b: 255
}];

  var alpha = d3.scale.linear().domain([0, 100]).range([0, 1]);

var table = d3.select("body").append("table");

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


thead.append("tr")
    .selectAll("th")
    .data(rowLabel)
    .enter()
    .append("th")
    .text(function (d) {
    return d;
})

var rows = tbody.selectAll("tr")
    .data(dummy)
    .enter()
    .append("tr");

var cells = rows.selectAll("td")
    .data(function (d, i) {
    //d.shift();
    //d.unshift(rowLabel[i]);
    return d;
})
    .enter()
    .append("td")
    .style('background-color', function (d, i) {
    return 'rgba(' + colors[i].r + ',' + colors[i].g + ',' + colors[i].b + ',' + alpha(d) + ')';
})
    .text(function (d) {
    return d;
});