Health figures: an open source JavaScript library for health data visualization

Background The way we look at data has a great impact on how we can understand it, particularly when the data is related to health and wellness. Due to the increased use of self-tracking devices and the ongoing shift towards preventive medicine, better understanding of our health data is an important part of improving the general welfare of the citizens. Electronic Health Records, self-tracking devices and mobile applications provide a rich variety of data but it often becomes difficult to understand. We implemented the hFigures library inspired on the hGraph visualization with additional improvements. The purpose of the library is to provide a visual representation of the evolution of health measurements in a complete and useful manner. Results We researched the usefulness and usability of the library by building an application for health data visualization in a health coaching program. We performed a user evaluation with Heuristic Evaluation, Controlled User Testing and Usability Questionnaires. In the Heuristics Evaluation the average response was 6.3 out of 7 points and the Cognitive Walkthrough done by usability experts indicated no design or mismatch errors. In the CSUQ usability test the system obtained an average score of 6.13 out of 7, and in the ASQ usability test the overall satisfaction score was 6.64 out of 7. Conclusions We developed hFigures, an open source library for visualizing a complete, accurate and normalized graphical representation of health data. The idea is based on the concept of the hGraph but it provides additional key features, including a comparison of multiple health measurements over time. We conducted a usability evaluation of the library as a key component of an application for health and wellness monitoring. The results indicate that the data visualization library was helpful in assisting users in understanding health data and its evolution over time. Electronic supplementary material The online version of this article (doi:10.1186/s12911-016-0275-6) contains supplementary material, which is available to authorized users.


I. INTRODUCTION
The ongoing shift from reactive to preventive medicine requires that citizens have the skills and means to take an active role in developing and maintaining their wellness.Use of self-tracking devices and personal wellness applications is more and more common, ranging from sports tracking applications to personal genome sequence analysis services.These services and devices produce large amounts of data.
In addition, Electronic Health Records are increasingly replacing paper records in hospitals and clinics around the world.The combination of these large and heterogeneous data sources is expected to provide a "predictive, preventive, personalized and participatory" ecosystem for the benefit of the general welfare [1].
To better understand our health, we need to combine heterogeneous data sources and present the information to the user in a complete and accurate manner.In order to accomplish this, health information technologies and visualization design need to be integrated [2].The goal is to provide tools for individuals to take better decisions regarding their health.Similarly, doctors and other medical experts need tools and solutions for getting a complete and accurate view of the patients health, combining together patient's own measurements and clinical data.
An innovative approach for health data visualization is the Health Graph (hGraph), released publicly by MITRE corporation [3].In an earlier study [4], it was found that the hGraph-type radial plot can enhance deep understanding of health data and enable the user to create meaningful health insights based on the interrelationships between the measurements.However, the hGraph shows a static overview of a persons wellness.Disease and wellness are processes that change over time.It is also essentially important to be able to follow up the trajectories in the different parameters, what is the rate of the change and how they respond to events such as medical care actions and interventions.Thus, in addition to a static snapshot such as in hGraph, a temporal way of presenting the data is also needed.While hGraph visualization is useful for the purpose of understanding with a quick glance the overall situation, it lacks features such as a clear division of measurements according to their category, a distribution of the labels to avoid clutter and the notion of time or evolution of the data [4].
In this article we present a visualization library based on extending the core ideas of the hGraph.Aim of the library is to provide tools to assist experts and non-experts in the decision making process of assessing the situation of a patient and its evolution over time.To test the user satisfaction, ease-of-use and usefulness of the solution, we built an application for health monitoring using the visualization library.The application is a visualization tool that shows a health coaching program and its effects on the evolution of health and wellness of a modeled patient.We evaluated the software solution using usability tests (Heuristic Evaluation, Controlled User Testing and Usability Questionnaires).
First in this article we review the state-of-the-art on health data visualizations and describe the hGraph and results related to its usability and usefulness, which motivated us to develop hGraph further.We named the new library built on top of the hGraph core ideas as hFigures.The article details the design and implementation of the hFigures library, the features we implemented and how they address the users' needs.We also describe the usability test process we utilized to assess the library in the context of an application for health monitoring.We present the results and discuss the further improvements of the library and its pitfalls.We also discuss how this library can be used in Personal Health Informatics and in the Health Care processes.

