Looking at the interactive diagrams I have been making, I have begun to see specific principles emerge. These principles did not emerge because I went into the project with any specific principles in mind.<\/p>\n
Rather, I had treated each diagram as its own specific design problem, separate from the others. Yet when I look at these diagrams in the aggregate, I see patterns.<\/p>\n
For example, each diagram conveys only a single idea. I don’t try to tell multiple stories with a diagram. Rather, I tell multiple stories with multiple diagrams. As a consequence, each diagram corresponds to at most a few short paragraphs of text.<\/p>\n
Also, I tend to use an “up to down” mouse movement to advance a kind of narrative. The general idea is “When the mouse is near the top of the diagram, the transformation that tells the story hasn’t happened yet. As the mouse sweeps down, the transformation takes place.”<\/p>\n
This is consistent with thinking of a document as having a generally forward progression of thought. As the user moves the mouse down through the document, the resulting animation in each diagram advances the story a little bit.<\/p>\n
When showing something that’s 3D, I tend to use horizontal mouse movement as a kind of lazy-susan effect, rotating the view about a vertical axis. This doesn’t give general viewpoints, but it’s good enough to give an intuition about the 3D shapes in the figure.<\/p>\n
There may be other principles at work that I’m not thinking of. I suspect those principles will become easier to see as more of these diagrams get made.<\/p>\n","protected":false},"excerpt":{"rendered":"
Looking at the interactive diagrams I have been making, I have begun to see specific principles emerge. These principles did not emerge because I went into the project with any specific principles in mind. Rather, I had treated each diagram as its own specific design problem, separate from the others. Yet when I look at … Continue reading “Principles for interactive diagrams”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/blog.kenperlin.com\/index.php?rest_route=\/wp\/v2\/posts\/13248"}],"collection":[{"href":"https:\/\/blog.kenperlin.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.kenperlin.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.kenperlin.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.kenperlin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=13248"}],"version-history":[{"count":1,"href":"https:\/\/blog.kenperlin.com\/index.php?rest_route=\/wp\/v2\/posts\/13248\/revisions"}],"predecessor-version":[{"id":13249,"href":"https:\/\/blog.kenperlin.com\/index.php?rest_route=\/wp\/v2\/posts\/13248\/revisions\/13249"}],"wp:attachment":[{"href":"https:\/\/blog.kenperlin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=13248"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.kenperlin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=13248"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.kenperlin.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=13248"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}