Philomenix

Public Projects

A collection of Observable Canvases that we share on Instagram.   https://www.instagram.com/observablehq/

Observable

Observable's Instagram Shares

I love this notebook, and how customizable you've made it! I'm curious, how did you generate these paths?

Kerry Rodden

Thank you so much! I’m just starting to learn JavaScript and D3, so your comment means a lot. I generated the main shapes with the venn package in R (but for a 2 or 3 set venn you might as well draw these by hand). Then I used the pathfinder tool in Adobe Illustrator to split the main shapes into smaller segments. Finally I saved it as SVG and used the d attributes and viewBox from this file.

Ah, that makes sense, thank you! I've previously tried to figure out how to highlight overlapping areas on mouseover, and had got as far as realizing I'd need to make separate paths for them, so it's really useful to know what your approach was.

Just wanted to follow up and say thank you again for sharing this notebook! We used it to choose the colors for the Venn diagram in https://www.codeforamerica.org/programs/social-safety-net/navigating-compounded-hardships-in-a-pandemic/ — and I also borrowed your technique of using the pathfinder tool in Illustrator to create the segments in the diagram.

Wow, what an incredible result! I love the transition at the beginning and how you included all the individual stories as dots. I'm glad this notebook helped a little. Thank you for the follow-up.