Richard Pusch
email: rapusch@ucalgary.ca

Charles Perin
email: charles.perin@ucalgary.ca

Sheelagh Carpendale
email: sheelagh@ucalgary.ca

SDCurve.js: A JavaScript Library for Interactive Subdivision Curves

Control point

Control point mesh Interpolating Cubic B-spline Quadratic B-spline Figure 1: Sample curves created using SDCurve.js illustrating how using different schemes leads to different curves for the same set of control points. The first four images show open curves and the rightmost image shows closed curves.

INTRODUCTION

When implementing interactive visualizations, designers and developers often need to make use of curves. Curves can form the entire core of a visualization (e.g., [START_REF] Aseniero | River: Using personalisation to support reflection on personal activities[END_REF]), or they may simply highlight certain aspects or link discrete elements together (e.g., [START_REF] Collins | Bubble sets: Revealing set relations with isocontours over existing visualizations[END_REF][START_REF] Perin | Soccerstories: A kick-off for visual soccer analysis[END_REF]). We focus on visualizations where it may be important to be able to interact directly with the curve, e.g., adjusting a lasso selection.

Bezier curves are a common choice for smooth, well-behaved curves. However, each control point affects all areas of the curve. This makes local control of the curve difficult, as adjusting one control point changes the entire shape of the curve. B-spline curves extend Bezier curves to provide local control, i.e. each point on the curve depends on a subset of the control points. However, they are ill-suited for some applications, as the control points are still unlikely to lie on the final curve, and interacting with the curve often must be done indirectly by manipulating these offset, often hidden, control points. Interpolating schemes, on the other hand, can be used to guarantee that a curve will pass through a set of control points. In practice, supporting multiple curve schemes through a unified framework focused on direct interaction is ideal. Designers can then work with the best scheme for their task.

A subdivision curve -a curve that is iteratively refined through linear operations on the control points -can create B-splines of any degree, but can also easily handle many interpolating schemes. This flexibility allows subdivision curves to be easily applied to many visualization needs. Despite these advantages, subdivision curves, popular in the graphics community, are rarely used in Info-Vis. To make subdivision curves accessible to InfoVis researchers and designers, we contribute a fast, interactive JavaScript library that implements B-splines of any degree, including commonly used quadratic (Chaikin [3]) B-splines, and Dyn-Levin [START_REF] Dyn | A 4-point interpolatory subdivision scheme for curve design[END_REF][START_REF] Semmerud | Boundary conditions for interpolatory subdivision[END_REF] interpolating subdivision curves. Figure 1 shows how choosing different schemes leads to different curves. The curves can be created and animated in real time, are designed to be compatible with the popular D3 library [START_REF] Bostock | D3 data-driven documents[END_REF], and alternate schemes can easily be added via open source development. This lightweight library, designed by In-foVis designers for InfoVis designers, will make it easier to create web-based visualizations where interactive curves are important.

SUBDIVISION CURVES

Subdivision converts an initial set of control points to a fine set of curve points by applying repeated linear operations. Linear masks define the instructions for this process; a mask [m 0 , m 1 , . . . , m t ] operates on consecutive "coarse" points P n , P n+1 , . . . , P n+t and creates a new "fine" point ∑ i m i P n+i . With smartly chosen linear masks, the result of each step creates a refined curve that is continuous and smooth, and after only 4 or 5 steps, the curves are visually pleasing.

Figure 2 illustrates this process with the Chaikin "cornercutting" scheme [START_REF] Chaikin | An algorithm for high-speed curve generation[END_REF], whose linear masks are [ 3 4 , 1 4 ] and [ 1 4 , 3 4 ]. That is, for any two consecutive non-endpoints p n and p n+1 , the subdivision operation creates new points at ] is used if p n or p n+1 is an endpoint. Applying different masks will result in different curves. The Chaikin scheme produces curves that are equivalent to quadratic B-splines with enough subdivisions. Quadratic B-splines have high local control and tend to get quite close to the control points; if a more gradual curve is needed, the degree of the B-spline can be increased. In our library, we implemented Stam's [START_REF] Stam | On subdivision schemes generalizing uniform b-spline surfaces of arbitrary degree[END_REF] algorithm, a faster version of the Lane-Riesenfeld algorithm [START_REF] Lane | A theoretical development for the computer generation and display of piecewise polynomial surfaces[END_REF], which indirectly applies masks through an iterative smoothing process. This can produce B-splines of any degree. For very high-degree Bsplines, this algorithm requires many smoothing steps. Our library can be expanded to include the direct mask calculation for any arbitrary B-spline degree if certain high-degree curves are often used.

The Dyn-Levin subdivision scheme [START_REF] Dyn | A 4-point interpolatory subdivision scheme for curve design[END_REF] directly interpolates the control points using a linear mask that is 4 points wide. In the nonendpoint case, each point is carried forward to the next subdivision level (mask [0, 1, 0, 0]), and a new point is created with the mask [ -1 16 , 9 16 , 9 16 , -1 16 ]. Endpoint conditions are used from Semmerud [START_REF] Semmerud | Boundary conditions for interpolatory subdivision[END_REF]. Unlike B-splines, this means that all control points lie on the curve.

Each curve type has different merits depending on the needs of the designer. Subdivision curves encapsulate the benefits of traditional B-splines while also easily supporting alternate schemes in the same framework, and because they operate on a familiar control point paradigm, designers should find them easy to work with.

CONCEPTS AND IMPLEMENTATION

There are other JavaScript libraries that make it possible to create interactive curves, such as three.js 1 , a graphics library dedicated to 3D rendering. D3 itself also provides some basic curve functionality, though it allows only a single B-spline degree and has no builtin support for curve interaction. To the best of our knowledge, there is no lightweight library dedicated to interactive curves that leverages the benefits of subdivision. In this section, we describe the basic, advanced, and interactive functionality of SDCurve.js.

Basic Functionality

Calling the new SDCurve(arg) constructor builds a subdivision curve object, where arg is a map with the following fields: • resolution: the number of subdivisions to perform (default: 5).

• type: the subdivision scheme to use. Can be Bezier, B-spline, or interpolating (default: B-spline). • degree: the degree of the B-spline curve. Applies only when B-spline is the selected type (default: 2, i.e., quadratic). For a created object, these values can be changed or queried by calling the points(), open(), resolution(), degree(), and type() functions on the object. The curve() function returns the array of points needed to draw the resulting curve. This array can be mapped to the line() function in D3 [START_REF] Bostock | D3 data-driven documents[END_REF] and drawn to an SVG object.

Advanced Functionality

There are two ways of changing the control points on a curve. Calling the points() function with an array of points will change the entire curve to have a new set of control points. Calling the adjustPoints() function is useful if only a small part of the curve needs to be changed. adjustPoints() accepts a map of indices to new points. Only the control point at specified indices will change, and only the affected parts of the curve will be recomputed. This "lazy update" approach allows interactivity even on large curves. Our library also provides ways to measure distance along or near 1 https://github.com/mrdoob/three.js/ the curve. The pointAt(u) function returns the point of distance u (0 ≤ u ≤ 1) along the curve, where u = 0 is the beginning of the curve and u = 1 is the end of the curve. To accomplish this, we parameterize the curve by arclength in the background. We can also call the getClosestPoint(point) function to get the closest point on the curve to the provided point. This is helpful for snapping a moving mouse coordinate directly to the curve, for example.

Interactive Functionality

Manipulating Bezier or B-spline curves is typically done by moving control points. This can make fine control over the curve difficult, and control points are usually hidden in visualizations. Our library allows designers to specify any point on the curve and move it to a new location through the moveCurve() function. This is simply done by providing a point along the curve (for example, the location of a mouse click) and a movement vector to specify its new location. The curve will make the necessary changes to the nearest control points to achieve this effect. This allows the curve to be deformed by direct interaction, and no knowledge of the underlying control point structure is needed. The moveCurve() function optionally accepts a "width" argument, which specifies how many of the underlying control points are allowed to move. This supports influencing only a small area, causing sharp alterations to the curve, or a wide area for a more gradual, smooth transition. Figure 3 illustrates interacting with the curve with different "width" values.

CONCLUSION

Subdivision curves, popular in the graphics community, are rarely used in InfoVis. They offer great flexibility, can support standard curves, and are particularly well-suited to interacting directly with points on the curve instead of offset control points.

SDCurve.js is an open-source library available at https: //github.com/rpusch/sdcurve.js/. It can be used "as is" for creating curves and is easily plugged into D3 visualizations. SDCurve.js will continue to evolve with novel algorithms, optimizations, and subdivision schemes. New schemes are easy to add and we hope the community of InfoVis developers and designers will contribute to expanding the library.

Figure 2 :

 2 Figure 2: Several successive subdivisions for four control points using the Chaikin "corner-cutting" scheme [3].

Figure 3 :

 3 Figure 3: Different dragging behavior, from sharp to wide, can be achieved by changing the optional "width" parameter to moveCurve(). The same three dragging operations can result in different curves.

  • points: required array of control points. All other parameters are optional and have a default value if not specified. • open: boolean indicating whether the curve is open or closed (default: open).

