Published
Edited
Jul 13, 2018
Importers
1 star
{
let workspace = svg`<svg width="${width}" height="${height}"></svg>`;
d3.select(workspace).selectAll("circle").data(d3.range(nElements)).enter().append("circle")
.attr("r", r).attr("cx", r).attr("cy", r)
.call(gridLayout(cols,rows,p,width,height));
return workspace;
}
gridLayout = function(cols, rows, padding, width, height){
let __c = d3.scaleOrdinal().domain(d3.range(cols*rows)).range(d3.range(0, width, width / cols));
let __r = d3.scaleQuantile().domain([0,cols*rows]).range(d3.range(0, height, height / rows));
let c = d3.scaleOrdinal().domain(d3.range(cols*rows)).range(d3.range(cols));
let r = d3.scaleQuantile().domain([0,cols*rows]).range(d3.range(rows));
let __cellWidth = width / cols;
let __cellHeight = height / rows;
let __boxWidth = __cellWidth - padding * 2;
let __boxHeight = __cellHeight - padding * 2;
function gridLayout(selection){
let grid = d3.select(selection.node().parentNode).append("g").attr("class", "grid");
return selection.each(function (d,i) {
let el = this;
grid.append("g")
.attr("class", _ => "cell " + "col-" + c(i) + " row-" + r(i))
.attr("transform", function(_){
let span_element = document.createElement("span");
document.body.appendChild(span_element);
d3.select(span_element).append("svg").attr("width", width).attr("hieght", height).append(x=>el);
let size = d3.select(el).node().getBBox()
document.body.removeChild(span_element);
let fw = size.width > __boxWidth ? __boxWidth / size.width : 1;
let fh = size.height > __boxHeight ? __boxHeight / size.height : 1;
let xp = 0;
let yp = 0;
if(fw > fh)
xp = (__boxWidth - (fh * size.width)) / 2;
if(fh > fw)
yp = (__boxHeight - (fw * size.height)) / 2;
if(fh == fw){
xp = (__boxWidth - (fh * size.width)) / 2;
yp = (__boxHeight - (fw * size.height)) / 2;
}
return "translate(" + (__c(i) + padding + xp) + " " + (__r(i) + padding + yp) + ")" + " " +
"scale(" + d3.min([fw,fh]) + ")"
}).append(x => el);
})
};
gridLayout.rows = rows;
gridLayout.cols = cols;
gridLayout.width = width;
gridLayout.height = height;
gridLayout.padding = padding;
return gridLayout;
}
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.
