D3@6 breaks your drag event (d3.event.x). You need to pass the event listener like this: Before: d3.select(context.canvas) .call(d3.drag() .on("start drag end", d => { context.clearRect(0, 0, w, h) render(hue(d3.event.x)) context.canvas.value = hue(d3.event.x) context.canvas.dispatchEvent(new CustomEvent('input')) }) ) After: d3.select(context.canvas) .call(d3.drag() .on("start drag end", (event, d) => { context.clearRect(0, 0, w, h) render(hue(event.x)) context.canvas.value = hue(event.x) context.canvas.dispatchEvent(new CustomEvent('input')) }) ) Reference: https://observablehq.com/@d3/d3v6-migration-guide#events Thanks for the good work!

oh wow, you're right. this is very helpful! thank you very much

You're welcome. I'm not much of a javascript expert, but I got lucky on this one ;-)