ACKNOWLEDGEMENTS

Thanks to support from NSERC, AITF, and SMART Technologies.


Charles Perin
email: charles.perin@city.ac.uk

The Symmetry of My Life: An Autobiographical Visualization

I present an autobiographical visualization the past 18 months of my life that shows work and personal activities, steps, floors, emails, SVN commits, and contextual annotations. The spiral layout makes both cyclical and symmetrical patterns emerge. The resulting autobiographical visualization makes it possible to both reminisce and share personal stories.

Coloured squares shows daily steps, floors, emails and SVN commits. Annotations provide contextual information, such as travels, deadlines, and important events. While this autobiographical visualization allows for reminiscing and reflecting on personal data, its main purpose is to communicate personal stories and share personal experiences.

INTRODUCTION AND MOTIVATIONS

Personal narrative visualizations are defined as "visual data representations that tell stories about personal experiences from the point of view of the narrator" [START_REF] Thudt | Subjectivity in personal storytelling with visualization[END_REF]. They are a type of visual memento, which are "visualizations of personally relevant data for the purpose of reminiscing, and sharing of experiences" [START_REF] Thudt | Visual mementos: Reflecting memories with personal data[END_REF]. If a visual memento focuses on personal storytelling and sharing of personal experience rather than reminiscing and self-reflection, then the visual memento can be called an autobiographical visualization [START_REF] Thudt | Autobiographical visualizations: challenges in personal storytelling[END_REF].

In this poster, I present an autobiographical visualization through which I explore my personal history. The aim behind creating this artefact is to present routines and patterns in the life of a researcher at a cornerstone moment in life (first academic position and parenthood). The design goals, or design challenges, I had when creating this autobiographical visualization were as follows:

• To maintain privacy, the visualization must obscure sensitive data and discourage the precise reading of individual values.

Obscuring sensitive data is an established challenge when designing visual mementos [START_REF] Thudt | Visual mementos: Reflecting memories with personal data[END_REF]. • The layout should show cyclical patterns, i.e., it should emphasize what I subjectively consider important to communicate and share in the data [START_REF] Thudt | Subjectivity in personal storytelling with visualization[END_REF]. • As the artefact is to be shared, the visualization should be aesthetically pleasing. • The visualization should be a visual memento in that it allows me to both self-reflect and share experiences.

REALIZATION

The primary decision was to use a spiral layout. Spiral layouts have been explored for visualizing time series data, including in a quantified-self context [START_REF] Larsen | QS Spiral: Visualizing periodic quantified self data[END_REF], as they are well suited to showing cyclical patterns [START_REF] Weber | Visualizing time-series on spirals[END_REF]. For example in this poster, the spiral layout highlights the dramatic increases in work activities in March and September, for the VIS and CHI deadlines -at the expense of personal life. To a lower extent, there are some symmetric vacations during summer and around Christmas. The choice of a spiral layout was also driven by aesthetics. This is also for aesthetic purposes that I originally chose to use stacked area charts (or streamgraphs) to represent work and personal activities. Streamgraphs are praised for their aesthetics [START_REF] Byron | Stacked graphsgeometry & aesthetics[END_REF] and have been successfully used to represent e.g., personal music listening histories [START_REF] Baur | The streams of our lives: Visualizing listening histories in context[END_REF]. I later realized that my choice of using streamgraphs had another crucial benefit: they are hard to read and considered inaccurate (see [START_REF] Thudt | Assessing the Readability of Stacked Graphs[END_REF] for a discussion on the readability of stacked graphs and their variations). While this can be an issue when accuracy is important, in my case this weakness becomes a strength of the representation. Indeed, I do not wish to convey precision and exact values; I do not want people to be able to read private values about my work and life. So in this particular context where obscuring details matters, streamgraphs are well suited to convey the gist of the data, overall trends and patterns. For the same privacy reasons, it is on purpose that there is no scale nor axes in the visualization, and no values in the legend.

Combining the spiral layout with the streamgraphs reinforces cyclic patterns over the years. The more the empty space between the upper stream of year y and the lower stream of year y + 1 looks constant, the more y and y + 1 are similar for this period. This is the case for March 2016 and March 2017, for example. On the contrary, non-cyclic significant events result in streams almost touching each other. For example, the long week end in Paris at the end of May 2017 resulted in an unusually low amount of work for that period, and an unusually high amount of personal activities. These cyclic and symmetric patterns emerge naturally from the visualization and support the subjective data discourse I want to share. In that sense, it fulfils the needs of an autobiographical visualization. Adding data-driven annotations also reinforces events that I consider important for the different narratives.

The artefact, however, also allowed me to reminisce. I could for example confirm the fact that I have a deadline-driven rhythm, and that I almost never completely stop working (Christmas 2016 was an exception). These confirmatory findings were important in establishing trust towards the visualization I was creating. I also made some more unexpected discoveries about myself. For example, the very regular work/life patterns since January 2017 show that I work less during weekends since I moved to London. It also forced me to acknowledge some reality. For example, the amount of time I devote to entertaining is dramatically larger than what I expectedand I already forced myself to take longer vacations.

REFLECTIONS AND FUTURE WORK

This project helped me realize some of the challenges of creating autobiographical visualizations. In particular, the technological barriers are huge. Collecting and formatting (often incomplete and full of errors) data from many sources (fitbit, emails, toggl, SVN logs) is tedious and time consuming. However, the process is challenging to optimize and generalize as every individual has different techniques and tools for collecting data. Also, while this amount of data is relatively small, it is still too big to be handled manually. I am concerned that realizing this kind of project is the privilege of computer scientists only. This emphasizes the need for more research towards designing authoring tools for personal use.

This project also stresses the need to, sometimes, create inaccurate representations of data. What makes visualizations ineffective, obscure, and inaccurate is an intriguing direction to pursue. It is particularly useful when dealing with private data to be shared with others, but can also inform research on uncertainty visualization.

Figure 1 :

 1 Figure 1: Streamgraphs show manually collected work and personal daily activities on the two sides of a spiral timeline.Coloured squares shows daily steps, floors, emails and SVN commits. Annotations provide contextual information, such as travels, deadlines, and important events. While this autobiographical visualization allows for reminiscing and reflecting on personal data, its main purpose is to communicate personal stories and share personal experiences.

ACKNOWLEDGMENTS

Thanks to Wesley Willett and Anthony Tang for sharing with me their experiences using Toggl and making me feel less crazy. I thank Jeremy Boy for providing, as always, insightful feedback on the early designs of the poster. I also thank my wife, Céline, for not killing me because I have been constantly logging everything we were doing for the past eighteen months.


Alice Thudt
email: alice.thudt@googlemail.com

Jagoda Walny
email: jkwalny@ucalgary.ca

Charles Perin
email: charles.perin@ucalgary.ca

Fateme Rajabiyazdi

Lindsay Macdonald
email: macdonla@ucalgary.ca

Diane Vardeleon

Saul Greenberg
email: saul.greenberg@ucalgary.ca

Sheelagh Carpendale
email: sheelagh@ucalgary.ca

Riane Vardeleon
email: vriane.vardeleon@gmail.com

Assessing the Readability of Stacked Graphs

Keywords: Visualization, Streamgraphs, Stacked Area Charts, Interaction Technique, Readability

teaching and research institutions in France or abroad, or from public or private research centers.

Index Terms: H.5.m [Information Interfaces and Presentation (e.g., HCI)]: Miscellaneous

INTRODUCTION

Stacked area charts and their variations are time-series visualizations that stack multiple time-series on top of each other. Stacking causes distortion to the shape of each individual time-series representation. It has been assumed that this affects readability due to perceptual experiments that have shown the human perceptual system to be less accurate at estimating and comparing values on curved slopes than on straight ones [START_REF] Cleveland | Graphical Perception: Theory, Experimentation, and Application to the Development of Graphical Methods[END_REF]. In response, the evolution of this stacked area technique has focused on reducing the distortion of individual streams. Despite these concerns about readability, stacked graphs are popular outside of a scientific context, in more casual scenarios [START_REF] Pousman | Casual information visualization: depictions of data in everyday life[END_REF], in which a key challenge is balancing the goal of readability-supporting accurate and efficient extraction of information-with making the visualization aesthetically appealing to evoke curiosity, draw people's attention to the visualization, or create a pleasurable experience for the viewer. Stacked graphs have been used to create attractive representations of data from personal music listening histories [START_REF] Byron | Listening History[END_REF], the box office revenue of movies [START_REF] Byron | Stacked graphs-geometry & aesthetics[END_REF][START_REF] Cox | The Ebb and Flow of Box Office Sales[END_REF] and social media content [START_REF] Dörk | A visual backchannel for large-scale events[END_REF]. Given that stacked area charts are being promoted in spite of their limitations, understanding their relative readability (and what affects readability) is important.

