When I started making interactive diagrams the hard part was making them interactive part. But over the years I've gotten much better at that. Now the problem is designing the diagrams. A few weeks ago I was looking at the beginning of my hexagons guide to see what I could improve. I noticed this paragraph had no corresponding diagram:

In math, the "circumradius" is the distance from the center to a corner (I call this size); the "inradius" is the distance from the center to the middle of an edge, sqrt(3/4)*size. The "maximal diameter" is twice the circumradius; the "minimal diameter" is twice the inradius. Wikipedia has more.

My first thought was to add a diagram for this. I already have a diagram about angles, so I could add a diagram showing the inradius and circumradius:

Angle diagram Radius diagram
Introductory diagrams

I made it similar to the angle diagram in that I used dashed lines for the circles and also the measurement lines. But I needed two circles. I ended up making them different colors.

I didn't like it. But I didn't understand why. So I asked Twitter, and got lots of feedback.

So that led me to try out lots of variants of this diagram.

Lots of diagrams
Test page with many diagrams

But there are pros and cons to each of these. Which one should I use? How can I evaluate these designs without knowing the purpose of this diagram?

That's part two.

Labels: , ,

2 comments:

NYCynik wrote at November 28, 2022 7:19 AM

The original shows that each line to each center and each point is the same in a hexagon. I think I liked seeing those extra lines. But agree that for some reason having both labeled the way they are - I felt like it was difficult to see the difference between the two - the verbal description was easier to take in. (That the distance was from the center to the middle.)

Seeing the diagram label it outside of the graph using the circle instead of one of the actual lines made it challenging to follow for me.

Amit wrote at November 29, 2022 9:39 PM

Thanks for the feedback! Not only are the lines to each point the same length, but they also match the sides of the hexagon. I kind of want to show that too. It means we have lots of equilateral triangles, and we can use that triangle height to see how the circumradius and inradius are related. There's a lot of good stuff that I don't have in the current design and I might add that back in a separate diagram somehow.