Hello d3-gridding Ref. https://github.com/romsson/d3-gridding Ref. https://beta.observablehq.com/@romsson/d3-gridding
{ const svg = d3.select(DOM.svg(width, height)); svg .selectAll("g") .data(gridded) .enter() .append("g") .attr("transform", d => `translate(${d.x},${d.y})`) .selectAll("rect") .data(d => d[1]) .enter() .append("rect") .attr("width", d => d.width) .attr("height", d => d.height) .attr("fill", d => d3.hsl(colorScale(d.value)).darker((d.index - 2) / 8)) .attr("transform", d => `translate(${d.x},${d.y})`); return svg.node(); }
settings
colorScale = d3 .scaleLinear() .domain([0, 1]) .range([d3.schemePastel1[2], d3.schemePastel1[3]])
width = 400
height = 300
data
data = { const data = []; d3.range(10).map(function(i) { d3.range(2).map(function(j) { data.push({ index: i, value: j, size: i * (j + 1) + i * Math.random() }); }); }); return data; }
grouping & gridding
grouped = d3.group(data, d => d.value)
grid1 = d3 .gridding() .margin(1.5) .size([width, height]) .mode("vertical")
grid2 = d3 .gridding() .margin(0) // doesn't work .mode("horizontal") .valueWidth(d => d.size)
gridded = grid1([...grouped]).map(d => { d[1] = grid2.size([d.width, d.height]).orient(+d[0] === 0 ? "left" : "right")( d[1] ); return d; })
load modules
d3 = require("d3@5", "d3-array@2", "d3-gridding@0")
not used
NOTUSED_nested = d3 .nest() .key(d => d.value) .entries(data)
NOTUSED_params = [ { size: _ => [width, height], offset: _ => [0, 0], mode: "grid", padding: 0, level: 0 }, { size: d => [d.width, d.height], offset: d => [d.x, d.y], mode: "horizontal", valueWidth: "size", orient: d => (+d.key === 0 ? "left" : "right"), padding: 10, level: 1 } ]