Standing on Many Shoulders to Design Effective Interactive Graphics

An effective data-journalism-style app presents important results with effective graphics, text, and tables. It uses interactive tools to help users find the results they care about and understand the details. Insights from conventional data visualization and data analysis, user experience, web design, and agile software development can all improve these graphics. 

Other authors have covered finding results and presenting them effectively with traditional graphics at length elsewhere. I have particularly benefited from Jon Schwabish’s Better Data Visualizations and Cole Nussbaumer Knaflic’s Storytelling with Data podcast. Comparable material on presenting interactive graphics sites seems scattered across sources like data journalism courses and general-purpose user interface/user experience materials. Thus, this post focuses on insights about how to use interactive tools effectively in this context. I focus on interactive aspects in the first section below and Plotly-specific aspects in the second section. 

The final detail challenges are doubly frustrating because they require significant attention when it feels like you are nearly done, you already know what the data has to say, and it is hard to resist the fierce urgency of the next project. If you have not thought about important categories of users who may not think like you do, polished your hover text, or gotten feedback on the web elements that let users find the view they want, then the Colorado Department of Transportation offers good advice on a highway approaching Denver from the mountains:

The commentary in this post is broadly applicable, but particularly appropriate for people who write Python code to create public Plotly sites that provide compelling details and experiences to a wide variety of audiences with diverse interests. Designers of such sites often need to infer the needs of cold readers who are unfamiliar with the analysis and topic and from whom they often never have a chance to get feedback. Further, the attention to detail in the interactive details will be one of the outside reader’s significant chances to get a signal about whether your analysis was careful and a factor that determines whether the reader finds and appreciates your insights or leaves in frustration.

Interactivity often replaces a few wrenching decisions with many consequential choices. 

Static graphics force weighty decisions, namely identifying a handful of details that deliver our message to the most important or typical slice of the audience. Ultimately, most static graphics projects produce a comparatively small-scale set of graphics and thus can only address a small number of audience questions.

If these questions have no satisfying answers, consider an interactive site that delivers more detail. That interactive can speak to more audiences, but requires weaving many views, navigation, and – likely -- mouse over text into a coherent, high-quality whole. You will need to consider options for each of those design elements and implement the best option. Budget time accordingly. 

Your design process will choose the type, content, order, and default value of the navigation elements. The two examples below solve similar problems in different ways:

A good first draft will teach you how to make the next one better.

 The right approach for your app depends on your goals, your data, and your story. Reflect regularly on how drafts and colleagues’ feedback suggest ways to make a better, perhaps simpler and more focused graphic.

Consider starting with a sketch or a storyboard to see if your concept coheres on paper and resonates with clients or colleagues. Preliminary graphs are very informative too. One data set may leave the perfect sized slot for an inset. Another may compare things of different scales. Drafts will help surface challenges and puzzles that deserve greater analysis, identify which approaches work, reveal unneeded complexity or troubling omissions, and anchor conversations with your colleagues.

Early reflection and feedback help avoid refining details when the graphic needs to be fundamentally rethought in ways that will render those details irrelevant. 

Use your drafts, your goals, and your knowledge of your audience to identify details and patterns that matter and identify distracting details accordingly. 

 Eliminating extraneous distinctions and details often streamlines the graphs and exposition. Inconsistency in categorization within a project often demands explanation. A distinction that is valuable and well worth making to address one question may be irrelevant in addressing another question. 

Interactivity is not an alternative to figuring out what is important. 

Interactives escape the limits of the printed page, but are still limited by your audience’s eyes, screen, memory, and attention span. Know your story, audiences, and priorities. The default view on the landing page is the only one every visitor will see and is a chance to introduce the analysis and convey the most important results.

Allocate scarce space on your landing page, axes, prominent views, development time, and menus accordingly. Consider eliminating low-value facets that clutter the site, force uncomfortable design tradeoffs, distract your team from more important tasks, or threaten timelines. Consider simplifying or turning off hover-text and less prominent views if you cannot design them to your organization’s standards within your time budget. 

Allocate easy-to-see and -understand aspects of your app thoughtfully. 

Chapter 1 of Jon Schwabish’s Better Data Visualizations offers a hierarchy of visual attributes from pre-cognitive things that people notice immediately and aspects like element length that people understand accurately to aspects that require more thought and that people perceive less accurately. A similar hierarchy applies to interactives. Most of the details you can add through interactivity and navigation components are relatively obscure. Most users will only visit a few views and perhaps read the hover text for a few data points. 

The prioritization necessary for the explorable appendix and interactive, scrolly-telling style exposition is different. The linear exposition in a scrolly telling graphic offers more prime real estate and recommends a path through a series of views. It relieves the pressure to develop a single screen that does everything important. Nonetheless, users may get bored and click away from a linear presentation or seek to send colleagues a direct link to the result that speaks to them most.  

Space on dropdown menus is often at a premium.

