baseHtml

_.md

[ Launch: baseSvg ] 9912042 by Vextasy

config.json

{"description":"baseHtml","endpoint":"","display":"div","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"inline-console":false,"thumbnail":"http://i.imgur.com/sx3BSMp.png"}

inlet.css

table.datatable {
  border: 1px solid;
}

table.datatable th,
table.datatable td
{
    background-color: #dbdbff;
	padding: 11px;

}

inlet.js

var headData = [['hdr1', 'hdr2', 'hdr3']];
var bodyData = [
  [1, 2, 3],
  [10, 20, 30]
  ];


var display = d3.select('section#display');
display.select('table').remove();
var table = display.selectAll('table').data([1])
table.enter().append('table').classed('datatable', true)

// header
var thead = table.selectAll('thead').data([1]);
thead.enter().append('thead');

var htr = thead.selectAll('tr').data(headData);
htr.enter().append('tr');
var hth = htr.selectAll('th').data(function(d,i){ return d;});
hth.enter().append('th');

hth.each(function(d, i){
  var sel = d3.select(this);
  sel.text(d);
});

// body 
var tbody = table.selectAll('tbody').data([1]);
tbody.enter().append('tbody');
var tr = tbody.selectAll('tr').data(bodyData);
tr.enter().append('tr');
tr.exit().remove();
var td = tr.order().selectAll('td').data(function(d) { return d; });
td.enter().append('td');
td.text(function(d) { return d; });