II. BACKGROUND
Visualization tools have mostly focused on Healthcare Information Systems and Electronic Health Records (EHR) [2].For instance, TimeLine is a software developed to retrieve data from several sources and presented in a hierarchical and timeline based structure where clinicians can browse chronologically through existing EHRs including MRI [5].
Additionally, the growing market for mobile health applications (mHealth) have drawn the attention of researchers, developers and investors [6].These applications provide large volumes of personal health data.While the market and demand are expected to grow, the use of the data has the potential to contribute to a better understanding of our health.
Goetze [7] demonstrated the impact of data visualization as means to represent health data in a complete and accurate manner.He conducted a project that redesigned laboratory test results from numerical tables into colored graphics.He demonstrated that the patients were able to understand better their health situation when presented with the new designs.
Data integration for health monitoring as a Big Data process for personalized medicine has been approached by Idris et al. [8].The visualization of this information uses traditional bar and pie charts to report to the user a historical view of a variety of data including mental, social, physical aspects.The novelty of this work is the integration of heterogeneous data sources while the presentation of the information was done following existing graphical representations.
An extensive choice of graphical representation is listed and explained by S. Few [9].These techniques have been studied and used widely among researchers and individuals alike.Examples include: bar, stacked bar, line and bullet graphs.These visualizations can be combined to provide a personalized wellness indicator system, as proposed by Soomlek and Benedicenti [10].
DeRidder et al. developed a combined approach that retrieves data from Personal Health Records (PHRs), and presents them to individual patients using a "3D medical graphical avatar" [11].The solution is built using HTML5 and WebGL to render 3D graphics using the web browser.Patients can browse "regions of interests" on their avatar and explore further the information contained in EHRs as well as in PHRs.
As stated by Shneiderman et al. [12], new visual representations are needed for "systematic yet flexible visual analytics processes".We present an existing tentative solution known as the hGraph, released publicly by MITRE corporation.We describe its main advantages and how they can address these challenges.In a previous study [4] we identified possible improvements and based on our own implementation we addressed these issues and extended the features of the hGraph to better address large data sources.
However, a data visualization is only as good as the ability of the intended audience to decode graphical objects into numerical values which conveys a clear message.Therefore, we have to consider the graphical perception of the users who will benefit from the data visualization.Graphical perception is the ability of an individual to decode the information displayed as graphical objects [13], it has been a widely researched field [14].Graphical perception affect how we understand visualized information.In the context of health data, it remains a challenge to design graphical representations for non-medical experts.Graphical representations in this context should enhance the users' ability to understand their health situation and take informed decisions.With this "deep" understanding on the health situation, individuals can move towards healthier behaviors.
The graphical representation of health data requires a complete and accurate overview of a patient often including large amounts of measurements, which in turn translates to large datasets.Therefore, health data visualizations need to scale to accommodate large datasets.

A. Radar Visualization
Radar visualization scales to large amounts of data entries because the points are distributed among the circumference.Bar charts, lines or scattered plots, pie charts and similar visualizations can quickly grow to a large scale with large datasets.In the case of radar visualizations, the graphical representation scales with the number of points plotted causing the circumference to grow in order to accommodate all the plotted values.
Hoffman et al. seem to have coined the term of "radial visualization" [15], [16].The term was the foundation of " pie chart, starplot, and radar plot" which are the basis of "virtually all the radial visualization methods found in the state-of-the-art research" [16].
Draper et al. propose a classification of radial visualizations into "three main divisions" each comprised of "design patterns" [16].
a) Polar Plots: These are radar visualizations where the center is the starting point from which "line segments" originate [16].According to this classification, polar plots are divided into Tree and Star patterns.
Stars do not have branches but rather straight segments originating from the center, their common uses include "ranking of search results" and "viewing relationships among disparate entities" [16].Examples of star patterns include Starstruck [16], [19] and Neighbourhood Explorer [16], [20].b) Space Filling: Also referred to as Radial Space Filling (RSF) [16], [21], this category comprises the visualizations that fill "most or all of the area of a circle" [16].The classification identifies three patterns: Concentric, Spiral and Euler.These patterns are mostly used for visualizing hierarchical data and "viewing relationships among disparate entities", except for the Spiral pattern which is used to visualize "serial periodic data" [16].
Concentric pattern have an "origin at or near center of canvas" from where rings are plotted outwards and "each ring divided into multiple sectors" [16].Filelight is an example of concentric pattern and it is a "filesystem browser based in part on the Polar TreeMap metaphor" [22], [16].
Spiral pattern consists of a "spiral-shaped glyph" that starts from the center of the canvas [16].Certain patterns can emerge when arranging the data according to its periodicity, as observed by Carlis and Konstan [16], [23].RankSpiral is an "interface for search engines" developed using Spiral patterns [24], [16].
Euler pattern has "multiple circles placed inside (or adjacent to) a larger circle" often linked to represent a nested visualization of a hierarchy [16].An example is Zoomology, which uses the "outer ring" as the actual root of the hierarchical structure where "each nodes children are rendered as inner circles" [25], [16].
c) Ring: The Ring visualization distributes the nodes "around the circumference" and its common use is to identify relationships between the nodes [16].The classification divides this group into Connected and Disconnected Rings.
Connected Rings have the nodes connected by "line segments" and in some cases "additional nodes" are positioned in the "rings interior" [16].A popular example is the Circos visualization tool for "identification and analysis of similarities and differences arising from comparisons of genomes" [26].
Disconnected Rings follow the same principle but the nodes have no connections between them, thus representing large datasets without the clutter that Connected Rings have when portraying the relationships between the nodes [16].
SQiRL is an example of this pattern, it is a tool that visualizes the "opinion polls" by breaking down the "respondent's answers to selected questions" placing them "around the circumference" [27], [16].
In the context of health data visualization, radar visualizations have a potential to visualize large amount of datasets due to their clarity in the data representation.However, the potential use of interactivity needs to be addressed by these visualization tools.The ability to represent relevant information should be embedded in the visualization tool leveraging from modern technologies such as Web browsers and Web services as well as with current interfaces such as touchscreens.

