INOM
EXAMENSARBETE TECHNOLOGY, GRUNDNIVÅ, 15 HP
STOCKHOLM SVERIGE 2017,
Creating a User Friendly Web Visualization of Historical
Temperature Data, Using Existing Web Development Tools
ANNA EKLUND
SOFIA JACOBSSON
KTH
SCHOOL OF COMPUTER SCIENCE AND COMMUNICATION
Creating a User Friendly Web
Visualization of Historical Temperature Data, Using Existing Web Development
Tools
Webbutveckling av en användarvänlig visualisering av historiska temperaturdata, med hjälp av befintliga webbutvecklingsverktyg
Degree Project in Computer Science - DD142X
Authors: Anna Eklund and Sofia Jacobsson Supervisor: Michael Schliephake
Examiner: Örjan Ekeberg
2017-06-03
KTH
Abstract
In today’s society, the need to create user-friendly visualizations of raw data is big- ger than ever, since the amount of information which need to be understood by various audiences is constantly increasing. With the help of computers and the Internet, it is possible to reach out to the target audiences. Interactive visualizations allow users to explore the data by themselves, and research shows that this is one of the leading ways of presenting data. SMHI currently has a visualization of historical temperature data, which is a static image with many usability issues. This study aims to improve this visualization, and create a user-friendly representation of this data, using existing web development tools. The prototype developed during this project has undergone two iterations of user testing. The research shows that one of the leading web de- velopment tools for creating interactive visualizations is the JavaScript library D3, or Data-Driven Documents. The results from the user testing show that the prototype was more user-friendly than SMHI’s visualization, because its interactive features and dy- namic properties. This study emphasizes the importance of including end-users during the iterative development process, in order to create a user-friendly product.
Sammanfattning
I dagens samhälle är behovet av att skapa användarvänliga visualiseringar av rådata större än någonsin, eftersom mängden information som måste förstås av olika använ- dare ständigt ökar. Med hjälp av datorer och Internet är det möjligt att nå ut till målgruppen. Interaktiva visualiseringar gör det möjligt för användare att utforska infor- mationen själva, och forskning visar att detta är ett av de ledande sätten att presentera data. SMHI har för närvarande en visualisering av historiska temperaturdata, vilket är en statisk bild med många användbarhetsproblem. Denna studie syftar till att förbätt- ra SMHIs visualisering, samt att skapa en användarvänlig representation av dessa data med hjälp av befintliga webbutvecklingsverktyg. Prototypen som utvecklats under detta projekt har genomgått två iterationer av användartestning. Forskningen visar att ett av de ledande verktygen för webbutveckling för att skapa interaktiva visualiseringar är JavaScript-biblioteket D3, Data-Driven Documents. Resultaten från användartestning- en visar att prototypen ansågs mer användarvänlig än SMHIs visualisering, tack vare dess interaktiva funktioner och dynamiska egenskaper. Denna studie betonar vikten av att inkludera slutanvändare under den iterativa utvecklingsprocessen för att skapa en användarvänlig produkt.
Innehåll
1 Introduction 3
1.1 Purpose . . . . 4
1.2 Problem Statement and Scope . . . . 4
2 Background 5 2.1 Web Programming . . . . 5
2.1.1 Client-Server . . . . 5
2.1.2 Web Programming Languages . . . . 5
2.1.3 JSON . . . . 7
2.2 Web Visualization . . . . 7
2.2.1 Data Driven Documents . . . . 7
2.2.2 Graphical Components on the Web . . . . 8
2.3 Information Perception . . . . 8
2.3.1 Visual Information-Seeking Mantra . . . . 8
2.3.2 Data Types and Color in Visualization . . . . 9
2.4 SMHI’s Current Visualization . . . . 11
2.5 The Meteorological Data . . . . 11
3 Method 12 3.1 Research . . . . 12
3.2 Prototype . . . . 12
3.3 User Testing . . . . 12
4 Results 13 4.1 Analysis of SMHI’s current visualization . . . . 13
4.2 Functionalities of the First Prototype . . . . 14
4.3 Implementation of the First Prototype . . . . 16
4.4 User Testing of the First Prototype . . . . 18
4.5 Functionalities of the Final Prototype . . . . 19
4.6 Implementation of the Final Prototype . . . . 21
4.7 User Testing of Final Prototype . . . . 23
5 Discussion 24 5.1 Analysis of User Testing . . . . 24
5.2 Comparison between SMHI’s Visualization and the Final Prototype . . . . . 24
5.3 Technical Analysis . . . . 25
5.4 Further Development of the Prototype . . . . 26
6 Conclusion 27 7 References 28 8 Bibliography 31 8.1 The Code . . . . 31
8.2 SMHI’s Data . . . . 31
1 Introduction
In today’s technically advanced society, there is a constantly increasing amount of information which needs to be understood by various audiences. However, it is difficult for us humans to interpret large amounts of raw data, which means the need to visualize data is bigger than ever. However, massive amounts of data can also be quite demanding to visualize. Without computers, one must design and draw by hand, which is a very time consuming process.
With the help of computers and modern technology, we can apply methods that increase our efficiency. It is possible to create rules and systems for how the computer should present data, without having to draw anything ourselves. Computers also allow us to update our representations as new data is found, so we don’t have to redo all the work.
Another important aspect of data visualization is to reach out to the target audience. One of the largest, if not the largest, platforms for spreading information is the Internet, which is accessible to nearly everyone around the world. With the increasing amount of information being passed on the Internet, there is a constant need to filter, group and visualize informa- tion. According to Harvard Business Review’s article Big Data: The Management Revolution,
“more data cross the internet every second than were stored in the entire internet just 20 ye- ars ago”1. The use of web programming can help separate relevant data from irrelevant data.
Together with web visualization and knowledge of information perception, web programming can be used to present the data in a way which helps the audience interpret and understand the data.
One way is to make the data interactive, so the user can adjust the presented data based on which information they are interested in. With static visualizations, it is difficult to illustrate a variety of perspectives on the same information2. But with dynamic representations, it is possible to show multiple dimensions of the same data. Since interactive visualizations also allow the users to explore the data themselves, it is important to use a good design pattern.
This will make the dynamic data easy for the audience to explore. One of the most used patterns is the Visual Information Seeking Mantra, presented by Ben Shneiderman at the University of Maryland in 19963. It explains that powerful visualizations should consist of the three following concepts: overview first, zoom and filter, then details on demand4. This mantra can help developers create user-friendly visualizations that are easy for their target audiences to understand.
One example of a data category where the content needs visualization is meteorological data.
Proper visualization of this type of data is necessary since most people use this kind of information in their everyday life. There are many web pages for visualizing meteorological data, for example SMHI5, yr6, and The Weather Channel7. Even though they are widely used services, they still seem to have certain issues when it comes to user experience. One example is SMHI’s visualization of the yearly mean temperature in Stockholm from 1756 to
1McAfee, A. and Brynjolfsson, E. Big Data: The Management Revolution, 2012
2S. Murray, Interactive Data Visualization for the Web, 2013
3Ibid.
4Shneiderman, Ben. The Eyes Have It: A Task by Data Type Taxonomy for Information Visualizations, 1996, p.2
5SMHI, 2017
6Yr, 2017
7The Weather Channel, 2017
20158. Currently, the visualization is difficult to understand and the user may interpret the information in a way which is not intended by the developers. Figure 1 shows the current visualization presented on SMHI’s website.
Figur 1: SMHI’s current visualization
1.1 Purpose
The purpose of this study is to analyze the current visualization of the meteorological data from SMHI’s website, where the positive and negative features of the visualization will be evaluated. A protoype will be developed in agreement with this analysis as well as research based on literature. This prototype should address the issues with the current visualiza- tion and try to provide an improvement in user experience. This might mean an interactive website, where the user can modify the way the information is presented.
1.2 Problem Statement and Scope
The purpose motivates the following problem statements:
• How can an analysis of SMHI’s current meteorological visualization of the temperature in Stockholm from 1756 to 2015, as well as current research within human-computer interaction and usability, be used as a basis to develop a user-friendly visualization of this data?
• How can existing web development tools be used to create this visualization?
The implementation of the visualization includes the daily average temperature in Stockholm from 1756 to 2015. Any relevant results or conclusions of the project are therefore best applied to similar meteorological data, such as observed temperatures elsewhere or for another time span.
8SMHI, Stockholms temperaturserie, 2016
2 Background
2.1 Web Programming
An introduction to web programming and tools needed to create websites.
2.1.1 Client-Server
In order for users to see the content of a website, there needs to be a network architecture to transfer data to the user. The client-server model is a common form of network architecture.
It is used to communicate data over networks, for example on the World Wide Web, which is the most famous network of networks. A server can be described as a system which collects requests from one or several clients in order to for the client to execute specific tasks. Based on these requests, the server then performs some action on relevant data and sends the demanded data back to the client9. For example, a client task could be to visualize the monthly mean temperature of a specific year. The client then sends a request to the server, which in turn computes the mean temperature, and sends this information back to the client.
Each server has an IP address which is unique to that specific network. This address consists of a set of numbers ranging from 0 to 255, and is used to ensure that the data reaches its correct destination. The server also has a unique IP name, called the domain name, which consists of letters and maps to a specific IP address. This makes it easier for users to find a website, for example SMHI.se10.
If an error occurs during data transfer from the server to the client, the user may not receive all the expected information. This could for example be that not all temperature values are delivered correctly to the user’s browser, which means only some of the desired information is shown. A common way to handle this error is to reload the website in the browser, hence resending the data from the server to the client and hoping the information will reach its destination.
2.1.2 Web Programming Languages
In order to create and design web pages, several tools are needed. The foundation of a website is typically a published online document written in the markup language HTML. The markup is used to create the content and structure of a website using so called tags. These describe the different elements of the content, such as headings, paragraphs, lists, tables etc11. Tags can also be included within other tags, in many levels, which helps developers create the structure of the web page. Each element can also be given a name, an id and a class, in order to label and separate it from other elements in the document. HTML also allows developers to include images, videos, audio, and other graphical components directly in the document, which are then presented to the user once the document is loaded into a web browser.
9Hanson, M. David. Server Management, 2000, p 3.
10Ibid, p 6.
11World Wide Web Consortium, HTML CSS, nd.
When the HTML document is opened in a web browser, it is converted into a document object12. It can be described as the root of a tree, where the contents of the document are the branches and leaves. The more interweaved the elements are, the further out in the tree branches they are. The Document Object Model defines the logical structure of the entire document and the way it is presented in the browser13. It helps developers build online documents and manipulate their structure. This is because the structure of the HTML document is quite similar to the structure of the Document Object Model14. When writing the HTML document, it is therefore easy for developers to envision how the Document Object Model will be structured and how the web page will look in the browser.
The appearance of the web page is usually designed using another tool called Cascading Style Sheet, or CSS15. The CSS describes the visual part of a web page, meaning the layout, colors, fonts, and other design aspects16. It is a useful design tool since it separates the data from the layout of the website, and facilitates reuse of program code, which simplifies updates of the data content. It is also favorable since it is supported by almost all browsers today17. This means the web page will look almost identical, regardless of the user’s platform or browser.
With CSS, the developer selects different HTML elements based on their name, id or class, and gives them certain styling properties. In CSS, the term “box model” is used to describe the different parts of an HTML element18. The four parts are the content, padding, border and margin. It is the content which holds the text and images of an element, and the border is used to create a border around the content. The padding and margin are used to add space outside the content and the border respectively. For each HTML element, it is possible to style several of its attributes, such as color, size and position19. These design features are set when the web page is loaded in the browser, meaning the elements’ styling properties are static. The image below shows a representation of the box model of an element, and the styling properties it carries. The example element has no padding or border, but it does have an 8 pixel wide margin around it.
Figur 2: CSS of HTML element Figur 3: Box model of HMTL element In order to create a dynamic and interactive website, the scripting programming language JavaScript is used20. It is useful because it is executed by the browser immediately when the
12W3 Schools, The HTML DOM Document Object, nd.
13World Wide Web Consortium, What is the Document Object Model?, nd.
14Ibid.
15World Wide Web Consortium, HTML CSS, nd.
16Ibid.
17World Wide Web Consortium, Cascading Style Sheets, nd.
18W3 Schools, CSS Box Model, nd.
19W3 Schools, CSS Syntax and selectors, nd.
20World Wide Web Consortium, JavaScript Web APIs, nd.
web page is loaded. It can also be triggered when the user interacts with elements on the web page. JavaScript also allows modification of the web page content without reloading the HMTL document21. This could be adding, removing or styling elements on the web page, for example when the user interacts with buttons. Together, HTML, CSS and JavaScript are the basis behind a fully-functioning website.
2.1.3 JSON
If a web page consists of large amounts of data content, it is useful to store the data in external files. The web page then loads the data with the help of JavaScript. The data must be stored in a format that is readable by JavaScript, in order for it to be correctly presented in the page content. One of the most used data formats is JSON, JavaScript Object Notation. It is a lightweight and simple format for both computers to generate and parse, and for humans to read and write. This is because it consists of key-value pairs separated by colons. The key represents an attribute of the object, and the value represents the attribute’s value. See the example below.
1 2
3 {
4 " y e a r ": 1756 ,
5 " m o n t h ": 1 ,
6 " day ": 1 ,
7 " t e m p ": 1 0 . 4
8 }
Figur 4: JSON Object
JSON is also a native data form for JavaScript, which means it is the file format that Java- Script is designed to work with. These features make JSON one of the leading data formats to use for exchanging and presenting data in web applications22.
2.2 Web Visualization
An introduction to tools needed in order to create web visualizations.
2.2.1 Data Driven Documents
D3, Data-Driven Documentation, is a JavaScript library used to create dynamic and inte- ractive visualizations of data on the web. It is used together with other web-programming languages such as HTML and CSS23. In order to create dynamic and interactive represen- tations of the website content, D3 binds data to elements in the Document Object Model.
When users interact with the elements and the bound data is changed, D3 uses data-driven
21Ibid.
22Peng, D. and Xu, W. Using JSON for Data Exchanging in Web Service Applications
23Data-Driven Documents, 2015
transformations to modify and shape the elements accordingly. These transformations anima- te the changes in the bound data, which makes it easier for users to understand and interpret the data adjustments.
D3 includes various components that are useful for visualizing meteorological data. It is possible to create numerous different chart types, tables and even geographical maps. On the same web page, developers can design and include multiple different visualizations of the same data. D3 also has components to group data based on values such as dates, temperatures and locations. It is also possible to perform statistical computations on the data, for example sample maximum, minimum and average. Once the data has been computed, developers may also add axes and labels to their visualizations, in order for viewers to read and understand the data representations more easily. Almost all elements of the visualizations are interactive, and users can affect the presented data themselves24.
2.2.2 Graphical Components on the Web
In order to visualize data on the web, websites require some form of graphic component. One widely used element is SVG, Scalable Vector Graphics. It is an XML-based image format used to describe vector graphics. This means it is built for interaction and is therefore easily programmable in visualizations. It is also designed to work with other languages such as CSS and JavaScript25. One of the main benefits of SVG is the ability to scale the size of the representations without any loss in image resolution. The SVG images can also be dynamic and interactive, which means the different graphical objects of the image can react to interactions by the user26. It is also possible to present data with the help of HTML’s included tool Canvas. It displays data by drawing pixels on the web page. This means the images drawn on the canvas are not easily programmable. It is, however, possible to receive the same visualization as when using SVG, it only requires more programming27. Therefore, SVG is a better image format to use when the visualized data may be altered.
2.3 Information Perception
Research about perception within human-computer interaction, relevant to this project.
2.3.1 Visual Information-Seeking Mantra
The Visual Information-Seeking Mantra describes how data should be represented to users in the most user-friendly way. The mantra “overview first, zoom and filter, then details-on- demand” is widely accepted as a visualization approach. The overview will give the users a broad and general approach to the data, while zoom and filter will give the users a possi- bility to filter out irrelevant information. Details-on-demand provides the users with all the
24D3 API Reference, 2016
25W3Schools, HTML5 SVG and W3Schools, About SVG
26HTML Goodies, HTML5 Canvas vs. SVG: Choose the Best Tool for the Job, nd.
27W3Schools, HTML Canvas Tutorial, nd.
necessary information in case the users wish to expand their knowledge28. This overview could for example be showing the temperatures for all the years in the data, zooming and filtering might be done by narrowing the time span of the data or filtering out specific months in the time span. The user may receive details-on-demand by interacting with buttons and other elements which may present additional information about the data. The implementa- tion of Visual Information-Seeking Mantra is made possible with the programming language JavaScript, because of its dynamic properties.
2.3.2 Data Types and Color in Visualization
Color in visualization refers to the study of how to use colors in order to create suitable presentations, and is a highly important area within visualization. This is because certain colors and color scales can have different meanings to different people. Based on the properties of the data, research methods can be used in order to create relevant visualizations of it. One thorough study is the publication There is More to Color Scales than Meets the Eye: A Review on the Use of Color in Visualization29. It describes theories regarding how different data types affect the use of colors and color scales in visualizations.
An important point when visualizing data that the study mentions is to consider the type of the data, meaning what kind of features it holds. Data types can be divided into four groups;
nominal data, ordinal data, ratio data and interval data. For nominal data, each value is used only to label the specific data variables, and mathematical operations on this value cannot be done. Ordinal data, on the other hand, specifies the order of the values, but does not take into consideration that the difference between the elements might not be equal. An example of this might be a sadness-scale ranging from 1 to 3 where 1 is “happy”, 2 is “sad”
and 3 is “very sad”. The difference between happy and sad would probably be deemed larger than the difference between sad and very sad. This is not an issue for interval data, where each value is represented in order and the distance between each and every value is equal.
Ratio data carries the properties of interval data with the addition of an absolute zero30. The meteorological data used in this project is of the type interval data.
The study also mentions various desired properties for color scales when it comes to creating suitable visualizations. One important factor is that the order of the colors which represent data values correspond to the order of the values31. For temperature scales, this could mean using the concept of cold and warm colors and blending them proportionately to create scales from cold to hot temperatures. A frequent connotation when visualizing temperatures is that high temperatures are presented in red and low temperatures in blue32.
Another aspect to consider is whether the colors should be mapped to one or multiple varia- bles of the data. This is because there are different guidelines for univariate and multivariate scales respectively. The meteorological data visualized in this project has one variable, the
28Shneiderman, Ben. The Eyes Have It: A Task by Data Type Taxonomy for Information Visualizations, 1996, p.2
29Silva S., Madeira J. and Sousa Santos B. There is More to Color Scales than Meets the Eye: A Review on the Use of Color in Visualization
30Ibid, p3-4 and DeLand, P and Chase W. Statistics Data: Entry I.J, types of data: nominal, ordinal, interval, and ratio scales, 1990, p.155
31Silva S., Madeira J. and Sousa Santos B. There is More to Color Scales than Meets the Eye: A Review on the Use of Color in Visualization, p. 1
32Ibid, p. 5
temperature, which affects the values of the color scale. For these univariate color scales, the most used type is the so called spectrum scale33. It goes through the colors of the rainbow in order of the colors’ wavelengths: first red, then orange, yellow, green, blue and violet. Ho- wever, one disadvantage with this scale is that users may find it difficult to see an intuitive ordering in the colors. This can be both because they don’t know the distribution of wave- lengths in the rainbow spectrum, and because the colors at the beginning and end of the spectrum, red and violet, are quite similar34. In order to minimize this problem, it is helpful to use spectrum color scales limited to the red-blue range, since it allows better contrast of the extreme values35.
Another possible problem with the spectrum scale is that the quite eye-catching color yellow is in the middle of its range. Users may therefore direct their attention to the intermediate values, rather than the extreme, or they may perceive the middle values as being at any end of the scale. To reduce this issue, a double-ended color scale can be used. It is formed by joining two monotonically increasing scales at a common endpoint36. For meteorological data, one can for example join a scale from grey to red and a scale from grey to blue, in order to create a scale from red to grey to blue.
33Ibid, p. 2
34Silva S., Madeira J. and Sousa Santos B. There is More to Color Scales than Meets the Eye: A Review on the Use of Color in Visualization, p. 2
35Ibid.
36Ibid.
2.4 SMHI’s Current Visualization
SMHI’s current visualization is a static image which shows the yearly mean temperatures in Stockholm between 1756 and 2015. The x-axis represents the years, while the y-axis represents the temperatures. A red bar means the temperature is above the total average temperature of these 260 years, and a blue bar means the temperature is below the total average tempe- rature. There are two black lines visible in the chart. The thinner line represents the mean value temperature over a period of 10 years, and the thicker line represents the mean value temperature over a period of 30 years. The visualization does not contain any chart legend to describe what the two black lines represent. Therefore, a legend has been created to help the readers of this report interpret the data.
Figur 5: SMHI’s current visualization
Figur 6: Chart legend for SMHI’s visualization
2.5 The Meteorological Data
The meteorological data from SMHI’s website is represented as a text file. Each row, which represents one day, contains seven columns separated by whitespace. The first columns show the date, as year, month and day respectively. They are followed by three columns which each contain a temperature value. The first is a daily mean temperature according to observations.
However, this data is incomplete because it lacks values for some days. Therefore, the next column contains values where the data has been homogenized and the temperature gaps have been filled in with data from Uppsala. The final value shows temperatures after adjustments due to some supposed warm bias of summer temperatures. The last column states where the data has been extracted, either Stockholm or, when lack of values, Uppsala.
3 Method
3.1 Research
At first, research about the importance and motivation behind visualization was conducted.
The theory behind the Visual Information-Seeking Mantra37 was used as a basis for the structure of the visualization. Based on the properties of D3, as well as the requirements on the functionalities and design of the new visualization, it was decided that the prototype for the new visualization should be developed using D3 and SVG. This was followed by an analysis of the current representation of the specific meteorological data on SMHI’s website.
The analysis lead to several ideas about how to present the data using the chosen technical tool, D3.
3.2 Prototype
The results from the analysis were used as a foundation for the first sketch of the plan- ned visualization. With a first idea of the visualization ready, the meteorological data was then downloaded from SMHI’s website. A Python script was created in order to generate JSON-objects from that data, thus facilitating the use of this data on the website. The daily temperatures were selected from the column which contained the adjusted temperatures as well as complementary data from Uppsala, since this generates a complete set of data. From there, the development of a first prototype took place using HTML, CSS and D3. All compu- tations of mean temperatures are computed on the client-side by JavaScript, meaning that there is no server to handle these computations.
3.3 User Testing
The prototype was user tested twice by students from the computer science program at KTH, and the same testers were used for both iterations. The participants were asked to perform certain tasks on the web application. Their actions were observed and their feedback was recorded. The obtained results were then used as the basis for a discussion about the advantages and disadvantages of the new way of presenting the data. and the prototype was further updated based on the results from the user testing. From there, the final prototype was user tested in order to find out if the alterations provided an improved visualization.
37Shneiderman, Ben. The Eyes Have It: A Task by Data Type Taxonomy for Information Visualizations, 1996, p.1-2
4 Results
This section presents the results from the analysis of SMHI’s current visualization. This is followed by a description of the functionalities of the first prototype, as well as an overview of the implementation and the user testing. The same information as mentioned above is also described for the final prototype.
4.1 Analysis of SMHI’s current visualization
There are both positive and negative aspects of the current visualization on SMHI’s website.
One quite ambiguous thing is the horizontal line in the middle of the chart. Since the bars above the line are red, while the bars under the line are blue, the user might perceive the line as the y-value zero, which would mean the red bars represent positive values and the blue bars represent negative values. This is also a quite common way to represent temperatures above and below zero degrees38. However, by reading the information about the chart provided on the website, it becomes clear that the line actually represents the mean temperature value for the entire range, 1756 to 2015. The ambiguity regarding the red and blue bars could be reduced by moving the line down to the x-axis, where the temperature is zero, and therefore representing all the bars in the same manner and color.
The black curves represent the mean value temperature over a period of either 10 or 30 years.
This is a good way to get an overview of the temperature. However, combined with the red and blue bars which vary a lot in value, they seem to not be based on the bars. There is also no description of how the values that form the curves were calculated. The visualization of the black lines could be improved by having a short description of how the values were calculated and why they are important. This could help the user interpret the information and get a better overview of the chart.
However, there is no ambiguity in the visualization when it comes to the unities represented on the x- and y-axis. The year and temperature are clearly marked out in the x- and y-axis, where dotted squares represent a 1 degree difference in y-axis and a 10 year difference in x-axis.
Since the visualization is only an image, there is no possibility for user interaction with the data. It is not possible to click certain parts of the chart, nor to filter for a specific range of years. The user can zoom the image in a web browser in order to make it easier to read the information in the chart. The browser then makes it possible to pan the image when it does not fit the browser window, which provides the user with the ability to explore the full image in detail. However, this is only a zoom which scales the static image, and it does not change the current range of the interval on the x-axis. This means the user does not receive much more information by zooming than without zooming. It is simply a way to enlarge the details in the image.
When users view SMHI’s visualization, they may want more information than what the image provides. For instance, seeing the monthly average temperatures, instead of yearly,
38Silva S., Madeira J. and Sousa Santos B. There is More to Color Scales than Meets the Eye: A Review on the Use of Color in Visualization, p. 5
might be preferable in order to obtain more information from the data. The temperature values must be obtained from their respective bar heights in the chart. Therefore, different users may receive uncertain and varying values. Other functionalities that might be desirable are comparing the temperatures of specific years, or viewing more detailed information about the temperatures of a certain year. None of this information can easily be extracted from SMHI’s current visualization.
4.2 Functionalities of the First Prototype
The new visualization includes functionalities which enable the users to receive the desired information that they were not easily able to receive in SMHI’s visualization. It mainly consists of an interactive bar chart which presents mean temperatures computed for different time intervals, such as yearly and monthly. With the help of JavaScript and D3, the bar chart can easily be modified by the user with certain selections and buttons. The image below shows a screenshot of the prototype.
Figur 7: Overview of the web page
At first, the yearly mean temperature is presented, ranging for all years from 1756 to 2015, where each bar represents one year. The axes are customized to fit the range of the years and the temperatures. When the user hovers with the mouse over a specific bar in the chart, a tooltip is displayed, containing more detailed information about the time interval represented by the specific bar. The color choices were based on the research about colors in visualization presented in section 2.3.2 Data Types and Color in Visualization. The bars are color coded based on their values, where red represents positive temperatures and blue represents negative temperatures. This feature remains for all different selections and filters of data. The selected bar also changes color when it is hovered, to clearly indicate which bar the user is currently hovering. See image below.
Figur 8: Yearly mean temperatures from 1756 to 2015. Tooltip when hovering over 1864
When the user clicks on a specific bar, the chart is transitioned to show the monthly mean temperatures for the selected year. Se image below.
Figur 9: Monthly mean temperatures, 1864
The user also has the ability to filter the mean temperatures in the range from 1756 to 2015. By the selection from a drop-down menu, the user may filter to see the monthly mean temperature for a specific month, every year. For example, the visualization may show the mean temperature in January every year from 1756 to 2015. See image below.
Figur 10: Mean temperatures in January, 1756 to 2015
Finally, it is also possible to compare the temperatures for two selected years. This is done
with a selection from two drop-down menus, one for each preferred year to compare. The comparison is shown in a pop-up, which is displayed in front of the previously mentioned chart. In this chart, the user can hover with the mouse over a specific bar in the chart to view a tooltip which displays more information about the specific month.
Figur 11: The pop-up which compares monthly mean temperatures
4.3 Implementation of the First Prototype
The application visualizes the meteorological data by binding the data to elements in the Document Object Model, with the help of D3. When users interact with the content, various functions are triggered which modify the visualization.
The prototype includes various methods to modify the meteorological data presented. The- refore, several computations on the data extracted from SMHI’s website are needed in order to extract the specific data that the user requests. JavaScript and D3 include numerous func- tions to filter and group data, which have been used in the implementation of the prototype.
These functions are triggered by user input, and the application performs the computations on the client-side based on request. D3 is also used to create different elements in the chart, such as the axes and the bars.
JavaScript’s filter39 function is used to extract the temperatures of the specific years or months demanded by the user. The application then groups the daily temperatures by the chosen time span, and computes the mean values for each group. The grouping and mean value calculations are performed with D3’s nest40 function.
1
2 // E x t r a c t the t e m p e r a t u r e s for the s p e c i f i c m o n t h
3 var d a t a m o n t h = d3.n e s t()
4 .key(f u n c t i o n(d) {
5 r e t u r n +d.y e a r;
6 })
7 .r o l l u p(f u n c t i o n(d) {
8 r e t u r n d3.m e a n(d, f u n c t i o n(g) {
39Mozilla Developer Network, Array.prototype.filter()
40Data-Driven Documents, API Reference - nest, 2016.
9 r e t u r n g.adj;
10 }) ;
11 }) .e n t r i e s(n e w D a t a) ;
Figur 12: JavaScript’s filter function, and D3’s nest function
The axes in the chart are customized to fit the height and width of the SVG chart. This is implemented with D3’s function scaleLinear41, which scales the height and width of the axes to the fit the range of the height and width of the SVG chart. D3’s domain42 function is used to set the minimum and maximum values of the axes to the respective minimum and maximum of the current temperature values and the time span. This means the users see only the relevant temperature span and time span, based on their selections. The domain function also maps the temperature values and the years or months to the correct location along each respective axis.
1
2 /* U p d a t e x and y s c a l i n g */
3 var i n n e r X = d3.s c a l e L i n e a r() .r a n g e R o u n d([0 , i n n e r W i d t h]) ; 4 var i n n e r Y = d3.s c a l e L i n e a r() .r a n g e R o u n d([i n n e r H e i g h t, 0]) ; 5
6 /* D e f i n e the x and y d o m a i n s */
7 i n n e r X.d o m a i n([0.5 , 1 2 . 9 ] ) ;
Figur 13: D3’s scaling and domain
The bars in the chart are elements of the SVG chart, and their attributes can be altered by various D3 functions in order to change their design. These modified attributes include for example position, height, width and color. The values for the attributes are based on the values of the temperature. For example, if the temperature value is positive the color is set to red, and if the temperature is negative the color is set to blue. It is the “fill” attribute which stores the color of each bar. See the code example below, where “d.value” represents the temperature value.
1 .s t y l e(" f i l l ", f u n c t i o n(d) {
2 if (d.v a l u e < 0) {
3 r e t u r n " s t e e l b l u e ";
4 } e l s e {
5 r e t u r n " red ";
6 }
7 })
Figur 14: Coloring the bars based on the temperature value
When the users modify their selections on the web page, D3’s transition43function is triggered in order to animate the changes of the elements’ attributes. These elements include the bars,
41Data-Driven Documents, API Reference - scaleLinear, 2016.
42Data-Driven Documents, API Reference - domain, 2016.
43Data-Driven Documents, API Reference - transition, 2016.
the axes and the tooltips. The durations of the transitions are set with D3’s duration44 function, where the developer can enter a specific amount of milliseconds. The example below shows the effect when the user no longer hoovers with the mouse over a bar. In this event, called “mouseout”, the duration of the transition is 500 milliseconds, and the tooltip’s opacity is set to 0, meaning it will not be visible in the chart anymore.
1
2 .on(" m o u s e o u t ", f u n c t i o n(d) {
3 t o o l t i p.t r a n s i t i o n()
4 .d u r a t i o n( 5 0 0 )
5 .s t y l e(" o p a c i t y ", 0) ;
6 }) ;
Figur 15: Transition to set the tooltip’s opacity, with a duration of 500 milliseconds
The pop-up is implemented as an HTML box element, called a “div”. With CSS, its height and width are set automatically to 50 percent of the browser window’s height and width. In order to show and hide the pop-up, CSS is used to set its display style attribute, to either
“block” or “hide” respectively. For example, when the user clicks the black area around the pop-up, called “fade”, a function is triggered which sets both the pop-up’s display attribute and the black area’s display attribute to “none”.
1 f u n c t i o n h i d e P o p u p() {
2 c o n s o l e.log(" h i d e P o p u p ") ;
3 d o c u m e n t.g e t E l e m e n t B y I d(’ p o p u p ’) .s t y l e.d i s p l a y=’ n o n e ’; 4 d o c u m e n t.g e t E l e m e n t B y I d(’ f a d e ’) .s t y l e.d i s p l a y=’ n o n e ’;
5 }
Figur 16: Function to hide the pop-up
4.4 User Testing of the First Prototype
There were both positive comments as well as suggestions for improvements concerning the layout and design of the visualization. The participants all thought it was obvious that the red and blue colors of the bar chart represented positive and negative temperatures. This also made it easy for them to find the zero-line and the separation between positive and negative temperatures.
At first sight, however, the participants found the design of the website to be quite plain and simple. The descriptive text and the interactive elements were left aligned, giving the website an unbalanced impression. Suggestions to improve the layout was to center the content and shorten the text. Another suggestion from the participants was the implementation of a Back button or Reset button, to either return to the previous filterings of the chart or to reset the filtering settings. A small part of the user testers found the Update button redundant, and wanted the chart to update automatically when a filter selection is chosen.
44Data-Driven Documents, API Reference - duration, 2016.
There were also some problems with the actual bar chart. Firstly, the chart did not contain information about the units of the axes, meaning that uncertainty arose regarding what the chart actually visualized. Secondly, the amount of bars resulted in overwhelming information for the users, and it was difficult to interpret the chart’s temperatures. This might be because the temperatures vary quite a lot during these 260 years, and the bars form a fairly disconti- nuous curve. The participants suggested a function to filter temperatures for a selected time span, to reduce the overwhelming information in the chart.
Another common issue was that the participants did not realize they could click on the bars in order to view the monthly mean temperatures of that selected year, even though it clearly said so in the descriptive text. Furthermore, the users did not understand that they could hover over the bars and had trouble clicking the bars, due to the fact that the bars were too thin.
The prototype received both positive and negative feedback concerning the pop-up. All users found it easy to understand that they should click outside of the pop-up area in order to close the pop-up. There was, however, uncertainty regarding which years and months the bars represented, since there was no descriptive text in the pop-up. It was not clear that the two different shades of red and blue represented the temperatures of the two compared years. Another issue was that the distance between each pair of bars was too little, resulting in confusion concerning which bar belonged to which month.
4.5 Functionalities of the Final Prototype
The results from the user testing provided a foundation for the second, and final, version of the prototype. A majority of the issues which existed in the first prototype were addressed and solved according to the feedback from the participants. The focus of the new version of the prototype was to improve the most frequent problems of the previous prototype, in order to achieve the most user-friendly visualization. The image below shows a screenshot of the final prototype.
Figur 17: Overview of the web page
The chart’s design and functionality have been slightly modified. Although the layout remains quite plain and simple, the descriptive text and interactive elements are now centered and the functions are moved up to be placed above the bar chart. The y-axis was also given a label of Celsius to avoid confusion regarding the unit of measurement. Functionality was added to automatically update the chart when the user chooses a filter selection of the years or months in the chart. The Update button was therefore redundant and hence, it was removed. A functionality which a majority of the participants asked for was a Back button which saves the user’s earlier filtrations of the data in the chart. This was implemented in the final prototype, hence giving the users the possibility to return to the previous chart settings.
The new prototype also includes the possibility to filter the temperatures for a selected time span, which is done with the selection from two drop-downs. The user can chose one year from each drop-down, which represent the minimum and maximum values of the time span.
This filtration automatically updates the chart, since the Update button has been removed.
When the time span is selected to include fewer years, the width of the bars increase. In accordance to science regarding the use of colors in visualization, a double-ended color scale was used to represent the temperature values, ranging from blue to grey to red. Temperature values close to the zero line are represented by grey, the lowest temperature values by blue and the highest temperature values by red.
Figur 18: Mean temperatures in March, 1900 to 1950
The pop-up also received some criticism which required addressing. It now contains a chart legend that shows which colors represent which of the two chosen compared years. The colors of the bars have been altered in order to create a more visually appealing chart. The distance between each pair of bars is now greater, to reduce the confusion regarding which bar belongs to which month.
Figur 19: The pop-up which compares monthly mean temperatures, 1900 and 1950
4.6 Implementation of the Final Prototype
The functionality to automatically update the chart on user input is implemented by adding the attribute onchange to the selections of years in order to filter for a specific time span. The value given to each element’s attribute is the specific function to be executed when the user changes the time span. This functionality is added in the HTML document, and is shown in the image below.
1 <! - - S e l e c t y e a r s to f i l t e r f r o m and to - - >
2 <s t r o n g c l a s s=" m a r g i n L e f t 2 0 ">From</strong>
3 <s e l e c t c l a s s=" m a r g i n L e f t 1 5 " id=" t i m e S p a n Y e a r 1 " o n c h a n g e=" u p d a t e D a t a () "> </
select>
4 <s t r o n g c l a s s=" m a r g i n L e f t 1 5 ">to</strong>
5 <s e l e c t c l a s s=" m a r g i n L e f t 1 5 " id=" t i m e S p a n Y e a r 2 " o n c h a n g e=" u p d a t e D a t a () "> </
select>
Figur 20: Time span selections with onchange attributes
The Back button is implemented by saving all of the users’ selections. These are stored in a list that keeps track of the order in which the users have chosen to filter the chart. When a user wants to return their previous filter settings and clicks the Back button, a back function is triggered and the chart is updated according to the last stored filtration in the list.
1 // S t o r e f i l t e r s e t t i n g s in h i s t o r y l i s t
2 v a r H i s t o r y.p u s h({" m o n t h " : d o c u m e n t.g e t E l e m e n t B y I d(’ m o n t h S e l e c t i o n ’) 3 .s e l e c t e d I n d e x,
4 " f r o m " : d o c u m e n t.g e t E l e m e n t B y I d(’ t i m e S p a n Y e a r 1 ’) .value, 5 " to ": d o c u m e n t.g e t E l e m e n t B y I d(’ t i m e S p a n Y e a r 2 ’) .v a l u e 6 }) ;
Figur 21: Store filter settings in a history list
1 // U p d a t e the bar c h a r t a c c o r d i n g to the p r e v i o u s f i l t r a t i o n 2 f u n c t i o n b a c k() {
3 if (v a r H i s t o r y.l e n g t h > 1) {
4 v a r H i s t o r y.pop() ;
5 var p a r a m s = v a r H i s t o r y[v a r H i s t o r y.length- 1 ] ;
6 d o c u m e n t.g e t E l e m e n t B y I d(’ m o n t h S e l e c t i o n ’) .s e l e c t e d I n d e x = p a r a m s.m o n t h
;
7 d o c u m e n t.g e t E l e m e n t B y I d(’ t i m e S p a n Y e a r 1 ’) .v a l u e = p a r a m s.f r o m; 8 d o c u m e n t.g e t E l e m e n t B y I d(’ t i m e S p a n Y e a r 2 ’) .v a l u e = p a r a m s.to;
9 if (p a r a m s.m o n t h == 0) {
10 s o r t B y Y e a r() ;
11 } e l s e {
12 s o r t B y M o n t h(p a r a m s.m o n t h) ;
13 }
14 }
15 }
Figur 22: The back function
The double-ended color scale of the bars is implemented with the help of D3’s element called linearGradient. The scale is developed by creating two separate scales, one from red to grey, and one from grey to blue. This is to create a smooth transition between the colors representing negative and positive values. The bars are then given one of the two color scales, depending on whether the bar represents a positive or negative temperature value. The image below shows how to create a linear color scale from red to grey.
1 /* C r e a t e a l i n e a r g r a d i e n t */
2 var g r a d i e n t 1 = svg.a p p e n d(" d e f s ") 3 .a p p e n d(" l i n e a r G r a d i e n t ") 4 .a t t r(" id ", " g r a d i e n t 1 ")
5 .a t t r(" x1 ", " 0% ")
6 .a t t r(" y1 ", " 0% ")
7 .a t t r(" x2 ", " 0% ")
8 .a t t r(" y2 ", " 1 0 0 % ")
9 .a t t r(" g r a d i e n t U n i t s ", " u s e r S p a c e O n U s e ")
10 /* Add the c o l o r red to one end */
11 g r a d i e n t 1.a p p e n d(" s t o p ")
12 .a t t r(" id ", " s t o p 1 ") 13 .a t t r(" o f f s e t ", " 0% ") 14 .a t t r(" stop - c o l o r ", " red ")
15 .a t t r(" stop - o p a c i t y ", 1) ;
Figur 23: Linear color scale from red to light grey
1 .s t y l e(" f i l l ", f u n c t i o n(d) {
2 if (d.v a l u e < 0) {
3 r e t u r n " url (# g r a d i e n t 2 ) ";
4 } e l s e {
5 r e t u r n " url (# g r a d i e n t 1 ) "
6 }
7 })
Figur 24: The bars are given one the of the color scales depending on their value