A single menu that offers the user dozens of possible views gets overwhelming, as do interacting menus that offer hundreds of combinations.  You can prune the list of views to focus on the highest value and most insightful views. A blend of Plotly and boilerplate JavaScript can let users choose a category of views which offers a second, nested menu listing drilling into specific details from that category. 

Seize the opportunity to find the most important patterns and present them clearly.  

Well-designed drafts and data exploration empower you to find important patterns and revise to deliver them effectively. If you ask the reader to do the hard analysis and to discover what is important, only the most motivated and sophisticated readers will discover the key patterns. Many readers may draw superficial and unhelpful conclusions instead or just give up. Every user will have reason to be annoyed at the site creators.

The cluster of blue dots in the top right show that nine of the 10 ROTC campuses that have the highest percentages of women among their graduating ROTC officers are at Historically Black Colleges and Universities.

Providing downloadable, disaggregated data can empower users to do their own, novel analysis to address needs you did not anticipate or could not accommodate. 

The data is in the Plotly JSON anyway.

Design to meet user needs.

Consider asking colleagues to articulate user stories about who we hope will come to the site and what they hope to learn. Prioritize and design navigation accordingly. Site visitors who run the whole program that the site describes likely need a big picture view, while visitors from an individual facility or multi-facility region might want to understand their own performance in absolute terms and relative to comparable organizational units. Insights from user testing and broadly applicable, textbook, user-experience insights may be informative.

Presenting final analysis to diverse groups including cold readers is different from building live data dashboards. 

Users visit dashboards repeatedly and often know the context, but tend to visit data journalism style sites just once and often do so with less context about the topic and analysis. 

You might be stuck at the stoplight color convention and not realize it. Consider alternative visual routes!

The red-is-bad, green-is-good convention does not work for the red/green color blind. It is the design equivalent of asbestos – it is useful and convenient enough to seem like a good idea in the 20th century but is toxic and hard to get rid of. It persists because so many people, likely including your clients and readers, have seen it so many times that it now seems like the conventional choice. Conventional stop light colors are not compliant with Section 508 color accessibility and Web Content Accessibility Guidelines level AA contrast standards.

Convincing clients to rid your project of stoplight style colors may not be worth the fight, especially when the discussion is embedded in an ongoing relationship. The time and bureaucratic capital spent arguing for e.g. a blue and orange palette cannot be spent advocating for a better analytic strategy or coming to consensus about the right way to present puzzling results. Further, there are ways to get out of the stop-light color box. 

• Consider adding visual elements like sparkline-style trend lines on each row, horizontal lines showing the relevant standards or symbols like ⚠, 🎉, ☆, ▼ or ▲. Up and down arrows (e.g. ▼ and ▲) can capture either trends or performance relative to expectations. Visual elements can complement or replace colors. 
• Consider reserving bold colors for one or two categories the visualization seeks to highlight and putting the rest in a standard, neutral shade (often gray, blue, or white).  If the goal of the visualization is to focus attention on the problems or successes, perhaps neutral colors are better options for the outcomes that are not the focus. Consider using separate visuals to draw attention to problems and give teams credit for high performance not just because red, green, and yellow struggle to coexist but also because a different analysis may give credit to groups that exceeded expectations given their exceptionally difficult circumstances. For example, the analysis we should do to target investments aimed at raising the lowest test scores is different from the best analysis to identify the teachers who add the most value considering their students’ background and prior performance. A single stoplight colored chart would likely struggle to answer both questions. 

Applying a pattern fill to just one color can give color blind readers an alternative way to identify an otherwise-hard-to-distinguish color.

Some commentators offer alternative palettes or insights on hues that the color blind can distinguish while retaining the reddish is a problem, greenish is good theme. Mozilla writes, “a reddish-orange and a bluish-green are distinguishable by color blind users, while still conveying the cultural ‘good’ and ‘bad’ meanings” and offers commentary on contrast requirements as well. Alex O’Neal offers commentary about choosing red, green, and yellow colors that can coexist, but her contrast ratios appear to be less than the standards-compliant 3:1. 

Additional commentary and tools are available including a site that simulates how a screenshot will look to the color blind, the WebAIM Contrast Checker from Utah State University, and an accessible palette generator. 

Colors are surprisingly hard. Graphic design professionals can add a lot in a brief conversation about color selection, and one, accessible organizational palette can both establish a consistent visual brand and be reused across many projects. Chapter 12 of Better Data Visualizations covers the development of a data visualization style guide.

Expect differences in scale across views.

Interactive sites often let users see both the big picture and components. A scale chosen to accommodate the entirety of the budget or the largest universities will likely dwarf small components or liberal arts colleges – leaving the entire graphic populated with tiny bars or nearly white shades. It may be necessary to use different scales for different views to make the within-view variation clear. If you use different scales – so that comparing across views could be misleading -- telegraph that to the reader by e.g. 

• being consistent in grid lines spacing – say having a grid line at $20 million in sales that is near the bottom of the national view but close to the top of a regional view,

