phoebebright/index.html

## readme.mkd

      
    Raw
  

              readme.mkd
            
          
    Shows behaviour of sortkeys and that date sort is sorting by the string value of the date.
See it running at http://bl.ocks.org/3059149

  
## index.html
<html>
    <head>
        <title>D3 Simple Nest Example</title>
        <script src="http://d3js.org/d3.v2.js"></script>
    </head>

    <body>

    <script>

         // expected date format in csv file
         var in_format = d3.time.format("%Y-%m-%d");

         d3.csv("./nest1.csv", function(csv_data){

            // coerce csv data into correct formats
            csv_data.forEach(function(line) {
                line.time = parseInt(line.time);
                line.date = in_format.parse(line.date);
            })

            // now create one array for each unique group
            var nested_data = d3.nest()
                .key(function(d) { return d.group; })
                .entries(csv_data);


            console.debug(nested_data);
            alert('Key: group, Sort:None\n'+dump(nested_data));


            /*
            OR nest by date
            */

            var nested_data = d3.nest()
                .key(function(d) { return d.date; })
                .entries(csv_data);


            console.debug(nested_data);
            alert('Key: date, Sort:None\n'+dump(nested_data));

            // ADD sortKeys

            var nested_data = d3.nest()
                .key(function(d) { return d.date; })
                .sortKeys(d3.ascending)
                .entries(csv_data);


            console.debug(nested_data);
            alert('Key: date, Sort:ascending\nEXPECTING TO BE SORTED BY DATE'+dump(nested_data));


            /*
            OR nest by time
            */

            var nested_data = d3.nest()
                .key(function(d) { return d.time; })
                .entries(csv_data);


            console.debug(nested_data);
            alert('Key: time, Sort:None\n'+dump(nested_data));

            // ADD sortKeys

            var nested_data = d3.nest()
                .key(function(d) { return d.time; })
                .sortKeys(d3.ascending)
                .entries(csv_data);


            console.debug(nested_data);
            alert('Key: time, Sort:ascending\n'+dump(nested_data));


        });


function dump(arr,level) {
    // from this page: http://www.openjs.com/scripts/others/dump_function_php_print_r.php
	var dumped_text = "";
	if(!level) level = 0;

	//The padding given at the beginning of the line.
	var level_padding = "";
	for(var j=0;j<level+1;j++) level_padding += "    ";

	if(typeof(arr) == 'object') { //Array/Hashes/Objects
		for(var item in arr) {
			var value = arr[item];

			if(typeof(value) == 'object') { //If it is an array,
				dumped_text += level_padding + "'" + item + "':\n";
				dumped_text += dump(value,level+1);
			} else {
				dumped_text += level_padding + "'" + item + "' => \"" + value + "\"\n";
			}
		}
	} else { //Stings/Chars/Numbers etc.
		dumped_text = "===>"+arr+"<===("+typeof(arr)+")";
	}
	return dumped_text;
}

    </script>

    </body>
</html>


## nest1.csv

          
            group
            date
            time

            
              one
              2012-01-01
              4

            
              one
              2012-01-01
              6

            
              two
              2012-01-06
              3

            
              three
              2012-01-01
              4

            
              three
              2012-01-05
              3
	<html>
	<head>
	<title>D3 Simple Nest Example</title>
	<script src="http://d3js.org/d3.v2.js"></script>
	</head>

	<body>

	<script>

	// expected date format in csv file
	var in_format = d3.time.format("%Y-%m-%d");

	d3.csv("./nest1.csv", function(csv_data){

	// coerce csv data into correct formats
	csv_data.forEach(function(line) {
	line.time = parseInt(line.time);
	line.date = in_format.parse(line.date);
	})

	// now create one array for each unique group
	var nested_data = d3.nest()
	.key(function(d) { return d.group; })
	.entries(csv_data);


	console.debug(nested_data);
	alert('Key: group, Sort:None\n'+dump(nested_data));


	/*
	OR nest by date
	*/

	var nested_data = d3.nest()
	.key(function(d) { return d.date; })
	.entries(csv_data);


	console.debug(nested_data);
	alert('Key: date, Sort:None\n'+dump(nested_data));

	// ADD sortKeys

	var nested_data = d3.nest()
	.key(function(d) { return d.date; })
	.sortKeys(d3.ascending)
	.entries(csv_data);


	console.debug(nested_data);
	alert('Key: date, Sort:ascending\nEXPECTING TO BE SORTED BY DATE'+dump(nested_data));


	/*
	OR nest by time
	*/

	var nested_data = d3.nest()
	.key(function(d) { return d.time; })
	.entries(csv_data);


	console.debug(nested_data);
	alert('Key: time, Sort:None\n'+dump(nested_data));

	// ADD sortKeys

	var nested_data = d3.nest()
	.key(function(d) { return d.time; })
	.sortKeys(d3.ascending)
	.entries(csv_data);


	console.debug(nested_data);
	alert('Key: time, Sort:ascending\n'+dump(nested_data));


	});


	function dump(arr,level) {
	// from this page: http://www.openjs.com/scripts/others/dump_function_php_print_r.php
	var dumped_text = "";
	if(!level) level = 0;

	//The padding given at the beginning of the line.
	var level_padding = "";
	for(var j=0;j<level+1;j++) level_padding += " ";

	if(typeof(arr) == 'object') { //Array/Hashes/Objects
	for(var item in arr) {
	var value = arr[item];

	if(typeof(value) == 'object') { //If it is an array,
	dumped_text += level_padding + "'" + item + "':\n";
	dumped_text += dump(value,level+1);
	} else {
	dumped_text += level_padding + "'" + item + "' => \"" + value + "\"\n";
	}
	}
	} else { //Stings/Chars/Numbers etc.
	dumped_text = "===>"+arr+"<===("+typeof(arr)+")";
	}
	return dumped_text;
	}

	</script>

	</body>
	</html>
group	date	time
one	2012-01-01	4
one	2012-01-01	6
two	2012-01-06	3
three	2012-01-01	4
three	2012-01-05	3