In the context of presenting data visualizations, resizing is particularly critical when engaging with a dashboard featuring limited screen real-estate, and/or when visualizations created on one display must then rendered on a different-sized display. The major challenge associated with developing techniques that facilitate resizing and creating multi-scale visualizations, is the significant number of variations that must be considered to represent a rescaled visualization effectively. A visualization author may need to represent every detail of the visualization at a given display size, while also taking into account every possible combination of the display properties such as resolution, size, and aspect ratio.
General resizing techniques such as uniform scaling and scale-and-stretch can be easily applied to resizing a visualization, but they tend to make the visualization illegible and increase the amount of visual clutter at smaller scales . Such resizing also does not consider semantic information represented by the underlying data. Hence, it is crucial for visualization techniques to support a smarter way to automatically adapt visual representations so that the viewer can read the chart more easily, regardless of the particular display size.
In cartographic literature, generalization refers to the process of abstracting the visual detail in a map, with the goal of maintaining the legibility of the map at any given scale . Inspired by cartographic generalization, this work explores how these principles can be applied to resizing data visualizations effectively at different scales. Particularly, we extend cartographic generalization to rescaling line charts, a common chart type. We present a set of spatial metrics to examine geometric properties and relationships among elements in a line chart. These metrics are used to determine the presence of visual clutter and complexity in a view. Based on these metrics, we developed a set of generalization techniques for semantically resizing line charts to target display sizes.
2 Related Work
There are several approaches to resizing content beyond mere uniform scaling and can be organized into the following categories:
2.1 Cartographic Generalization
Cartographic generalization enables one to simplify or eliminate less semantically important features, exaggerate more important ones, and resolve visual clutter to improve information quality on a smaller scale [11, 30, 35]. Route maps have effectively and succinctly applied various forms of generalization [3, 47]. Kray et al. describe a method of presenting route instructions on a mobile device depending on various situational factors such as limited resources and varying quality of positional information . Although automatic map generalization techniques have been described for two decades in the cartographic and geographic literature, little research has been undertaken on how these methods could be extended to other forms of visualization.
2.2 Scroll, Pan and Zoom, Overview + Detail
Scroll and pan behavior maintains the layout and size of the original viewport, allowing for a portion of the visualization to be seen at any given time [2, 1], resulting in a loss of context . Semantic zoom lets the user see different amounts of detail based on semantic importance . Panning and zooming are often combined to create a continuous navigation experience . Overview + detail techniques display more than one level of detail such that manipulating the overview causes a corresponding change in the detail view. In SeeSoft , a miniaturized overview of text operates as a scrollbar for a more detailed view. While overview + detail reduce disorientation by having the overview co-present with the detail view, the techniques often suffer from visual discontinuity between the two views. Schwab et al.  studied how pan and zoom timelines are used to navigate large time series data. They found that the visual context and orientation play a role in efficient navigation. While these interaction techniques provide users the flexibility of viewing a portion of the content at a time, the navigation can be often disorienting especially when the frame of reference is not clearly defined. Our work explores how line charts can be generalized for a specific target size, displaying detail for more salient information.
2.3 Content Retargeting
For viewing large-sized content on smaller screens, there has been work on adapting or retargeting the content for these smaller displays. Automatic reformatting of web pages concatenates columns or hides less important information [15, 39]. With the prevalance of online data journalism, Kim et al.  explored how data thumbnails in these articles can be designed to be interpretable. MiniMap  changes the size of the text relative to the size of the viewport. Other techniques explore changing the geometrical properties of visualization elements and views, including geometrical transformation [4, 41, 43] and view deformation [46, 5]. Vistribute  automatically distributes visualizations and user interface components across multiple heterogeneous devices. Shi et al.  evaluate a diversity of automatic line simplification algorithms based on positional accuracy and processing time. These various techniques for retargeting however, may get challenging if the layout transformations affect the semantics of the content. We explore generalization as a way to preserve the recognizability of semantically important elements in the line chart at different display sizes.
2.4 Responsive Visualizations
The prevalence of mobile devices motivates the need to design communicative visualizations that are responsive to varying screen sizes. Kim et al.  identify strategies and trade-offs between the presentation of information and the intended takeaway of the chart. Often these visual representations and graphical user interfaces have to be adapted for smaller displays and lower resolution [8, 18, 12]. ViSizer  presents a perception-based framework for scaling important regions uniformly and deforming homogeneous context. MobileVisFixer 
adapts a reinforcement learning-based approach that automatically learns and applies decision rules for generating mobile-friendly visualizations. Hoffswell et al. analyzed a corpus of responsive news visualizations that informed a prototype tool for designing responsive visualizations for different device contexts. Our work is motivated by similar goals, but we specifically explore how cartographic generalization principles can be applied to line charts. By considering the spatial relationships of the individual elements in the chart, we developed an automated approach to emphasize and de-emphasize information based on their semantics and target display size.
3.1 Identifying Semantic Importance
The first step in our algorithm is to identify all of the elements in the given chart. The algorithm assigns higher semantic weights to local extrema, first and last data values compared to chart elements such as axes or tick marks. Each element is assigned a unique ID and the algorithm computes a bounding box for each of them. Similar elements are then categorized into layers. This allows us to apply different constraints and generalization operators based upon the unique characteristics and semantics of each element layer. Each layer is assigned a value from 0 (lowest importance) to 1 (highest importance) based on the semantics of a line chart .
3.2 Compute Spatial Metrics
The algorithm then computes various spatial metrics for the elements in the resized line chart to minimize visual clutter. Based on visualization best practices [29, 14, 40], the amount of visual clutter is informed by the following guidelines:
Avoid congestion: A visualization view should not include too many elements at specific region.
Avoid conflict: To maintain legibility, elements should not overlap. Each element should be easily identifiable and readable.
Make more semantically important elements prominent: An element of higher importance value should be more visible than less important ones.
We now describe each of these spatial metrics in more detail.
Data density can provide simple, yet effective metrics for evaluating visual clutter in the view [40, 32]. To calculate density, we divide the entire visualization view into uniform cells (where and are empirically determined based on the target display size). We then apply Topfer’s Radical Law [38, 44] to express the number of elements that can be maintained at that size (Figure 1):
This metric allows for generalization operators to be applied to different regions based on their density value. For example, we can show more information or enlarge elements in less dense regions.
In our algorithm, the distance is measured between similar elements within the same layer such as labels or tick marks. The distance is measured using Euclidean distance. We utilize this metric to assess whether elements (e.g., annotations and associated data points) are too close to each other.
This metric determines collisions between elements in a chart that contribute to visual clutter. We employ a quadtree, a compact data structure to keep the algorithm performant . We use the following equation to compute the overlapping area between elements:
where is the area of overlap between elements and .
3.2.4 Area ratio
As the display size decreases, the proportion of areas that elements occupy with respect to the area of the resized chart, increases. This metric assesses the ratio of the total area of elements to the area of the entire visualization view and is used to maintain the area of the more semantically important elements in the chart, deemphasizing the area of less important ones. Area ratio is computed as follows:
3.3 Generalization operators
The primary goal of generalization is to maintain the recognizability of important elements, while deemphasizing less important information. We describe four generalization operations based on the spatial metrics - jittering, elimination, simplification, and merging.
Jittering is a technique used to resolve collisions between elements by displacing the elements from their original positions to reduce visual clutter. We employ and extend the label placement simulated annealing algorithm 
by adding additional heuristics:
A label should not overlap a data point.
A label should be located at the place which has the lowest information density.
A label’s text-anchor should be updated based on the new position of the label.
We first determine a density cell diagonally adjacent to a label anchor located in cell with density (Figure 1). We chose a cell neighborhood as it provided a reasonable heuristic for determining visual clutter. The sum of each density cells is computed as follows:
where denotes the sum of cell information density for all and . and are the indices of cells where the anchor is located and the screen coordinates where the origin is, at the top-left. After calculating the sum of each of the four directions, jittering is applied by calculating a new position that has the minimum density sum:
There is a high likelihood that too many elements will occupy a small area when the scale is reduced. This situation significantly increases both local information density and the likelihood of conflict. We compute a score based on semantic importance for each element to determine which of the elements ought to be removed.
To reduce this complexity and clarify semantic intent, we simplify the line using the Douglas-Peucker algorithm  line simplification method. We found that this line simplification method offers efficient compression ratios while retaining important visual features in the lines. As shown in Figure Semantic Resizing of Charts Through Generalization: A Case Study with Line Charts, simplification maintains the overall data shape, while preserving visually prominent features.
This operation combines elements when there is congestion or the elements are in conflict. In the context of line charts, this operation applies to tick labels. As shown in Figure 3, two tick labels are merged into a single tick label by updating the axis domain and the interval between the tick marks.
3.4 Performance and space complexity
With our generalization algorithm, a new chart can be rendered on the fly based on the spatial constraints of the current view. While the overall complexity of the algorithm depends on the actual generalization operators employed, the complexity is at most based on the worst-case time-complexity of the jittering algorithm. The algorithm has been tested on a desktop browser for various target sizes and further investigation would need to be done to assess the algorithm’s performance on mobile devices and smart watches.
We conducted an evaluation of the algorithm with the following goals: (1) collect qualitative feedback on the usefulness of the generalization algorithm on various target display sizes and (2) identify limitations and future opportunities. Because the main goal of our study was to gain qualitative insight in the algorithm behavior, we encouraged participants to think aloud with the experimenter.
We recruited volunteers ( males, females, age 24 – 54) from a local town mailing list. The participants had a variety of backgrounds - software engineer, technical writer, sales consultant, product manager, program manager, and graduate student. Based on self-reporting, all were fluent in English and had experience reading line charts. used a visualization tool [2, 1] on a regular basis and the rest considered themselves having limited proficiency.
4.1.2 Procedure and Apparatus
We ran a between-subjects design study where each participant was randomly assigned one resized chart from a set of single-line charts. We sourced the charts from Pew Research , Wikipedia , and Tableau Public  and recreated them in D3. We removed graphical elements that could potentially affect the readability of the features such as highlighting and background shading. All the original charts had a display size of .
Task 1: During the first part of the study, each participant was initially shown the original line chart and then randomly shown one of three resized images of the chart, targeted at tablet (), phone (), and watch () display sizes. The display sizes were chosen based on evaluation criteria commonly used to evaluate visualizations on mobile devices . Because we were seeking subjective responses, participants could complete only one trial to avoid biases that might arise from repeated exposure to the task. To assess whether features in the chart were discernible, participants were asked the values for the start and end, local extrema, minimum, and maximum data points. We did not impose a constraint on the amount of time spent looking at the chart and answering the questions, emulating chart reading in the real world.
Task 2: The second part of the study was exploratory where participants used the prototype with the original line chart loaded into a web browser. They could resize the chart to any arbitrary display size by dragging and resizing the browser window. The study concluded with an interview.
The prototype was hosted on the experimenter’s 16-inch laptop, a GHz MacBook Pro running macOS Catalina set to a resolution of . Each session took about minutes.
4.1.3 Analysis Approach
We employed a mixed-methods approach involving qualitative and quantitative analysis, but considered the quantitative analysis mainly as a complement to our qualitative findings.
5 Results and Discussion
Overall, participants were positive about the system and identified many benefits for the system being able to dynamically generalize the line chart to different display sizes. Several participants were impressed with the system’s ability to preserve local extrema features and the general data shape in the line chart at smaller display sizes - (“I can recognize the smaller chart and has kept the peaks that I observed in the larger one ().”). All the participants were able to identify the start and end values in the three generalized line charts during Task 1. for the larger () size, (8/10) for the phone (750×1334) size, and (3/10) of the participants for the watch () size were able to accurately provide values for the local extrema, minium, and maximum points. Participants appreciated the sparkline appearance in the smallest chart and commented that such a representation would be useful for certain applications. For example, “I go running and this chart can be useful to show my heart rate on my iWatch. ()” and “I see these charts a lot for stock prices. They are simple and easy to read at a quick glance ().” During the exploratory part of the study (Task 2), participants appreciated the dynamic nature of the algorithm to be able to generalize the chart as they resized the browser window. Comments related to this behavior included, “I can see this being very useful if I’m switching between devices and want to view the same data ()” and “I often need to add charts into my table. It would be neat if I can drag a line chart into a cell and it creates a little microchart for me ().”
The study has limitations and provides opportunities for further improving and expanding the scope of the generalization behavior.
Exploring complex chart types and tasks: We evaluated our generalization algorithm for univariate line charts. While the spatial metrics apply to multivariate line charts, there are interesting research opportunities to explore how well generalization applies to other chart types. said, “I use a lot of Excel tables, but often struggle to get the gist of them when I view them on my mobile device.” Exploring how data distributions can affect the spatial metrics and semantic properties of chart elements, is another interesting direction of research inquiry. The task of reading data values from the charts at different scales, is rather simplistic. Future work should explore more complex chart reading tasks including trends, seasonal patterns, and overall takeaways.
Control over feature retention and simplification: A challenge for automating the generalization process is representing data at multiple scales . Participants wanted to have more control over what information is preserved as the line chart is resized. commented, “I wanted to keep the label on the small dip in the dollar price as I felt that was important and I wish there was a way to keep it sticky.” Similar to responsive web design tools  that support both automation and flexibility of content and layout, there is a need to explore responsive chart and dashboard authoring tools.
Generalization with deep learning models
: Our approach employs spatial metrics for determining the generalization operation. Neural networks and deep learning methods are promising avenues for learning good generalization examples through pattern recognition. Exploring how such deep learning approaches can replicate many difficult aspects of expert generalization, such as line smoothing, enlargement, and displacement, would help scale the applicability of chart generalization over a variety of use cases.
Finally, future work should test these ideas in a live system for specific real-world analytical tasks and actual target display devices rather than in the artificial setting of a study.
This paper presents a technique for applying cartographic principles to the resizing of line charts at different target display sizes. Specifically, we present a set of spatial metrics to examine geometric properties and relationships among elements in line charts. We employ these metrics to determine a set of generalization operations for semantically resizing line charts; maintaining the legibility of visually prominent features and demphasizing less important features. An evaluation of the algorithm indicates that participants found that the generalized line charts preserved the general data shape and features from that of the original. Feedback from interacting with the prototype identified opportunities for further exploring the space of generalization techniques for creating responsive chart design.
-  Microsoft Q&A. https://powerbi.microsoft.com, 2021.
-  Tableau Software. https://tableau.com, 2021.
-  M. Agrawala and C. Stolte. Rendering effective route maps: improving usability through generalization. In Proceedings of the 28th annual conference on Computer graphics and interactive techniques, pages 241–249. ACM, 2001.
-  S. Avidan and A. Shamir. Seam carving for content-aware image resizing. In ACM Transactions on graphics (TOG), volume 26, page 10. ACM, 2007.
-  S. Baldassi, N. Megna, and D. C. Burr. Visual clutter causes high-magnitude errors. PLoS biology, 4(3):e56, 2006.
-  R. Ball, C. North, and D. A. Bowman. Move to improve: promoting physical navigation to increase user performance with large displays. In Proceedings of the SIGCHI conference on Human factors in computing systems, pages 191–200. ACM, 2007.
-  B. B. Bederson and J. D. Hollan. Pad++: A zooming graphical interface for exploring alternate interface physics. In Proceedings of the 7th Annual ACM Symposium on User Interface Software and Technology, UIST ’94, pages 17–26, New York, NY, USA, 1994. ACM.
-  T. Blascheck, L. Besançon, A. Bezerianos, B. Lee, and P. Isenberg. Glanceable visualization: Studies of data comparison performance on smartwatches. IEEE transactions on visualization and computer graphics, 25(1):630–640, 2018.
-  K. Blumenstein, C. Niederer, M. Wagner, G. Schmiedl, A. Rind, and W. Aigner. Evaluating information visualization on mobile devices: Gaps and challenges in the empirical evaluation design space. In Proceedings of the Sixth Workshop on Beyond Time and Errors on Novel Evaluation Methods for Visualization, BELIV ’16, page 125–132, New York, NY, USA, 2016. Association for Computing Machinery.
-  M. Bostock, V. Ogievetsky, and J. Heer. D3 data-driven documents. Visualization and Computer Graphics, IEEE Transactions on, 17(12):2301–2309, 2011.
-  K. E. Brassel and R. Weibel. A review and conceptual framework of automated map generalization. International Journal of Geographical Information System, 2(3):229–244, 1988.
-  M. Brehmer, B. Lee, P. Isenberg, and E. K. Choe. Visualizing ranges over time on mobile phones: a task-based crowdsourced evaluation. IEEE transactions on visualization and computer graphics, 25(1):619–629, 2018.
-  B. Buttenfield, R. McMaster, and H. Freeman. Map Generalization: Making Rules for Knowledge Representation. New York, NY : Wiley, 1991.
-  S. K. Card, J. D. Mackinlay, and B. Shneiderman, editors. Readings in Information Visualization: Using Vision to Think. Morgan Kaufmann Publishers Inc., San Francisco, CA, USA, 1999.
-  Y. Chen, W.-Y. Ma, and H.-J. Zhang. Detecting web page structure for adaptive viewing on small form factor devices. In Proceedings of the 12th International Conference on World Wide Web, WWW ’03, pages 225–233, New York, NY, USA, 2003. ACM.
-  A. Cockburn, A. Karlson, and B. B. Bederson. A review of overview+detail, zooming, and focus+context interfaces. ACM Comput. Surv., 41(1), Jan. 2009.
-  D. H. Douglas and T. K. Peucker. Algorithms for the reduction of the number of points required to represent a digitized line or its caricature. Cartographica: The International Journal for Geographic Information and Geovisualization, 10(2):112–122, 1973.
-  S. M. Drucker, D. Fisher, R. Sadana, J. Herron, and M. Schraefel. Touchviz: a case study comparing two interfaces for data analytics on tablets. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, pages 2301–2310, 2013.
-  S. G. Eick, J. L. Steffen, and E. E. Sumner, Jr. Seesoft-a tool for visualizing line oriented software statistics. IEEE Transactions on Software Engineering, 18(11):957–968, Nov. 1992.
-  B. Gremillion. Responsive Web Design: Getting the New Baseline in Web Design Right. Smashing Magazine, 2013.
-  J. Hoffswell, W. Li, and Z. Liu. Techniques for flexible responsive visualization design. In Proceedings of the 2020 CHI Conference on Human Factors in Computing Systems, CHI ’20, page 1–13, New York, NY, USA, 2020. Association for Computing Machinery.
-  T. Horak, A. Mathisen, C. N. Klokmose, R. Dachselt, and N. Elmqvist. Vistribute: Distributing Interactive Visualizations in Dynamic Multi-Device Setups, page 1–13. Association for Computing Machinery, New York, NY, USA, 2019.
I. Karsznia and K. Sielicka.
When traditional selection fails: How to improve settlement selection for small-scale maps using machine learning.ISPRS International Journal of Geo-Information, 9:230, 04 2020.
-  H. Kim, D. Moritz, and J. Hullman. Design patterns and trade-offs in responsive visualization for communication, 2021.
-  H. Kim, J. Oh, Y. Han, S. Ko, M. Brehmer, and B. C. Kwon. Thumbnails for data stories: A survey of current practices. In 2019 IEEE Visualization Conference (VIS), pages 116–120, 2019.
-  A. Klinger. Patterns and search statistics. pages 303–337, 1971.
-  S. M. Kosslyn. Understanding charts and graphs. Applied cognitive psychology, 3(3):185–225, 1989.
-  C. Kray, C. Elting, K. Laakso, and V. Coors. Presenting route instructions on mobile devices. In IUI ’03: Proceedings of the 8th international conference on Intelligent user interfaces, pages 117–124, New York, NY, USA, 2003. ACM.
-  A. M. MacEachren. How Maps Work - Representation, Visualization, and Design. Guilford Press, 2004.
-  R. B. McMaster and K. S. Shea. Generalization in digital cartography. Association of American Geographers Washington, DC, 1992.
-  Pew Research. https://www.pewresearch.org, 2021.
-  R. Rosenholtz, Y. Li, and L. Nakano. Measuring visual clutter. Journal of Vision, 7(2):17, 2007.
-  V. Roto, A. Popescu, A. Koivisto, and E. Vartiainen. Minimap: a web page visualization method for mobile phones. In Proceedings of the SIGCHI conference, pages 35–44, NY, USA, 2006. ACM Press.
-  M. Schwab, S. Hao, O. Vitek, J. Tompkin, J. Huang, and M. A. Borkin. Evaluating Pan and Zoom Timelines and Sliders, page 1–12. Association for Computing Machinery, New York, NY, USA, 2019.
-  K. S. Shea and R. B. McMaster. Cartographic generalization in a digital environment: When and how to generalize. In Proceedings of AutoCarto, volume 9, pages 56–67, 1989.
W. Shi and C. Cheung.
Performance evaluation of line simplification algorithms for vector generalization.The Cartographic Journal, 43(1):27–44, 2006.
-  Tableau Public. https://public.tableau.com, 2021.
-  F. Töpfer and W. Pillewizer. The principles of selection. The Cartographic Journal, 3(1):10–16, 1966.
-  J. Trevor, D. M. Hilbert, B. N. Schilit, and T. K. Koh. From Desktop to Phonetop: A UI for web interaction on very small devices. In Proceedings of the 14th Annual ACM Symposium on User Interface Software and Technology, UIST ’01, pages 121–130, New York, NY, USA, 2001. ACM.
-  E. R. Tufte and P. Graves-Morris. The Visual Display of Quantitative Information, volume 2. Graphics press Cheshire, CT, 1983.
-  E. Wang, G. G. Park, and Yeoli. A D3 plug-in for automatic label placement using simulated annealing. 2013.
-  Wikipedia. https://www.wikipedia.org, 2021.
-  L. Wolf, M. Guttmann, and D. Cohen-Or. Non-homogeneous content-driven video-retargeting. In Computer Vision, 2007. ICCV 2007. IEEE 11th International Conference on, pages 1–6. IEEE, 2007.
A. Woodruff, J. Landay, and M. Stonebraker.
Constant density visualizations of non-uniform distributions of data.In Proceedings of the 11th annual ACM symposium on User interface software and technology, pages 19–28. ACM, 1998.
-  A. Wu, W. Tong, T. Dwyer, B. Lee, P. Isenberg, and H. Qu. Mobilevisfixer: Tailoring web visualizations for mobile phones leveraging an explainable reinforcement learning framework. IEEE Transactions on Visualization and Computer Graphics, 2020.
-  Y. Wu, X. Liu, S. Liu, and K.-L. Ma. Visizer: a visualization resizing framework. Visualization and Computer Graphics, IEEE Transactions on, 19(2):278–290, 2013.
-  A. Zipf. User-adaptive maps for location-based services (lbs) for tourism. In 9th Int. Conf. for Information and Communication Technologies in Tourism (ENTER 2002), pages 329–337, 2002.