Student of math, d3, svg, etc. Prototyper of visualizations for electronics design and test.
function touchStarted() {
if (audioCtx.state !== 'running') {
audioCtx.resume();
}
}
drawResult = {
const canvasCtx = canvas.getContext('2d');
canvasCtx.clearRect(0, 0, canvas.width, canvas.height);
const canvas2Ctx = scanvas.getContext('2d');
canvas2Ctx.clearRect(0, 0, scanvas.width, scanvas.height);
let sdata = []
const fWindow = 5
function draw() {
//Schedule next redraw
requestAnimationFrame(draw);
//Draw white background
canvasCtx.fillStyle = 'rgb(255, 255, 255)';
canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
const vdata = []
let data2 = data.slice(0, 128)
data2.forEach((d,i) => {vdata.push( (d+140)*2)})
//Draw bar chart
const barWidth = (canvas.width / 256) * 2.5;
let posX = 0;
vdata.forEach((d,i) => {
const cbar = Math.floor(d + 100)
canvasCtx.fillStyle = d3.rgb(cbar, cbar, cbar)
canvasCtx.fillRect(posX, canvas.height - d / 2, barWidth, d / 2);
posX += barWidth + 1;
})
// update spectrogram data
if(sdata.length >= slines * data.length){
sdata = sdata.slice(0, data.length * (slines - 1)) // slice off last line
}
const tdata = Array.from(data.slice(0, 128))
sdata = tdata.concat(sdata) // add new line to beginning
//Draw Spectrogram
//canvas2Ctx.fillStyle = 'rgb(0, 0, 0)';
//canvas2Ctx.fillRect(0, 0, scanvas.width, scanvas.height);
if(sdata.length < slines * tdata.length){
sdata.forEach((d,i) => {
canvas2Ctx.fillStyle = d3.interpolateInferno((d + 200) / 200)
canvas2Ctx.fillRect((i%tdata.length)*(barWidth+1), parseInt(i/tdata.length) * cellsize, barWidth+2, cellsize);
})
} else {
// shift the image down
//const img = canvas2Ctx.getImageData(0, 0, tdata.length * (barWidth+1), (slines - 1) * cellsize)
//canvas2Ctx.putImageData(img, 0, cellsize)
canvas2Ctx.globalCompositeOperation = "copy";
canvas2Ctx.imageSmoothingEnabled = false
canvas2Ctx.drawImage(canvas2Ctx.canvas,0, 1);
// reset back to normal for subsequent operations.
canvas2Ctx.globalCompositeOperation = "source-over"
// draw the top line
tdata.forEach((d,i) => {
canvas2Ctx.fillStyle = d3.interpolateInferno((d + 200) / 200)
canvas2Ctx.fillRect(i*(barWidth+1), 0, barWidth+2, cellsize);
})
}
}
draw();
return md`Draw the charts`
}
minData = d3.min(data)
maxData = d3.max(data)
import {button} 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.
