JSFiddle - React, Tailwind, and code Playground

by Dheepan Ramanan

HTML

<script src="http://fonts.googleapis.com/css?family=Open+Sans:400,300"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://rawgit.com/gka/d3-jetpack/master/d3-jetpack.js"></script>


<body></body>

CSS

body { font-family: 'Helvetica Neue', Helvetica; font-weight: 300; padding: 20px;}
    th { text-align: left; }
    th, td { padding: 0 1em 0.5ex 0;}
    th.center, td.center { text-align: center; }
    th.num, td.num { text-align: right; }

JavaScript

var sentcolor = d3.scale.linear()
.domain([-1.75, 0, 2])
.range(["red", "gray", "green"]);

var data = [
	{"Room":"OCEANVIEW","Sentiment":0.6,"Cruise Experience":" 1 CRUISE (FIRST)","Sentiment.1":0.8,"Traveled With?":"COUPLE","Sentiment.2":0.61},
	{"Room":"INSIDE","Sentiment":0.59,"Cruise Experience":"2-3 CRUISES","Sentiment.1":0.63,"Traveled With?":"SINGLES\\/FRIENDS","Sentiment.2":0.57},
	{"Room":"BALCONY","Sentiment":0.56,"Cruise Experience":"4-6 CRUISES","Sentiment.1":0.53,"Traveled With?":"FAMILY W CHILDREN","Sentiment.2":0.55},
	{"Room":"SUITE","Sentiment":0.48,"Cruise Experience":"7+ CRUISES","Sentiment.1":0.46,"Traveled With?":"LARGE GROUP","Sentiment.2":0.48}
	];

var columns = [
        { head: 'Room', cl: 'title', html: ƒ('Room') },
        { head: 'Sentiment', cl: 'num', html: ƒ('Sentiment', d3.format('.2f')) },
        { head: 'Cruise Experience', cl: 'center', html: ƒ('Cruise Experience') },
        { head: 'Sentiment', cl: 'num', html: ƒ('Sentiment.1', d3.format('.2f')) },
        { head: 'Traveled With?', cl: 'center', html: ƒ('Traveled With?') },
        { head: 'Sentiment', cl: 'num', html: ƒ('Sentiment.2' , d3.format('.2f')) },
    ];
var table = d3.select('body')
        .append('table');

table.append('thead').append('tr')
	.selectAll('th')
	.data(columns).enter()
	.append('th')
	.attr('class', ƒ('cl'))
	.text(ƒ('head'));

table.append('tbody')
        .selectAll('tr')
        .data(data).enter()
        .append('tr')
        .style("background-color", function(d, i){if(i%2 == 0){return "#D8D8D8";}})//shading for alternate table
        .selectAll('td')
        .data(function(row, i) {
            return columns.map(function(c) {
                // compute cell values for this specific row
                var cell = {};
                d3.keys(c).forEach(function(k) {
                    cell[k] = typeof c[k] == 'function' ? c[k](row,i) : c[k];
                });
                return cell;
            });
        }).enter()
       ...