Dupo: A Mixed-Initiative Authoring Tool for Responsive Visualization
Pages 934 - 943
Abstract
Designing responsive visualizations for various screen types can be tedious as authors must manage multiple chart versions across design iterations. Automated approaches for responsive visualization must take into account the user's need for agency in exploring possible design ideas and applying customizations based on their own goals. We design and implement Dupo, a mixedinitiative approach to creating responsive visualizations that combines the agency afforded by a manual interface with automation provided by a recommender system. Given an initial design, users can browse automated design suggestions for a different screen type and make edits to a chosen design, thereby supporting quick prototyping and customizability. Dupo employs a two-step recommender pipeline that first suggests significant design changes (<italic>Exploration</italic>) followed by more subtle changes (<italic>Alteration</italic>). We evaluated Dupo with six expert responsive visualization authors. While creating responsive versions of a source design in Dupo, participants could reason about different design suggestions without having to manually prototype them, and thus avoid prematurely fixating on a particular design. This process led participants to create designs that they were satisfied with but which they had previously overlooked.
References
[1]
Flourish, n.d. [Online]. Available: http://flourish.studio/. 1,9.
[2]
Rollup, n.d. [Online]. Available: https://rollupjs.org/. 9.
[3]
Svelte, n.d. [Online]. Available: https://svelte.dev/. 7.
[4]
K. Andrews. Responsive visualisation. In MobileVis '18 Workshop at CHI 2018, 2018. [Online]. Available: https://mobilevis.github.io/assets/mobilevis2018_paper_4.pdf. 1.
[5]
M. Bostock, V. Ogievetsky, and J. Heer. D3 data-driven documents. IEEE Trans. Visual Comput. Graphics, 17 (12): pp. 2301–2309, 2011. 1, 9.
[6]
V. Braun and V. Clarke. Using thematic analysis in psychology. Qualitative Research in Psychology, 3 (2): pp. 77–101, 2006. 7.
[7]
K. Cook, N. Cramer, D. Israel, M. Wolverton, J. Bruce, R. Burtner, and A. Endert. Mixed-initiative visual analytics using task-driven recommendations. In Proc. IEEE VAST, pp. 9–16. IEEE, New York, 2015. 2.
[8]
W. Cui, J. Wang, H. Huang, Y. Wang, C.-Y. Lin, H. Zhang, and D. Zhang. A mixed-initiative approach to reusing infographic charts. IEEE Trans. Visual Comput. Graphics, 28 (1): pp. 173–183, 2022. 2.
[9]
Datawrapper GmbH. Datawrapper, 2013. [Online]. Available: https://www.datawrapper.de/. 1, 2, 9.
[10]
E. Di Giacomo, W. Didimo, G. Liotta, and F. Montecchiani. Network visualization retargeting. In Proc. IISA, pp. 1–6. IEEE, New York, 2015. 1, 2.
[11]
G. Ellis and A. Dix. Enabling automatic clutter reduction in parallel coordinate plots. IEEE Trans. Visual Comput. Graphics, 12 (5): pp. 717–724, 2006. 4.
[12]
N. Elmqvist and J. Fekete. Hierarchical aggregation for information visualization: Overview, techniques, and design guidelines. IEEE Trans. Visual Comput. Graphics, 16 (3): pp. 439–454, 2010. 2.
[13]
M. Gebser, R. Kaminski, B. Kaufmann, and T. Schaub. Clingo = ASP + control: Preliminary report. 2014. [Online]. Available: https://arxiv.org/abs/1405.3694. 4, 7.
[14]
M. Gebser, B. Kaufmann, R. Kaminski, M. Ostrowski, T. Schaub, and M. Schneider. Potassco: The potsdam answer set solving collection. AI Commun., 24 (2): pp. 107–124, 2011. 2, 4, 7.
[15]
GitHub. Copilot, n.d. [Online]. Available: https://github.com/features/copilot. 9.
[16]
J. Harper and M. Agrawala. Deconstructing and restyling d3 visualizations. In Proc. UIST, pp. 253–262. ACM, New York, 2014. 9.
[17]
C. Healey, S. Kocherlakota, V. Rao, R. Mehta, and R. St. Amant. Visual perception and mixed-initiative interaction for assisted visualization design. IEEE Trans. Visual Comput. Graphics, 14 (2): pp. 396–411, 2008. 1, 2, 3.
[18]
B. Hinderman. Building Responsive Data Visualization for the Web. John Wiley & Sons, 2015. 1.
[19]
J. Hoffswell, W. Li, and Z. Liu. Techniques for flexible responsive visualization design. In Proc. CHI, pp. 1–13. ACM, New York, 2020. 1, 2, 3, 4, 5.
[20]
H. Kim, D. Mortiz, and J. Hullman. Design patterns and trade-offs in authoring communication-oriented responsive visualization. Comput. Graphics Forum (Proc. EuroVis), 40 (3): pp. 459–470, 2021. 1, 2, 3, 4, 5.
[21]
H. Kim, R. Rossi, F. Du, E. Koh, S. Guo, J. Hullman, and J. Hoffswell. Cicero: A declarative grammar for responsive visualization. In Proc. CHI, Art. No. ACM, New York, 2022. 2, 4, 7, 9.
[22]
H. Kim, R. Rossi, A. Sarma, D. Moritz, and J. Hullman. An automated approach to reasoning about task-oriented insights in responsive visualization. IEEE Trans. Visual Comput. Graphics, 28 (1): pp. 129–139, 2022. 1, 2, 3, 4.
[23]
J. L. Kolodner and L. M. Wills. Case-based creative design. Technical Report, AAAI, 1993. 2.
[24]
J. L. Kolodner and L. M. Wills. Powers of observation in creative design. Design Studies, 17 (4): pp. 385–416, 1996. 2.
[25]
C. Körner. Learning Responsive Data Visualization. Packt Publishing, 2016. 1.
[26]
J. Leclaire and A. Tabard. R3s.js–towards responsive visualizations. In Workshop on Data Exploration for Interactive Surfaces DEXIS 2015, pp. 16–19, 2015. 1.
[27]
H. Lin, D. Moritz, and J. Heer. Dziban: Balancing agency & automation in visualization design via anchored recommendations. In Proc. CHI, pp. 1–12. ACM, New York, 2020. 1, 2, 3.
[28]
J. S. Linsey, I. Tseng, K. Fu, J. Cagan, K. L. Wood, and C. Schunn. A study of design fixation, its mitigation and perception in engineering design faculty. J. Mech. Des., 132 (4): p. 041003, 2010. 1, 2.
[29]
R. Ma, H. Mei, H. Guan, W. Huang, F. Zhang, C. Xin, W. Dai, X. Wen, and W. Chen. Ladv: Deep learning assisted authoring of dashboard visualizations from images and sketches. IEEE Trans. Visual Comput. Graphics, 27 (9): pp. 3717–3732, 2021. 1, 2, 3.
[30]
Microsoft. Power bi, 2011. [Online]. Available: https://powerplatform.microsoft.com/en-us/. 2.
[31]
P. O'Donovan, A. Agarwala, and A. Hertzmann. DesignScape: Design with interactive layout suggestions. In Proc. CHI, pp. 1221–1224. ACM, New York, 2015. 1, 3.
[32]
Z. Qu and J. Hullman. Keeping multiple views consistent: Constraints, validations, and exceptions in visualization authoring. IEEE Trans. Visual Comput. Graphics, 24 (1): pp. 468–477, 2017. 2.
[33]
S. Ramírez. FastAPI, n.d. [Online]. Available: https://fastapi.tiangolo.com/. 7.
[34]
R. Rosenbaum, J. Zhi, and B. Hamann. Progressive parallel coordinates. In Proc. PacificVis, pp. 25–32. IEEE, New York, 2012. 2.
[35]
A. Satyanarayan, D. Moritz, K. Wongsuphasawat, and J. Heer. Vega-lite: A grammar of interactive graphics. IEEE Trans. Visual Comput. Graphics, 23 (1): pp. 341–350, 2017. 7, 9.
[36]
A. Swearngin, C. Wang, A. Oleson, J. Fogarty, and A. J. Ko. Scout: Rapid exploration of interface layout alternatives through high-level design constraints. In Proc. CHI, pp. 1–13. ACM, New York, 2020. 1.
[37]
Tableau Software. Tableu, 2003. [Online]. Available: https://www.tableau.com/. 2.
[38]
A. Tse. ai2html, 2011. [Online]. Available: http://ai2html.org/. 1.
[39]
E. Wall, S. Das, R. Chawla, B. Kalidindi, E. T. Brown, and A. Endert. Podium: Ranking data using mixed-initiative visual analytics. IEEE Trans. Visual Comput. Graphics, 24 (1): pp. 288–297, 2018. 1, 2.
[40]
K. Wongsuphasawat, D. Moritz, A. Anand, J. Mackinlay, B. Howe, and J. Heer. Voyager: Exploratory analysis via faceted browsing of visualization recommendations. IEEE Trans. Visual Comput. Graphics, 22 (1): pp. 649–658, 2016., 3.
[41]
K. Wongsuphasawat, Z. Qu, D. Moritz, R. Chang, F. Ouk, A. Anand, J. Mackinlay, B. Howe, and J. Heer. Voyager 2: Augmenting visual analysis with partial view specifications. In Proc. CHI, pp. 2648–2659. ACM, New York, 2017. 1, 2, 3.
[42]
A. Wu, W. Tong, T. Dwyer, B. Lee, P. Isenberg, and H. Qu. MobileVisFixer: Tailoring web visualizations for mobile phones leveraging an explainable reinforcement learning framework. IEEE Trans. Visual Comput. Graphics, 27 (2): pp. 464–474, 2021., 2.
[43]
A. Wu, L. Xie, B. Lee, Y. Wang, W. Cui, and H. Qu. Learning to automate chart layout configurations using crowdsourced paired comparison. In Proc. CHI, Art. No. ACM, New York, 2021. 2.
[44]
Y. Wu, X. Liu, S. Liu, and K. Ma. ViSizer: A visualization resizing framework. IEEE Trans. Visual Comput. Graphics, 19 (2): pp. 278–290, 2013. 1, 2.
[45]
ZingSoft. Zingchart, 2009. [Online]. Available: https://www.zingchart.com/. 2.
Index Terms
- Dupo: A Mixed-Initiative Authoring Tool for Responsive Visualization
Index terms have been assigned to the content through auto-classification.
Recommendations
Responsive Data Visualization: the National Weather Service and the Representation of Risk
SIGDOC '18: Proceedings of the 36th ACM International Conference on the Design of CommunicationThis presentation advocates responsive data visualization design in risk communication practices by applying principles of information design [1] to the National Weather Service's online weather maps. Citizens are consuming information via smartphones ...
Falx: Synthesis-Powered Visualization Authoring
CHI '21: Proceedings of the 2021 CHI Conference on Human Factors in Computing SystemsModern visualization tools aim to allow data analysts to easily create exploratory visualizations. When the input data layout conforms to the visualization design, users can easily specify visualizations by mapping data columns to visual channels of the ...
Techniques for Flexible Responsive Visualization Design
CHI '20: Proceedings of the 2020 CHI Conference on Human Factors in Computing SystemsResponsive visualizations adapt to effectively present information based on the device context. Such adaptations are essential for news content that is increasingly consumed on mobile devices. However, existing tools provide little support for responsive ...
Comments
Information & Contributors
Information
Published In
1077-2626 © 2023 IEEE. Personal use is permitted, but republication/redistribution requires IEEE permission. See https://www.ieee.org/publications/rights/index.html for more information.
Publisher
IEEE Educational Activities Department
United States
Publication History
Published: 01 January 2024
Qualifiers
- Research-article
Contributors
Other Metrics
Bibliometrics & Citations
Bibliometrics
Article Metrics
- 0Total Citations
- 0Total Downloads
- Downloads (Last 12 months)0
- Downloads (Last 6 weeks)0
Reflects downloads up to 01 Feb 2025