Enhanced Graphical Representation of Data in Web Application (Case Study: Covid-19 in the UK)

This paper describes the analysis, design, and implementation of responsive data representation in the web application that can render data asynchronously to users by making an Application Programming Interface (API) request from a webserver. At the same time, provides high-quality downloadable Scalable Vector Graphics (SVG) images for journals, magazines, and other printed media. For this issue, large-scale data that uses open-source Covid-19 data was used to improve the Covid-19 data visualization and the other improvements that can be done for proper representation of such vital data to the general public. During the development process, qualitative research into data representation with responsive charts and/or Scalable Vector Graphics images file has been conducted in contrast of each other to answer questions like what tools and technologies are often used, what are the alternative tools and technology, when, where, and why developers make use of certain approach to data representation. Keywords—Data representation; data visualization; accessibility standards; scalable vector graphics; Covid-19


I. INTRODUCTION
Visualizing Graphical data through web Technologies has always been one of the attractive research challenges. But the objective of visualizing data in real-time (live) as it updates from a database or API server responsively on both smaller and larger devices is where the real challenge lies [1]. The objective of this paper is to conduct extensive research into data representation, examine possible ways of improvement to existing systems, and developing a robust and accurate system capable of visualizing dynamic data that is accessible through major web browsers as it updates in real-time. Extensive research conducted into the use of SVG graphical images on social medial sites and major news anchor websites during the Covid-19 era gave life to this research. SARS-CoV-2 also known as Covid-19 is a severe acute respiratory airborne infection that is transmitted from person to person and in most cases without any sign of symptoms [2]. With all the headlines and breaking, news about Covid-19 people still need to know how their communities, cities, and countries are doing with regards to reliable data like infection rate, vaccinated population, death rate, recovery rate, etc. this data will make more sense to the general public depending on how it is being visualized. Therefore, there is the need to research the source of data, the data representation technology, and the design and implementation of such a system to load and visualize credible data using modern web development tools and methodology.
It takes either JSON structured data or XML data from a secured API server and renders the structured data as recommended by the graphical framework providers (Apex Chart) to the graphs on the dashboard in an asynchronous time.
As developers continue to develop robust and dynamic systems to represent complex data from different fields, researchers on the other hand have also been intensively investigating the challenges and variation when it comes to the use of SVG or responsive charts in data graphical data representation systems. We have therefore put together a system that seeks to use both SVG and responsive charts with modern technologies including 'HTML, CSS, and VANILA JAVA SCRIPT' to address both issues. During the development process, research into data representation with charts and SVG image files has been conducted in contrast to each other to come up with when, where, and why developers make use of these two approaches to data representation.
As different methods are being deployed to deal with the recent outbreak of Covid-19 and the need for vaccination against the different Covid-19 variants, government agencies and other health organizations have had the risen need to depend on infection and vaccination data to properly forecast future circumstances to be able to make appropriate plans for the return of normalcy to both business and day to day life [3]. This paper is aimed at investigating the use of web applications to visualize complex Covid-19 data from JSON and XML data structures to readable graphs with both historical and real-time Covid-19 data from the United Kingdom. Informative media outlets have also had to change tactics as a high volume of data from new development needs to be represented in such a way that people from all sorts of life can make sense of. Small businesses and mainstream businesses have had no other option than to shift parts of their business activities online. These and other factors have influenced the need to conduct research into graphical data representation and develop a system that will represent Covid-19 data in a readable graph asynchronously as data sources are being updated for easy access through different electronic devices of different screen sizes and a downloadable SVG file for magazines and newspaper editors to also publish such data to the general public. www.ijacsa.thesai.org This research does not only result in a robust and responsive high volume data representation system but also throws more light on some critical issues in the scope of data visualization [4]. The research indicates a lack of improvement in data visualization from a web development standpoint. Also, this research clearly shows data visualization software are more likely to produce Bitmap images as downloadable graph for print media usage which in turn produces poor quality images as oppose to scalable vector image files. Moreover, this research establishes that the statistical cost of data visualization software which ends up being embedded into the parent web application also increases the total cost of system and its maintenance. The resulted system of this research system is more reliable and effective in visualizing the data presented in an appealing manner with softness and color coding. It also provides downloadable SVG files as oppose to PNG files from similar system from gov.uk and Middlesbrough town council websites. It eliminates the use distorted images as it makes use of SVG images to provide sharp and crisp look and feel to elements in the applications. With comparatively smaller source files size data load time from API or https is relatively faster.
The rest of the paper is organized as follows: the second section introduces a small background about Data Visualization, Scalable Vector Graphics, and Progressive Web Application. Section three proposes the research method while section four introduces the data representation and development tools. Section five presents the research design and implementations and section six introduces the user interface and research results. In the last section, the conclusion and future works are introduced.

