JS visualisations?


Hey @matt. What is it you’re trying to do that you mentioned in the email?


Hey @jjok, I’m looking to do a visualization of the pour over patterns from the perspective of where the water meets the coffee grounds. I’d like to be able to show how changing the rotation speed of the cone and the angle/length of the water spout’s arc effect the pattern. I think I can hack some existing 2d viewers if I convert the servo movement data into straight horizontal/x axis data.

I’ve been playing around with canvas based visualizations but nothing usable yet.


I would assume the hardest part there is getting the data into a format that can be used.

There are certainly loads of JS libraries that do graphs, but you want to animate a path or something, right?


Have you had a look at D3? I think that’s a pretty well known library.


Of course, if you can write your own thing to do exactly what you want without too much trouble, then you should definitely do that.


Yeah, I’m interested in showing a path. I think I may have played with D3 back in the day, will take another look. I am also looking into possibly using Processing/P5.js

The main blocker for me so far has been that the cone spins 360 degrees continually. Realistically, that should simplify it but I keep getting hung up on trying to force it into my existing knowledge of cartesian plotting from my use of 3d printers. If the cone went 180 degrees and back repeatedly it would make more sense to my monkey brain…