NYT reporter
viz = {
// Overall vars
const height = 500
const width = 1000
const canvas = DOM.canvas(width, height)
const context = canvas.getContext('2d')
let data = []
for(var d of d3.range(0,100)){
data.push({
x: Math.random()*width,
y: Math.random()*height,
xSpeed: Math.random()*2,
ySpeed: Math.random()*2
})
}
// Scales for basic bar chartage
var x = d3.scaleLinear().domain([0,data.length]).range([0, width])
var y = d3.scaleLinear().domain(d3.extent(data)).range([0, height])
var activeLocation = 0
function getAssignMousePos(canvas, e){
var pos = {
x: e.clientX,
y: e.clientY
};
activeLocation.x = x.invert(pos.x)
activeLocation.y = y.invert(pos.y)
}
canvas.addEventListener('mousemove', (d,e) => getAssignMousePos(canvas,d))
function draw() {
data.forEach((d,i) => {
context.beginPath()
d.xSpeed = d.x+d.xSpeed > width ? -d.xSpeed : d.x+d.xSpeed < 0 ? Math.abs(d.xSpeed) : d.xSpeed
d.ySpeed = d.y+d.ySpeed > height ? -d.ySpeed : d.y-d.ySpeed < 0 ? Math.abs(d.ySpeed) : d.ySpeed
d.x += d.xSpeed
d.y += d.ySpeed
context.rect(d.x, d.y, 10, 10)
context.fillStyle = 'red'
context.fill()
context.closePath()
})
}
const start = Date.now()
const duration = 5000
let frames = 0
var timer
timer = d3.timer(function (timeSinceStart) {
let t = Math.min(timeSinceStart/duration, 1)
activeLocation = Math.round(t * 100)
// Cover old squares
context.fillStyle = 'rgba(255, 255, 255, ' + (1-val/100) + ')';
console.log('rgba(255, 255, 255, ' + (1-val/100) + ')')
context.fillRect(0, 0, width+10, height+10);
context.save();
draw()
})
return canvas
}
import {slider} from "@jashkenas/inputs"
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.
