jeffa/d3table.html

## d3table.html
<!DOCTYPE html>
<html lang='en'>
<head>
    <link href='/css/bootstrap.css' rel='stylesheet'>
    <script src='/js/d3.v2.min.js'></script>
    <script src='/js/jquery.min.js'></script>
    <script src='/js/jquery.ba-bbq.min.js'></script>
</head>
<body>


<script>
var params = jQuery.deparam.querystring();

var SIZE = params['size'] ? parseInt( params['size'] ) : 32;
var COLS = params['cols'] ? parseInt( params['cols'] ) : 8;

function fillTable( table, data ) {

    var tr = table.select('tbody').selectAll('tr');

    //update
    tr.data(data)
        .selectAll('td')
        .data( function(row) {return row} )
            .text( function(col) {return col} )
    ;

    //insert
    tr.data(data)
        .enter()
            .append('tr')
            .selectAll('td')
            .data( function(row) {return row} )
                .enter()
                    .append('td')
                    .text( function(col) {return col} )
    ;
}

// d3.range splits on nulls ... so we insert nulls to create delimiters
function insertNulls( list, pos ) {
    var tmp = list.slice();
    for (var i = tmp.length - 1; i > 1; i--) {
        if (i % pos == 0) {
           tmp.splice( i, 0, null );
        }
    }
    return tmp;
}

function permutate(table, range) {
    range.push( range.shift() );
    var matrix = d3.split( insertNulls( range, COLS ) );
    fillTable( table, matrix );
}

d3.select('body').append('p').text('D3 Dynamic Table Test').attr('class','lead');

var table = d3.select('body').append('table').attr( 'class', 'table table-striped table-bordered table-hover' );
table.append('thead');
table.append('tbody');

var range  = d3.range( 1, SIZE + 1 );
var matrix = d3.split( insertNulls( range, COLS ) );

fillTable( table, matrix );
</script>

<center>
<button type="submit" class="btn" onclick="permutate(table, range)">permutate</button>
</center>

</body>
</html>
	<!DOCTYPE html>
	<html lang='en'>
	<head>
	<link href='/css/bootstrap.css' rel='stylesheet'>
	<script src='/js/d3.v2.min.js'></script>
	<script src='/js/jquery.min.js'></script>
	<script src='/js/jquery.ba-bbq.min.js'></script>
	</head>
	<body>


	<script>
	var params = jQuery.deparam.querystring();

	var SIZE = params['size'] ? parseInt( params['size'] ) : 32;
	var COLS = params['cols'] ? parseInt( params['cols'] ) : 8;

	function fillTable( table, data ) {

	var tr = table.select('tbody').selectAll('tr');

	//update
	tr.data(data)
	.selectAll('td')
	.data( function(row) {return row} )
	.text( function(col) {return col} )
	;

	//insert
	tr.data(data)
	.enter()
	.append('tr')
	.selectAll('td')
	.data( function(row) {return row} )
	.enter()
	.append('td')
	.text( function(col) {return col} )
	;
	}

	// d3.range splits on nulls ... so we insert nulls to create delimiters
	function insertNulls( list, pos ) {
	var tmp = list.slice();
	for (var i = tmp.length - 1; i > 1; i--) {
	if (i % pos == 0) {
	tmp.splice( i, 0, null );
	}
	}
	return tmp;
	}

	function permutate(table, range) {
	range.push( range.shift() );
	var matrix = d3.split( insertNulls( range, COLS ) );
	fillTable( table, matrix );
	}

	d3.select('body').append('p').text('D3 Dynamic Table Test').attr('class','lead');

	var table = d3.select('body').append('table').attr( 'class', 'table table-striped table-bordered table-hover' );
	table.append('thead');
	table.append('tbody');

	var range = d3.range( 1, SIZE + 1 );
	var matrix = d3.split( insertNulls( range, COLS ) );

	fillTable( table, matrix );
	</script>

	<center>
	<button type="submit" class="btn" onclick="permutate(table, range)">permutate</button>
	</center>

	</body>
	</html>