Published
Edited
Feb 26, 2020
iamge_width = +arr[0].width
iamge_hight = arr.length / iamge_width
i_center_range = d3.extent(arr, d => d.i_center)
j_center_range = d3.extent(arr, d => d.j_center)
intensity_range = d3.extent(arr, d => d.intensity_avg)
color_scale = d3.scaleSequential(d3.interpolateGreys).domain([0, 255])
{
const context = DOM.context2d(194, 146);
arr.forEach(d => {
context.fillStyle = color_scale(d.intensity_avg);
context.fillRect(d.i_center, d.j_center, 1, 1);
});
return context.canvas;
}
{
const mag = 2;
const context = DOM.context2d(194 * mag, 146 * mag);
arr.forEach((d, i) => {
context.fillStyle = color_scale(d.intensity_avg);
context.fillRect(d.i_center * mag, d.j_center * mag, mag, mag);
});
return context.canvas;
}
d3 = require("d3@5")
md`
* https://observablehq.com/@duncangeere/how-to-use-html5-canvas-part-one
* using p5
* https://observablehq.com/@jermspeaks/p5-test
`
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.
