Published
Edited
Jun 20, 2019
4 stars
function matrix(matrix) {
const N = matrix[0].length;
const W = 400;
const pad = 20;
const svg = d3.select(DOM.svg(W + 2*pad, W + 2*pad));
const S = W / N;
const min = d3.min(matrix.flat());
const max = d3.max(matrix.flat());
const rScale = d3.scaleLinear().domain([min, max]).range([0, S/2]);
const data = matrix.map((row, y) => row.map((dist, x) => ({ x, y, dist }))).flat();
svg.selectAll("circle").data(data).enter()
.append("circle")
.attr("cx", ({ x }) => pad + (x + .5) * S)
.attr("cy", ({ y }) => pad + (y + .5) * S)
.attr("r", ({ x, y, dist }) => x < y ? rScale(dist) : 0)
.attr("fill", ({ x, y }) => (x === 1 || y === 21) ? "red" : "black");
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.
