Many of the visualizations I have created are some version of the "Exploring the..." type. I have recently realized that this can be a limitation for a viewer who may come across it and take just a few moments to decide whether to try to "explore" or not. Basically - I need something to help them very quickly assess "What am I looking at? What does it do?"
This got me to thinking about adding some sort of a "Tour" functionality to a visualization.
The goal is to guide the user through a few of the main points (as I see it) of the visualization, as well as demonstrate how to interact with the visualization. All the while, the visualization is "live" and the user can exit the "tour" at any time. There is something kind of neat about that.
Implementing this in a general way was far easier than I realized. You can see the first two visualizations using this at https://learnforeverlearn.com/kcb/ and https://learnforeverlearn.com/usbudget/ (some screenshots are below).
The main idea is to specify the "tour stops" as short javascript/json objects (maybe 10 lines or so) that contain information on the message, title/blurb, what to put the message box next to (and how to place it relative to that object), and what to point to and where to point to on the destination. Obviously, the selector elements are tied to the specific visualization itself in a tight manner. Additionally, there is a mechanism to "navigate" the visualization so that it is in the proper state (in the cases so far, this involves having the visualization switch to a specific year - this could be generalized to being a callback specified with the message that is called by the generic mechanism). These "tour stops" are placed in an array that implies the order, and a general mechanism can handle previous/next stuff, animations, position adjustments based on something being an svg element or not, etc.
Of course, this mechanism is not necessarily D3-dependent, but D3 visualizations motivated me to play with this, and further development of this approach will likely be influenced by what is possible with D3 (and the tedium of dealing with simultaneous svg and non-svg positioning).
While there is still more generality to implement for this approach, I have created intro tours for the US Budget Visualization, and for a recent budget visualization for Knox County, Tennessee. I think the tours help.
Shown below are a few screenshots of results of this early implementation. It is actually a relaxing and pleasant task to create these little "tour stops", and this also opens up the ability to create different "tours" for the same visualization, highlighting different angles of interest.
(the full visualization is at https://learnforeverlearn.com/kcb/)
In addition to multiple pointers, a detail table was opened and one of the rows of the table was pointed to.
(the full visualization is at https://learnforeverlearn.com/kcb/ )
(the full visualization is at https://learnforeverlearn.com/usbudget/ )
No comments:
Post a Comment