B. The Health Graph
The health graph, or hGraph was developed by MITRE Corporation and released to the public in 2010 under the Apache v2.0 license.The design intention of the hGraph is to facilitate the graphical representation and understanding of health data.The data can come from a wide-range of sources such as laboratory tests, physical activity, nutrition, sleep monitors and other sources.The domain of this visualization technique includes Personal Health Informatics, EHR and Personal Health Record (PHR) visualization [3].
Following the classification from Draper et al, the hGraph could be classified as a Polar Plot and Ring, following the design patterns of a Star and a Connected Ring.
The hGraph design consists of a circular space with an area defined by to circumferences.The area represents the minimum and maximum recommended values for a given measurement.For instance, the minimum and maximum recommended fat percentage of a person in a given age.The measurements are represented as circles and their position The values are distributed in a circular space.A graph is formed by joining the data points around the circular area.This polygon or graph reveals a pattern and its shape provides a quick overview of the general situation of all the values and how they deviate from the recommendations.The hGraph design highlights values outside of the recommendation by using the red color on the data points and by modifying the shape of the graph.The rationale of the hGraph is that if the same measurements are plotted in the same order for various cases, then the graph patterns can reveal similar shapes associated with certain health conditions.d) Web-based Solution: Web-based solutions for data visualization provide flexibility, as they can be accessed by any web browser, either from mobile devices or personal computers.The hGraph uses a web approach via HyperText Markup Language (HTML) and Scalable Vector Graphics (SVG).The programming language of the library is JavaScript and is built using the Data-Driven Documents library.Data-Driven Documents (D3.js) library provides free access to the Document Object Model (DOM), which is the substrate that enables the programmer to interface with the graphical representations in a web browser [28].e) hGraph as an Insightful Visualization: Based on the approach proposed by C. North [29], a previous study [4] compared visualizations based on how well users derived meaningful insights.The study compared the hGraph visualization along with four alternatives based on the Graphical Perception Framework proposed by Cleveland McGill [14].
The study compared the same data plotted with these five alternatives plus a control group which had the numerical data with no visualization.The data was comprised by a set of measurements of two modelled patients.The first patient had an elevated at risk of developing Type II Diabetes and the second one had a low risk due to a healthy lifestyle (regular exercise and a balanced diet).The evaluation followed the insight-based methodology similar to other experiments for visualizing genetic expressions [30].The experiment determined how these visualizations can enable users to understand the overall health situation of the modelled patient with poor health, as well as the possible causes behind that patient's situation.The hGraph was found to be the most effective solutions for creating meaningful insights and to help users to better understand the data.Figure 1 is an example of the hGraph visualization.The figure was extracted as a snapshot as the library generates an SVG document structure that cannot be exported outside the browser.We address this issue in the next section of the article.The hGraph hides the measurements when the zoom level is low, meaning that the user has zoomed out.The shape is an average of the deviation of each measurement under the same category.When the user zooms in, the details are revealed and the rest of the information becomes visible, that is the numerical values and positions (with respect to the recommendation) of the measurements.

III. IMPLEMENTATION
In this chapter we detail the implementation methodology and the key features implemented in the library.We named the library Health Figures (hFigures) because it is based on the design principles of the hGraph.hFigures makes an emphasis on multiple graphs, or figures, in order to provide a graphical representation of evolution of the data over time (multiple snapshots of the data at certain points in time).

A. Methodology
The implementation of the hFigures followed the Extreme Programming methodology [31], [32].The main key requirement was to provide a visualization which represents the changes in the overall health situation.In addition, the implementation addressed the features that the users requested in a previous study [4].
Extreme Programming focuses on releasing and reviewing functional software continuously [32].Often these requirements change and the programming practice is to address this changes by prioritizing them at the top of the change list.
During the implementation of the library, our research group provided the continuous review process of the software.The research group has expertise in Health Sciences, Signal Processing, User Design, Software Engineering and Machine Learning.Requirements often changed and new releases were assessed by the group.The development of the health monitoring application followed the practice of pair programming, as it is often the case in Extreme Programming [31].

B. Data Source
We use a JSON (JavaScript Object Notation) format to read the data, in which the measurements are grouped according to their categories.The groups contain an array of samples, which represent the values obtained from a measurement (steps per day, cholesterol, triglycerides, blood sugar or depression level using [33]).The samples contain a timestamp in Unix Epoch format and the value of the measurement.The Unix Epoch format is the number of seconds since the first of January 1970, Greenwich Meridian Time (GMT).An example of the data source is in figure 3, it shows the first measurement of the group "Blood Pressure" which in this case is comprised by Systolic and Diastolic measurements and each of them have two samples taken at two particular times, Friday 9th of January 2015 at 10:10:24 GMT (1420798224 -seconds) and Thursday 12th of February 2015 at 12:05:20 GMT (1423742720seconds).

C. SVG Document Export
The SVG document structure we designed in our implementation can be exported to a separate file outside the web browser.The short-term objective is to build a toolkit that enables researchers to visualize their data with our implementation so they can use the generated SVG file in articles, posters, presentations or other applications.For instance, figure 2 has been exported as an SVG document from the browser into this article.SVG export is possible due to the rendering of our algorithm which does not depend on JavaScript or Cascade Style Sheet (CSS) styling properties to produce a finalized document.The library build the entire image as a stand-alone document.The hGraph library unfortunately does not produce a complete document but instead depends on CSS and JavaScript code to make the image visible.