We study a series of techniques that have been proposed to improve the balance of readability and aesthetic appeal in stacked graphs (see Figure 1). A basic stacked area chart (top row) stacks all time-series on a straight bottom baseline, causing maximal distortion to the time-series positioned at the top of the chart. ThemeRiver [START_REF] Havre | ThemeRiver: visualizing theme changes over time[END_REF] organizes time-series symmetrically along a horizontal center axis, effectively reducing the outermost possible position of any stream by half (center row). Streamgraphs [START_REF] Byron | Stacked graphs-geometry & aesthetics[END_REF] further reduce the distortion, or "wiggle", in individual layers, resulting in an asymmetrical outer shape (bottom row). Byron and Wattenberg extracted anecdotal evidence of the issues and benefits of streamgraph readability [START_REF] Byron | Stacked graphs-geometry & aesthetics[END_REF]; however, no study has formally tested how the different techniques compare in terms of readability.

We contribute to this ongoing discussion by providing a formal investigation of the relative readability of stacked area charts, The-meRiver, and streamgraphs for both real-world and randomly generated datasets (as seen in the columns of Figure 1). We also include an interactive ThemeRiver with baseline straightening to assess if simple interaction can help to mitigate readability problems.

Results indicate that the decreased distortion of the newer techniques does appear to improve their readability, in particular for value comparison tasks. We also found that when a variety of tasks is expected to be performed, using the interactive version of the themeriver leads to more correctness but is slower for value comparison tasks. Overall, we recommend using the last iteration of stacked area charts, streamgraphs, in static conditions; and to use either streamgraphs or an interactive themeriver in interactive conditions, depending on the tasks to performed.

RELATED WORK

Many approaches exist for the visualization of multiple time-series, including line graphs, braided graphs [START_REF] Javed | Graphical perception of multiple time series[END_REF], horizon graphs [START_REF] Few | Time on the horizon[END_REF][START_REF] Saito | Two-tone pseudo coloring: compact visualization for one-dimensional data[END_REF], reduced line charts [START_REF] Tufte | The visual display of quantitative information[END_REF], and stacked graphs [START_REF] Byron | Stacked graphs-geometry & aesthetics[END_REF][START_REF] Havre | ThemeRiver: visualizing theme changes over time[END_REF]. Evaluating these different approaches in terms of readability is necessary to assess their efficiency (e. g., [START_REF] Heer | Sizing the horizon: the effects of chart size and layering on the graphical perception of time series visualizations[END_REF][START_REF] Javed | Graphical perception of multiple time series[END_REF][START_REF] Perin | Interactive horizon graphs: Improving the compact visualization of multiple time series[END_REF][START_REF] Talbot | An empirical model of slope ratio comparisons[END_REF]).

Evaluation of Time-Series Visualizations

Previous studies have evaluated graphical perception of multiple time-series visualizations. Horizon graphs [START_REF] Few | Time on the horizon[END_REF][START_REF] Saito | Two-tone pseudo coloring: compact visualization for one-dimensional data[END_REF] overlay high values on lower values using a two-tone pseudo colouring technique, allowing for a vertically space-efficient time-series visualization for visualizing multiple time-series. Heer et al. [START_REF] Heer | Sizing the horizon: the effects of chart size and layering on the graphical perception of time series visualizations[END_REF] compared the readability of filled line charts and two variations of horizon graphsmirroring or not mirroring the negative values. They measured speed and accuracy of discrimination and estimation tasks at various chart sizes and used a randomly generated dataset. They found that mirroring does not impair readability and that horizon graphs improve readability at smaller chart sizes.

Javed et al. compared four visualizations of multiple time-series: simple line graphs, braided graphs, small multiples, and horizon graphs [START_REF] Javed | Graphical perception of multiple time series[END_REF]. They measured the correctness and completion time of three tasks (finding a global maximum, assessing global slope, and local point discrimination) for a synthetically generated dataset with 2,4, and 8 time-series. They found that superimposed line graph techniques work best for local tasks, and line graphs that create separate charts are more efficient for juxtaposed tasks.

Furthermore, Perin et al. [START_REF] Perin | Interactive horizon graphs: Improving the compact visualization of multiple time series[END_REF] compared reduced line charts, horizon graphs and interactive horizon graphs. They measured binary correctness, error magnitude, and completion time of: finding the maximum value among several time-series for a given time point, discrimination of values among several time-series and time points, and finding a reference time-series. In a departure from the previously mentioned studies, they used a real-world financial dataset with 2, 8, and 32 time-series. They found that the interactive condition was most effective for datasets with large numbers of time-series.

As these studies illustrate, there is considerable interest in evaluating visualizations of multiple time-series. However, while the previous studies compare overlaid or small multiple-style visualizations, no studies have compared stacked graph visualizations.

Stacked Graphs of Multiple Time-Series

Stacked graphs (Figure 1, top row) are an approach to visualize multiple time-series by stacking filled shapes ('streams') that represent individual time-series on top of each other, on a straight baseline. At each point on the time axis, the height of each stream represents its value. The end result is an outer shape that is an aggregate view of all the time-series. This technique distorts the baseline of each individual stream (except for the bottom stream). The outer shape showing the value of the aggregated time-series is not distorted. The distortion has been the impetus for several incremental improvements to this technique [START_REF] Baur | Touchwave: Kinetic multitouch manipulation for hierarchical stacked graphs[END_REF][START_REF] Byron | Stacked graphs-geometry & aesthetics[END_REF][START_REF] Havre | ThemeRiver: visualizing theme changes over time[END_REF], detailed below.

ThemeRiver [START_REF] Havre | ThemeRiver: visualizing theme changes over time[END_REF] (Figure 1, middle row), stacks individual timeseries around a central axis, resulting in a symmetrical outer shape. As the shapes are stacked both upwards and downwards from the axis, the outermost stream in a ThemeRiver is less distorted than the outermost stream in a stacked area chart. Havre et al. ran a small experiment comparing the readability of ThemeRiver with stacked bar charts and found ThemeRiver to be useful for identifying an overview of the changes, but less useful for identifying minor trends. Participants also expressed interest in interacting with the visualization, particularly to reorder the time-series vertically. One weakness of ThemeRiver is that it disproportionately emphasizes streams that happen to be arranged in the middle of the river [START_REF] Aigner | Visual Methods for Analyzing Time-Oriented Data[END_REF].

Streamgraphs [START_REF] Byron | Stacked graphs-geometry & aesthetics[END_REF] (Figure 1, bottom row) sort individual streams in a way that smooths the distortion of each stream by reducing their 'wiggle-factor'. This results in an asymmetric outer shape. The authors claim that the reduced distortion improves readability over ThemeRiver. This line of reasoning based on foundational perceptual studies [START_REF] Cleveland | Graphical Perception: Theory, Experimentation, and Application to the Development of Graphical Methods[END_REF] is commonly accepted in the visualization community. Heer et al. deliberately excluded stacked graphs from their study of horizon graphs, due to their lack of support for negative value display, and based on [START_REF] Cleveland | Graphical Perception: Theory, Experimentation, and Application to the Development of Graphical Methods[END_REF]. A blog post [START_REF] Kirk | Making Sense of Streamgraphs[END_REF] analyzed several examples of casual streamgraphs published on the web and concluded that static or printed streamgraphs are difficult to read due to their uncommon shapes, and that interaction is a way to mitigate this problem.

This strategy has also been investigated by Baur et al. who introduced interaction to stacked graphs with the aim of mitigating their stated perceptual issues [START_REF] Baur | Touchwave: Kinetic multitouch manipulation for hierarchical stacked graphs[END_REF]. They developed a hierarchical ThemeRiver for touch-interactive devices with interactive stream reordering. The approach of adding interaction to mitigate downsides of visual representations is not recent [START_REF] Dix | Starting simple: Adding value to static visualisation through simple interaction[END_REF] and has been proven to improve the efficiency of some time-series visualizations [START_REF] Perin | Interactive horizon graphs: Improving the compact visualization of multiple time series[END_REF].

Despite the concerns regarding their readability, stacked graphs have aesthetic value, leading to widespread use on the web, e. g., the Ebb and Flow of Box Office Sales [START_REF] Cox | The Ebb and Flow of Box Office Sales[END_REF], World Cup Twitter streamgraph [START_REF] Graves | The 2010 World Cup: a Global Con-versation[END_REF], the NameVoyager [START_REF] Wattenberg | Baby names, visualization, and social data analysis[END_REF], and ThemeRiver [START_REF] Havre | ThemeRiver: visualizing theme changes over time[END_REF]. Artifacts of the Presence Era [START_REF] Viégas | Artifacts of the presence era: Using information visualization to create an evocative souvenir[END_REF] is an installation in a museum that samples video recordings of the space around it and displays them as stacked sedimentary layers. The NameVoyager [START_REF] Wattenberg | Baby names, visualization, and social data analysis[END_REF] is a popular web visualization that represents baby names' popularity over time. ColourVis [START_REF] Lynch | Special Section on CANS: ColourVis: Exploring colour in digital images[END_REF] is another aesthetically appealing visualization that maps to a stacked line graph the proportions of colours used in sets of images over time. ColourVis can be viewed in numerous configurations, including with a baseline at an arbitrary position.

