JSFiddle - React, Tailwind, and code Playground

by YOUNY zhu

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>

CSS

svg {
  vertical-align: middle;
  background: rgba(255,255,255, 0.2);
  box-shadow: inset 0 0 3px 0px #CECECE;
}

.header rect{
  fill: #0099FF;
}

.header text{
  fill: white;
  font: 10px sans-serif;
  text-anchor: middle;
}

.cell rect{
  fill: #66FFFF;
}

.cell text{
  fill: black;
  font: 10px sans-serif;
  text-anchor: middle;
}

JavaScript

var margin = {top: 20, right: 30, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var svg = d3.select("body").append("svg")
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom)
          .append("g")
          .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var headerGrp = svg.append("g").attr("class", "headerGrp");
var rowsGrp = svg.append("g").attr("class","rowsGrp");

var fieldHeight = 30;
var fieldWidth = 90;

var previousSort = null;
var format = d3.time.format("%a %b %d %Y");

var jsonData = [
{ "id": 3, "name": "Richy", "male": true, "born": "Sun May 05 2013", "amount": 12000},
{ "id": 1, "name": "Susi", "male": false, "born": "Mon May 13 2013", "amount": 2000},
{ "id": 2, "name": "Patrick", "male": true, "born": "Thu Jun 06 2013", "amount": 17000},
{ "id": 4, "name": "Lorenz", "male": true, "born": "Thu May 09 2013", "amount": 15000},
{ "id": 5, "name": "Christina", "male": false, "born": "Mon Jul 01 2013", "amount": 16000}
];

refreshTable(null);

function refreshTable(sortOn){

	// create the table header	
	var header = headerGrp.selectAll("g")
		.data(d3.keys(jsonData[0]))
	  .enter().append("g")
		.attr("class", "header")
		.attr("transform", function (d, i){
			return "translate(" + i * fieldWidth + ",0)";
		})
		.on("click", function(d){ return refreshTable(d);});
	
	header.append("rect")
		.attr("width", fieldWidth-1)
		.attr("height", fieldHeight);
		
	header.append("text")
		.attr("x", fieldWidth / 2)
		.attr("y", fieldHeight / 2)
		.attr("dy", ".35em")
		.text(String);
	
	// fill the table	
	// select rows
	var rows = rowsGrp.selectAll("g.row").data(jsonData);
	
	// create rows	
	var rowsEnter = rows.enter().append("svg:g")
		.attr("class","row")
		.attr("transform", function (d, i){
			return "translate(0," + (i+1) * (fieldHeight+1) + ")";
		});

	// select cells
	var cells =...