D. Constant Graph Shape
Figure 1 shows an hGraph example and figure 2 shows an hFigures example.The hGraph computes the average of the deviation of the measurements in order to show the polygon or graph, as a representation of the overall health assessment.However, some measurement might deviate towards a lower value and while others towards a higher one, thus the average position would be roughly the middle recommended area.For this reason, hFigures does not change the shape of the graph if the user zooms in or out.Showing and hiding the measurement labels is the only reaction to the zooming events from the user at the moment.This avoids clutter when the user wished to have a quick glance at the picture but keeps the graph with the same shape.

E. Layout Construction
The measurement groups are represented using a circular layout divided in sectors.The goal is to have a clear division between the groups as they represent the different aspects of the overall health.hFigures uses the d3 pie chart layout and modifies the data source provided to the layout.All the measurements have the same numerical value and at the end of the group, we insert an extra value in order to leave a blank space between the circular area sectors.The result is visible in the hFigures example shown in figure 2 and the code that produced this visualization is in figure 4. The pie layout constructs the sectors of the circular area based on a data source.When we provide an array of numbers, the layout uses the numbers to calculate the proportions of the area.In order to achieve the layout construction that we have designed, the array has the same constant number multiple times, the number of measurements plus an additional number for each group.Fig. 4: Layout construction code.The layout for distributing the measurements is build using d3 pie layout leaving spaced between the measurement groups.

F. Color-coded Entries
The data source can contain additional sets of value ranges.For instance a warning range of values can let the users know when a value has reached a level that requires attention but has not yet reached a critical point.We followed the users' feedback that recommends a traffic light-based approach.The green color means that the values are within the recommended, yellow suggest a warning or follow-up action needed and the red indicated a critical threshold has been passed.
In the implementation, the library verifies if these additional ranges are present in the measurement definition.In order to verify if the property of the object exists, JavaScript provides a qualifier method, typeof.The returned value must be compared with the keyword definition for properties that are not present in an object, the keyword undefined has been suggested by Mozilla Developer Network [34], a highly reputable source for Web development.The code is shown in figure 5. Fig. 5: JavaScript code to determine if additional ranges are provided.In JavaScript the data source could contain additional ranges, these are properties in an object that need to be checked beforehand and if the exists, compare the values accordingly.

G. Multiple Graph
The dataset is structured as a set of measurements where each has its own collection of samples.In order to compare the evolution of these measurements, the hFigures library allows the graphical representation of any number of samples.The result is a set of graphs or polygons overlapping or stacking with each other.In order to differentiate them, we use a lighter set of colors so that the users can see the difference between two points in time.As an example, figure 2 shows two different samples for each measurement.This example portrays a modeled person that has been active in a health coach program.Some measurements have improved and are closer to the recommendation.Users repeatedly expressed that it would be very helpful to visualize two or more different points in time so as to compare how the person has evolved.
Including multiple graphs has implications in the structure and procedures of the visualization construction.For instance, we structured the SVG document such that each measurement includes one or many plotted circles that map to each sample.The measurement labels need to be positioned considering that a plotted circles can (and probably will) overlap.This is challenge that we address in the next section by finding an optimal label space distribution to avoid labels from overlapping and also to reduce the clutter in the visualization space.

H. Label Space Distribution
After the measurements are plotted, the labels are added to increase readability.The position of the label needs to be defined within a given range to avoid overlaps and clutter.Labels need to avoid overlapping with each other and with their measurements.To solve the label overlapping problem we implemented an algorithm that starts by ordering the labels by their angular position, that is the angle at which the measurement is positioned.The next step is to calculate the height of the label and position it over the previous one in the direction that goes from the center of the visualization area upwards or downwards (depending on the angle).The idea is to begin with the center of the area, either to the left or to the right of the circles, then we work our way up or down drawing the labels into the SVG document.We add the labels as SVG elements and the use the transform property to position them in the corresponding place.Figure 7 shows the spacing between the labels using the algorithm when drawing the labels from the center to the upper right corner.For each of the four quadrants, the library calls the method shown in figure 6 which computed the position of the label as we described.As mentioned before, labels can also overlap with measurement circles.To avoid this problem we calculate the maximum radius from the center of the visualization area to the highest value of a measurement sample.From that starting point, we place the label in that position.In other words, for each measurement, we find the largest value of the samples.Figure 8 shows a sector of the hFigures where the sugar measurement label has been pushed out for a few pixels in order to avoid overlapping it with the red circle.The rest of the labels adjust to that position by leaving a user-defined margin.
The radius for the label is the maximum value of the samples translated as graphical coordinates plus a margin.Equation 1 obtains the label radius r label given the radii of the samples of a measurement plus the default margin m.

