Swizzling! (Or pandas DataFrame "reshaping" / "pivoting" / "(un)stacking".)
Click and drag the i,j,k in the upper right to reorder. Refresh for random dimensions.
One can imagine more spreadsheety stuff, extending to 4D arrays and higher, and aggregating/slicing/collapsing/folding along different dimensions.
No, I'm not at all sure I'm using the term "swizzle" correctly. I don't understand matrices.
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| * { | |
| box-sizing: border-box; | |
| } | |
| html, body { | |
| width: 100%; | |
| height: 100%; | |
| margin: 0; | |
| } | |
| body { | |
| font-family: sans-serif; | |
| font-size: 20px; | |
| } | |
| .order { | |
| position: fixed; | |
| right: .5em; | |
| top: .5em; | |
| border: 2px solid black; | |
| background: white; | |
| padding: 10px; | |
| font-weight: bold; | |
| display: inline-block; | |
| font-size: 2em; | |
| width: 284px; | |
| height: 104px; | |
| } | |
| .order .dim { | |
| position: absolute; | |
| display: inline-block; | |
| width: 80px; | |
| height: 80px; | |
| padding: .25em; | |
| text-align: center; | |
| border: 1px solid black; | |
| } | |
| .order .dim:hover { | |
| cursor: -webkit-grab; | |
| cursor: grab; | |
| background: rgba(0,0,0,.1); | |
| } | |
| .order .dim.active { | |
| cursor: -webkit-grabbing; | |
| cursor: grabbing; | |
| background: black; | |
| color: white; | |
| z-index: 2; | |
| } | |
| .table { | |
| position: absolute; | |
| } | |
| .table div.header { | |
| position: absolute; | |
| text-align: center; | |
| padding: .5em; | |
| font-weight: bold; | |
| } | |
| .table div.cell { | |
| position: absolute; | |
| text-align: right; | |
| border-bottom: 1px solid black; | |
| border-right: 1px solid white; | |
| border-right-color: white; | |
| } | |
| .table div.bar { | |
| position: absolute; | |
| background: rgba(0,0,0,.1); | |
| width: 100%; | |
| } | |
| .table div.value { | |
| padding: .5em; | |
| } | |
| </style> | |
| <body> | |
| <div class="table"></div> | |
| <div class="order"></div> | |
| </body> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script> | |
| var w = 45, | |
| h = 45, | |
| order = ['i', 'j', 'k'], | |
| dim = { | |
| i: 2 + (Math.random() * 10 | 0), | |
| j: 2 + (Math.random() * 10 | 0), | |
| k: 2 + (Math.random() * 10 | 0) | |
| }, | |
| value = (i,j,k) => i + 5 + 5 * Math.sin(j) + d3.randomNormal(5)(), | |
| rainbow = d3.scaleSequential(d3.interpolateRainbow) | |
| .domain([0, Math.max(dim.i, dim.j, dim.k)]), | |
| data = d3.merge( | |
| d3.range(dim.i).map( | |
| (i) => d3.merge(d3.range(dim.j).map( | |
| (j) => d3.range(dim.k).map( | |
| (k) => ({i, j, k, x: Math.round(value(i,j,k))}) | |
| ) | |
| )) | |
| ) | |
| ), | |
| headerData = [].concat( | |
| d3.range(dim.i).map(i => ({dim: "i", val: i})), | |
| d3.range(dim.j).map(j => ({dim: "j", val: j})), | |
| d3.range(dim.k).map(k => ({dim: "k", val: k})) | |
| ), | |
| barScale = d3.scaleLinear() | |
| .domain(d3.extent(data.map(d => d.x))) | |
| .range([0,100]) | |
| var drag = d3.drag() | |
| .on("start", dragstarted) | |
| .on("drag", dragged) | |
| .on("end", dragended) | |
| var label = d3.select(".order").selectAll("div.dim") | |
| .data(order) | |
| .enter() | |
| .append("div") | |
| .attr("class", "dim") | |
| .text(d => d) | |
| .call(renderDim) | |
| .call(drag) | |
| var table = d3.select(".table") | |
| .style("left", w + "px") | |
| .style("top", h * 2 + "px") | |
| var header = table.selectAll("div.header") | |
| .data(headerData) | |
| .enter() | |
| .append("div") | |
| .attr("class", "header") | |
| .html(d => d.dim + "<sub>" + d.val + "</sub>") | |
| .call(renderHeader) | |
| var cell = table.selectAll("div.cell") | |
| .data(data) | |
| .enter() | |
| .append("div") | |
| .attr("class", "cell") | |
| .call(renderCell) | |
| cell.append("div") | |
| .attr("class", "value") | |
| .text(d => d.x) | |
| cell.append("div") | |
| .attr("class", "bar") | |
| .style("bottom", "0") | |
| .style("height", d => barScale(d.x) + "%") | |
| var interval = d3.interval(swizzle, 3000) | |
| function swizzle() { | |
| d3.shuffle(order) | |
| d3.transition() | |
| .duration(2000) | |
| .call(render) | |
| } | |
| function render(t) { | |
| label.transition(t) | |
| .call(renderDim) | |
| header.transition(t) | |
| .call(renderHeader) | |
| cell.transition(t) | |
| .call(renderCell) | |
| } | |
| function renderDim(selection) { | |
| selection | |
| .filter(function() { return !d3.select(this).classed("active") }) | |
| .style("left", d => 10 + order.indexOf(d) * 90 + "px") | |
| } | |
| function renderHeader(selection) { | |
| selection | |
| .style("width", w + "px") | |
| .style("height", h + "px") | |
| .style("left", d => { | |
| if(d.dim == order[0]) { | |
| return w * dim[order[2]] * d.val + "px" | |
| } else if(d.dim == order[1]) { | |
| return -w + "px" | |
| } else if(d.dim == order[2]) { | |
| return w * d.val + "px" | |
| } | |
| }) | |
| .style("top", d => { | |
| if(d.dim == order[0]) { | |
| return -2 * h + "px" | |
| } else if(d.dim == order[1]) { | |
| return h * d.val + "px" | |
| } else if(d.dim == order[2]) { | |
| return -h + "px" | |
| } | |
| }) | |
| } | |
| function renderCell(selection) { | |
| selection | |
| // .style("color", d => rainbow(d[order[2]])) | |
| .style("width", w + "px") | |
| .style("height", h + "px") | |
| .style("border-right-color", d => d[order[2]] === dim[order[2]] - 1 ? 'rgba(0,0,0,1)' : 'rgba(0,0,0,0)') | |
| .style("left", (d) => (w * dim[order[2]]) * d[order[0]] + w * d[order[2]] + "px") | |
| .style("top", (d) => h * d[order[1]] + "px") | |
| } | |
| function dragstarted(d) { | |
| interval.stop() | |
| d3.select(this).classed("active", true) | |
| } | |
| function dragged(d) { | |
| d3.select(this) | |
| .style("left", d3.event.x - 40 + "px") | |
| order = label.nodes() | |
| .sort( | |
| (a,b) => a.offsetLeft - b.offsetLeft) | |
| .map( | |
| el => d3.select(el).datum() | |
| ) | |
| d3.transition() | |
| .duration(100) | |
| .call(render) | |
| } | |
| function dragended(d) { | |
| d3.select(this).classed("active", false) | |
| label.transition() | |
| .duration(100) | |
| .call(renderDim) | |
| } | |
| // do good | |
| // ok, 12 march 2021, removing this. interesting record of my feeling of helpless desperation though! | |
| /* | |
| d3.select("body").on("click", () => { | |
| if(!d3.select(d3.event.target).classed("dim")) { | |
| window.open(Math.random() > .5 ? "https://action.aclu.org/donate-aclu" : "https://www.cair.com/donations/general-donation/campaign/#/donation") | |
| } | |
| }) | |
| */ | |
| </script> |
