I attempted to make an interactive version of one of the diagrams on https://betterexplained.com/articles/intuitive-trigonometry/[1]
The static diagram on Kalid's site is beautiful. The spacing of the arrows is just right. He knows the order and spacing of arrows so he can make sure the labels work nicely.
Making this interactive diagram was a lot of work (2.5 hours). Good label placement is hard. Below 45° the arrows (and labels) have to be in one order, but above 45° some of them are in a different order. I ended up writing separate code for below/above 45°. Kalid made a separate diagram for that case. I also tweaked the source and target of arrows to try to keep them away from each other, but it's not as nice as the version he has. And sometimes my labels overlap, and I haven't fixed that.
I'm glad I went through this exercise but my main conclusion was that it seems hard to justify making a diagram like this interactive. Two reasons: (1) it was a lot of work, and (2) there's not much more the reader will learn by changing the angle.
I think focusing on the angle was a mistake. The main thing that matters about angles is low vs high, and two static diagrams can provide that more simply than an interactive diagram. Instead, I should've asked: what is the reader learning? And I think the answer to that would be (1) the pythagorean theorem applied to each of the triangles, and (2) the correspondences between similar triangles. So what could interactivity actually add to this learning process?
- highlight one of the three triangles and show the corresponding pythagorean theorem equation
- highlight two of the three sides and show the corresponding similar triangle equations
Changing the angle doesn't seem to be that important. Here's a different design for the diagram, static but with hover effects:
The original diagram used color for axes. This one uses color for triangles. Even without interactivity, you can see the three triangles here. (I also added a checkbox to the diagram at the top to color the triangles the same way)
The interactivity here is limited to mouse hovering over (or touching) an equation to highlight the corresponding part of the diagram. I think it does help to guide and focus the reader. The implementation is relatively simple[2]: I annotate the svg with class and then use CSS to hide/show various parts of the diagram based on the hover state.
My overall conclusion from this exercise is that this particular diagram isn't helped much by being interactive. Hover effects are all I needed. I should start by asking the question of what do I want the reader to learn, and design the diagram and interactivity to support that. I shouldn't assume interactive diagrams are always better.