I. Feature Implementation Summary
The key improvement of hFigures is the addition of multiple graphs as a mechanism to compare the values of the health measurements over time.
The immutable shape of the graph presents the same information (values of the measurements in respect to the recommended target) regardless of zooming.This feature shows the data "as is" without calculating average, mean or deviation.Users stressed the importance of graphically representing the information without any calculations such as mean or accumulated values.The users expressed that showing the measurement values in hFigures helped them to derive valuable insights with just a quick glance at the data, for instance they identified measurement that fall outside of the recommended range easier and without requiring them to zoom in or out.
The hFigures library does not calculate an overall score since the users considered that this task should be the sole responsibility of a health care professional.An overall score also depends on each person under a case by case basis.For instance, the hGraph allows the user to assign weights to each measurements' value, the score is then calculated summing the value of the weights times the measurement's deviation from the recommendation.The users participating in the design process of our library expressed that an overall score would complicate the integration of the library into daily health care processes as specialists would need to review case by case to find the adequate score formula, which means specifying the weights (importance) of each measurement for a given person.
Measurements in the hFigures library are grouped in sectors which represent the category they belong to.Grouped measurements allow a clear division of categories resulting in enhanced understanding on how certain areas of wellness have changed and how, if any, they affect each other.The sectors remain visible regardless of the zoom level, users expressed that this feature provides an informative approach as the categories are always showing to which category the measurements belong to.Hiding the category labels and displaying the measurements without divisions would complicate understanding the status of health categories, such as sleep, nutrition, physical activity and others.Users expressed their confusion when they were unable to determine when a category starts or ends after zooming in and out of the hGraph.
The possibility to export the generated figure as an SVG file, allows the integration into research articles, presentations, websites, posters and other Software applications to further enhance the utility of the hFigures.

IV. EVALUATION
The health data visualization library was placed in the context of a full application.We tested the library in a contextualized scenario where the users conducted a series of tasks and answered usability questionnaires.In this section we present the methods we used for recruiting the participants and for the usability testing of the library.We also explain the metrics measured and the rationale behind the selection of the usability testing methods.
Nielsen suggests that "'usability has multiple components and is traditionally associated with the five usability attributes, which are learnability, efficiency, memorability, errors, and satisfaction" [35].In order to assess the usability of the software solution, multiple alternatives exist in industry and research.Johnson et al. developed a toolkit for usability testing of Electronic Health Records commissioned by the Agency for Healthcare Research and Quality of the U.S. Department of Health and Human Services [36].The toolkit is built on the basis of the assessment of existing usability methods in the context of Electronic Health Records and Health Information systems.The toolkit is a detailed analysis of the usability methods, their advantages, disadvantages and appropriateness ranking.
We selected the Usability Questionnaires since it has a high appropriateness ranking [36].We were able to recruit three usability experts to conduct the Heuristic Evaluation and the Cognitive Walkthrough, both are recommended techniques to complement the evaluation.We concluded the evaluation using the principles of Controlled User Testing.

A. Continuous Health Monitoring Application
In order to test the hFigures library, we designed an application for visualizing the health situation of a modeled patient and how this has changed over time within a health coaching program.The objective is to help the users in the decision making process of assessing the overall health situation and whether or not the health program has provided benefits.
The application has three components: activity timeline, the hFigures data visualization library and longitudinal measurements.Figure 9 shows the three components.The figure is not a screenshot of the application but rather an extraction of the SVG documents embedded in the HTML file, except for the timeline.Longitudinal Measurements: The application also displays the same set of measurements using longitudinal temporal representation.We included this component to provide additional details and trends on how the measurements have changed over the coaching program.

B. Heuristic Evaluation
Heuristic Evaluation requires at least one expert in the area of human-computer interaction [35], [36].For our evaluation we recruited three experts, and they assessed the application using Nielsen's heuristics [35].The evaluation has 11 metrics evaluated using a seven point Likert scale, where the value 1 indicates "strongly disagree" and 7 "strongly agree" Heuristics are "rules of thumb" comprised of 10 principles meant to assist the Human-Computer Interaction specialist in the usability assessment [36], [37].We explain the principles of the Heuristic Evaluation according Nielsen [37].
1) Visibility of the System Status: Refers to continuous feedback on the status of the system "within reasonable time" (Feedback).2) Match between system and the real world: The use of the language should be familiar to the user so that conversations follow a "natural and logical order" avoiding technical terminology unfamiliar to the intended user audience (Speak the User's Language).
3) User control and freedom : Allow the user to recover from erroneous navigational options with "clearly marked" access options (Clearly Marked Exits).4) Consistency and standards : Follow the same language and terminology to avoid the user from guessing the meaning of "words, situations, or actions"(Consistency).5) Error prevention : Avoid "error-prone" options in the system whenever possible and for those cases when the problematic options cannot be avoided, then present the user confirmation dialogues (Prevent Errors).6) Recognition rather than recall : Present visible options to the user at all times so as to avoid the effort of remembering previously stated instructions.Whenever options cannot be visible, make them "easily retrievable whenever appropriate" (Minimize User Memory Load).7) Flexibility and efficiency of use : The interface should accommodate the novice and advance user by providing "tailored frequent actions" (Shortcuts).8) Aesthetic and minimalist design : The dialogues should only contain relevant and clear information that is timely needed at that particular state of the interface (Simple and Natural Dialogue).9) Help Users recognize, diagnose, and recover from errors : Plain language should be used in error messages, and whenever possible they should provide helpful information so that the users can take constructive actions.(Good Error Messages) 10) Help and documentation : Some systems require documentation and guidelines to explain briefly how to accomplish specific tasks in concrete steps.

C. Cognitive Walkthrough
Wharton et al. developed the Cognitive Walkthrough for usability testing [38].Johnson et al. summarize this method as a "usability inspection method that compares the users and designers conceptual model and can identify numerous problems within an interface" [36], [38].

