Structural engineer and programmer based in Richmond Hill, ON.
{
const height = 500;
const TILEDIM = 80;
const NROWS = width / TILEDIM + 1;
const NCOLS = height / TILEDIM + 1;
const minor = {
grid: [[0, 1, 2, 3], [0, 1, 2, 3], [0, 1, 2, 3], [0, 1, 2, 3]],
scale: d3
.scaleLinear()
.domain([0, 3])
.range([0, TILEDIM]),
coords: []
};
const dt = TILEDIM / 4;
minor.coords = minor.grid.map((row, i) => {
if (i === 0) {
return [[0 * dt, 0], [1 * dt, 0], [2 * dt, 0], [3 * dt, 0]];
} else if (i === 1) {
return [
[4 * dt, 0 * dt],
[4 * dt, 1 * dt],
[4 * dt, 2 * dt],
[4 * dt, 3 * dt]
];
} else if (i === 2) {
return [
[3 * dt, 4 * dt],
[2 * dt, 4 * dt],
[1 * dt, 4 * dt],
[0 * dt, 4 * dt]
];
} else if (i === 3) {
return [[0, 3 * dt], [0, 2 * dt], [0, 1 * dt], [0, 0 * dt]];
}
});
const rng = (function() {
let x0 = -1;
let rng1 = d3.randomInt(0, 3);
let rng2 = d3.randomInt(0, 3);
return function out() {
return x0 === 0 ? rng2() : rng1();
};
})();
const tile = Array.from({ length: 16 }, (d, i) => [
minor.coords[rng()][rng()],
minor.coords[rng()][rng()]
]);
const tiles = Array.from({ length: NROWS }, (row, i) =>
Array.from({ length: NCOLS }, (cell, j) => tile)
);
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", height);
svg
.selectAll("g")
.data(tiles)
.enter()
.append("g")
.attr("transform", (d, i) => `translate(${i * TILEDIM}, 0)`)
.selectAll("g")
.data(d => d)
.enter()
.append("g")
.attr("transform", (d, j) => `translate(0, ${j * TILEDIM})`)
.selectAll("line")
.data(d => d)
.enter()
.append("line")
.attr("x1", d => d[0][0])
.attr("y1", d => d[0][1])
.attr("x2", d => d[1][0])
.attr("y2", d => d[1][1])
.attr("stroke", (d, i) => d3.color("steelblue").copy({ opacity: 0.5 }));
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.
