I am a Professor of Mathematics at the University of Connecticut.
Published
Edited
Oct 27, 2020
md`# Canvas Transition Example`
chart = DOM.canvas(400,300)
context=chart.getContext('2d')
x=[1,2,3]
data=[]
{
var data=[] ;
while(true) {
for (let i=1;i<10;i++) {
data.push(i) ;
draw(data) ;
console.log('hello')
var s = d3.timer(function(elapsed){drawCanvas() ; console.log(elapsed) ; if (elapsed>300) s.stop() ; })
await Promises.tick(500) ;
}
for (let i=1;i<10;i++) {
data = data.slice(1) ;
draw(data) ;
var t = d3.timer(function(elapsed){drawCanvas() ; if (elapsed>500) t.stop() ; })
await Promises.tick(500) ;
}
}
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
scale = d3.scaleLinear()
.range([10, 390])
.domain([1,23]);
container = d3.select(document.createElement("custom"))
data
draw = function(data) {
container.selectAll('custom.rect').data(data,d=>d).join(
enter =>enter
.append('custom')
.attr('class','rect')
.attr('width',8)
.attr('height',8)
.attr('fillStyle','red')
.attr('x',d=>scale(d))
.attr('y',100),
update => update.attr('fillStyle','blue'),
exit => exit.transition().duration(200).attr('fillStyle','green').transition().duration(25).remove());
}
function drawCanvas() {
// clear canvas
context.fillStyle = "#ffffff";
context.fillRect(0,0,chart.width,chart.height);
//context.fill();
var elements = container.selectAll("custom.rect");
elements.each((d,i,l) => {
var n = d3.select(l[i]) ;
context.fillStyle = n.attr('fillStyle');
context.fillRect(n.attr('x'),n.attr('y'),n.attr('height'),n.attr('width'));
})
}
d3 = require('d3')
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.
