Background
For posts and notes, I want a way to make interactive drawings and diagrams. So far, I’ve been using vanilla javascript and canvas (e.g. the false peak post and the telescopic gauge error post). That’s been good for learning a bit about canvas, but it results in pretty janky visualizations since it’s up to my (lack of) skill with raw canvas. Instead of this, I want to figure out some lightweight library I can embed and have handle all the screen size issues, resolution issues, etc. It’d also be nice if it gives me some geometric primatives that help with the type of visualizations I do (what this means is still pretty ambiguous. Hopefully it’ll be less so as I explore options).
This note contains some experiments with different libraries for making visualizations on this website.
Existing Options
This reddit post has a bunch of suggestions.
Paper.js
Paper is suggested in a bunch of places. I’m following these directions for the example below.
EaselJS
This seems more like a general art/canvas/video game framework that also might include a ton of other functionality. The demo page is also pretty sparse. I’m going to skip this one for now.
Fabric JS
This has a similar vibe to EaselJS. It looks a bit smaller/simpler and so it may be worth visiting, but so far Paper seems the simplest (and only one worth attempting integration, so far).
D3.js
D3 is a library I have always wanted to learn. I’ve poked my head into it a few times, and always came away thinking “jeez this seems low level”. So I’m not sure it’s the best for making quick and easy diagrams. But, I was using raw canvas before, and I have always wanted to learn it. So, it’s worth taking a look.
The D3 Graph Gallery has a lot of examples, including shapes.
It also seems focused mostly on data visualization, not interactive diagram creation. There is a full shapes section in the docs.
It took me about an hour of futzing to get the dots above to work. The paper example took me about 15 minutes, but I didn’t modify anything there so it isn’t really a fair comparison. I can see how D3 could be really useful for data viz but I’m not sure it makes sense for diagrams.