Stacked graphs have become widespread due to their aesthetic appeal, and increments of the original technique have been proposed to overcome their supposed limitations. Despite this, no formal studies have compared the readability of stacked graphs and their variations. In this paper, we derive evaluation criteria for stacked time-series visualizations and assess the readability of stacked graphs.

READABILITY

We define readability as the extent to which a visualization supports graphical perception-"the visual decoding of information encoded on graphs" [START_REF] Cleveland | Graphical Perception: Theory, Experimentation, and Application to the Development of Graphical Methods[END_REF]. Readability of visualizations has been of fundamental importance in the InfoVis community, beginning with the perceptual classification of visual variables [START_REF] Bertin | Semiology of Graphics[END_REF]. Bertin classifies visual variables such as location, color, size and orientation into different "levels of organization". At these levels of organization he distinguishes "selective perception" (i.e. determining the category of a visual mark), "ordered perception" (i.e. comparing the orderings of two categories) and "quantitative perception" (i.e. numerically defining the difference between two visual marks).

Cleveland and McGill experimentally investigated graphical perception of visual encodings [START_REF] Cleveland | Graphical Perception: Theory, Experimentation, and Application to the Development of Graphical Methods[END_REF]. They asked participants to estimate the ratio between two marks and measured their accuracy after displaying the graph for 2.5s. This study resulted in a refined perceptual classification of Bertin's visual variables [START_REF] Bertin | Semiology of Graphics[END_REF], and was later confirmed using Amazon's Mechanical Turk crowdsourcing [START_REF] Heer | Crowdsourcing graphical perception: using mechanical turk to assess visualization design[END_REF]. These results have been used to justify design choices in visualization, such as the low-distortion design of streamgraphs based on the perception of curved slopes and slope ratios [START_REF] Byron | Stacked graphs-geometry & aesthetics[END_REF]. The issue of slope ratio comparisons is further addressed for line charts [START_REF] Talbot | An empirical model of slope ratio comparisons[END_REF], however, this has not been studied in the context of stacked graphs directly. Our experiment studies these issues with the goal of better understanding the effectiveness of the different stacked graph variations.

The information extractable from a visualization consists of more than individual data points. Bertin suggests that three information levels should be readable from an information graphic [START_REF] Bertin | Graphics and Graphic Information Processing[END_REF]:

• Elementary level: Extraction of individual values. For multiple time-series, reading the value of one time series at one point. This is an integral part of values comparison; it is necessary to read the individual values to be able to compare them. • Intermediate level: Comparisons and trends in subsets of characteristics. We classify the reading and comparison of timeseries trends (e.g. identifying growth or peaks) as intermediate level tasks. These differ from elementary tasks as reading one or two values is not enough to identify a trend in a time-series. • Overall information level: Global values and trends. This involves tasks that require reading values of the combination of streams. An example would be comparing the aggregated values of all time-series at multiple time points, or reading trends at the global level (such as finding peaks or growth of all time-series combined). We take all three of these information levels into account when choosing tasks to measure the readability of stacked graphs.

EXPERIMENT

Our experiment is an empirical contribution to the ongoing discussion on the readability of stacked graphs. In particular, we investigate the impact of static and interactive straight baselines, symmetry, and wiggle on the extraction and comparison of individual and aggregated values and on the readability of trends.

Techniques

We compared the readability of four stacked graph techniques for visualizing time-series data, illustrated in Figure 2: a basic stacked area chart (STACK), a ThemeRiver (THEME), a streamgraph (STREAM), and our own interactive technique, a ThemeRiver with interactive baseline straightening (INT). INT initially shows multiple time-series using the ThemeRiver technique. By clicking on one individual stream, the baseline of that stream is straightened (see Figure 2 (INT)). Clicking on the bottom layer turns the streamgraph into a stacked area chart. Using the ThemeRiver technique initially causes less distortion in the rest of the graph when an arbitrary stream's baseline is straightened than if a streamgraph were used initially.

All of these visualizations display both individual time-series and the aggregation of multiple time-series (by stacking them on top of each other). This supports reading and comparing values within timeseries and across multiple streams, as well as global comparisons within the overall stream. It also allows for reading both local and global trends. We kept the qualities of all four techniques as constant as possible by using the same style and amount of curvature, and the same colour scheme. The color scheme we used is similar to the one used in the original streamgraphs paper [START_REF] Byron | Stacked graphs-geometry & aesthetics[END_REF] and scales up well to large numbers of streams. We added simple highlighting interaction, common for these types of graphs, that changes the colour of a stream to light purple on hover and to light yellow on selection.

Datasets

The types of time-series datasets that can be displayed using the discussed stacked graphs can vary greatly in size and data distribution, and thus impact the performance of each technique. For validity, and to vary both size and data distribution, we used two real-world datasets that stacked graphs have been applied to, the Box Office Revenue Dataset (Movies) [START_REF] Cox | The Ebb and Flow of Box Office Sales[END_REF] and the 311 Calls Dataset (Calls) [START_REF] Johnson | What a hundred million calls to 311 reveal about new york[END_REF][START_REF]NYC Open Data[END_REF], as well as a randomly generated dataset (Random). Using randomly generated datasets is common in such perceptual studies (e. g., [START_REF] Ghoniem | On the readability of graphs using node-link and matrix-based representations: a controlled experiment and statistical analysis[END_REF][START_REF] Heer | Sizing the horizon: the effects of chart size and layering on the graphical perception of time series visualizations[END_REF][START_REF] Javed | Graphical perception of multiple time series[END_REF][START_REF] Lewandowsky | Discriminating strata in scatterplots[END_REF]).

The Movies dataset is a subset of the data used by the New York Times in their streamgraph visualization entitled "The Ebb and Flow of Box Office Sales" [START_REF] Cox | The Ebb and Flow of Box Office Sales[END_REF]. The data that we used was collected over the course of 20 weeks from 4/20/2012 until 8/31/2012 and contains 300 time-series with 20 time points, each time-series representing the revenue of one movie in U.S. dollars. Time-series have nonzero values over an average of 7.27 time points (weeks). This results in short streams that are similarly shaped, due to the similar development of revenue for movies.

The Calls dataset is a subset of complaint calls made over the New York 311 line available at the NYC OpenData website [START_REF]NYC Open Data[END_REF]. This dataset was originally used in a streamgraph for Wired Magazine [START_REF] Johnson | What a hundred million calls to 311 reveal about new york[END_REF]. We use a subset of this data extracted by Vallandingham [START_REF] Vallandingham | How to animate transitions between multiple charts[END_REF]. The data was collected during Hurricane Sandy over the We used the d3 [START_REF] Bostock | D3 data-driven documents[END_REF] implementation of Byron's test data generator [START_REF] Byron | Streamgraph generator[END_REF][START_REF] Byron | Stacked graphs-geometry & aesthetics[END_REF] to create a series of random time-series datasets. The datasets all contained 30 time-series over 30 time points with varying temporal patterns. Following Byron's example, we referred to this dataset as a listening history in the study, where each time-series represents the numbers of listens for one artist during 30 days.

Aggregate Discrimination (T agg ) Stream Comparison (T scomp ) Individual Discrimination (T ind )

Tasks

We designed the tasks for this experiment based on 1) Bertin's three levels of information that should be readable from a visualization [START_REF] Bertin | Graphics and Graphic Information Processing[END_REF], and 2) frequently tested tasks for time-series, and related to Andrienko and Andrienko's taxonomy for time-series [START_REF] Andrienko | Exploratory Analysis of Spatial and Temporal Data: A Systematic Approach[END_REF].

Individual discrimination (T ind ): "Which is larger: the [value of time-series x] at A or [time-series y] at B?" Participants were asked to identify the larger of two individual stream values in the graph at two given time points A and B (see Figure 3 (left)). This task can be associated with the elementary information level. In Andrienko and Andrienko's taxonomy, T ind is an elementary task (about individual data elements) that requires direct comparison. This is also a standard benchmark task for evaluating time-series visualizations (e. g., [START_REF] Cho | Stroscope: Multi-scale visualization of irregularly measured time-series data[END_REF][START_REF] Federico | Qualizon graphs: Space-efficient time-series visualization with qualitative abstractions[END_REF][START_REF] Heer | Sizing the horizon: the effects of chart size and layering on the graphical perception of time series visualizations[END_REF][START_REF] Simkin | An information-processing analysis of graph perception[END_REF][START_REF] Spence | Displaying proportions and percentages[END_REF]).

The discrimination points A and B as well as the corresponding streams were highlighted in bright yellow and blue in both the graph and the question. This choice ensured that we measured the time to assess the values only -not the time to find the right streams.

Stream comparison (T scomp ): "The following area chart represents [time-series data]. In the graph below, which stream represents the same [time-series]?" Participants were shown a stream with a straight baseline and asked to find its equivalent in the displayed graph (see Figure 3 (center)). This intermediate level task makes it possible to assess how people perceive trends. In Andrienko and Andrienko's taxonomy, T scomp is a synoptic task (about a set of values) that requires direct comparison. Such a task has previously been used for evaluating time-series visualizations (e. g., [START_REF] Cho | Stroscope: Multi-scale visualization of irregularly measured time-series data[END_REF][START_REF] Perin | Interactive horizon graphs: Improving the compact visualization of multiple time series[END_REF]).

