Wednesday, August 24, 2011

Five years ago I got interested in interactive diagrams and made a few, but then got distracted by other things. I wrote a blog post about why I was interested in them. I've recently become interested in them again. Back then, I used Flash, but these days I think HTML5 is a good option. I generally make better progress by starting small, so I've started working on something fairly simple: a diagram showing where the “blind spots” are when driving a car.

It's not yet complete but I've already learned some things:

If you have your seat forward the blind spots are smaller than if you have your seat back.

The right side mirror shows much less area than the left side mirror. To see a larger area you need to distort the area, which causes things to look smaller. This is why you see “Objects are closer than they appear” on the right mirror but not the left mirror.

In retrospect, these should've been obvious, but the diagram is what made it clear to me. It also became clear that the diagram needs more work. I need to add an option to make the right side mirror curved (I'm not sure what the typical curvature is). I might need to calculate the effect of someone rotating their head. I should measure car mirrors and the driver position inside the car.

It's been a fun little project. I learned some Javascript and SVG, and I got to play with Mike Bostock's d3 library, even though it's overkill for a diagram like this. The process of working on the diagram helped me understand things and motivated me to learn more. I'd like to work on several more interactive diagrams to see if the car diagram is a special case or if interactive diagrams are generally useful for me.

Labels: project