II. BACKGROUND
Data visualization or graphical data representation is a subject area that deserves more recognition given the important role it plays in the evolution of data analysis. Historically proven this subject in most cases is overlooked and this can be backed by the lack of extensive research into the subject of graphical data representation for the improvement of methods tools and technologies. The process of making complex raw data simple and clear to understand without specific academic background or expertise should be well appreciated and improved upon. Not enough research papers are targeting the subject area but almost every industry be it a government organization or private organization one way or the other makes use of data visualization as the use of a statistic structure can be extremely beneficial. This paper presents a comparative analysis of data visualization historically through time. This paper compares major technologies and tools vital to the improvement in data representation: Extensible Markup Language (XML), Scalable Vector Graphics (SVG), and Progressive Web Application (PWA).
While analyzing previous research papers, it seems that most researchers focus on what they must visualize rather than how to visualize it properly and accurately. Also, the possibility of finding an easier-to-use graphical data representation software seems to be a major problem as most stakeholders end up using whichever application is available to them. There is also a shortage of standards for measuring the performance of visualization in addition to a shortage of standardized procedures [5]. In producing a design to visualize search results for three major digital libraries, we observed that data visualization and how to measure its effectiveness is difficult and requires the collection of large user experience data. This comes as no surprise because graphical systems that render data from APIs and vector-based drawing programs can be tedious with high volume data to be structured and visualized on graphs for simpler and clear understanding. Bostock and Heer in [6] argued that the representation of data is expected to achieve some level of expressiveness, responsiveness, and flexibility.
For a high-level chart to be created designers are expected to take into consideration certain factors; considering expressiveness -Can I build it?‖, efficiency -How long will it take?‖ and accessibility -Do I know how?‖ [6]. As a result of this argument, one can argue that we contend that there is still a gap between low-level graphical frameworks and high-level visualization frameworks. Numerous coordinate control graphical systems are simple to memorize but repetitive for complex work, whereas capable visualization frameworks can be threatening to amateurs or novices. Concerning vectorbased drawing programs such as Adobe Illustrator approach to data representation and html5 canvas, respectively.
In another article, Romano and others in [7] gave an example with qualitative data analysis (QDA) of films review data from the box office proves to be accurate thereby providing a predictive measure of relative insight.
Bocconcino in [8] has introduces in the form of notes various initial explorations in the area of infographic and graphic visualization as information processing tools for examining, analysing and presenting data as information.
Menges et al in [9] present a technique that recognises fixed elements on Web pages and merges user viewport screenshots relative to fixed elements for an improved representation of the page.
Also, Eye tracking has been used to examine attention in many application domains, such as sports, medical, humancomputer interaction studies, and commerce. [10 -13].

A. Scalable Vector Graphics
Unlike Rasta images or bitmaps, SVG is a scalable vector graphic image which means it can be indexed, compressed, scripted, and searched. This is an essential evolution to how graphical data can be represented considering the pictorial factors and scalability nature of the file. The scalability factor also makes SVG is standard developed by the Worldwide Consortium (W3C) [14]. This type of two-dimensional digital graphic is composed of mathematical equations where lines and curves images sharps and text in XML format as displayed in Fig. 1 below. SVGs are SEO-friendly. This means they are easily identified by search engines because the defined in XML text files and keywords are easily recognized. www.ijacsa.thesai.org Pixel-based images lose their resolution when enlarged as pixels are forced to expand. For vector graphics, the browser will only have to recalculate the math behind it to produce the same quality, but larger graphic as seen in Fig. 1 above. Extensive research conducted into the use of SVG in data visualization projects clearly shows that not enough studies have been done on the use of SVG's nor data visualization and this seconds the claim that data is more likely to be represented by data visualization software like Microsoft Power BI with turns to produce bitmapped images as output files as opposed to SVG file.

