viz = {
let canvas = d3
.create('canvas')
.attr("width", columns)
.attr('height', rows);
let context = canvas.node().getContext('2d');
let colorScale = d3.scaleLinear().domain([0, rows]);
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 = coordinateDataset.filter(function(death) {
return coordinateDataset[deathIndex].country == death.country;
});
// context.font = "10px Arial";
// context.fillText(coordinateDataset[deathIndex].country + " " + coordinateDataset[deathIndex].date,mouseX,mouseY);
sameCountry.forEach(function(d) {
context.fillStyle = d3.interpolateBlues(colorScale(d.y));
context.globalAlpha = .1;
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 = 2000;
let steps = 100;
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.
