grouped = d3.group(data, d => d.value)
grid1 = d3
.gridding()
.margin(1.5)
.size([width, height])
.mode("vertical")
grid2 = d3
.gridding()
.margin(0) // space between horizontal blocks
.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;
})
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