D. Laboratory Testing
Regarded as the "golden standard" for usability testing [46], Laboratory Testing collects "qualitative and quantitative" data "since it collects both objective data such as performance metrics (e.g., time to accomplish the task, number of key strokes, errors, and severity of errors) and subjective data such as the vocalizations of users thinking aloud as they work through representative tasks or scenarios" [36].
Controlled user testing is comprised of "a series of commonly used task scenarios" where users are asked to conduct these tasks using a "thinking aloud" [36], [47], [35].This process requires "users to talk aloud about what they are doing and thinking" while they complete the tasks using the system [36], [47], [35].
As the "golden standard" in usability testing, this method has been widely used in evaluating Health Information Systems [36], [48], [49], [50], [51] The data exploration tasks are designed to assist the decision making process on the health situation of the modeled patient.The usability scenario was the main goal of the intended use of the application.We explain the participants the purpose of the application, which is to facilitate the decision making process weather or not the overall health situation of the modeled patient is favourable and weather or not the health coaching program was beneficial for the patient.The tasks are designed to represent the common usage of the application, namely to find the measurements inside and outside of the recommendation and to identify the areas that improved and need even further improvement.The tasks given to the participants are shown in the following list.
1) How many areas of health are displayed in the hFigures?2) Choose one of these areas and point to its measurements.3) Identify one measurement inside the recommended values and another one outside.4) Identify the measurement that is the furthest from the recommended values.5) What does the green, yellow and red circles mean? 6) Has the overall health improved after coaching?7) Which area of health has improved the most after health coaching?8) Which measurements show the biggest improvement?9) Understand the difference between the points inside and outside the recommended area.

E. Usability Questionnaires
We followed the recommendations from Johnson et al. and used this method in our evaluation.Usability Questionnaires are "the most common" method to "collect self-reported data" from the "users experience and perceptions after using the system in question" [36].Although the data collected is self-reported, some questionnaires have reliability in measuring several usability metrics such as "satisfaction, efficiency, effectiveness, learnability, perceived usefulness, ease of use, information quality, and interface quality" [36].
We used two Usability Questionnaires to evaluate the usability of our application, Computer System Usability Questionnaire (CSUQ) and After Scenario Questionnaire (ASQ) [52].Table I shows the length, reliability and the metrics of the questionnaires.These questionnaires use a seven-point Likert scale from "strongly disagree" up to "strongly agree".h) Computer System Usability Questionnaire (CSUQ): The questionnaire was developed by IBM and it is a "slight"  [53].Table I shows the reliability of this questionnaire.The questionnaire has high " coefficient alpha" with a reliability 0.95 in total and "0.93 for system usefulness, 0.91 for informational quality, and 0.89 for interface quality" [36], [52], [53].We selected this questionnaire since it has been successfully used in the Healthcare domain [36], [54] and in the evaluation of "of a guideline-based decision support system" [36], [55].i) After Scenario Questionnaire (ASQ): An additional questionnaire developed by IBM [36], [52], [56] and designed to measure the user satisfaction after scenario usability studies have been completed [36], [53], [57].This questionnaire measures the "ease of task completion, time required to complete the tasks, and satisfaction with support information" [36].Since we already designed the scenario for the evaluation of the system, we included this questionnaire in our study.

F. Data Model
Similar to the study we conducted in the insight-based methodology [4], we modeled a patient using clinical expertise of a physician along with the most common symptoms for developing Type II Diabetes.The modeled patient consisted of a set of measurements over time comprised of the following parameters: • Blood pressure: systolic and diastolic blood pressure • Physical activity: weekly active days [58], [59], steps per day [60] • Body composition: Body Mass Index (BMI), waist diameter and fat percentage • Sleep: time in bed, time asleep • Fitness: resting heart rate, fitness index [61], [62], muscular force, muscular endurance and balance [63] • Lab Tests: hemoglobin, fB-Gluc, cholesterol, HDL, LDL, triglycerides • Nutrition: meal regularity, type of meals (vegetables and fruits), sugar intake, fat quality, fiber and salt intake.• Drugs: tobacco (cigarettes per day), alcohol abuse, drug abuse (narcotics), medication abuse • Emotional wellbeing: depression level [33], stress level and stress recovery [64], [65] and optimism [66].

G. Recruitment
We recruited a total of 14 participants following similar usability studies and Faulkner's [67] recommendation of conducting usability tests with 10 to 20 users "in order to find 90 to 95% of usability problems" [68].Among the 14 participants we were able to recruit 3 usability experts, following the recommendations from Nielsen and a number of previous studies stating that 3 to 5 experts are needed to conduct the Heuristics Evaluation [36], [69], [35], [70], [71], [72].
Participants were recruited through the university's student email lists, self-study groups, lectures and workshops.After completing the usability tests, the participants received a movie ticket.

H. Ethics
The study we conducted was a usability evaluation using simulated data not belonging to a real person.The results of the usability tests were kept anonymous and the collected data does not include sensitive information from the participants.According to the ethical principles applied by the Finnish Advisory Board on Research Integrity, our study did not need ethics approval [73].
The experimental procedures described in this paper complied with the principles of Helsinki Declaration of 1975, as revised in 2000.All subjects gave informed consent to participate and they had a right to withdraw from the study at any time.The informed consent also explained that their names and identities will be kept confidential, that the results will not be linked to their identities, the sessions will be recorded using a Web camera and microphone for further study and that the clinical data visualized did not belong to a real person.

