viz2 = {
let canvas = d3
.create('canvas')
.attr("width", columns)
.attr('height', rows);
let context = canvas.node().getContext('2d');
// context.font = "8px Courier";
// context.fillStyle = '#aaa';
// for (let i = 0; i < randomInDateOrder.length; i += 10000) {
// let x = Math.floor(i % columns);
// let y = Math.floor(i / columns);
// context.fillText(randomInDateOrder[i].date, x, y);
// }
let colorScale = d3
.scaleLinear()
.domain([0, rows])
.range([0.3, 0]);
let drag = d3
.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended);
canvas.call(drag);
function dragstarted(event, d) {}
function dragged(event, d) {
//context.clearRect(0, 0, columns, rows);
let mouseX = d3.mouse(this)[0];
let mouseY = d3.mouse(this)[1];
let deathIndex = mouseY * columns + mouseX;
var sameCountry = randomInDateOrder.filter(function(death) {
return randomInDateOrder[deathIndex].country == death.country;
});
context.font = "20px Courier";
context.fillStyle = "#ffffff";
context.fillText(
randomInDateOrder[deathIndex].country +
" " +
randomInDateOrder[deathIndex].date,
mouseX,
mouseY
);
sameCountry.forEach(function(d) {
context.fillStyle = d3.interpolateBrBG(colorScale(d.y));
context.globalAlpha = .8;
context.fillRect(d.x, d.y, 1, 1); // 4 arguments for the rect features: x, y, width and height
});
}
function dragended(event, d) {
clear();
}
return canvas.node();
}
clear = function() {
let delay = 500;
let steps = 500;
let context = d3
.select('canvas')
.node()
.getContext('2d');
let ticker = d3.interval(elapsed => {
context.fillStyle = "white";
context.globalAlpha = elapsed / delay / 20;
context.fillRect(0, 1, columns, rows);
if (elapsed > delay) {
ticker.stop();
}
}, delay / steps);
}
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.