Aggregate discrimination (T agg ): "Is the combined [value of time-series] larger at A or at B?" Participants were asked to compare the aggregate value of all time-series at two given time points A and B (see Figure 3 (right)). This overall information level task requires participants to make global comparisons. In Andrienko and Andrienko's taxonomy, T agg is an elementary task (about individual values) that requires direct comparison. Similarly to T ind , this task has been used extensively to assess the performances of time-series visualizations (e. g., [START_REF] Cho | Stroscope: Multi-scale visualization of irregularly measured time-series data[END_REF][START_REF] Federico | Qualizon graphs: Space-efficient time-series visualization with qualitative abstractions[END_REF][START_REF] Heer | Sizing the horizon: the effects of chart size and layering on the graphical perception of time series visualizations[END_REF][START_REF] Javed | Graphical perception of multiple time series[END_REF][START_REF] Perin | Interactive horizon graphs: Improving the compact visualization of multiple time series[END_REF][START_REF] Simkin | An information-processing analysis of graph perception[END_REF][START_REF] Spence | Displaying proportions and percentages[END_REF]). It has also been found to be easier than T ind [START_REF] Heer | Sizing the horizon: the effects of chart size and layering on the graphical perception of time series visualizations[END_REF][START_REF] Perin | Interactive horizon graphs: Improving the compact visualization of multiple time series[END_REF].

Hypotheses

We expected the following effects of visualization technique on tasks: H1 For T agg , we expect answers to be more correct in STACK and

INT than THEME and least correct in STREAM. H2 For both T ind and T scomp , we expect answer to be more correct from INT over STREAM, over THEME, to STACK. H3 Overall, we expect INT to be slower than all three other techniques for all tasks.

We formulated H1 because using STACK with its global baseline, T agg simply consists of comparing the height of the aggregated chart from the baseline at two points. INT can be turned into a STACK thus should result in similar correctness. T agg is difficult to perform using THEME because the technique does not provide a global baseline, and even harder using the asymmetric STREAM.

We formulated H2 because both T ind and T scomp are more difficult to perform with distorted streams. INT makes it possible to limit the distortion by setting an appropriate baseline, STACK has more distortion for individual streams, THEME reduces distortion slightly, and STREAM reduces distortion significantly.

We formulated H3 because INT requires interacting with the visualization to change the baseline. Such interaction costs have been observed in a similar evaluation [START_REF] Perin | Interactive horizon graphs: Improving the compact visualization of multiple time series[END_REF].

Procedure and Apparatus

To test our hypotheses we decided to run an experiment in a controlled lab setting where we could ensure that the perceptual conditions are the same for all participants. This was necessary as we observed during a pilot tudy that participants make use of their hands and other objects to measure parts of the visualization on the screen instead of relying solely on their perceptual capacities. To avoid this bias we refrained from running an experiment with a larger number of participants on an online platform.

Participants were first asked to fill out a short questionnaire to determine demographic information, web usage, and their previous experience with visualizations. After that, the experimenter explained the conditions to the participants in the order determined by the Latin square design. Then, the experimenter instructed the participants to sit in front of the screen, a 30-inch monitor with 2560 x 1600 resolution, with their back on the backrest of the chair, and to only touch the mouse and keyboard. This constraint was necessary to make the results comparable and to prevent people from using their hands as a measurement aid rather than relying primarily on their perceptual capacities. Participants were then asked to follow the experiment in the browser application.

The experiment was broken into four parts, one for each visualization technique. Each part consisted of the three tasks (T agg , T ind , T scomp ), and each of these tasks was performed on the three datasets (Movies, Calls, and Random). For each visualization technique × task, participants first performed a training round using another random dataset to familiarize themselves with the task using the current technique. After participants completed all tasks for one technique, the experimenter asked them to comment on their experience.

For each task, the question alone was displayed at first. After participants read and understood the question, the visualization was displayed and the start time was logged. For both T agg and T ind , participants were asked to identify the larger value of two points (A or B) in the graph and select their answer from a radio button list. For T scomp , participants selected the time-series in the graph by clicking on it. For all tasks, the given answer could be changed until the submit button was clicked, logging the end time.

After the experiment, we asked participants to score the visualization techniques based on their aesthetic preference and perceived legibility on [0-10] continuous scales.

Participants

We recruited 16 participants (9 male, 5 female, 2 declined to answer) aged 18-65 years old with various occupations (12 students) in a variety of fields (in consideration of the casual context of popular stacked graph visualizations). All participants frequently used computers, but had heterogeneous knowledge of visualization. We recruited these participants through posters and mailing lists at a university. They received monetary compensation of $20. One participant had previously seen STREAM, three had seen THEME, seven had seen STACK and one was very familiar with STACK.

Experiment Design

Our study used a within-subjects design, with conditions arranged using a balanced 4x4 Latin square [START_REF] Martin | Doing Psychology Experiments[END_REF] in order to mitigate learning effects. The independent variables were visualization technique (4: STACK, THEME, STREAM, INT) × task (3: T agg , T ind , T scomp ) × dataset (3: Movies, Calls, Random), or 36 trials per participant. With 16 participants, this produced a total of 576 trials.

Our dependent variables were: correctness (the ratio of correct answers compared to all answers) and task completion time.

Performance Results

We base our analyses on estimation, i.e., effect sizes with bootstrapped [START_REF] Kirby | BootES: An r package for bootstrap confidence intervals on effect sizes[END_REF] confidence intervals [START_REF] Cumming | Inference by eye: Confidence intervals and how to read pictures of data[END_REF]. This approach, recommended by the APA [START_REF]The Publication manual of the American psychological association[END_REF], is an alternative to NHST (null hypothesis significance testing), whose limits are growing concerns in various research fields. Hundreds of articles criticize the indiscriminate use of NHST and various scientific disciplines are more and more recommending banning the use of NHST (for a summary see [START_REF] Dragicevic | Fair statistical communication in HCI[END_REF]). Using confidence intervals, black points in pairwise comparison figures indicate the best estimate while intervals indicate all plausible values, with point estimates being about 7 times more likely than interval endpoints [START_REF] Cumming | Understanding the New Statistics: Effect Sizes, Confidence Intervals, and Meta-analysis[END_REF]. When performing pairwise comparisons, the measures are computed for each participant. For correctness, if the confidence interval graphical representation does not cross the 0% vertical line then there is a 95% chance of difference between the techniques (identical to p < .05). The same is true for time, with the 1.0 vertical line because we applied a log-transform to measures of time and thus compute ratios. We interpret the results visually as follows: we call an effect small if it is likely to be smaller than a 10% difference between two techniques, and large if it is likely to be larger than a 10% difference. We qualify these effects as being weak if there may be an effect, but the confidence interval is wide or crosses the 0/1 vertical line, and strong if there is confidently an effect, with the ratio between the part of the confidence interval which is on the opposite side of the vertical line and the total length of the confidence interval being small or null.

We compare the results for each technique by task. Figure 4 shows mean and pairwise comparison correctness and completion time by task and technique. Figure 5 summarizes these comparisons.

For T ind , in terms of correctness, we found that both THEME and STREAM performed better than both INT and STACK. In terms of time, INT was slower than both STACK and STREAM.

For T scomp , we found that INT performed best overall. In terms of correctness, INT had strong, small advantages over THEME and STACK and a weak, small advantage over STREAM. Similarly in terms of time, INT had a strong, small advantage over THEME and small, weak advantages over STREAM and STACK.

For T agg , in terms of correctness, STREAM had a strong, small advantage over THEME and INT had a strong, small advantage over STACK. In terms of time STACK performed best, followed by THEME

Questionnaire Results

Participants' preferences for technique aesthetics and readability are presented in Figure 6, created using Bertifier [START_REF] Perin | Revisiting bertin matrices: New interactions for crafting tabular visualizations[END_REF].

Overall, participants found STACK to be both the most aesthetically pleasing and most readable. They found STREAM to be the second most aesthetically pleasing visualization, but did not find it to be readable. THEME obtained mitigated results in terms of aesthetic preference, with some extreme divergent judgments. Finally, participants found INT to be the least aesthetically pleasing visualization, but the majority of participants found INT to be readable.

DISCUSSION

We discuss our findings by summarizing the performance results as well as the results obtained from the questionnaires and providing possible explanations as to why these results occurred.

Discussion of Results

For T ind and T scomp we originally expected that the technique performance would be, from best to worst: INT, STREAM, THEME, and STACK, in terms of correctness (H2). This hypothesis was primarily based on the degree of individual stream baseline distortion in each technique. For T ind we found that both THEME and STREAM performed better than both INT and STACK. The low performance of STACK is unsurprising, since this technique distorts individual streams the most. However, INT surprisingly performed worse than both THEME and STREAM while we expected the opposite. The poorer performance of INT may have been influenced by the number of small, similar streams: because the technique only allows for the straightening of one baseline at a time, participants might have been comparing differences from memory. Here, the advantage of the straight baseline is outweighed by the disadvantage of relying on memory. Also, THEME performed as well as its incremental redesign, STREAM. This suggests that when comparing values at specific times in T ind reducing the baseline distortion of individual streams does not provide a substantial benefit in terms of accuracy.

