D3.js: 2D matrix to 3D nested lists: an elaboration of Mike Bostock's table example using lists

README.md

Based on https://github.com/mbostock/d3/wiki/Selections#Data where a 2D matrix is used to produce a table. Here we use it to produce a 3-deep nested HTML list, showing that the technique works when chaining "ul > li" tags and when making up new data based on individual elements of the original matrix.

Produces

• Row 0
  • 11975
    • 11975
    • 1197.5
    • 119.75
  • 5871
    • 5871
    • 587.1
    • 58.71
  • 8916
    • 8916
    • 891.6
    • 89.16
  • 2868
    • 2868
    • 286.8
    • 28.68
• Row 1
  • 1951
    • 1951
    • 195.1
    • 19.51
  • 10048
    • 10048
    • 1004.8
    • 100.48
  • 2060
    • 2060
    • 206
    • 20.6
  • 6171
    • 6171
    • 617.1
    • 61.71
• Row 2
  • 8010
    • 8010
    • 801
    • 80.1
  • 16145
    • 16145
    • 1614.5
    • 161.45
  • 8090
    • 8090
    • 809
    • 80.9
  • 8045
    • 8045
    • 804.5
    • 80.45
• Row 3
  • 1013
    • 1013
    • 101.3
    • 10.13
  • 990
    • 990
    • 99
    • 9.9
  • 940
    • 940
    • 94
    • 9.4
  • 6907
    • 6907
    • 690.7
    • 69.07

matrixTo3dList.js

// Compare with https://github.com/mbostock/d3/wiki/Selections#Data

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

var dim1 = d3.select("body")
               .append("ul")
               .selectAll("li")
               .data(matrix)
               .enter()
               .append("li")
               .text(function(d, i) { return "Row " + i + " "; });

var dim2 = dim1.selectAll("li").data(function(d, i) {
    console.log('dim2: ', d, i);
    return d;
}).enter().append("ul").append("li").text(function(d) { return d; });

var dim3 = dim2.selectAll("li").data(function(d, i) {
    console.log('dim3: ', d, i);
    return [ d, d / 10, d / 100 ];
}).enter().append("ul").append('li').text(function(d) { return d; });

vectorTo3dList.js

// Compare to matrixTo3dList.js : here we use a flat JS list to produce a 3-deed HTML list
var matrix = [ 11975, 5871, 8916, 2868 ];

var dim1 = d3.select("body")
               .append("ul")
               .selectAll("li")
               .data(matrix)
               .enter()
               .append("li")
               .text(function(d, i) { return "Row " + d + " "; });

var dim2 = dim1.selectAll("li").data(function(d, i) {
    console.log('dim2: ', d, i);
    return [ d / 10, d / 100 ];
}).enter().append("ul").append("li").text(function(d) { return d; });

var dim3 = dim2.selectAll("li").data(function(d, i) {
    console.log('dim3: ', d, i);
    return [ d / 10, d / 100 ];
}).enter().append("ul").append('li').text(function(d) { return d; });