Information designer, data visualization engineer📈, 🇺🇦🇺🇦🇺🇦
Public
Edited
Apr 2, 2023
2 stars
function Grid(
data,
{ columnLength = 10, squareSize = width / columnLength } = {}
) {
const dataLength = data.length;
const size = squareSize;
const columns =
columnLength !== null && columnLength > 1
? columnLength
: Math.round(width / size);
const height = (dataLength / columns) * size;
const svg = DOM.svg(width, height + size);
const sel = d3.select(svg);
const scaleColumn = d3
.scaleLinear()
.domain([0, columns])
.range([0, columns * size]);
const scaleRow = d3
.scaleLinear()
.domain([0, data.length / columns])
.range([0, height]);
const group = sel
.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("transform", (d, i) => {
const x = i % columns;
const y = Math.floor(i / columns);
return `translate(${scaleColumn(x)}, ${scaleRow(y)})`;
});
group
.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", squareSize)
.attr("height", squareSize)
.attr("stroke-width", 0.2)
.attr("stroke", "#333")
.attr("fill", (d, i) => {
return i >= 0 && i <= airTargetLosses.aircrafts.max
? fill.aircrafts
: i > airTargetLosses.aircrafts.max &&
i <= airTargetLosses.helicopters.max
? fill.helicopters
: i > airTargetLosses.helicopters.max && i <= airTargetLosses.uav.max
? fill.uav
: fill.cruise_missiles;
});
return svg;
}
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.