For T scomp , we found that INT performed best overall. This is generally expected, as the interaction technique is appropriate for this kind of task: one can quickly click through each stream to visually compare it to the given stream, whereas the other techniques require one to mentally "undistort" each stream. However, we did not find any other difference -in particular, STACK did not perform worse than THEME and STREAM.

For T agg , we originally expected both STACK and INT to perform better than THEME, then STREAM, in terms of correctness (H1).

This hypothesis was based on the presumed advantages of having a global baseline. We found that STREAM and INT performed better than THEME and STACK. Again, STACK performed worse than expected while STREAM performed better than expected. This runs counter to our original expectations, suggesting that STREAM wiggle reduction improves the graphical perception for this task. However, the differences in this task were very small with close to 100% correctness in all four techniques. Therefore, although we found a significant difference between STREAM and THEME and between INT and STACK these differences might still have happened by chance.

We expected INT to be slowest for all tasks (H3), due to the time it takes to interact with the visualization. This is confirmed for T ind , and to a lower extent for T agg . However, INT was the fastest technique for T scomp . It seems that for this task, the time spent to interact and change the baseline is lower than the time to visually browse and compare all streams with the three other techniques. We observed very different strategies in the non-interactive conditions. While some people guessed the answer (which resulted in short answer times), others tried to read the top value and the bottom value of the combined stream and mentally calculated the difference. In the INT condition people could choose to straighten the bottom baseline so that they only had to read the top value and could save the time for mental calculation. The slightly lower efficiency of INT for value comparison tasks (T ind and T agg ) could be explained by the extra time needed for deciding on a strategy as well as for the interaction of straightening the baseline. For example, one participant indicated a change of strategy partway through the session: "There was a learning curve. In the middle of the session I realized that in some [tasks] I can turn the entire graph into a stacked area graph. That makes it much easier for comparing the total amounts" -P13.

Participants' aesthetic preferences and perceived readability of visualizations were not indicative of either our results or the underlying graphical perception results. While we generally confirm that stacked area charts were outperformed by the other techniques, participants overwhelmingly preferred the aesthetic qualities of stacked area charts and estimated stacked area charts to be easier to readthough participants did not perform well with this technique during the experiment and even expressed frustration. For example, P14 said that "[Stream comparison in the stacked area chart] was really hard. [...] If I wasn't asked to I wouldn't bother doing it" and P16 that "[The stacked area chart is] not so easy for looking at individual streams, especially the ones up higher as they are bumped up a lot by the ones below.".

Participants found INT to be least aesthetically pleasing while this technique has both high perceived readability and high measured readability. On the other hand, participants found STACK to be the most aesthetically pleasing and the most readable visualization while this technique has the lowest measured readability. It appears that there can be a tradeoff between aesthetics and efficiency of a technique. However, participants found STREAM to be aesthetically pleasing and STREAM performed best for two out of three tasks, suggesting that STREAM has both aesthetics and efficiency value.

Implications

Overall, the differences between techniques are usually small. The incremental improvements in stacked graph design, from STACK, to THEME to STREAM, and finally the addition of interactivity, has been largely justified using Cleveland and McGill's fundamental graphical perception studies [START_REF] Cleveland | Graphical Perception: Theory, Experimentation, and Application to the Development of Graphical Methods[END_REF]. These studies would have predicted that, overall, STREAM would perform better than THEME, which would perform better than STACK. Our results confirm these predictions, suggesting that this evolution indeed leads to small perceptual improvements for performing standard tasks on multiple time series.

Predictions Based on Theoretical Models: In the Information Visualization community, theoretical perceptual models are often used to predict the relative readability of visualizations. In the case of stacked graphs Cleveland and McGill's perceptual model [START_REF] Cleveland | Graphical Perception: Theory, Experimentation, and Application to the Development of Graphical Methods[END_REF] was used to argue the advantage of streamgraphs over ThemeRiver and stacked area charts [START_REF] Byron | Stacked graphs-geometry & aesthetics[END_REF]. According to our study these predictions can work, however they do not shed light on the extent to which the techniques differ. Therefore empirical investigations can still be beneficial. In the case of stacked graphs our study suggests that while the predictions are generally correct, the effect sizes are small.

Empirically Based Suggestions for Using Stacked Graphs: Although the perceptual difficulties of stacked graphs are well known in the Information Visualization community and this form of visual representation has been critiqued a lot on the basis of previous perceptual studies [START_REF] Cleveland | Graphical Perception: Theory, Experimentation, and Application to the Development of Graphical Methods[END_REF], stacked graphs are still widely used on the web and in casual scenarios [START_REF] Byron | Stacked graphs-geometry & aesthetics[END_REF][START_REF] Cox | The Ebb and Flow of Box Office Sales[END_REF][START_REF] Dörk | A visual backchannel for large-scale events[END_REF]. Our empirical investigation contributes to this ongoing discussion by offering recommendations on when to use which technique. Based on our empirical results, we make the following recommendations: R1 STREAM performs best for value comparison tasks (T ind and T agg ). Therefore, if only value comparison tasks are to be performed, we recommend using STREAM. Overall, in a static condition, STREAM appears to be the best choice, as STREAM leads to better results than both STACK and THEME. R2 INT resulted in more correct answers for both T scomp and T agg , at the cost of being slower for T agg . Therefore, if a variety of tasks are to be performed, we recommend using INT especially if people are expected to compare streams instead of comparing values at specific times. However, in a context where aesthetics are important, INT should be avoided. R3 There is no performance advantage to using STACK in any condition, and we recommend against using this technique. However, STACK is subjectively interpreted to be both the most readable and the most aesthetically pleasing technique.

Interaction for Solving Perceptual Difficulties: While adding interactivity to a technique helped in some cases, it appeared to interfere in other cases where it required participants to rely on their memory of a perceived value for a comparison. This is interesting from an HCI perspective as it suggests that interaction has to be carefully designed to provide perceptual benefits. We recommend that visualization designers consider the tradeoff between supplying the interaction and the increase in memory load for perceptual tasks.

Limitations and Future Work

Our study is the first to quantitatively assess and compare the graphical perception of area charts, ThemeRivers, streamgraphs and ThemeRiver with interactive baseline straightening. Although our findings suggest that iterations on stacked charts and interactivity lead to better graphical perception, like any controlled experiment, the results of our study are valid under the conditions of the study.

Interaction Techniques for Stacked Area Charts: Our interactive technique seemed promising for improving readability in some tasks. Future research could evaluate the impact of using a wider range of interactive techniques such as straightening more than one stream or reordering streams, as suggested by Baur et al [START_REF] Baur | Touchwave: Kinetic multitouch manipulation for hierarchical stacked graphs[END_REF].

Datasets: We picked two real-world datasets and a randomly generated datasets in order to vary the dataset properties widely. However, our selection could not be exhaustive and representative of all possible datasets. Replicating the study with other datasets would certainly lead to slightly different results.

Tasks: Our task selection was also not exhaustive. In particular we chose not to use value retrieval tasks. Value estimation tasks are also important, but as our experiment already included a large number of factors, we chose to use comparison tasks, since they would also be impacted by value estimation performance. As is the nature of controlled experiments, some of the choices necessary for this study would not normally be reflected in a real-world application of these four techniques. Although we chose our tasks to cover all three information levels, they do not cover the full range of tasks and combinations of tasks that one might attempt in a real use setting.

Colour Scheme: The color scheme we used may also have had an effect on our results. A follow-up study assessing the effect of color scheme would be an interesting complement to our findings.

Impact of Interaction Techniques: The most surprising of our results is that using INT led to lower accuracy than both STREAM and THEME for the T ind task. Given that INT is an enhancement of THEME, we expected that people would perform better with the enhanced version than with the basic version, as this is usually the case [START_REF] Perin | Interactive horizon graphs: Improving the compact visualization of multiple time series[END_REF] and as this is commonly accepted. Instead, our results suggest that adding interactivity to a static visualization technique can be detrimental. In our case, we explain the lower performance using INT due to the fact that in the interactive condition, participants may have felt that they had to use the interactive capabilities of the technique, and used the interactive baseline even when it did not help (for T ind ). Indeed, for performing T ind , participants usually changed the baseline to read accurately the height of the stream x at A. Then, participants changed the baseline to read accurately the height of the stream y at B. By doing so, participants had to memorize the perceived height of x at A and compare it to the height of y at B. On the other hand, in a static condition, participants compared x and y at A and B at the same time, without having to store one value in memory. This last point raises an important question regarding interaction. Although interactive capabilities are usually designed to improve performance, the effects can be negative. Better understanding the interplay between interactive capabilities, perception, and memory, appears to be a direction worth pursuing.

CONCLUSIONS

We have assessed and compared the readability of stacked area charts, ThemeRivers, streamgraphs, and our own interactive The-meRiver technique with baseline straightening for tasks covering the elementary, intermediate, and overall levels of readability for two real-world datasets and one randomly generated dataset.