• varying the color scheme and color bar length if you convey values through, say, a set of color-coded (choropleth) maps as this map of Congressionally directed spending by agency does. Perhaps you would use the Plotly blues scale for a wide range and greens when the maximum values are smaller. 
• be deliberate about choosing the number of scales to balance the effectiveness of any given view while seeking to make views of similar concepts easy to compare. The example assigns a couple dozen agencies to just six scales.

A few more practical tricks

df.to_markdown() makes it easy to integrate tables with your interactives

The Pandas df.to_markdown() command is an efficient way to produce and format tables for a site you build with Python, Pandas, and Plotly. Dash AG Grid offers even more flexibility.

The Plotly title element knows where the bottom of your graphic is.

If you need to include a source line or note at the bottom of your graphic, the Plotly title element supports container coordinates which make doing so easy. 

Sometimes the graphing tools are the best way to take control of legends

Sometimes the best way to make a nuanced legend is to use a highly labelled, illustrative graph component using the subplots domain option or an inset.

Use tick mode array if you need to take fine grained control of categorical axes. 

Plotly’s built in support for categorical axes that put data points next to plain text labels is often everything you need. There are reasons you want to take full control of spacing. Perhaps you want to put distance between hardware and supplies when your categories show profits from printers, copiers, ink, and paper. Perhaps you want to graph nations’ GDP with a wide horizontal bar in one column and their literacy rates by gender with two horizontal bars in another column. You can map the categories to the desired coordinates. Syntax like for n, category_name in enumerate(list_of_categories) may help you get started. Tick mode array lets you put your categorical labels back.

Hovertext may be a great place for contextual data that does not fit into the main graph. 

Hovertext is a foundational interactive feature and a great place to enrich your story with carefully chosen additional details. By default, it reiterates the graph with more precision. 

This hovertext fills in a detail that would not graph well.

This hovertext provides many relevant details about the patterns underlying the scatterplot.

Hovertext may be one of the last things you think about, but do not make it an afterthought. 

You likely do not want to publish the default values. Polish the mouse-over wording and formatting with hovertemplates. Hovertext is a place where readers will notice your attention to detail or your decision to leave defaults like: “1.0 students graduated.”  You can take control of hovertext by blending Plotly hovertemplates with clever Pandas and f-string coding. For example, if you want to display “1 project”, but “2 projects”, you can create a variable that contains the string “s” only if the region has more than one project but is blank if there is exactly 1. Similarly, you can write, f"Sales volume of {'organic '*(certified_organic==True)} produce" to include the word organic only as needed.  Hovertemplates are JavaScript strings which are subtly different from Python f-strings and notably require a % sign before variable names in braces, i.e. %{variablename}.

Conclusions: Great published interactives deliver important insights with thoughtful (conventional) graphics and smart interactive details.

Interactive graphics used well strengthen your message and credibility while meeting the needs of users with diverse priorities, perspectives, and attention spans. Your readers will likely never see the care you took in cleaning the data, robustness testing your model, or exploring alternative hypotheses but they absolutely will have a chance to see whether you thought carefully about their needs, what they needed to know to understand your work and efficiently find the details they need, and whether you polished your legends, axis labels, and hover text.

Getting those unglamorous details right builds your credibility. It all starts with appropriate, conclusive analysis presented with effective graphics, topics that have been covered comprehensively elsewhere. Interactive graphics allow you to present more content using more tools than a static graphic. More content requires more design choices.

Your use of tools like menus and hover text benefits from learning, including the lessons above, experimentation, feedback from colleagues trained in the area, and experience. Make those choices judiciously by studying interactive design and doing the hard work to make your important conclusions nearly effortless to find and understand.

Good, detail oriented design builds your credibility and ensures that interactivity delivers your message better rather than distracting from it.

Biography: Rob Letzler is a policy-oriented data scientist and energy economist. He has worked with large and small organizations in the public, private, and non-profit sectors. He is a contributor to the Plotly documentation and holds a Ph.D. in Public Policy from the University of California, Berkeley.

Note: The opinions expressed in this post are the author’s own and do not necessarily reflect the views of his employer, management, colleagues or any organization he has been affiliated with.

Acknowledgements: I am in position to write this because of all of the people who have helped me advance in interactive graphics work, including Priyaanka Arora, Liam Connors and Greg Wilson who have provided feedback on my contributions to the Plotly documentation and blog. Thanks to Sima Raha who applied Plotly creatively to document ways to make new graph types/ Ryan Han has helped me on my journey for years and offered thoughtful input on the stoplight color section. I am grateful for the conversations and collaborations I have had with Ellen Arnold, Bri Bovbjerg, Abby Brown, Jackson Gode, Chris Gresh, Sharon Jan, David Jones, Matt Levie, Gabe Nelson, Philip Menchaca, Marc Molino, Colby Porter, Sam Portnow, Rose Recht, Ethiene Salgado-Rodriguez, Spencer Schultz, Sam Sloate, Dylan Stagner, Jay Wang, and Les Wilkins.