Una línea de productos software para la visualización de datos

Una L´ınea de Productos Software para la Visualizaci´on de Datos* Jos´e Miguel Horcas1[0000−0002−7771−0575], Jos´e A. Galindo1[0000−0001−9293−9784], and David Benavides1[0000−0002−8449−3273] Universidad de Sevilla, Espa˜na [email protected],[email protected],[email protected] Resumen La visualizaci´on de datos expone una gran cantidad de variabilidad a nivel de dise˜no de gr´aficos y su implementaci´on con las herramientas existentes. Sin embargo, no todas las configuraciones son igual de efectivas para representar datos. Nosotros proponemos una l´ınea de productos software (SPL) para la visualizaci´on de datos que sintetiza los principios y buenas pr´acticas de dise˜no en visualizaci´on de datos, modelando aquellas opciones recomendadas por los expertos en visualizaci´on y reduciendo la variabilidad expuesta por las librer´ıas software. Este trabajo presenta la implementaci´on de la SPL de visualizaci´on de datos. Concretamente se presentan los artefactos desarrollados en la SPL, incluyendo el modelo de variabilidad y la implementaci´on de las visualizaciones usando plantillas variables, y se muestra la viabilidad de nuestra propuesta con la que se abre una nueva l´ınea de investigaci´on donde se aplican t´ecnicas de variabilidad a la visualizaci´on de datos. Keywords: L´ınea de Productos Software ·Variabilidad ·Visualizaci´on 1. Introducci´on La visualizaci´on de datos [6] es un ´area de gran relevancia hoy en d´ıa debido a la gran cantidad de datos que se generan en los sistemas de informaci´on actuales. Dicha informaci´on viene mayoritariamente dada en forma de datos cuantitativos que tienen que ser almacenados, analizados y mostrados al p´ublico objetivo. La visualizaci´on de datos se encarga de la representaci´on visual de dichos datos para comunicar de forma eficiente la informaci´on contenida en esos datos [5]. Sin embargo, la visualizaci´on de datos expone una gran cantidad de variabilidad [3]. Desde la selecci´on del tipo de gr´afica (e.g., gr´aficos de barras, de l´ıneas, nubes de dispersi´on, gr´aficos de tarta) seg´un la naturaleza de nuestros datos y el mensaje que queramos transmitir (e.g., una serie temporal, una correlaci´on, un ranking); pasando por la codificaci´on visual de los datos usando distintos componentes (puntos, barras, l´ıneas, cajas); la configuraci´on de los atributos visuales de dichos componentes (forma, color, tama˜no, longitud, posici´on); y los componentes de m´as bajo nivel (escalas, rejillas, anotaciones, leyendas,. . . ); hasta la configuraci´on de los componentes que no representan datos (e.g., ejes). Aunque existen multitud de librer´ıas y herramientas de visualizaci´on para generar *Este trabajo ha sido financiado por el programa FEDER de la Uni´on Europea, el proyecto METAMORFOSIS (US-1381375) y el proyecto COPERNICA (P20 01224) de la Junta de Andaluc´ıa, y por el gobierno de Espa˜na mediante el programa Juan de la Cierva—Formaci´on 2019. 2 Horcas et al. gr´aficos a partir de un conjunto de datos [6], como la librer´ıa Matplotlib para Python, el paquete Ggplot2 en R, o Pgfplots para L A T EX, estas soluciones exponen demasiadas opciones de configuraci´on que puede llegar a abrumar al usuario, requiriendole conocer los detalles t´ecnicos de m´as bajo nivel de la herramienta en cuesti´on para poder generar una gr´afica adecuada a sus necesidades. Adem´as, estas soluciones proporcionan poca ayuda al usuario a la hora de determinar cual es la mejor representaci´on para sus datos. En este trabajo, presentamos una implementaci´on de una l´ınea de productos software (SPL) para la generaci´on de visualizaciones. La SPL sintetiza la variabilidad y el conocimiento relativo a los principios y buenas pr´acticas en el dise˜no de una visualizaci´on gr´afica, y permite al usuario seleccionar aquellas opciones que mejor se adapten al mensaje que quiere transmitir con sus datos. La SPL ofrece solo aquellas opciones de dise˜no recomendadas por los expertos en visualizaci´on, reduciendo la variabilidad expuesta por las herramientas existentes de visualizaci´on. Los puntos de variaci´on de la visualizaci´on se implementan mediante un sistema basado en plantillas, generando el producto final (la visualizaci´on) sin que el usuario tenga que conocer los detalles t´ecnicos de bajo nivel de la librer´ıa software de visualizaci´on. Este art´ıculo presenta una herramienta que da soporte a la propuesta enviada a SPLC’22 [4]. 2. La SPL de visualizaci´on de datos La herramienta nos ofrece un modelo de variabilidad (Fig. 1) donde se sintetiza el conocimiento sobre principios y buenas pr´acticas de dise˜no para la visualizaci´on de datos. Dicho conocimiento se ha extra´ıdo de varias fuentes sobre percepci´on visual y su aplicaci´on al dise˜no de gr´aficos [3,2,5] que los expertos en visualizaci´on han ido investigando y publicando a lo largo de los a˜nos. Por ejemplo, solo gr´aficos que codifiquen los valores como puntos, l´ıneas, barras, y cajas con recomendables (con raras excepciones) porque esas codificaciones usan atributos visuales que son percibidos con facilidad y precisi´on, mientras que formas 2D o 3D (gr´aficos de tartas o radiales) dificultan la comparaci´on de datos por razones de percepci´on (e.g., cuesta m´as diferenciar ´angulos que longitudes sobre un eje) [3]. El usuario puede dise˜nar una visualizaci´on para sus datos seleccionando las caracter´ısticas que desee acorde al tipo de mensaje que quiere transmitir. Por ejemplo, para representar una correlaci´on en los datos, los gr´aficos recomendados son los diagramas de dispersi´on o las barras horizontales, como se ve en las restricciones del modelo de variabilidad. Adem´as, la visualizaci´on generada respeta los principios y buenas pr´acticas de dise˜no ya que el modelo de variabilidad solo expone aquellas opciones consideradas como “buenas” o “recomendables”. Por ejemplo, la librer´ıa Pgfplots para L A T EX expone hasta 33 formas diferentes para codificar los datos como puntos en una gr´afica, sin embargo, los expertos en visualizaci´on recomiendan usar solo aquellas formas que sean f´acilmente distinguibles como estas cinco: ,□,△, +, ×, incluso sin color de relleno [3]. Una SPL para la Visualizaci´on de Datos 3 WithPoints decreasesWith ScatterPlot DataSet Size Orange Annotations DataRelationship increasesWith NominalComparison Position Intensity Orientation SecondaryComponents Graph Yellow PlusMark largerThan Correlation Legend Shape CircleMark changesWith NonDataComponents Boxes HorizontalBars lessThan Width smallerThan variesWith Blue EmphasizeGoal HorizontalBoxes Red Length VerticalBoxes TimeSeries TriangleMark equalTo LineGraph GridLines Ranking VisualAttributes greaterThan Gray Color follows causedBy Geospatial BoxPlot DistributionRelationship DotPlot Pink CrossMark MissingValues Deviation Lines ValueEncodingObject Brown StripPlot Form Scales Information affectedBy SquareMark QuantitativeScaleNotBeginAtZero Points PartToWhole Hue VisualComponents BarGraph VerticalBars PrimaryComponents Purple Green Bars ⇒ ∨ ∨ ∨TimeSeries LineGraph VerticalBars DotPlot VerticalBoxes ∧ ⇒TimeSeries EmphOverallPattern LineGraph ∧ ∧ ⇒TimeSeries EmphIndividualValues ¬MissingValues VerticalBars ∧ ⇒ ∨TimeSeries MissingValues DotPlot WithPoints ⇒ ∨ ∨Ranking BarGraph DotPlot BoxPlot ∧ ⇒Ranking QuantitativeScaleNotBeginAtZero DotPlot ⇒ ∨ ∨ ∨DistributionRelationship StripPlot LineGraph VerticalBars BoxPlot ∧ ⇒DistributionRelationship EmphIndividualValues StripPlot ∧ ⇒DistributionRelationship EmphOverallPattern LineGraph ⇒SingleDistribution ¬Boxes ⇒MultipleDistribution ¬Bars ∧ ⇒SingleDistribution EmphIndividualValues VerticalBars ⇒ ∨PartToWhole BarGraph LineGraph ⇒ ∨ ∨Deviation BarGraph DotPlot LineGraph ∧ ⇒Deviation QuantitativeScaleNotBeginAtZero DotPlot ⇒ ∨Geospatial Points Lines ⇒ ∨Correlation ScatterPlot HorizontalBars ⇒ ∨NominalComparison Bars DotPlot ∧ ⇒NominalComparison QuantitativeScaleNotBeginAtZero DotPlot Legend: Mandatory Optional Or Group Alternative Group Abstract Feature Concrete Feature Collapsed 4 1 3 6 4 2 8 8 11 5 2 6 Figura 1: Modelo de variabilidad para la visualizaci´on de datos 3. Implementaci´on y resultados preliminares Proporcionamos una implementaci´on de la SPL para visualizaci´on1que hace uso de las siguientes herramientas: FeatureIDE. Para la selecci´on y propagaci´on de caracter´ısticas en el proceso de configuraci´on de la visualizaci´on. Jinja2. Como motor de plantillas para la implementaci´on y resoluci´on de la variabilidad en los artefactos de la visualizaci´on. La Fig. 2 muestra un ejemplo del artefacto variable que implementa una visualizaci´on donde los puntos de variaci´on se definen entre corchetes (resaltados en negrita). AAFM Python Framework. Para la orquestaci´on de los modelos y la relaci´on (mapping) entre las caracter´ısticas del modelo de variabilidad y los puntos de variaci´on de la plantilla, usando los valores propios de la librer´ıa espec´ıfica de visualizaci´on (e.g., Pgfplots). Hemos aplicado la SPL para mejorar una visualizaci´on existente (Fig. 3). El mapa de la Fig. 3a codifica los valores cuantitativos como puntos de diferentes tama˜nos, lo que no es efectivo. El gr´afico de barras generado con nuestra SPL (Fig. 3b) representa mejor la comparaci´on nominal de los datos, donde se puede observar que la incidencia en Andaluc´ıa (1.40 millones) es casi el triple que en Galicia (0.58 millones), pero esta diferencia no se aprecia en el mapa. 4. Conclusiones La soluci´on propuesta ayuda a los usuarios a comunicar su informaci´on cuantitativa de forma efectiva. Con esta contribuci´on, preevemos que diferentes t´ecni- 1https://github.com/jmhorcas/spl_visualization_design 4 Horcas et al. 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 SPLC’22, 12-16 September, 2022, Graz, Austria Anon. 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 4. Select the implementation for the visualization. pgfplots d3matplotlib Latex Python R JavaScript Research Publication Web Publication Data Analysis Data Analysis TargetAudienceTargetAudience ggplot2 VisualizationLibraryVisualizationLibrary Latex ⇒ pgfplots Python ⇒ matplotlib R ⇒ ggplot2 JavaScript ⇒ d3 VisualizationSoftware Figure 8: Step 4. Development alternatives for visualization. series of data (or dataset) will represent an algorithm with different visual attributes (position, form, color) to easily distinguish them. Note that the variability of the modeled visual attributes includes only those values that are recommended by visualization experts in the literature [ 16 , 18 , 54 ], in contrast to modeling all possibilities of a specific software tool. This allows us to reduce the configuration space and avoid the selection of features exposed by the tool that may result in poor design practices undermining the final visualization. For example, we model only those shapes that are easy to distinguish from one another like circle (  ), square ( □ ), triangle ( △ ), plus ( + ), and times ( × ) marks; or those color hues that meet the requirement of distinctness [ 18 ]. Some best practices can be encoded as complex cross-tree constraints such as the fact that green and red colors should not be used in combination because they can be difficult to differentiate for colorblindness people; therefore, we explicitly avoid the selection of both colors in different dataset of the same visualization: (∃ 𝐷𝑎𝑡𝑎𝑆𝑒𝑡 |𝐺𝑟𝑒𝑒𝑛) ⇒ ( 𝐷𝑎𝑡𝑎𝑆𝑒𝑡 |𝑅𝑒𝑑) . In addition, each dataset requires to provide a set of attributes such as a name to identify the data, the file path to the (.csv) file containing the data, and the column name for the X and Y axes inside the data file. This is modeled as feature attributes [ 5 ] associated with the DataSet feature. The secondary components (middle of Figure 7) include several other components of graphs that also provide information and can be configured such as the scales (linear or logarithmic), grid lines, annotations, or the legend including its position, among others [ 18 ]. We collapsed some of those features ( ... ) and omitted others, such as trend lines or reference lines, due to lack of space. Finally, non-data components (right-hand side of Figure 7) are axis lines that give graphs dimension, serve as a container for the data and also provide various possibilities for configurations, such as the number of axes and their positions. For instance, under most circumstances, graphs include a single axis either vertical or horizontal for 1D graphs, or two perpendicular axes for 2D graphs. The configuration process of the feature model in this third step results in multiple configurations, one for each dataset due to the presence of the DataSet[1..*] multi-feature, as well as due to the possibility of building a combination of displays from step 2 (e.g., a dot plot with a trend line). Step 4. Select the implementation for the visualization (Figure 8). The last step consists of choosing the software library or tool to produce the visualization designed in the previous steps. The goal here is to decide the visualization tool depending on the target audience or the publicity method for the visualization (e.g., research publication, data analysis, web publication), without the need to know about the different software solutions available. Figure 8 shows an example of a feature model that exposes four well-known visualization libraries: pgfplots [ 53 ] for research publications in L A T E X, matplotlib [ 25 ] in Python and ggplot2 [ 61 ] in R for data Listing 1: Excerpt of the Jinja2 template for graphs visualizations in L A T EX using the pgfplots and tikz packages. 1\begin{tikzpicture} 2\begin{axis}[ 3title = {{ title }} , 4xlabel={{ xaxis_label }} , ylabel = {{ yaxis_label }} , 5{{ plot_type }}, 6{% if x_log_scale %} xmode = log , {% endif %} 7{% if y_log_scale %} ymode = log , {% endif %} 8{% if legend_pos %} legend pos ={{ legend_pos }},{% endif %} ] 9 10 {% for plot in plots %} 11 \addplot+[ mark = {{ plot . mark }} , color = {{ plot . co lor }} ] 12 table [x ={{ plot . x axis _column }} , y= {{ plot . ya xis_ column }} , 13 col sep={{ plot . sepa rat or }} ] { {{ plot . csv_ fil e }} }; 14 {% if legend_pos %}\addlegendentry{{{ plot . name }} }{% endif %} 15 {% endfor %} 16 \end{axis} 17 \end{tikzpicture} analysis, and D3 [ 6 ] in JavaScript for publication on the web. The configuration of this feature model will guide the development of the visualization, as explained in the following section. 5 VARIABILITY IMPLEMENTATION AND RESOLUTION IN VISUALIZATION To address the solution space of our SPL, we first implement the variable visualization artifacts and then resolve the variability of those artifacts according to the configurations provided, generating the final visualization in a particular software library. Variation point Variants (𝑉) Feature (𝑓) Handler (ℎ) Feature/Attribute (𝜌) Value (𝜈) Features ValueEncodingObject plot_type ScatterPlot only marks LineGraph smooth VerticalBars ybar HorizontalBars xbar ... ... XLogarithmic x_log_scale -- YLogarithmic y_log_scale -- LegendPos legend_pos SouthWest south west SouthEast south east NorthWest north west NorthEast north east OuterNorthEast outer north east Attributes VisualComponents title VisualComponents.title (provided) XAxis xaxis_label XAxis.label (provided) YAxis yaxis_label YAxis.label (provided) Features of Multi-features Shape plot.mark CircleMark o SquareMark square TriangleMark triangle PlusMark + CrossMark x Color plot.color Gray gray Blue blue Orange orange ... ... Multi-feature Attributes DataSet plot.name DataSet.name (provided) DataSet plot.csv_file DataSet.csvfile (provided) DataSet plot.xaxis_column DataSet.XAxisColumn (provided) ... ... ... ... Table 1: Mapping model of variation points and variants. In the domain engineering of our SPL (top-right of Figure 3), we implement and resolve the variability using a template-based code generation [ 52 ] approach. In a template-based approach, a textbased language (e.g., JavaScript, Python, L A T E X) is enriched with 6 Figura 2: Fragmento de la plantilla Jinja2 que implementa la variabilidad de una visualizaci´on en L A T EXusando los paquetes pgfplots ytikz. (a) Mapa con la incidencia total de casos Covid-19 en Espa˜na (extra´ıdo de [1]). 929 930 931 932 933 934 935 936 937 938 939 940 941 942 943 944 945 946 947 948 949 950 951 952 953 954 955 956 957 958 959 960 961 962 963 964 965 966 967 968 969 970 971 972 973 974 975 976 977 978 979 980 981 982 983 984 985 986 Variability in Data Visualization: a Software Product Line Approach SPLC’22, 12-16 September, 2022, Graz, Austria 987 988 989 990 991 992 993 994 995 996 997 998 999 1000 1001 1002 1003 1004 1005 1006 1007 1008 1009 1010 1011 1012 1013 1014 1015 1016 1017 1018 1019 1020 1021 1022 1023 1024 1025 1026 1027 1028 1029 1030 1031 1032 1033 1034 1035 1036 1037 1038 1039 1040 1041 1042 1043 1044 Domain Analysis (DA): 37% Requirements Analysis (RA): 36% Domain Implementation (DI): 17% Product Derivation (PD): 7% All phases: 3% SPL phases covered (a) Scenario 2: A pie chart (taken from [ 24 ]) is not recommended to represent a relationship between a part and a whole (the tool support for the SPL processes in this case) because differences in the size of the angles are difficult to be perceived, requiring labels to display the values. (b) Scenario 3: A scatter plot (taken from [ 51 ]) comparing the file size of different formats for feature models. It suffers from a over-lapping problem [ 18 ] and in addition it uses shapes with the same form that are difficult to distinguish from each other. (c) Scenario 4: A map (taken from JHU CSSE COVID-19 Data [ 15 ]) showing the total incidence of Covid-19 cases in Spain. It uses the size of the points as visual attribute to encode the quantitative data which is not appropriate because the values cannot be easily compared. Figure 10: Visualizations scenarios, extracted from the literature, that suffer from design problems. 0 5 10 15 20 25 30 35 40 Domain Analysis (DA) Requirements Analysis (RA) Domain Implementation (DI) Product Derivation (PD) All Phases 37% 36% 17% 7% 3% % tools SPL phases covered Figure 11: Visualization for Scenario 2: a bar chart for the same part-to-whole information as the pie chart of Fig. 10a. 101102103104 10−1 101 103 105 Number of features File size (KB) File sizes of different formats for feature models UVL Velvet GUIDSL FAMA SPLConqueror FeatureIDE Figure 12: Visualization for Scenario 3: scatter plot of Fig. 10b with a different design improving its visual attributes. In the following three scenarios, we use our approach to improve three visualizations described in Figure 10 by fixing their flaws and applying the best design practices encoded in our SPL. Scenario 2. The pie chart in Figure 10a represents a part-to- whole relationship about the tool support for the different SPL processes [ 24 ]. We use the quantitative data available in [ 24 ], and create the configurations that result in the visualization of Figure 11. The recommended display for a part-to-whole relationship is a bar graph; or a line graph, in case of showing how parts of a whole 0 0.5 1 1.5 2 2.5 ·106 Cataluña Madrid Andalucía Com. Valenciana Castilla y León País Vasco Galicia Castilla-La Mancha Aragón Murcia Canarias Islas Baleares Extremadura Navarra Asturias Cantabria La Rioja Melilla Ceuta Covid-19 cases Covid-19 incidence in Spain per Region Figure 13: Visualization for Scenario 4: a bar chart to compare the Covid-19 incidence in Spain from map of Figure 10c. have changed over time, which is not the case. The reason to prefer encoding a part-to-whole relationship as bars in contrast to a pie chart is that people can see the differences easily in the bar graph but with difficulty in the pie chart because the visual perception is highly tuned for seeing differences among the lengths of objects that share a common baseline but not well tuned for discerning difference among 2D areas [ 18 ]. For example, we cannot easily compare how much bigger is the “Domain Analysis (DA)” part from the “Requirements Analysis (RA)” part in the pie chart (Figure 10a) without looking at the numbers on the textual labels. In the bar graph (Figure 11), we have manually chosen horizontal bars in contrast to vertical bars because the categorical labels are too long to fit side by side in vertical bars. Vertical grid lines, as secondary components in the background, also facilitate quantitative comparison between parts. Finally, colors do not contribute to this visualization and may distract (the original pie chart even uses the red and green colors together); thus, we opt to use the same color for all datasets. Scenario 3. The visualization in Figure 10b illustrates a correlation relationship between the file size and different formats of feature models [ 51 ]. In fact, a scatter plot is the preferred display to show a correlation relationship; however, the visual attributes of the original scatter plot present some flaws such as an over-plotting problem [ 18 ] (i.e., points are hidden or overlapped by other points to the degree that they cannot be distinguished), and the use of different scale units on the Y axis. We use the quantitative data 9 (b) Gr´afico de barras generado con la SPL usando los mismos datos que en la Fig 3a. Figura 3: Resultados preliminares de la SPL para la visualizaci´on de datos. cas de variabilidad y SPL pueden usarse para facilitar y mejorar el proceso de dise˜no de la visualizaci´on de datos. Referencias 1. Dong, E., Du, H., Gardner, L.: An interactive web-based dashboard to track covid- 19 in real time. The Lancet Infectious Diseases 20(5), 533–534 (2020). , https: //www.sciencedirect.com/science/article/pii/S1473309920301201 2. Evergreen, S.D.: Effective data visualization: The right chart for the right data. SAGE publications (2019) 3. Few, S.: Show Me the Numbers: Designing Tables and Graphs to Enlighten. Analytics Press, Oakland, CA, USA, 2nd edn. (2012) 4. Horcas, J., Galindo, J., , Benavides, D.: Variability in data visualization: a software product line approach. In: 26th ACM International Systems and Software Product Line Conference (SPLC). Graz, Austria (2022), submitted 5. Knaflic, C.N.: Storytelling with data: A data visualization guide for business professionals. John Wiley & Sons (2015) 6. Walny, J., Frisson, C., West, M., Kosminsky, D., Knudsen, S., Carpendale, S., Willett, W.: Data changes everything: Challenges and opportunities in data visualization design handoff. IEEE Trans. Vis. Comput. Graph. 26(1), 12–22 (2020). , https://doi.org/10.1109/TVCG.2019.2934538