This study is the first to measure the readability of stacked area charts and their incremental variations, whose design has been justified based largely on fundamental graphical perception studies [START_REF] Cleveland | Graphical Perception: Theory, Experimentation, and Application to the Development of Graphical Methods[END_REF]. Our results show that in general the expectations from graphical perception studies hold, but that the performance of each technique is highly dependent on the task. Therefor, to be able to apply knowledge from general perceptual models to predict the readability of visualizations, we have to carefully consider the task to perform.

Our study contributes empirically grounded recommendations for the use of stacked graphs. Indeed, using STREAM leads to better performance than the two other static visualization techniques for both individual and aggregated value comparison tasks. However, for stream comparisons, the INT led to better results, both in terms of correctness and completion time. Within the context of our experiment design, we recommend using STREAM for static representation of stacked time series -which reach their limits for stream comparisons. We recommend avoiding using STACK if efficiency is a criteria; but if the purpose is to create an aesthetically pleasing visualization, then stacked area charts should be considered.

We discussed the introduction of interaction as a means to mitigate perceptual difficulties based on our results. Although interaction can help people perform some tasks more accurately and sometimes more quickly, if additional memory load is introduced, then the use of interaction can be detrimental.

The findings of our experiment can inform visualization designers when deciding which visual representation to choose. In a more general sense we discussed the use of theoretical models to predict readability of visualizations as well as the introduction of interaction to solve perceptual problems in visualization.

Figure 2 :

 2 Figure 2: The four evaluated techniques: stacked area chart (STACK), ThemeRiver (THEME), streamgraph (STREAM), and ThemeRiver with interactive baseline straightening (INT), all displaying the Movies dataset.

Figure 3 :

 3 Figure 3: The three evaluated tasks: individual discrimination (T ind ) with a stacked area chart (left); stream comparison (T scomp ) with a streamgraph (center); and aggregate discrimination (T agg ) with a ThemeRiver (right).

  course of 35 days from Oct 14th, 2012 to Nov 17th, 2012. The dataset contains 10 time-series over 35 time points, each time-series representing the number of calls on one topic. Each time-series has non-zero values over the entire period shown in the graphs. All streams show a similar weekly pattern.

Figure 4 :

 4 Figure 4: Mean and pairwise comparisons correctness and completion time by task and by technique. Error bars show 95% bootstrapped confidence intervals. Pairwise comparisons for A vs B are A -B for correctness and log(A)/log(B) for completion time.

Figure 5 :

 5 Figure5: Summary of differences between techniques for discrimination correctness and completion time by task. In each cell, the horizontal position of each technique icon encodes its performance, ordered from best (left) to worst (right). Two icons with the same horizontal position mean that the two techniques perform similarly.

  both STREAM and INT. STACK had a strong, large advantage over both STREAM and INT; and a strong, small advantage over THEME. THEME had a strong, large advantage over STREAM and a strong, small advantage over INT.

			P4	P2	P1	P5	P10	P16	P7	P8	P11	P9	P3	P12	P13	P6	P14	P15	AVERAGE
	AESTHETIC	PREFERENCE	INT STREAM STACK THEME
	READABILITY		INT STREAM STACK THEME
									0	1	2	3	4	5	6	7	8	9 10
	Figure 6: Participants' preferences for technique aesthetics and read-
	ability on 1-10 Likert scales.

then

ACKNOWLEDGEMENTS

We would like to thank our participants as well as our Sponsors Natural Sciences and Engineering Research Council of Canada (NSERC), Alberta Innovates Technology Futures (AITF) and SMART Technologies for making this research possible.


Slicing the Aurora

Sebastian Lay †, * , Jo Vermeulen † , Charles Perin † , Eric Donovan † , Raimund Dachselt * , Sheelagh Carpendale † † University of Calgary * Technische Universit ät Dresden

ABSTRACT

We have generated large-scale digital prints from a sequence of photographs of the northern sky taken over the course of one night. Each image is aggregated across time creating visually appealing and intriguing images -or Keograms -that visualize Aurora Borealis (Northern Lights) activity as well as interesting movements of clouds and stars that occurred that night.

KEOGRAMS

The word Keogram is derived from 'Keoeeit' [START_REF] Mende | Photometric investigation of precipitating particle dynamics[END_REF], the Inuit-word for the Aurora Borealis or, in short, the aurora. A Keogram is an image that represents a series of images taken over the course of one night. Each image is represented by a vertical line of pixels in the resulting Keogram, sorted on time from left to right, as shown in Figure 1. Keograms are a type of timeline that start with the evening on the left and end with the next morning on the right. Like the nights themselves, the Keograms differ in length. As Keograms transform a large series of images over time into one single image, they are a good way to get a quick overview over the content of the series. Keograms can be used to identify occurrences of the aurora and other features like clouds during the course of the night. Eather et al. [START_REF] Eather | Plasma injection at synchronous orbit and spatial and temporal auroral morphology[END_REF] first described and used Keograms in the seventies for studying the aurora. They describe the latitude-time morphology of auroras using scanning photometer data. The cameras used for taking these images are usually equipped with a wide-angle lens to fit the entire sky in one image. Also, these cameras are often only used to capture a small band of frequencies particular to the aurora and not the whole range of the visible spectrum. The images we used for this project were captured using an off-the-shelf DSLR camera that captures all visible light.

EXHIBITION AND RELATION TO METAMORPHOSES

We intend to exhibit up to five large-scale digital prints of Keograms. The images we selected (see Figure 2) reflect the wide variety of visual patterns in Keograms and show how an entire night of captured images can be represented in a single image. Through the transformation from a time-dependent to a time-independent medium, they offer a condensed view on the events happening in the night sky. This transformation provides a new view on sights like the aurora or illuminated clouds, which tells a story about their appearance, their movement and their superposition or interference with each other. The resulting images often differ from night to night and feature diverse colours and textures. Each image has unique characteristics, which often results in beautiful images with distinct patterns and colour pallettes.

The work has not yet been exhibited, but has drawn strong interest from colleagues and visitors to our lab when shown on a large highresolution wall display.

RELATED WORK

To the best of our knowledge, appreciating a Keogram as art is novel. However, there are aesthetically similar works of art that utilise similar techniques.

One prominent example is the work of German artist Gerhard Richter. His 2012 "Strips" [8] explore the effect of colorful, parallel lines, which are presented as large-scale prints. Two very similar projects with their origins in popular culture are "The Colors of Motion" [START_REF] Clark | The colors of motion[END_REF] and "moviebarcode" [2]. Here, each frame of a movie is transformed into an line colored according to the (average) color of the frame. Then, stacking all the lines creates an image of the movie. The results can be explored and purchased as prints on their websites. Another project with a related idea is "Waters" [START_REF] Eskandar | Waters[END_REF] by Xárene Eskandar, which also splits a video into smaller components. However, the result is another video.

The basic technique of Keograms also has been used in scientific settings. Two works that use it for similar goals are "Exploring video streams using slit-tear visualizations" by Tang et al. [START_REF] Tang | Exploring video streams using slit-tear visualizations[END_REF] and "Multi perspective panoramic imaging" by Haenselmann et al. [START_REF] Haenselmann | Multi perspective panoramic imaging[END_REF].

TECHNICAL DETAILS

We downloaded images from the Data Website [START_REF]Space physics group data landing page[END_REF] of the Space Physics Groups of the University of Calgary. These images were captured using a single DSLR as part of the AuroraMAX project.

For each night, there are thousands of images depending on the length of the given night (approximately 1 GB / night). Our Python script reads a vertical line of pixels in the middle of each image and combines them into one output image.

For this submission, we generated one image for each night from January to March 2016. We then selected a set of ten images (see Figure 2) based on unique or aesthetically pleasing features and cropped the most interesting parts.

INSTALLATION REQUIREMENTS

This piece should be hung on the wall. The prints will not be framed, so utilising binder clips and tacks will work for our hanging requirements. The piece would benefit from indirect lighting as there is a large content of black that could reflect back at viewers. Although we submit ten images here, we anticipate the committee will choose a smaller selection of these.

Additionally, we consider installing a display showing a video of a stop-motion animation of captured images. This would require a small table with room for the display.

BIOGRAPHIES

Sebastian Lay is a media informatics Masters student from the TU Dresden. He is currently a visiting student in the InnoVis group at the University of Calgary and is interested in the cross-section of traditional photography and computer-generated images. Jo Vermeulen is a Postdoctoral Fellow in the InnoVis group at the Interactions Lab at the University of Calgary. His research focuses on addressing interaction challenges with non-traditional interactive technologies, including ubicomp spaces and interactive surfaces.

Figure 1 :

 1 Figure 1: An example Keogram from which we will create a digital print, representing captured images of the night of January 1, 2016. The aurora is clearly visible in the first third, then the sky is cloudy in the middle of the night, and there is little activity in the final part right before dawn.

Figure 2 :

 2 Figure 2: Thumbnails of the ten images to be displayed. High-resolution versions of these images are available in supplemental material.

