I am a Professor of Mathematics at the University of Connecticut.
Published
Edited
Oct 22, 2020
md`# Canvas Plot with Redraw`
damp = 10
context = {
return DOM.canvas(200,200).getContext('2d') ;
}
import {fngrid} from "@jeremy9959/plotting-on-canvas"
context.canvas
{
databind(data);
var t = d3.timer(function(elapsed) {
draw();
if(elapsed>5000) t.stop();})
}
colors = d3.scaleLinear().range(['white','blue']).domain(d3.extent(data, function(d) {return d.z;}))
data=fngrid(200,200,-10,10,-10,10,function(x,y) { return stdlib.base.exp(-(x**2+y**2)/damp); })
draw = function() {
//context.clearRect(0,0,200,200) ;
var elements = custom.selectAll('custom.rect') ;
elements.each((d,i,l) => {
var node = d3.select(l[i]) ;
context.fillStyle = node.attr('fillStyle') ;
context.fillRect(node.attr('x'),node.attr('y'),node.attr('width'),node.attr('height'))
})
}
databind = function(data) {
const img = custom.selectAll('.rect')
.data(data)
.join(
enter => enter.append('custom')
.attr('class','rect')
.attr('x',d=>d.x)
.attr('y',d=>d.y)
.attr('height',1)
.attr('width',1)
.attr('fillStyle', '#ffffff')
.call(enter=>enter.transition().attr('fillStyle',d=>colors(d.z))),
update => update.call(update => update.transition().attr('fillStyle',d=>colors(d.z))),
exit => exit.call(exit=>exit.transition().attr('fillStyle','#ffffff').remove()))
}
custom = {
var customBase = document.createElement('custom') ;
return d3.select(customBase) ;
}
d3=require('d3')
stdlib = require( "https://unpkg.com/@stdlib/stdlib@0.0.32/dist/stdlib-flat.min.js" )
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.