B. Progressive Web Application
PWAs as often called stand for the combination of established web technologies and new cutting-edge technologies to create an accessible, engaging, and reliable experience. This is to say PWA can give users the content they sort for regardless of the network conditions. Depending on the level of offline functionalities introduced during development PWAs can enhance user experience with secured HTTPS requests to render engaging data on the web applications. After extensive research, we believe this technology is worth looking into when it comes to data representation mainly because of the resilient offline capabilities [16].

III. RESEARCH METHOD
Observation and review of Existing works within the subject area to provide concise insight into the case study is the first step in every qualitative research analysis. Academic materials such as architecture, design pattern workflow graphics of popular data visualization software, and ideas from the review were analyzed and grouped onto a tabular form for further detailed analysis to be performed during the selection process. In qualitative research, several analysis methods can be used, for example, phenomenology, hermeneutics, grounded theory, ethnography, phonomyography, and content analysis [17]. This was done by the inclusion and exclusion method where materials or ideas relevant to the subject matter that also falls within the scope of the qualitative research approach were therefore selected and examined in contrast with similar alternatives. After the selection process both statistical analyses were performed to address the problem of less research conducted into data visualization. This study supported the assumption of decline in the study within the subject area. Moreover, an extensive content analysis was conducted on the gathered materials and existing data to support or disregard the minimal use of SVG and HTML 5 canvas in data representation works done in recent years. Another source to explore was coded from developers with may seek to represent data on data representation systems with downloadable SVG images as oppose to PNG or JPEG images.
The major instrument used in data collection can be described as observation and review of existing statistical data and or materials for research purposes. Fig. 2  These materials were collected to compare the technology behind the development of such a system to be well informed in addressing the case study of these projects. Statistical data from many research works done on the use of vector graphic images in data representation was also taken into consideration. There are limitations to these methods of data gathering that cannot be overlooked by any means. These limitations hinder the observation and review process in the content analysis. These include getting access to source codes which developers often regard as a danger to security, another limitation is data privacy adherence which can sometimes be a constraint to the data gathering process of the research.
Other potential issues need to be addressed when taken a qualitative approach towards research that requires a large sum of data. These potentials include relying significantly on the works of others to ascertain or make a recommendation with regards to the research problem especially when the research problem is of a different curriculum or scope. Even though Joachimiak and others in [19] argued that one of the important aspects of successful scientific research is effective data presentation and analysis.

IV. DATA REPRESENTATION AND DEVELOPMENT TOOLS
From the research conducted into data representation, design methodologies, as well as a good design practice, are to be followed algorithmically acknowledging all software development standards and ethics to produce a Covid-19 dashboard that will lay more emphasis on tourism in all for nations of the United Kingdom. Research-backed modern technology to design and develop an appealing web application that projects vaccine rollout in the United Kingdom to provide scientific guidance for reopening of the United Kingdom. The www.ijacsa.thesai.org above research suggests the lack of improvement in the design, feel, and function of existing data representation systems. Embedding SVG codes in the system to be able to produce an aesthetically pleasing system capable of downloading graphical images free from pixel enlargement.

A. Data Representation Tools
Data visualizations tools are utilized in industry to bolster decision-making additionally in the scholarly community. Within e-commerce, analytics visualization is most valuable to completely screen all the exercises and to embrace choices in time. In the industry, analytics is very useful to get the company's showcase position. As an example, competitive insights measure numerous opinions, customers, potential advertising, competitors, to reach vital early warnings. In the information technology world, there are cases of data visualization that measure the key performance index of a given operation in an ongoing project.

B. Data Representation Systems
Visualization frameworks are apparatuses planned for the unequivocal reason of information visualization, utilizing deliberations and scientific models suited to this assignment. Such instruments too commonly bolster information administration, layout algorithms, interaction, and animation. Marginally the widely used traditional data visualization systems are spreadsheet applications including MS Excel and Google Spreadsheets MS BI. This research demonstrates that it is time for developers to infuse cutting-edge technology into data visualization systems to enhance functionalities and improve efficiency.

