chart = {
const svg = d3.select(DOM.svg()).attr("viewBox", [0, 0, width, height]);
svg.selectAll('.row')
.data(data)
.enter()
.append('g')
.attr('transform', (d, i) => `translate(0, ${i * cellWidth})`)
.selectAll('.cell')
.data((d, i) => data[i])
.enter()
.append('rect')
.attr("width", cellWidth)
.attr('height', cellHeight)
.attr('x', (d, i) => i * cellWidth)
.attr('stroke', 'white')
.attr('class', 'rect')
.attr('stroke-width', '1px')
svg.selectAll('.cell')
.data(data2)
.enter()
.append('g')
.append('image')
.attr('xlink:href', (d) => d.Link)
.attr("width", cellWidth)
.attr('height', cellHeight)
.attr('x', (d, i) => i * cellWidth)
.attr("opacity", 1)
return svg.node()
}
ncols = 9
nrows = 6
data = {
let data = Array(nrows).fill(0).map(() => Array(ncols).fill(0));
data.forEach(
(row, i) => row.forEach(
(cell, j) => data[i][j] = Math.cos(i * .2 - 6) + Math.sin(j * .1 + 3)
)
)
return data
}
data2 = FileAttachment("allImages_13.csv").csv({typed: true})
cellWidth = width / ncols;
cellHeight = height / nrows
height = nrows * cellWidth
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.