I. Experiment Protocol
The testing process started with the signature of an informed consent where we explained the participants the purpose of the test.Afterwards we proceed to explain a usability scenario and the tasks that the participants were asked to complete.The participants were allowed to ask questions at any time.After performing the tasks we asked the participants to fill in the Usability Questionnaires.We close the session with a briefing interview where we asked the users what they liked and disliked about the application as well as what were their recommendations for further improvements.The sessions were recorded for further study and to find the correct timing of the task completion.

J. Materials and Tools
We conducted the usability tests in our laboratory.We used a computer with a local HTTP server running our server application and Google Chrome as the browser running our front-end application.The computer was a laptop with a camera and microphone which were used to record the session for later study.The computer was connected to a 23 inch display and a separate keyboard and mouse.The usability questionnaires were filled out using the Web portal developed by Perlman and available at the following address http://garyperlman.com/quest/ .

A. Heuristic Evaluation
The three expert users answered the Heuristic Questionnaire in order to identify problems with the user interface of the health monitoring application.The three experts agreed and in some cases strongly agreed with most of the indicators.One expert found the instructions for adjusting the time of the visualization tool to be demanding.The expert addressed this comment to the integration interface that allows the time to be adjusted and thus visualized.The remark was not addressed to the graphical representation of the data using hFigures.The results of the evaluation are summarized in table II.The average response was 6.3 out of 7 points.

B. Cognitive Walkthrough
During the Cognitive Walkthrough, the concept of the health monitoring application was explained to the usability experts.The purpose of the application was explained in the context of the health situation of the modeled patient and how the application visualizes the changes in the health situation over time.We used the usability scenario and tasks to confirm that the interface supports the intended use of the application.The questions comprising the walkthrough, as described by Wharton et al [38]., were correctly answered by the expert users thus no design or mismatch errors were found.Table III summarizes the results of the completed, number of errors, average time to complete the task and the standard deviation.All participants completed 7 of the 9 tasks.Task 2 was the most problematic, we asked users to "choose one of these areas and point to its measurements", we found that 3 participants were not able to understand the task thus unable to complete it.The second most problematic task was number 9, "understand the difference between the points inside and outside the recommended area", where one participant was unable to complete it successfully incurring in one non-crucial mistake (an error that prevent the task to be completed).

C. Controlled User Testing
Additional non-crucial errors occurred in tasks 1, 3, 4, 6 and 8.The large number occurred in the first task due to the initial values set in the default zoom level of the hFigures component.After the usability testing, we corrected this problem by adjusting the initial zoom level to include the whole figures inside the container.D. Usability Questionnaires j) Computer System Usability Questionnaire (CSUQ): We computed the results according to Lewis, obtaining the average of "items 1 through 19" to determine the overall usability rating of the system.System usefulness is the average of items 1 to 8, information quality 9 through 15 and interface quality 16 through 18 [74].Table IV shows the results of the system usefulness.The system obtained an average of 6.13 out of 7. Table V shows the results of the information quality metric where the application scored a total average of 5.66.The average value is still within the "agree" response of the participants, however the notable low value compare to the other metrics might be due to the amount of information presented in textual format in the application.The information was encoded using graphical representations and even though a help document was included in the system, the text was not likely to fulfil the users' expectations.Whenever I make a mistake using the system, I recover easily and quickly 5.43 1.95 The information (such as online help, on-screen mes-sages, and other documentation) provided with this system is clear 5.29 1.90 It is easy to find the information I needed 6.07 1.27 The information provided for the system is easy to un-derstand 5.93 1.39 The information is effective in helping me complete the tasks and scenarios 6.14 1.17 The organization of information on the system screens is clear   VII.The score of the overall usability is 6.02 with a standard deviation of 1.04.We can determine that all the participants at least "agreed" in the Likert scale that the application was useful for the decision making process of assessing the health situation and evolution of the modeled patient.
k) After Scenario Questionnaire (ASQ): The average response for the ease of task completion was 6.64 with a standard deviation of 0.842 and for the time required to complete the task 6.64 and a standard deviation of 0.497.The overall satisfaction was 6.46 and a standard deviation of 0.53.The usability of the system had a high score in the ASQ results meaning that the system was suitable for the scenario in the context of the health data visualization of the modeled patient and its evolution over time.

E. Identified Issues and Suggested Improvements
The feedback shows that the main problem was the incomplete visibility of the hFigures in the application component window.Users also requested to show the detailed information as a hovering pop up window in the second figure (measurements before the coaching program).Currently only the latest measurements have the hovering window however users requested that both measurements (the before and after) should contain the same functionality.Additional information was needed in the measurements that contained numerical scales, such as the depression index.A more contextualized approach explaining the meaning of the values can help the user understand the measurements and thus the overall health situation of the patient better.

VI. DISCUSSION
The value of a data visualization depends on the knowledge that it can convey to the public.In this section, we claim that hFigures has the potential to be used both in the clinical and personal wellness applications.Large amounts of measurements do not clutter the visualization area as a result of our implementation, figure 10 shows an example of a large visualization of a modeled patient.The comparison of multiple graphs can provide a meaningful visualization to individuals and clinicians alike.The implementation of hFigures follows an extensible approach and even though it was designed to be used for health data visualization, any dataset that has a target range of values as a reference can be visualized.

