Techniques for Flexible Responsive Visualization Design

Responsive 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 visualization design. We analyze a corpus of 231 responsive news visualizations and discuss formative interviews with five journalists about responsive visualization design. These interviews motivate four central design guidelines: enable simultaneous cross-device edits, facilitate device-specific customization, show cross-device previews, and support propagation of edits. Based on these guidelines, we present a prototype system that allows users to preview and edit multiple visualization versions simultaneously. We demonstrate the utility of the system features by recreating four real-world responsive visualizations from our corpus.

[1]  Kevin Mu,et al.  War of Words , 2015 .

[2]  Jeffrey Heer,et al.  SpanningAspectRatioBank Easing FunctionS ArrayIn ColorIn Date Interpolator MatrixInterpola NumObjecPointI Rectang ISchedu Parallel Pause Scheduler Sequen Transition Transitioner Transiti Tween Co DelimGraphMLCon IData JSONCon DataField DataSc Dat DataSource Data DataUtil DirtySprite LineS RectSprite , 2011 .

[3]  Xiaotong Liu,et al.  ViSizer: A Visualization Resizing Framework , 2013, IEEE Transactions on Visualization and Computer Graphics.

[4]  Ben Frain.  Responsive Web Design with HTML5 and CSS3 , 2012 .

[5]  Pat Hanrahan,et al.  Polaris: a system for query, analysis and visualization of multi-dimensional relational databases , 2000, IEEE Symposium on Information Visualization 2000. INFOVIS 2000. Proceedings.

[6]  Arvind Satyanarayan,et al.  Lyra: An Interactive Visualization Design Environment , 2014, Comput. Graph. Forum.

[7]  Bert M. Coursey,et al.  Appendix a. , 2006, Journal of the ICRU.

[8]  Mike Jones,et al.  Responsive Web Design , 2012 .

[9]  Francine D. Blau.  Gender pay gap , 2019, Veterinary Record.

[10]  Jeffrey Heer,et al.  Generalized selection via interactive query relaxation , 2008, CHI.

[11]  John T. Stasko,et al.  Data Illustrator: Augmenting Vector Design Tools with Lazy Data Binding for Expressive Visualization Authoring , 2018, CHI.

[12]  Clemens Nylandsted Klokmose,et al.  Vistribute: Distributing Interactive Visualizations in Dynamic Multi-Device Setups , 2019, CHI.

[13]  Sharon Brownie.  I'll have what they're having. , 2015, The lancet. Diabetes & endocrinology.

[14]  Jeffrey Heer,et al.  Capture & Analysis of Active Reading Behaviors for Interactive Articles on the Web , 2019, Comput. Graph. Forum.

[15]  Arvind Satyanarayan,et al.  Authoring Narrative Visualizations with Ellipsis , 2014, Comput. Graph. Forum.

[16]  C. Martin.  2015 , 2015, Les 25 ans de l’OMC: Une rétrospective en photos.

[17]  Jeffrey Heer,et al.  Idyll: A Markup Language for Authoring and Publishing Interactive Articles on the Web , 2018, UIST.

[18]  Bongshin Lee,et al.  Charticulator: Interactive Construction of Bespoke Chart Layouts , 2019, IEEE Transactions on Visualization and Computer Graphics.

[19]  Arvind Satyanarayan,et al.  Critical Reflections on Visualization Authoring Systems , 2019, IEEE Transactions on Visualization and Computer Graphics.

[20]  HeerJeffrey,et al.  D3 Data-Driven Documents , 2011 .

[21]  Daniel L. Schwartz,et al.  Parallel prototyping leads to better design results, more divergence, and increased self-efficacy , 2010, TCHI.

[22]  Tobias Höllerer,et al.  ChartAccent: Annotation for data-driven storytelling , 2017, 2017 IEEE Pacific Visualization Symposium (PacificVis).

[23]  Keith Andrews,et al.  Responsive Visualisation , 2018 .

[24]  Kanit Wongsuphasawat,et al.  Voyager: Exploratory Analysis via Faceted Browsing of Visualization Recommendations , 2016, IEEE Transactions on Visualization and Computer Graphics.

[25]  Arvind Satyanarayan,et al.  Vega-Lite: A Grammar of Interactive Graphics , 2018, IEEE Transactions on Visualization and Computer Graphics.