empiimp/index.html

## index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Group by table example in D3</title>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
</head>
<body onLoad="run('name')">


<h1>Group by Table</h1>

<div id="group" style="border: 2px solid green;">
</div>

<h1>Original Sort by Table</h1>

<div id="standard">
	<table>
		<thead></thead>
		<tbody></tbody>
	</table>
</div>

<script type="text/javascript">
var i = 0, data = [
    {id: String(i++), mfg: "Meyers", name: "Manx", color: "Red"},
    {id: String(i++), mfg: "Meyers", name: "Towd", color: "Yellow"},
    {id: String(i++), mfg: "EMPI", name: "68/69 Imp", color: "Yellow"},
    {id: String(i++), mfg: "EMPI", name: "70 Imp", color: "Red"},
    {id: String(i++), mfg: "Berrien", name: "Nostalgia", color: "Red"}
];

function run(attrName) {
	transform(attrName);
	group(attrName);
}

run('mfg');

function transform(attrName) {
    t = d3.select("#standard");
	t.select("tbody").selectAll("tr").remove();

// Header
    var th = t.selectAll("thead").selectAll("th")
            .data(jsonToArray(data[0]))
          .enter().append("th")
            .attr("onclick", function (d, i) { return "transform('" + d[0] + "');";})
            .text(function(d) { return d[0]; })


// Rows
    var tr = t.select("tbody").selectAll("tr")
            .data(data)
          .enter().append("tr")
            .sort(function (a, b) { return a == null || b == null ? 0 : stringCompare(a[attrName], b[attrName]); });

// Cells
    var td = tr.selectAll("td")
            .data(function(d) { return jsonToArray(d); })
          .enter().append("td")
            .attr("onclick", function (d, i) { return "transform('" + d[0] + "');";})
            .text(function(d) { return d[1]; });
}

function group(attrName) {
    var g = d3.select("#group");
	g.selectAll("table").remove();

	var nest = d3.nest()
		.key(function(d) { return d[attrName]; })
		.entries(data);

	var table = g.selectAll("table")
		.data(nest)                   //, function(d) { return d.key; });	table.exit().remove();
		.enter()
			.append("table").style("border", "1px solid gray");
	table.append("caption").text(function(d) { return d.key });

// Header
    var th = table.append("thead").selectAll("th")
            .data(jsonToArray(data[0]))
          .enter().append("th")
            .attr("onclick", function (d, i) { return "group('" + d[0] + "');";})
            .text(function(d) { return d[0]; })

// Rows
    var tr = table.append("tbody").selectAll("tr")
            .data(function(d) {
            	return d.values;
            })                       //, function(d) { return d.id; });  //tr.exit().remove();
    	.enter().append("tr")
            .sort(function (a, b) { return a == null || b == null ? 0 : stringCompare(a[attrName], b[attrName]); });

// Cells
    var td = tr.selectAll("td")
            .data(function(d) { return jsonToArray(d); })
          .enter().append("td")
            .attr("onclick", function (d, i) { return "group('" + d[0] + "');";})
            .text(function(d) { return d[1]; });

}

function stringCompare(a, b) {
    a = a.toLowerCase();
    b = b.toLowerCase();
    return a > b ? 1 : a == b ? 0 : -1;
}

function jsonKeyValueToArray(k, v) {return [k, v];}

function jsonToArray(json) {
    var ret = new Array();
    var key;
    for (key in json) {
        if (json.hasOwnProperty(key)) {
            ret.push(jsonKeyValueToArray(key, json[key]));
        }
    }
    return ret;
};
</script>


</body>
</html>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>Group by table example in D3</title>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
	</head>
	<body onLoad="run('name')">


	<h1>Group by Table</h1>

	<div id="group" style="border: 2px solid green;">
	</div>

	<h1>Original Sort by Table</h1>

	<div id="standard">
	<table>
	<thead></thead>
	<tbody></tbody>
	</table>
	</div>

	<script type="text/javascript">
	var i = 0, data = [
	{id: String(i++), mfg: "Meyers", name: "Manx", color: "Red"},
	{id: String(i++), mfg: "Meyers", name: "Towd", color: "Yellow"},
	{id: String(i++), mfg: "EMPI", name: "68/69 Imp", color: "Yellow"},
	{id: String(i++), mfg: "EMPI", name: "70 Imp", color: "Red"},
	{id: String(i++), mfg: "Berrien", name: "Nostalgia", color: "Red"}
	];

	function run(attrName) {
	transform(attrName);
	group(attrName);
	}

	run('mfg');

	function transform(attrName) {
	t = d3.select("#standard");
	t.select("tbody").selectAll("tr").remove();

	// Header
	var th = t.selectAll("thead").selectAll("th")
	.data(jsonToArray(data[0]))
	.enter().append("th")
	.attr("onclick", function (d, i) { return "transform('" + d[0] + "');";})
	.text(function(d) { return d[0]; })


	// Rows
	var tr = t.select("tbody").selectAll("tr")
	.data(data)
	.enter().append("tr")
	.sort(function (a, b) { return a == null \|\| b == null ? 0 : stringCompare(a[attrName], b[attrName]); });

	// Cells
	var td = tr.selectAll("td")
	.data(function(d) { return jsonToArray(d); })
	.enter().append("td")
	.attr("onclick", function (d, i) { return "transform('" + d[0] + "');";})
	.text(function(d) { return d[1]; });
	}

	function group(attrName) {
	var g = d3.select("#group");
	g.selectAll("table").remove();

	var nest = d3.nest()
	.key(function(d) { return d[attrName]; })
	.entries(data);

	var table = g.selectAll("table")
	.data(nest) //, function(d) { return d.key; }); table.exit().remove();
	.enter()
	.append("table").style("border", "1px solid gray");
	table.append("caption").text(function(d) { return d.key });

	// Header
	var th = table.append("thead").selectAll("th")
	.data(jsonToArray(data[0]))
	.enter().append("th")
	.attr("onclick", function (d, i) { return "group('" + d[0] + "');";})
	.text(function(d) { return d[0]; })

	// Rows
	var tr = table.append("tbody").selectAll("tr")
	.data(function(d) {
	return d.values;
	}) //, function(d) { return d.id; }); //tr.exit().remove();
	.enter().append("tr")
	.sort(function (a, b) { return a == null \|\| b == null ? 0 : stringCompare(a[attrName], b[attrName]); });

	// Cells
	var td = tr.selectAll("td")
	.data(function(d) { return jsonToArray(d); })
	.enter().append("td")
	.attr("onclick", function (d, i) { return "group('" + d[0] + "');";})
	.text(function(d) { return d[1]; });

	}

	function stringCompare(a, b) {
	a = a.toLowerCase();
	b = b.toLowerCase();
	return a > b ? 1 : a == b ? 0 : -1;
	}

	function jsonKeyValueToArray(k, v) {return [k, v];}

	function jsonToArray(json) {
	var ret = new Array();
	var key;
	for (key in json) {
	if (json.hasOwnProperty(key)) {
	ret.push(jsonKeyValueToArray(key, json[key]));
	}
	}
	return ret;
	};
	</script>


	</body>
	</html>
No results found