I am a Professor of Mathematics at the University of Connecticut.
Published
Edited
Oct 22, 2020
Importers
md`# Plotting on Canvas`
context = {
return DOM.canvas(400,400).getContext('2d')
}
data = fngrid(400,400,-10,10,-10,10,e2)
data.forEach((d,i,l) => {
context.fillStyle = colors(l[i].z) ;
context.fillRect(d.x,d.y,1,1) ;
})
e2 = function(x,y) {
return stdlib.base.sin(x*y/5);
}
context.canvas
fngrid = function(width,height,xmin,xmax,ymin,ymax,fn) {
var xscale = d3.scaleLinear().range([0,width]).domain([xmin,xmax]) ;
var yscale = d3.scaleLinear().range([0,height]).domain([ymin,ymax]) ;
var z=[] ;
for (let i=0;i<width;i++) {
for(let j =0;j<width;j++) {
z.push({'x':i,'y':j,'z':fn(xscale.invert(i),yscale.invert(j))})
}
}
return z
}
data
pi = 3.14159
grid = function(width,height,delta) {
var z=[]
for(let i=0;i<width;i+=delta) {
for(let j=0;j<width;j+=delta) {
z.push({'x':i,'y':j}) ;
}
}
return z
}
coords = {
let z=[]
for(let i=0;i<390;i++) {
for(let j=0;j<390;j++) {
let x=(i-195)/1000
let y=(j-195)/1000
z.push({'x':x,'y':y,'z':(x**2-y**2)/100});
}
}
return z;
}
xscale = d3.scaleLinear().range([10,390]).domain(d3.extent(coords,function(d) { return d.x;}))
yscale = d3.scaleLinear().range([10,390]).domain(d3.extent(coords,function(d) { return d.y;}))
colors = d3.scaleLinear().range(['white','blue']).domain(d3.extent(data, function(d) {return d.z;}))
d3.extent(coords,function(d) { return d.z;})
xscale(coords[0].x)-xscale(coords[101].x)
yscale(coords[0].y)-yscale(coords[1].y)
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.
