Responsive Visualizations

Responsive Visualizations

Responsive Web-Design has become more than a trend. It has become an efficient solution for customizing the visual representation of web content for various screen sizes and thereby devices. In the following post i want to point out some thoughts on making web-based visualizations responsive. In this article i will focus on visualizations which are rendered in real time on client side. Most prominent example for such libraries is the D3 library, which makes use of the SVG element.

If you google responsive SVG, you will likely end up on a page that will explain you how to implement the attributes viewBox and preserveAspectRatio. Those two attributes will (at least in modern browsers) force the browser to scale the SVG element, but keep the correct proportions. You could compare the behavior to the way you treat images in responsive layouts. You apply a width of 100% and a height of auto and the images will scale automatically. You can of course also apply this programmatically.

<svg viewBox="0 0 500 200" preserveAspectRatio="xMinYMin meet" ></svg>

var svg = d3.select("#svg")
.attr("width", width)
.attr("height", fullheight)
.attr("viewBox", "0 0 "+width+" "+height)
.attr("preserveAspectRatio", "xMinYMin meet")
.append("g");

responsive_scale

The responsive SVG solution is really easy to implement and requires no code changes, but as we can see in the picture above, it is simply scaling the SVG element and thereby for example small font-sizes as well as thin lines vanish and the visualization as a whole becomes hard to read. Due to these problems one should implement a code driven solution that redraws the visualization depending on screen size. A couple of people have already build examples on how to do this in D3 (e.g. Peter Cook, Chris Amico)

responsive_normal

Simply modifying the axis which is bigger than the screen size is a viable solution for many visualization. But in some cases this might have some side effects. In the following picture for example we see a visualization of stock prices over time (Slightly modified example from Mike Bostock). If we just change the x-Axis we end up with a compressed graph.

responsive_width

The problem is, that those two visualizations shown in the image above might be interpreted or rather perceived differently. As in regards to being a representation of a stock, the visualization on the left might be perceived as a more positive, as in fast growing and the one on the right as more modest, even though both represent the same data set. Work regarding this issue has been published e.g. by Bertini, 2015 and Talbot, 2012.

responsive_dimension

Due to this fact, in some cases we need to take the ratio into account, as shown in the image above, and redraw and recompute both axis and the visualization.
This leaves us with the problem that the information density grows as the screen-size shrinks. The following animation illustrates another approach to handle the increasing information density.

responsive_zoom

In this approach, inspired by generalization in cartographic zoomable map applications, we offer multiple levels of detail, which can be explored through zooming and panning. An interaction which works great on mobile touch enabled devices through pinch and swipe.

An early prototype of this technique can be seen here.

As bandwidth limitations and processing power of mobile devices are still an issue, we could also use this approach to take it a step further and progressively load and visualize data. Similar approaches towards other types of data and other use cases have been developed by e.g. Glueck et al. on visualizations and Matejka et al. on video scrubbing.

Through this approach we could easily allow users to explore a big data set in a low resolution, quickly scroll/swipe through a low resolution visualization and only load higher resolution data if required (see image below).

Fig10

The code for the zoomable bar-chart prototype is available on GitHub.

References

Glueck, M., Khan, A., & Wigdor, D. J. (2014). Dive in! (pp. 561–570). Presented at the the 32nd annual ACM conference, New York, New York, USA: ACM Press. http://doi.org/10.1145/2556288.2557195

Matejka, J., Grossman, T., & Fitzmaurice, G. (2012). Swift: reducing the effects of latency in online video scrubbing (pp. 637–646). Presented at the CHI ’12: Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, New York, New York, USA:  ACM  Request Permissions. http://doi.org/10.1145/2207676.2207766

Pandey, A. V., Rall, K., Satterthwaite, M. L., Nov, O., & Bertini, E. (2015). How Deceptive are Deceptive Visualizations?: An Empirical Analysis of Common Distortion Techniques. Chi, 1469–1478. http://doi.org/10.1145/2702123.2702608

Talbot, J., Gerth, J., & Hanrahan, P. (2012). An Empirical Model of Slope Ratio Comparisons. IEEE Trans. Vis. Comput. Graph. (), 18(12), 2613–2620. http://doi.org/10.1109/TVCG.2012.196