A. Translation to Health Care
The wide variety of EHR formats and data sources from self monitoring applications comprise a challenge in unifying the data in order to provide an overview of a patient.Currently, most of the data sources contain the date when the sample was extracted, whether it is a tracking device or a blood test.This sample date already provides the timestamp required by the hFigures data source file.The values of the samples are the main object of study in a measurement, for instance the levels of cholesterol or sugar at a given time, the number of steps per day, the percentage of body fat and several others.This information can be transformed in a simple process to build the hFigures data source following the JSON structure.hFigures is a visualization library based on Web technologies, it uses a Web browser and the rendering of the SVG is compatible with current HTML standards.Thus providing interoperability across multiple devices including tablets, smartphones, workstations or laptops is indeed feasible.The D3.js library that hFigures is built on, enables compatibility with Internet Explorer versions 8 and higher using a component named Aight [75].Internet Explorer 8 is prevalent in hospitals and clinics due to the restrictions in installing custom software.
1) Patient Evolution: Multiple graphs plotted on the layout of recommended values shows the change in the data over time.This could allow clinicians to understand the evolution of certain aspects in the health of the patient.For instance, health professionals would be able to look at the effect of a trail drug treatment over time.Possibly, the collected samples of a patient before and after starting the trial would be plotted as the multiple graphs portraying the evolution of the patient.Figure 10 shows an example of a more heterogeneous dataset.The labels for each individual measurement are usually hidden when a full zoom out is performed by the user.For the purpose of demonstrating the visualization library we have made all the labels visible.
2) Personal Health Monitoring: As an example, Fitbit provides activity trackers and a wide-range of devices.The data collected can be obtained through their API.In most cases, providers such as Fitbit follow an HTTP REST interface.Figure 11 shows an example of the data Fitbit provides through its interface.The data has "activities" as properties of a JavaScript object.These entries have in turn a property "startTime" which provides the timestamp required for the hFigures data source file.
In this case, a step counter contains the property "steps" with the number of steps registered by the device.This and other measurement can be plotted in the hFigures following the data source file structure.
We can also use multiple graphs to show the user-defined goals as a reference in addition to the actual values of the measurement (steps per day).Figure 11 only show steps per day, however the documentation of the API specifies that additional data is available.This data includes distance travelled, sedentary activity, floors climbed, calories burnt and more.Other device manufacturers such as Withings or Jawbone provide their users the possibility to use their APIs to extract collected data in a similar way.As in the case of Fitbit, all data has at least a timestamp (date, time or both) and a set of values.Recommended values for the health measurements

Fig. 1 :
Fig. 1: An example of the hGraph.The hGraph shows an overview at a low zoom level.When the zoom increases, the details of each measurement are revealed.

Fig. 2 :
Fig. 2: A simple example of hFigures.The measurements are separated by groups in sectors.

Fig. 3 :
Fig. 3: JSON data source file.The data source file structured as a JSON file.

Fig. 6 :
Fig. 6: JavaScript code for label positioning.The function in JavaScript distributed the positioning of the label to avoid overlapping and clutter.

Fig. 7 :
Fig. 7: Label positioning distribution.The labels are positioned according the their height and margin, as a result the labels do not overlap and clutter is avoided.

Fig. 8 :
Fig.8: Label positioning avoiding overlapping with measurements.Some measurements can be positioned outside of the recommended range, the labels are adjusted to avoid overlapping.

Fig. 9 :
Fig. 9: Health Monitoring Application.The health monitoring application with the three components: hFigures, Activity Timeline and Longitudinal Measurements.
f) Activity Timeline: This component represents the health interventions (particular actions) that the modeled patient has done during the health coaching program.During the program, several snapshots of the patient's overall health are taken and visualized using the hFigures library.g) hFigures: The developed hFigures library is utilized to display the set of measurements taken during the health coaching program.These measurements describe an overview of the health situation of the modeled patient.Users can change the time at which the snapshot was taken to compare changes over time as a result of the health interventions.

Fig. 10 :
Fig. 10: A heterogeneous hFigures example.An overview of a modeled person comprised of several measurements with two time snapshots showing its evolution over time.

Fig. 11 :
Fig. 11: Fitbit API example response.An example JSON response from a Fitbit activity sensor that can be transformed to a data source to be visualized by hFigures.

TABLE I :
Standard Questionnaires Table.The table lists the standard questionnaires we used for the user evaluation of the system with their length, reliability and metrics.

TABLE II :
Heuristic Evaluation Results.The table summarizes the results of the Heuristic Evaluation conducted by three usability experts.

TABLE III :
Controlled User Testing Results.The table summarizes the results of the 14 users performing the 9 tasks.

TABLE IV :
Computer System Usability Questionnaire Results for the System Usefulness assessment.The table shows the results of the questions corresponding to the System Usefulness with its average and standard deviation.
Table VI shows the score for the interface quality where the application obtained an average

TABLE V :
Computer System Usability Questionnaire Results for Information Quality.

TABLE VI :
Computer System Usability Questionnaire Results for Interface Quality.

TABLE VIII :
After Scenario Questionnaire Results.