V. DESIGN AND IMPLEMENTATIONS
An iterative and incremental approach to product delivery described in the SCRUM principles an agile project management framework was adopted in developing the system [20]. This decision was based on the nature of the problem at hand and the scope of tasks to be prioritized based on value. The future scope of this project will be based on taking into consideration what could be done to get public data graphically accessible to the public by providing an app store mobile version for apple and a play store version for android users in addition to a web-based system for general mobile, pc and tablet users.
Microsoft visual studio code [21] was selected as the main IDE for this project over the lightweight alternative sublime test because Visual Studio Code has Git integration built-in, which makes it truly simple to right away see the changes you are making in the code. On the cleared out of the sidebar, we will discover the Git symbol were ready to initialize Git as well as perform a few Git commands such as commit, drag, thrust, rebase, distribute, and see into the changes inside the record. VS Code works with any Git store local or remote and offers visual images to resolve clashes before code commits. Also, one of the key highlights of Visual Studio Code is its incredible debugging support. VS Code's built-in debugger makes a difference accelerate your edit, compile and investigate loop. By default, it comes with support for NodeJS and can debug anything that is transpired to JavaScript. Breakpoints can be set, and this easily provides identification of syntax error, see into call stack or factors at run time, and delay or step through code execution. Moreover, Vs code gives us language benefit features such as Peek Definition, Go to Definition, discover all References, and Rename Image.
These characteristics are exceptionally valuable for all software developers. Visual Studio Code makes it possible to arrange JavaScript code as well as code of other languages. All these factors help to reuse code to avoid repetition and save time. For instance, code blocks handling new recovered, new death, and cases were automatically optimized with visual studio codes "IntelliSense‖ feature to prompt the use of global variables instead of local variables and this could have resulted in bug creation. For reference to source code please refer to appendix A below. The system's objectives provided during the feasibility study are used as the standard from which all the work of system design is initiated. most activities involved at this stage are of a very technical nature which in turn require some level of customization. Also, a system cannot be designed without the active involvement of the user in question.
The user has an important role to play at this stage. All information gathered during the feasibility study will be used systematically during the system design. It should, however, be kept in mind detailed study of the existing system is not necessarily over even after the completion of the feasibility study. Fig. 3 demonstrates the feasibility study conducted into the appropriate framework. Background research for graphical chart frameworks provided options that were very difficult to choose from. These include the likes of Fusion chart, chart.js, and Apex chart.

C. Selection Process of Software Development Methods
The considered Software methodologies were based on how best each methodology fits the project with regards to key factors including:  Scalability of the project.
 Complexity of the project.
 Rigidity of structure.

D. Information Management
The organization control structure and delivery of information is a life cycle of information management. One of the elements, which impact the growth of a new system, is the cost it will demand. There were measures set in place during the planning stage to minimize cost and these measures include the use of free-to-use open-source software, frameworks, API Data sources, and web hosting domain. The source of information, control, and the delivery mechanism used were inspired by the ISO/IEC/IEEE systems and software engineering life cycle process [23]. This process as shown in Fig. 4 describes the operational needs analysis which in this case is health statistic data that is expected to be fetched from an open-source API to be visually displayed in a graphical component design as the solution to the problem analyzed. It also deals with the implementation and verification process where data from the API has been rendered to the browser but still requires testing and validation to sustain the solution and keep the information updated as the cycle continues in a loop. The cycle involves the application of several technical activities that ensures that information is retained, structured, and securely processed.

