D3 Examples - Grouped table example (by Paul Moran)

xxxxxxxxxx
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html xmlns="https://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="https://cdn.jsdelivr.net/npm/d3@2.10.3/d3.v2.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> 
    