on the relation with the date and other entities. For performing the NER task, our model is using the python library named spaCy [86] and newspaper3k [87]. Finally, after processing the unstructured textual document, the preprocessing component forward this structured data to the next step for generating data-driven graphics.
Process Bar and Chart components control board view
In VTComp the topmost view as shown in Figure:11 with the annotation "a" is a view which consists of input URL processing bar and chart component control board. Article URL bar facilitates the author to insert the target document’s URL for processing with the aim of creating informative visual thumbnails, which is connected with the process button. In addition to it, VTComp enables the author to read the article by proceeding with the reading article which is just next to the process button option. Additionally, to enables the author to expand the designing surface, VTComp provides options like collapsing and expanding the specific view which is useful while designing the data-driven visuals. Further, While designing there are many scenarios for example, sometime author want to modify the chart according to design’s requirement such as grid inside chart graphics or modification of chart’s data points and many other scenarios. So while designing the VTComp, we keep in mind all the necessary things that provide flexibility to the author’s design. So our graphical response control board consists of several chart based controls. As Tufte is one of the pioneers in the designing domain well said that the efficient design of graphs should contain quantitative information. Borkin et al. [5]
discussed in "What makes visualization memorable" that basic annotation and chart tools can assist readers to easily absorb the information and can be helpful in memorizing the information.
Bigelow et al. [89] stated that designer are not much familiar with data and usu sally they designed various shapes and the axis of their design on the basis of the perceived of their data and designers inference about data behavior often inaccurate. VTComp’s controls empower the author to do back-end coding from a graphical view and provide control to customize the model generated information graphics results. To elaborate on the functionality of generating the graphical response: The author can set the various graphical adjustment options that are given in the control board before triggering the process button, once author select and press process button, the graphical results will include the options that author select. From the control board, the author can set Transparency of the chart, Grid on or off, Grid with major line color and minor line color. Other than this, the author can also facilitate to choose whether the user wants x-axis or x-axis label, y-axis or y-axis label. However, there is some restriction while using the control board view like it only works with the model to generate chart images.
Figure 12: Chart Generalization
Next, VTComp provides the chart generalization facility as shown in Figure 12 which assists authors to choose a chart type to make data-driven visuals more intuitive and informative without doing any coding. The options of an available chart dynamically created after checking the behavior of data points of the selected chart.
Annotation tools view
The ultimate goal of information visualization is to express the insights of the data in such a manner that the reader can easily understand the importance that the author wants to deliver.
To make the visualization more interactive the role of annotation tools and designing tools is very crucially especially to perform the data-driven storytelling. Segel and Heer [14] described static visualization since from long back supporting storytelling, mostly in the form of diagrams and charts embedded in a large body of the text. In which text convey the story and visuals provides supporting evidence or details. Nowadays even news organizations also started including visualization even for complex data visualization into their stories. Further, the combination of annotation and visuals components in thumbnail can enhance the thumbnail quality through which the user can grab insights into the article [90]. Therefore, to provide annotation enabling features this view consists of Designing tools, Layering section and Additional features such as Filter, Theme, and background option sections that will be explained in the followings sections as revealed in Figure11’s section b. An important method of asynchronous communication is an annotation. There are several situations when authors want to express his/her message in the form of annotation then the use of keyword or sentence with highlight design can express it. The requirement of extraction of relevant information from raw data and then furnish it to express it in different contexts require several designing tools. VTComp provides annotations based tools as show in Figure11’s section "b’s" top block, and 13 that are given below.
Figure 13: Annotation tools for informative and memorability of visualization.
Inserting Custom text as textual annotations: This feature enables the author to add additional information to his/her design. As Aula et al. [27] suggested that displaying thumbnails without including the textual information at all results in poorer performance than showing only textual summaries. VTComp provides the option of adding textual annotation as a helping element that helps the author to express data insights visually. For expressive data-driven visualization, decoration of textual annotation is required such as highlight the information by using different font-family, font-size or font-styles(Bold, italic, underline, etc.), VTComp assist user with this feature as well to differentiate the crucial information in different style, so that reader can get the information more effectively that author wants to deliver as important one.
Human Recognizable Objects: Each visualization was annotated with additional attributes, including ratings for data-ink ratios and visual densities. Although there is a statement for designing information charts try to reduce non-data-ink called chart-junk which is embellish- ments that are not essentials to understand the data, however prior research [4, 88, 91] found that embellishments can improve the memorability and also perform better as compared to the plain graph. Further, Human Recognizable objects(HRO) can be a static image that may be related to data that the author wants to represent in thumbnail, which can support to improve the memorability and effectiveness of the visualization. VTComp enables the author to add multiple HROs with full flexibility such as resize, rotate, move, etc. for expressive designing. In addition to it, we also implicitly assume that most of the time some graphics are not available in our local, in that case, we usually go through the internet, then search for a specific kind and browse, select and download for use, which is a multi interaction and efforts process. To ease this process, we provided the inbuilt image search option which assist the author to search the image from one place and directly use it without spending time on downloading and uploading the graphics.
Basic Geometry shapes: Annotation tools like geometry shapes in many scenarios can be
useful such as splitting the upper bound and lower bound line shape can be useful, pointing to the peak of the chart’s value circle shape can be useful, pointing to more than one object in design rectangle can highlight that. To enable the author to use these shapes, VTComp provides basic geometry shapes like circle, rectangle, line, etc. In addition to it as VTComp is a dynamic design platform, the author can change the size, position, color at any time of any shape. We are including most used shapes in the drawing tool kit, However, several other shapes are not included in the default drawing toolkit, but the author can obtain them with the help of prediction pencil. The rationale behind the prediction pencil is given in the following paragraph.
Prediction of Geometry shapes: Compact screen size can be the cause of the complexity of the features that could be the risen of difficult to use the system. To understand the importance of features and limit of available screen size, VTComp introduces the unique tool called a prediction pencil. In addition to it , for enabling to use more than one stoke to predict there is option with computer desktop icon which can help author to predict the shape as well, however for using the second option author must select the objects that has been drawn by pencil so that VTComp take that specific objects for input to the model. For enabling this feature, the author can check the option under the pencil option as shown in Figure14. Currently, it detects only six types of shapes that is Circle, Rectangle, Star, Arrow, Polygon, and Line.
Figure 14: Prediction pencil: Assistant tool to recognize author’s drawing shapes, it can predict small set of shapes and give author results with various designs in similar geometry shape, which help author to draw proper shape automatically.
Pencil and Angular Rotation The pencil is the most basic tool for every designing system.
Many designing software like M.S Paint, Adobe Photoshop, etc. provides the functionality of hand drawing. In visualization, there are several occasions when the need for a hand drawing tool arises such as to point out a particular object in graphics or give any useful information.
VTComp enables the author to use this tool, in addition to use, the author can adjust the opacity and width of the stroke which is helpful to adjust the stroke width as shown in Figure14. Next, VTComp gives the option to rotate geometry objects manually according to requirement by
holding from controls on that object or by fixed rotation of the objects by using an angular rotation option. The objects with auto-rotation option are show in Figure15. Furthermore, VTComp enables the author to rotate the object in bi-directions. This option is closely related to the rotation facility provided in a visualization tool called Microsoft PowerPoint a powerful and popular presentation tool.
(a) Usage of Angle rotation of rectangle object. Author can change the value of angle according to requirement. System’s default value set to 45.
(b) Usage of Angle rotation of Arrow object.Author can change the value of angle according to require- ment. System’s rotation angle’s default value set to 45.
(c) Usage of Angle rotation of pentagon object. Author can change the value of angle according to requirement. System’s rotation angle’s default value set to 45.
Figure 15: VTComp Object Rotation Tool with the rate of customized adjustment in change of degree of angle, However Author can adjust the rotation from selected objects control elements as well.
Color Picker: In visualization one of the most important element is color. Which is an important element for visualization because the selection of the right color is vital for expressing the situation under which visualization performed. For instance, selection of color is directly impacted on the domain of visualization to memorize, visualization to express insights of the data or interactive design of visualization. Borking et al. in "What makes a visualization memorable?" [5] described that designing attributes like color and Human recognizable objects enhance the memorability.
Layering Functions: While designing, the placement of the visual elements must be well planned. There are cases when elements overlapped to each other, which makes the designing surface complex to adjust the element, which may cause to disturb the other elements as well. To prevent other designs to break Layering function is important, VTComp provides this feature inside the annotation board view as represented in Figure11’s "b" section. With the aim of creating expressive and memorable visuals, VTComp gives the functionality Additional features block which consists of visual filter options, Theme and background image option as shown in Figure11, in section "b’s" bottom block with all the available options available. In addition to it, the Author has access to set the background of any selected Graphic object. which enables the author to implement additional annotation elements on it even with a single layer.
Artboard View
The artboard view is the center of the system in both scenarios whether from the designing importance perspective or from the position at the interface. To create the interactive and expressive visual thumbnails author will use the artboard view section. During visualization, the process author will mostly interact with this view to create effective, satisfactory and expressive thumbnails. VTComp uses Canvas as an artboard view which enables the author to create visuals. In addition to it, VTComp provides the default artboard’s sections visual designing surface size 860 by 500. However, there is no restriction that the author is fixed with this size, it is adjustable. For the author’s flexibility, VTComp provides some predefined sizes of the designing surface which target specific news organizations like New York times, etc. In addition to it, the artboard view also includes the attributes of the common setting, for instance, adjust of theArt board’s size, several objects updating options like undo, redo, selected delete, download and expand the artboard surface option.
Textual Information View
VTComp brings together visual thumbnail authoring with natural language processing. This section will discuss the extraction of important textual information which can be useful while designing the interactive visualization thumbnails. Visualization of data is constantly getting popularity for its talent to show the stories within data, however there are several ways of expressing the stories from traditional approaches to current approach’s, still in almost every
approach the use of textual information is available which can be a single word or abstract string, or might be the headings. Furthermore, prior research [14] states that combination graphical techniques and annotations can express the story behind data more accurately and effectively.
From last decades, especially online journalists are frequently adding the annotations in graphical visualizations to explain the visualization visually, even there are performing complex data-set story visually.
VTComp’s Textual information view consists of three blocks which are the target document’s summary block, Important keywords block and Headings inside articles block. Further, every block is explained in the following sections. Document summary block: Automated summariza- tion is not a new idea. However, the representation of summarization in visual designing tools is unique in itself, which helps the author to aware of the relevance of the document that can be helpful to create interactive and more expressive visual thumbnails.
Important Keywords block: Previous research on visualization especially visualization for memorizing described that the narrative visualization using annotations can be useful for mem- orizing the information that the author wants to express, in which the use of a single sentence, important words or abstract description included [5].
Headings inside article block: VTComp’s textual information view’s last block contains the extracted headings from the target document’s URL. Similar to important keywords, headings can be used as a component of annotations which can assist the author to deliver the message effectively in visualization.
Graphical Response View
VTComp’s fifth and final view is Graphical response view as represented in Figure11 in section "e", which discusses the importance of graphics in visualization. The concept of visual communication via charts and other types of visual components is a fundamental process of exploring concepts and disseminating information [92].For considering the importance of graphs in data-driven journalism, VTComp’s Modal response view provides information-rich graphics.
These graphics are separately identified by using the label just below each unit of the graph to make the author clear about the belongings of the graph or chart. Further, Each section graph with background image has its section. In addition to it, in "using Thumbnail to search the web" [90], Woodruff et al. discussed that Items except searched keywords might be emphasized in the thumbnails taking the opportunity, VTComp model generate article related images which are not inside article but generated by the concept of important keywords transform to graphics which are calculated by using TF-IDF. For this work, we are using a crawling python library named as iCrawler. Further, considering the visualization congestion management on limited screen size, VTComp gives the functionality to adjust this block by the option to collapse and expand, which is located at the left top corner of the graphical response view section as represented in Figure 11. Finally, Having multiple categorical labeled graphical information assists the author to choose an appropriate graph for the thumbnail creation process.
Export: When the author satisfied with his designed thumbnail he can save it by the save
option provided in the artboard view’s top right corner.
Implementation
VTComp’s implementation consists of a full-stack development process that is front end and back end. The back end of the workflow which provides the preprocessing of unstructured data, categorizing and summarization, and generating graphics is implemented in Python. The front end supports visualize, edit, update and generate interactive visual thumbnails is implemented in JavaScript and FabricJs [93]. The system is hosted on our Linux based lab server, which runs the python code on the server-side. Flask the micro web framework enables the communication between the server-side and client side [94].
In the subsequent section, we describe the evaluation of our tool by using several approaches and conducted the experiment with the target subjects. Where participants used the VTComp to create the informative visual thumbnails so we could address our objective statement.
IV User Study Design
In this section, I outline the experiment in which participants created the interactive visual thumbnails for data-driven journalism with VTComp(see section 3). Before conducting the final experiment, we conducted a couple of times pilot study with lab members of designing and data-journalism background at the preliminary stage to find out bugs and flaws in the tool. The motive behind conducting the experiment is to evaluate the system’s performance, effectiveness, and usability.