Scalable vs Responsive Visualisation

• Scalable Visualisation:

  • Scales fluidly (but nothing else).

• Responsive Visualisation:

  • Responsive Layout: Appearance or changes at specific breakpoints, scales fluidly between breakpoints.
  • Responsive Display Density: Sampling for lower resolution displays (preserving important data points).
  • Responsive Interaction: Selective support for touch, keyboard, mouse, orientation, motion events, etc. Larger target sizes for tap.

1. Responsive Line Charts

At narrower widths:

• Thin out the axis labels.
• Rotate and/or abbreviate axis labels.
• Switch to a sparkline at narrow widths.
• Reduce data density (sample the points). [Caution]

Demo:

• Responsive Line Chart
  https://projects.isds.tugraz.at/respvis/demos/resp-linechart/resp-linechart.html

2. Responsive Bar Charts

At narrower widths:

• Rotate and/or abbreviate axis labels.
• Adjust data density (remove some bars). [Caution]
• Flip from vertical bars to horizontal bars.

Demos:

• Responsive Bar Chart
  https://projects.isds.tugraz.at/respvis/demos/resp-barchart/resp-barchart.html

3. Responsive Parallel Coordinates

• Smoothly decrease the separation between dimensions.
• Rotate and/or abbreviate dimension labels.
• Selectively remove some of the dimensions (but allow the user to override!).
• Flip from vertical parallel lines to horizontal (so visualisation extends vertically down the screen).
• Provide raw data as HTML table (fallback in case JS fails, accessibility).

Demo:

• Responsive Parallel Coordinates
  https://projects.isds.tugraz.at/respvis/demos/resp-parcoord/resp-parcoord.html

4. Responsive Scatterplots

• Pinch zoom.
• Filtering.
• Fisheye and Cartesian distortion.
• Disambiguation. If data points overlap, temporarily list and/or displace them.
• Sampling or aggregation [Caution]

Demo:

• Responsive Scatterplot
  https://projects.isds.tugraz.at/respvis/demos/resp-scatterplot/resp-scatterplot.html

5. Responsive Choropleth Maps

• Pinch zoom, panning.
• Higher resolution polygon borders on higher resolution displays (lower for lower res).
• Dynamically adjust the thickness of polygon borders.
• Dynamic grouping icons for clusters of POIs (linked to zoom level).
• Temporarily hide away controls and options.

Demo:

• Responsive Choropleth Map (SVV)
  http://diversitaet.steiermark.at/steirische-vielfalt/

Future Work

• Extend the interactivity of bar charts, line charts, par coords:
  • Tap/click bars, data points, polylines (details on demand)
  • Filter, invert, reorder dimensions.
• Refactoring, debugging, usability testing.
• Componentise, port to D3 v5.
• Vega specification to drive the components.

Credits

Thanks to the following students and collaborators for helping to build the demos:

• Rizwan Mehmood
• Miran Levar
• Johanna Pirker
• Bernd Prünster
• Werner Sturm
• Gregor Christandl
• Simon Kloiber
• Matthias Link
• Lukas Skofitsch
• Aleš Smrdel
• Thomas Traunmüller

Thank You

Web site:
http://www.isds.tugraz.at/keith/

Slides:
http://keithandrews.com/talks/2018/mobilevis-2018-04-21/

Project:
https://projects.isds.tugraz.at/respvis/