closrks/data.js

## data.js
var matrix = [
  [11975,  5871, 8916, 2868],
  [ 1951, 10048, 2060, 6171],
  [ 8010, 16145, 8090, 8045],
  [ 1013,   990,  940, 6907]
];

/* data */

// key function
// .data(data, function (d) { return d.name } );
// enter() is newly created nodes
// exit() is extra nodes
// update() is the ones that matched

// appends a table to body
// select blank references to table rows
// finds four elements in matrix for four table rows and appends
var tr = d3.select('body').append('table').selectAll('tr')
            .data(matrix)
        .enter().append('tr');

// selects tds on tr which dont yet exist
// uses data to create 4 table data per row
// appends elements
// uses the data as a text in the appeneded elements
var td = tr.selectAll('td')
            .data(function (d) { return d; })
        .enter().append('td')
            .text(function (d) { return d; } )

// clear body
d3.select('table').remove();

/* enter() */

// the enter selection creates nodes
// on append they are merged into the update
d3.select('body').selectAll('div')
        .data([1,2,3,4,5])
    .enter().append('div')
        .text( function (d) { return d; } );

/* exit() */

// var div will refer to updating selection [3,4,5]
var div = d3.select('body').selectAll('div')
            .data([3,4,5,6,7,8], function (d) { return d; } );
// adds new [6,7,8]
div.enter().append('div')
    .text(function (d) { return d; });
// remove non mapped
div.exit().remove();
// divs are not out of order but lets assign index
d3.selectAll('div').attr('index', function (d, i) { return i; } )

/* filter */

// using filter for selections
var odds = d3.selectAll('div').filter(function (d, i) { return i & 1; });
odds.style('color', 'orange');
var evens = d3.selectAll('div').filter(':nth-child(even)');
evens.style('color', 'red');

// clear body
d3.selectAll('div').remove();

// setup
d3.select('body').html('<ul id="list"><li data-username="shawnbot">Shawn Allen</li><li data-username="mbostock">Mike Bostock</li></ul>')

/* datum, sort, order */
// binds data in _data_ property
// sort will sort them
// order will re-enter elements in order they are selected
d3.selectAll('#list li')
    .datum( function () {return this.dataset;})
    .sort( function(a,b) { return d3.ascending(a.username, b.username); });


## index.html
<html>
    <header>
        <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    </header>

    <body>


    </body>
</html>
	var matrix = [
	[11975, 5871, 8916, 2868],
	[ 1951, 10048, 2060, 6171],
	[ 8010, 16145, 8090, 8045],
	[ 1013, 990, 940, 6907]
	];

	/* data */

	// key function
	// .data(data, function (d) { return d.name } );
	// enter() is newly created nodes
	// exit() is extra nodes
	// update() is the ones that matched

	// appends a table to body
	// select blank references to table rows
	// finds four elements in matrix for four table rows and appends
	var tr = d3.select('body').append('table').selectAll('tr')
	.data(matrix)
	.enter().append('tr');

	// selects tds on tr which dont yet exist
	// uses data to create 4 table data per row
	// appends elements
	// uses the data as a text in the appeneded elements
	var td = tr.selectAll('td')
	.data(function (d) { return d; })
	.enter().append('td')
	.text(function (d) { return d; } )

	// clear body
	d3.select('table').remove();

	/* enter() */

	// the enter selection creates nodes
	// on append they are merged into the update
	d3.select('body').selectAll('div')
	.data([1,2,3,4,5])
	.enter().append('div')
	.text( function (d) { return d; } );

	/* exit() */

	// var div will refer to updating selection [3,4,5]
	var div = d3.select('body').selectAll('div')
	.data([3,4,5,6,7,8], function (d) { return d; } );
	// adds new [6,7,8]
	div.enter().append('div')
	.text(function (d) { return d; });
	// remove non mapped
	div.exit().remove();
	// divs are not out of order but lets assign index
	d3.selectAll('div').attr('index', function (d, i) { return i; } )

	/* filter */

	// using filter for selections
	var odds = d3.selectAll('div').filter(function (d, i) { return i & 1; });
	odds.style('color', 'orange');
	var evens = d3.selectAll('div').filter(':nth-child(even)');
	evens.style('color', 'red');

	// clear body
	d3.selectAll('div').remove();

	// setup
	d3.select('body').html('<ul id="list"><li data-username="shawnbot">Shawn Allen</li><li data-username="mbostock">Mike Bostock</li></ul>')

	/* datum, sort, order */
	// binds data in _data_ property
	// sort will sort them
	// order will re-enter elements in order they are selected
	d3.selectAll('#list li')
	.datum( function () {return this.dataset;})
	.sort( function(a,b) { return d3.ascending(a.username, b.username); });
	<html>
	<header>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	</header>

	<body>



	</body>
	</html>