Charles

  Perin is a Postdoctoral Fellow in the InnoVis group at the Interactions Lab at the University of Calgary. He is broadly interested in work at the intersection of information visualization and human-computer interaction. Eric Donovan is a Professor in Physics and Astronomy and Associate Dean Research, Faculty of Science, University of Calgary. His research is on mass and energy transport in the near Earth plasma environment and involves observations of the aurora using groundand space-based digital imagers. Raimund Dachselt is a Professor of Computer Science at the TU Dresden and head of the Interactive Media Lab Dresden (Chair of Multimedia Technology). His research interests include natural human-computer interaction, interactive information visualization and 3D User Interfaces. Sheelagh Carpendale, a Professor in Computer Science at the University of Calgary, leads the InnoVis research group. Her research on information visualization, large interactive displays, and new media draws on her background in Computer Science, Art and Design. She has found the combined background invaluable in her research.

ACKNOWLEDGEMENTS

We would like to thank Lindsay MacDonald for her input and suggestions on how to show this work.


Bon Adriel Aseniero

Charles Perin

Marjan Eggermont

Sheelagh Carpendale

Fireflies: Expressive InfoVis Inspired by Biomimicry

We present Fireflies, a bio-inspired visualization using animal swarming behaviour and plant phyllotaxis. We applied Fireflies to a Canadian attitudinal survey on HIV/AIDS, using motion to depict participants' comfort levels concerning HIV+ people. The bio-inspired visual properties of Fireflies meld into an expressive and engaging representation of sensitive data.

INTRODUCTION

Biomimicry-derived from the Greek word bios, meaning "life", and mimesis, meaning "to imitate"-is an increasingly popular paradigm where one imitates solutions found in nature in order to solve day-to-day problems efficiently [START_REF] Benyus | Biomimicry : Innovation Inspired by Nature[END_REF]. This comes from the premise that nature (animals, plants, and microbes) offers solutions to problems that humans are still trying to solve-solutions that have undergone multiple iterations of testing and improvement, with failures already winnowed by natural selection.

Fireflies is a preliminary exploration as to how we can apply biomimicry to information visualization (InfoVis). In particular, we look into how inspirations from nature can be leveraged in order to encode data into visual representations that enable data exploration as well as elicit affect.

DATA AND DESIGN

The data visualized in Fireflies comes from a 2012 Canadian HIV/AIDS attitudinal survey [START_REF]HIV/AIDS Attitudinal Tracking Survey[END_REF]. Given the nature of this dataset, we assessed participants' attitude towards HIV/AIDS through their answers to questions eliciting opinions about the welfare of HIV+ people and their knowledge on how the virus propagates. The data is optimistic in that the majority of the participants are comfortable with, and care for the welfare of people who are HIV+. Hence, the data does not necessitate a somber approach but rather one which reflects the triumph of progressive ideas over ignorance.

Our goals for designing an engaging visualization which is both visually expressive and useful for exploration include: providing expressiveness through visual variables such as motion; enabling the creation of meaningful groups of data-points; and supporting conventional means of exploration such as sorting and querying.

We used inspirations from nature to achieve these goals. One inspiration is animal swarming behaviour. This metaphor lets people to make their own groupings of data-points based off a swarming behaviour of insects, where members of the swarm fly towards a food source. Additionally, we took pointers from apparent behaviour in animation [START_REF] Heider | An Experimental Study of Apparent Behavior[END_REF] to encode other aspects of the data: we visualize aggressive behaviours with fast and jittering motions, and nonaggressive behaviours with slow and calm motions.

We also considered pointers from personal visualization (PV) research [START_REF] Huang | Personal Visualization and Personal Visual Analytics[END_REF] to engage people with learning about current public opinion of an infectious disease. PV encourages diversifying perspectives to design personable visualizations. In this light, we chose art as a means to communicate sensitive data to people from all walks of life. We designed Fireflies to be enable exploration for curiosity, and to be aesthetically pleasing, borrowing from minimalist designs of modern art. To create beautiful clusters of datapoints, we employed Vogel's phyllotactic pattern algorithm [START_REF] Vogel | A Better Way to Construct the Sunflower Head[END_REF], using a 137.5° angle to mimic how sunflower seeds grow. This results in a visually appealing yet efficient way of clustering fireflies into groups (see Figure 1).

FIREFLIES

Fireflies visualizes a random sample of data-points as fireflies floating in 2D space. Each firefly's visual characteristics depict aspects about the participant: 1. Colour -the survey participants' location. 2. Opacity -the survey participants' age-range. Younger agerange is more opaque than older age-ranges. 3. Size -the participants' self-reported knowledge of HIV/AIDS. Smaller sizes mean lesser knowledge than larger sizes.

* email: baasenie@ucalgary.ca † email: charles.perin@ucalgary.ca ‡ email: meggermo@ucalgary.ca § email: sheelagh@ucalgary.ca 4. Glyph -the ✦ diamond star symbolizes membership to a Canadian aboriginal group. 5. Motion -the participants' attitude towards HIV/AIDS. More movement means greater discomfort. The horizontal and vertical axes have no particular encoding. Thus, people are unrestricted when creating their own groupings of data-points in any area of the visualization. Groupings of fireflies (see Figure 2) can be made with sorting categories based on the participants' demographics. Predefined sorting categories are based on location, age-range, knowledge, and attitude data. Other means of grouping include querying and clicking on any firefly to find similar fireflies. Clusters can also be moved around in space, allowing people to fine-tune the positions of their groupings.

SIMILAR WORKS

Some existing artworks have similar aesthetics and techniques to Fireflies. Most notably, Damien Hirst's Spot paintings [START_REF] Hirst | Spot Paintings[END_REF]-containing different coloured dots arranged harmoniously in multiple geometric patterns-and WeFeelFine [START_REF] Harris | We Feel Fine[END_REF]-an interactive artwork visualizing human emotions around the world through self-organizing particles-served as inspiration in the design of Fireflies.

RELEVANCE TO METAMORPHOSES

We designed Fireflies to enable exploration for curiosity. People are free to make their own groupings of data-points while using Fireflies. This freedom allows for interesting groupings and positioning of data-points to occur, much like in Metamorphoses where transformations are capricious, left in the whims of the gods. Whether the groupings have immediate meaning or not, it is up to the person exploring; however, by observing the different clusters of data-points, it is possible that the observer will arrive to new knowledge regarding the dataset. Consequently, the visualization becomes an ever changing spectacle of colours and motion.

INSTALLATION REQUIREMENTS

Our submission will include high-resolution prints of six configurations of Fireflies. The prints will measure approximately 3'x4' each. Thus, we require mounting fixtures on the walls or boards and lighting. We can submit more or less images upon request.

We also require an interactive screen and a computer with a modern browser such as Google Chrome to showcase our interactive visualization. A projector or screen to show a video will suffice in the event of a touch-enabled screen being unavailable.

OTHER EXHIBITIONS

Our work appeared at the Herringer Kiss Gallery 1 in Calgary, Alberta, Canada as part of the September 2016 Beakerhead Festival 2 . It is a part of the exhibit entitled Murmuration, curated by Marjan Eggermont (one of the authors).

CONCLUSION

Biomimicry is a great inspiration for finding solutions to problems. The InfoVis community can benefit from it and leverage biomimicry for designing new visualization techniques. We illustrated how this process can lead to an expressive visualization metaphor in Fireflies. The apparent behaviour animation we used gives striking character to fireflies representing participants who have some discomfort towards HIV/AIDS. Furthermore, the enticing motion of the fireflies as they form clusters may engage people to look for other clusters and to explore the dataset more thoroughly. Fireflies

Figure 1 .

 1 Figure1. A sprinkle of data-Fireflies is a visualization resulting from applying biomimicry to information visualization. Using animal behaviours and plant phyllotaxis, Fireflies' visual metaphor provides opportunities to create expressive groupings with varying aesthetics. Thus, supporting visualization of sensitive data such as public opinion about an infectious disease.

  1 http://herringerkissgallery.com thus becomes an example as to how Art and Biomimicry can be a means to communicate data and engage the public.9 BIOGRAPHIESBonAdriel Aseniero is a Computer Science PhD student at the University of Calgary. His research concentrates on the design and study of alternative visualizations for personal well-being. Charles Perin is a computer scientist specializing in InfoVis and human-computer interaction. He is currently a post-doc at the University of Calgary, InnoVis Group. He is particularly interested in studying new interactions for visualizations. Marjan Eggermont is the Associate Dean (Student Affairs) and a senior instructor in The Schulich School of Engineering at the University of Calgary, teaching in the area of engineering design and communication. She is also an artist who exhibits nationally and internationally. Marjan teaches graphics, communication, technology and design history, biomimicry, and InfoVis. Sheelagh Carpendale, a professor in the Department of Computer Science at the University of Calgary, leads the InnoVis research group. Her research on information visualization, large interactive displays, and new media draws on her background in Computer Science, Art and Design. She has found the combined background invaluable in her research.

Figure 2 :

 2 Figure 2: Reading the metaphor: each survey participant is encoded as a firefly (coloured dot) whose motion depicts their comfort level regarding people with HIV/AIDS.