VisAhoi: Towards a Library to Generate and Integrate Visualization Onboarding Using High-level Visualization Grammars

Visualization onboarding supports users in reading, interpreting, and extracting information from visual data representations. General-purpose onboarding tools and libraries are applicable for explaining a wide range of graphical user interfaces but cannot handle specific visualization requirements. This paper describes a first step towards developing an onboarding library called VisAhoi, which is easy to integrate, extend, semi-automate, reuse, and customize. VisAhoi supports the creation of onboarding elements for different visualization types and datasets. We demonstrate how to extract and describe onboarding instructions using three well-known high-level descriptive visualization grammars - Vega-Lite, Plotly.js, and ECharts. We show the applicability of our library by performing two usage scenarios that describe the integration of VisAhoi into a VA tool for the analysis of high-throughput screening (HTS) data and, second, into a Flourish template to provide an authoring tool for data journalists for a treemap visualization. We provide a supplementary website that demonstrates the applicability of VisAhoi to various visualizations, including a bar chart, a horizon graph, a change matrix or heatmap, a scatterplot, and a treemap visualization

ComputableViz: Mathematical Operators as a Formalism for Visualization Processing and Analysis

Data visualizations are created and shared on the web at an unprecedented speed, raising new needs and questions for processing and analyzing visualizations after they have been generated and digitized. However, existing formalisms focus on operating on a single visualization instead of multiple visualizations, making it challenging to perform analysis tasks such as sorting and clustering visualizations. Through a systematic analysis of previous work, we abstract visualization-related tasks into mathematical operators such as union and propose a design space of visualization operations. We realize the design by developing ComputableViz, a library that supports operations on multiple visualization specifications. To demonstrate its usefulness and extensibility, we present multiple usage scenarios concerning processing and analyzing visualization, such as generating visualization embeddings and automatically making visualizations accessible. We conclude by discussing research opportunities and challenges for managing and exploiting the massive visualizations on the web.Comment: 15 pages, 12 figures. In the ACM Conference on Human Factors in Computing Systems (CHI) 202

The State of the Art in Creating Visualization Corpora for Automated Chart Analysis

We present a state-of-the-art report on visualization corpora in automated chart analysis research. We survey 56 papers that created or used a visualization corpus as the input of their research techniques or systems. Based on a multi-level task taxonomy that identifies the goal, method, and outputs of automated chart analysis, we examine the property space of existing chart corpora along five dimensions: format, scope, collection method, annotations, and diversity. Through the survey, we summarize common patterns and practices of creating chart corpora, identify research gaps and opportunities, and discuss the desired properties of future benchmark corpora and the required tools to create them.Comment: To appear at EuroVis 202

Searching the Visual Style and Structure of D3 Visualizations

We present a search engine for D3 visualizations that allows queries based on their visual style and underlying structure. To build the engine we crawl a collection of 7860 D3 visualizations from the Web and deconstruct each one to recover its data, its data-encoding marks and the encodings describing how the data is mapped to visual attributes of the marks. We also extract axes and other non-data-encoding attributes of marks (e.g., typeface, background color). Our search engine indexes this style and structure information as well as metadata about the webpage containing the chart. We show how visualization developers can search the collection to find visualizations that exhibit specific design characteristics and thereby explore the space of possible designs. We also demonstrate how researchers can use the search engine to identify commonly used visual design patterns and we perform such a demographic design analysis across our collection of D3 charts. A user study reveals that visualization developers found our style and structure based search engine to be significantly more useful and satisfying for finding different designs of D3 charts, than a baseline search engine that only allows keyword search over the webpage containing a chart

ELK stack Big Data visualitzation using D3 library

Aquest document explica el desenvolupament de les eines de visualització de dades creades amb la llibreria D3 per a una aplicació web AngularJs existent. Aquestes visualitzacions tenen com a objectiu representar informació de Big data procedent de l'entorn Elastic de manera fàcilment comprensible. Tots els processos involucrats, des de l'obtenció de les dades fins a la visualització front-end en representacions adients y passant pel post processament, es troben descrites en aquesta memòria.This document explains the development of the data visualization tools created with the D3 library for an existing AngularJs web application. These visuals aim to represent the Big data from an Elastic stack in an understandable way. All the processes involved, from fetching the data to the front-end display in suitable representations and passing through the post-processing, are described in this memory

Making Data Accessible: An Overview of Interactive Data Visualization Using D3.js as Applied to a Scientific Dataset : Making a Static Visualization Interactive

Technology is moving at a very fast pace, but data is still represented as tables, static graphs and infographics that do not create an impact on the population at large. Excluding the scientific and educational communities, to the common individual information should be displayed in an entertaining manner. This project set out to fulfill this goal by using known technologies from D3js, design guidelines, CSS3 animations, and HTML5 elements to real scientific data from the United States National Climate Data Center. The final product is a one page web application displaying 3,000,000 years of global temperatures in a visual format. The data was plotted using D3js, made interactive with JavaScript and laid out using Twitter Bootstrap. What can be concluded is that it is possible to create interactive content with current technologies, but the process is still only achievable after extensive study of the technologies involved. Further development has to be made for data interactive tools to become easier to use and to produce large-scale interactive web applications involving data display and analysis. The advancement of interactive visualizations are also relevant as studies have shown that engaging lectures lead to a statistically significant higher average on unit exams compared with traditional didactic lectures. This could be hypothesized to be the same for interactive data and this was confirmed by a small questionnaire

WonderFlow: Narration-Centric Design of Animated Data Videos

Creating an animated data video enriched with audio narration takes a significant amount of time and effort and requires expertise. Users not only need to design complex animations, but also turn written text scripts into audio narrations and synchronize visual changes with the narrations. This paper presents WonderFlow, an interactive authoring tool, that facilitates narration-centric design of animated data videos. WonderFlow allows authors to easily specify a semantic link between text and the corresponding chart elements. Then it automatically generates audio narration by leveraging text-to-speech techniques and aligns the narration with an animation. WonderFlow provides a visualization structure-aware animation library designed to ease chart animation creation, enabling authors to apply pre-designed animation effects to common visualization components. It also allows authors to preview and iteratively refine their data videos in a unified system, without having to switch between different creation tools. To evaluate WonderFlow's effectiveness and usability, we created an example gallery and conducted a user study and expert interviews. The results demonstrated that WonderFlow is easy to use and simplifies the creation of data videos with narration-animation interplay

SeeChart: Enabling Accessible Visualizations Through Interactive Natural Language Interface For People with Visual Impairments

Web-based data visualizations have become very popular for exploring data and communicating insights. Newspapers, journals, and reports regularly publish visualizations to tell compelling stories with data. Unfortunately, most visualizations are inaccessible to readers with visual impairments. For many charts on the web, there are no accompanying alternative (alt) texts, and even if such texts exist they do not adequately describe important insights from charts. To address the problem, we first interviewed 15 blind users to understand their challenges and requirements for reading data visualizations. Based on the insights from these interviews, we developed SeeChart, an interactive tool that automatically deconstructs charts from web pages and then converts them to accessible visualizations for blind people by enabling them to hear the chart summary as well as to interact through data points using the keyboard. Our evaluation with 14 blind participants suggests the efficacy of SeeChart in understanding key insights from charts and fulfilling their information needs while reducing their required time and cognitive burden.Comment: 28 pages, 13 figure