migurski/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
	<title>Joinery</title>
    <script src="http://d3js.org/d3.v3.min.js" type="application/javascript"></script>
    <style title="text/css">
    <!--

        div { margin: 5px; padding: 5px 10px; color: white; float: left }

        div.by-index { background-color: red }
        div.by-value { background-color: green }

    -->
    </style>
</head>
<body>
    <script type="application/javascript">
    <!--

        var body = d3.select(document.body),
            arrays = [[1, 2, 3], [2, 3, 4, 5], [6, 7, 8]],
            divs,
            data;

        //
        // Run through once identifying data elements by array index.
        //
        for(var i in arrays)
        {
            console.log('-- do array', arrays[i], 'by index');

            // You can't reuse body.selectAll()
            divs = body.selectAll('div.by-index');

            // Pass in the array only.
            data = divs.data(arrays[i]);

            // Enter and exit chain onto the result of data()
            data.enter().append('div').attr('class', 'by-index').each(enterlog);
            data.exit().remove().each(exitlog);
            data.text(text);
        }

        //
        // Run through again, using id() to identify data elements by value.
        //
        for(var i in arrays)
        {
            console.log('== do array', arrays[i], 'by value');

            // You can't reuse body.selectAll()
            divs = body.selectAll('div.by-value');

            // Pass in the array and the join function.
            data = divs.data(arrays[i], id);

            // Enter and exit chain onto the result of data()
            data.enter().append('div').attr('class', 'by-value').each(enterlog);
            data.exit().remove().each(exitlog);
            data.text(text);
        }

       /**
        * Boring utility functions below.
        */

        function id(num)
        {
            return num;
        }

        function text(d, i)
        {
            return d.toString() + ' (' + i.toString() + ')';
        }

        function enterlog(d, i)
        {
            console.log('enter div', text(d, i));
        }

        function exitlog(d, i)
        {
            console.log('exit div', text(d, i));
        }

    //-->
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>Joinery</title>
	<script src="http://d3js.org/d3.v3.min.js" type="application/javascript"></script>
	<style title="text/css">
	<!--

	div { margin: 5px; padding: 5px 10px; color: white; float: left }

	div.by-index { background-color: red }
	div.by-value { background-color: green }

	-->
	</style>
	</head>
	<body>
	<script type="application/javascript">
	<!--

	var body = d3.select(document.body),
	arrays = [[1, 2, 3], [2, 3, 4, 5], [6, 7, 8]],
	divs,
	data;

	//
	// Run through once identifying data elements by array index.
	//
	for(var i in arrays)
	{
	console.log('-- do array', arrays[i], 'by index');

	// You can't reuse body.selectAll()
	divs = body.selectAll('div.by-index');

	// Pass in the array only.
	data = divs.data(arrays[i]);

	// Enter and exit chain onto the result of data()
	data.enter().append('div').attr('class', 'by-index').each(enterlog);
	data.exit().remove().each(exitlog);
	data.text(text);
	}

	//
	// Run through again, using id() to identify data elements by value.
	//
	for(var i in arrays)
	{
	console.log('== do array', arrays[i], 'by value');

	// You can't reuse body.selectAll()
	divs = body.selectAll('div.by-value');

	// Pass in the array and the join function.
	data = divs.data(arrays[i], id);

	// Enter and exit chain onto the result of data()
	data.enter().append('div').attr('class', 'by-value').each(enterlog);
	data.exit().remove().each(exitlog);
	data.text(text);
	}

	/**
	* Boring utility functions below.
	*/

	function id(num)
	{
	return num;
	}

	function text(d, i)
	{
	return d.toString() + ' (' + i.toString() + ')';
	}

	function enterlog(d, i)
	{
	console.log('enter div', text(d, i));
	}

	function exitlog(d, i)
	{
	console.log('exit div', text(d, i));
	}

	//-->
	</script>
	</body>
	</html>