VI. USER INTERFACE AND RESULTS
General principles of user interface design are the planning goals in making a user interface as represented in Fig. 5, Fig. 6, and Fig. 7. They are elementary to the planning and implementation of all effective interfaces as well as the user interface. These principles explained below are general characteristics of the interface and that they apply to any or all aspects. The user interface principles stand sensible even after a few years of their introduction.
The sole distinction is that they take different forms with core aspects of the principles of design. As described by Toby and others in [25], with low values for a few of the principles investigated. The study has disclosed the existence of those principles in numerous forms and the importance of their existence is for a computer program to be enticing and economical.
The related works and case studies conducted during this research helps to know the individual principles present in varieties of interfaces and conjointly the recognition of these user interfaces. This type of design approach has been termed as a user-centered approach by Stone and others in [26].
Esthetically pleasing a style aesthetic or visually pleasing composition is enticing to the attention. it attracts attention subliminally transfers a message clearly and quickly. visual attractiveness is provided by following the presentation and graphic style principles to be mentioned as well as providing a meaningful distinction between screen components making special groupings orientating screen elements providing threedimensional illustration and exploiting color and graphics effectively. The good style combines power functionality and eases with a satisfying look.
The clarity the interface should be clear in visual appearance concept and expression. Visual components ought to be comprehensible regarding the user s real-world ideas and functions. Metaphors or analogies ought to be realistic and easy. Interface words and text ought to be straightforward unambiguous and freed from computer jargon. Fig. 6 shows the clarity of the prototype phase in mobile view as emulated by chrome immolator to depict the size of an iPhone 6,7 and 8 Plus display.
Control is feeling that the system is responding to your orders. Feeling that operating the system is not demoralizing and frustrating. The interface should present a tool-like appearance. Control is achieved when the user working at his or her own pace, can determine what to do, how to do it, and gets the task done easily. Directness Tasks should be performed directly. Available alternatives should be visible, reducing the user's mental workload. Tasks are applied by instantly choose an object, then selecting the order to be applied, and then watching the action being accomplished. The graph in Fig. 5 shows the levels of directness felt by the users for different web user interfaces [27].  Inefficiency consideration of the eye and hand movements should not be wasted. One's attention should be captured by relevant parts of the screen once required. Serial eye movements between screen parts are design to be foreseeable, obvious, and short sites should be simply scanned. All navigation ways are design to be as short as doable. Avoid frequent transitions between input devices akin to the keyboard and mouse. Familiarity with ideas and visualization that is acquainted with the user, keeping the interface natural, mimicking the user's behavior patterns, victimization realworld metaphors, stop errors from occurring by anticipating wherever mistakes might occur and coming up with to stop them. Also, allow individuals to review, change, and undo actions whenever necessary. In addition, build it tough to perform actions that may have tragic results. Once errors do occur, gift clear directions on a way to correct them and a uniform color pattern to mimic professionalism in the design process are crucial and this can be seen in Fig. 7 as the prototype from the developmental stage with a color pallet from different color code show a clear sign of unpleasantness. Recovery must be obvious, automatic, straightforward, and natural to perform. Straightforward recovery from associate degree action greatly facilitates learning by trial and error, and exploration. Developers can build mistakes; a system ought to tolerate people who make common and inescapable mistakes. A forgiving system keeps individuals out of hassle. Individuals prefer to explore and learn by trial and error. For these reasons, the system must be subjected to aesthetical comparison to similar web applications available online. Flexibility is that the system's ability to retort to individual variations. Allowing individual users to decide on the strategy of interaction that is most acceptable to their scenario. is conjointly accomplished through allowing system customization. Responsiveness A user request should be responded to quickly. Feedback is also visual, the amendment within the form of the mouse pointer, or textual, taking the shape of a message. it should even be additive, consisting of a novel sound or tone.
This research does not only result in a robust and responsive high-volume data representation system but also throws more light on some critical issues in the scope of data visualization. The research indicates a lack of improvement in data visualization from a web development standpoint. Also, this research clearly shows data visualization software is more likely to produce Bitmap images as a downloadable graph for print media usage which in turn produces poor quality images as opposed to scalable vector image files. Moreover, this research establishes that the statistical cost of data visualization software which ends up being embedded into the parent web application also increases the total cost of the system and its maintenance.

VII. CONCLUSION AND FUTURE WORK
This research has been successfully designed and developed to fulfill objectives that were identified during the requirements analysis. In addition to opening doors for future research into other technologies that may prove to benefit the area of study, it has also proven to practice more effectively with an artifact that is user-friendly, responsive to frame rates, and appealing to users. The system was found to be much reliable and effective in visualizing the data presented appealingly with softness and color-coding. It also provides downloadable SVG files as opposed to PNG files from a similar system from gov.UK and Middlesbrough town council websites. It eliminates the use of distorted images as it makes use of SVG images to provide the sharp and crisp look and feel to elements in the applications. With comparatively smaller source files size data load time from API or HTTPS is relatively faster. The research also highlighted the need for more interactivity in data visualization systems which we believe is worth looking into in the future. Undertaken this research project also brought to our attention the usefulness of a Progressive Web Application (PWA). This technology is new and cons like native APIs not being available on app stores currently prevented us from using this technology but hopefully, there will be more support for this technology in the future to enable data visualization apps to operate basic functionalities even without the internet connections.