I write interactive explanations; I'm always looking for simpler ways to explain things.

Think back to every technical paper you've read. The text connects to diagrams by using text such as "see figure 4". Maybe it's more specific and says "in figure 4 see circle 24". Maybe it's a hypertext link. However if I look at how I take notes on paper, I don't do that! I just draw an arrow to the thing I want to point to.

Figure 4. Sea of circles.

From an early age we have invisible boxes around text and diagrams, keeping them apart. It doesn't have to be this way. Pointing is the simplest way to direct attention to something. Why don't we do it more? I don't know, but these are the kinds of things I'm exploring on the web.

How did I implement this? The first guess would be that I'm using a giant SVG overlay that covers the area between the pointer and the target. I'm not! That's the only SVG element in this blog post. What's the trick? By default, the overflow for an SVG element is set to hidden; in some versions of IE it was visible and I had to set it back to hidden. That keeps the content inside its bounding box. But the IE situation made me wonder — if I set it to visible, what happens? It turns out you can draw outside the box! This seems to work across the browsers I've tried.

The second thing I need to do is construct an arrow path. The source and target of the arrow may be in different SVG elements, or they might not be SVG at all. For this page I use an invisible span in the text as the anchor. I use getBoundingClientRect() to get the coordinates on the page. Then I pick the midpoint of one side of the rectangle as the arrow source or target. I need to translate all the coordinates into the coordinate space of the SVG I'm drawing into.

For this demo I hard-coded the size, curvature, and directions of the arrows. I don't adjust them when the page is resized. For a reusable library, I think it'd be cleaner to have one svg per arrow anchor.

Labels: ,

11 comments:

Anonymous wrote at October 11, 2016 11:30 AM

I can't see a thing on my computer, just an empty rectangle. Clicking on the links doesn't appear to change anything.

Amit wrote at October 11, 2016 12:03 PM

Sorry about that. I've not tested this extensively, and I haven't built the non-JS version. May I ask which browser/OS combination you're using? Thanks

Unknown wrote at October 11, 2016 1:00 PM

Your arrows.js script is not loading via HTTPS - aborted connection for me. Works fine via HTTP.

Amit wrote at October 11, 2016 1:10 PM

Thanks Tim! I'll inline it.

Anonymous wrote at October 11, 2016 8:08 PM

Hey this is pretty snazzy. Well done!

Anonymous wrote at October 12, 2016 11:53 AM

To my surprise, this also works on a tablet! Good job!

Greg Wilson wrote at November 02, 2016 8:36 AM

You ask, "Why don't we do it more?" I think the level of technical sophistication required to understand (never mind implement) your answer is the big reason. For all its faults, PowerPoint makes it really easy to mix text and graphics much more fluidly and easily than HTML + CSS + Javascript + SVG + dark magic (or LaTeX) ever has.

pensioncreditor wrote at November 09, 2016 2:25 AM

I can't see an obvious use yet? Can you suggest use cases?

Chris wrote at December 13, 2016 8:04 AM

Great post. Thinking outside the box (literally, heh). Reminds me a bit of Knuth's "Literate Programming" ideas. Well done!

Ayush Sharma wrote at December 10, 2023 11:16 AM

After years I'm able to understand the intent behind your content (I'm Ayush Sharma, who applied for Aimacode in 2016 and got rejected because I was foolish lol). Your work is nice, I intend to take yours, Bret Victor's and other people's work to next level if I can. Keep sharing!

Amit wrote at December 11, 2023 9:30 AM

@pensioncreditor: it's been a few years since your comment but I do use this occasionally. An example is https://www.redblobgames.com/x/1939-planetary-dungeon/#parallel-breadth-first-search where I want to point to a specific part of a diagram. There's now a library https://anseki.github.io/leader-line/ that handles things like this.

@Chris: thanks!

@Ayush: hi! glad to see you here. I'd love to see what you create.