Public
Edited
Jan 10, 2023
{
const svg = d3.create('svg')
.attr('width', width)
.attr('height', width / 3)
svg.selectAll('rect')
.data(map.flat())
.join(
enter => enter.append('rect')
.attr('x', (d, i) => i % mapWidth * blockSize)
.attr('y', (d, i) => Math.floor(i / mapWidth) * blockSize)
.attr('width', blockSize)
.attr('height', blockSize)
.style('fill', (d) => {
switch (d) {
case 1: return 'black';
case 5: return 'red';
case 8: return 'red';
default: return 'white';
}
})
.style('stroke', 'white')
)
return svg.node()
}
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.
