Show HN: Generating Venn Diagrams

2 points by oldweaver a year ago · 0 comments · 1 min read

Hello HN!

I am a (relatively) new user and I've been wanting to do a Show HN for quite sometime, but all along had the bug of perfection biting me.

So I decided to go with a not-so-good-looking UI; but working demo of generation of Venn Diagrams. I implemented the Venn diagram itself as a custom tag, via a WebComponent using Lit and the demo itself is powered by AlpineJS.

Read the story behind the implementation at https://oldweaver.co.in/n/blog/drawing-venn-diagrams/

Please be warned that the UI leaves a lot to desire - up for fine-tuning immediately.

TL/DR: Used isPointInPath, bitwise operations and getImageData to identify the paths which we need to highlight. The implementation might be a bit non-optimal now, but I liked the idea how this turned out and hence sharing this for quick comments.

If this looks promising, there is scope for implementing a parser for the set notation aka `B∩C` and then generalizing for any set expression. But that's for another day!

No comments yet.