Urban SIS D4.4 Visualisation report

Size: px

Start display at page:

Download "Urban SIS D4.4 Visualisation report"

Justin White
5 years ago
Views:

1 Urban SIS D4.4 Visualisation report Issued by: Swedish Meteorological and Hydrological Institute Date: 29/12/2016 Official deadline: 31/12/2016 REF.: C3S_441 Lot3 Urban SIS D4.4

2 Copernicus Climate Change Service This document has been produced in the context of the Copernicus Climate Change Service (C3S). The activities leading to these results have been contracted by the European Centre for Medium-Range Weather Forecasts, operator of C3S on behalf of the European Union (Delegation Agreement signed on 11/11/2014). All information in this document is provided as is and no guarantee or warranty is given that the information is fit for any particular purpose. The user thereof uses the information at its sole risk and liability. For the avoidance of all doubts, the European Commission and the European Centre for Medium-Range Weather Forecasts has no liability in respect of this document, which is merely representing the authors view.

3 Copernicus Climate Change Service Urban SIS D4.4 Visualisation report Editors: VeryDay (Ellen Wheatley, Design research) VeryDay (Anders Örtengren, Designer) VeryDay (Anders Arnqvist, Designer) (David Segersson, WP4 leader) (Lena Strömbäck, WP7 leader)

4 Copernicus Climate Change Service Contents: Contents:... 3 Introduction... 1 Design method... 1 Workshops and interviews... 1 Results... 1 Search for indicators... 1 Identifying relevant data... 2 Saving and sharing interesting views... 4 Exporting data... 4 Further work... 4 Appendix1: User journey in the Urban SIS portal... 5

5 Copernicus Climate Change Service Introduction This report summarizes the work on interface design and visualisation for the data portal in WP4 lead by Veryday. During the work input has been collected via workshops and end user interviews to create guide lines for the design of the web portal. The guidelines consist of a user guide that describes how the user can search and download Urban SIS data. In this report we start with a brief overview of the used method and summarize some of the main features of the design. The full design journey is presented in Appendix A. Design method In order to understand and establish the relevant data and functionality requirements, as seen from the end user perspective a number of qualitative end user interviews were conducted prior to initiating the design phase. The interviews were explorative and generative in nature. The synthesized outcome set the scope for the UX design and system requirements. Workshops and interviews The work has been performed using and iterative approach where workshops and interviews has been used as input to the design process. The following steps have been performed to collect input to the design proposal for the interface. Date Activity Participants Description Dec 17 th Workshop End users from Urban SIS workshop with Stockholm end 2015 Stockholm users to get a first introduction to the problem Feb 20 th 2016 Workshop End users from Bologna space. Urban SIS workshop with Bologna end users to get a first introduction to the problem space. Apr 22 nd 2016 Workshop, Veryday Internal workshop between WP4 and WP7 to discuss general user and data requirement and review portals with similar data content. May 1st Report First mock-up of the user journey May 12 th 2016 Interview end users Review of the mock-up based on the user s need. May 26 th 2016 Interview Stockholm Vatten end user Review of the mock-up based on the user s need. May 26 th 2016 Interview WSP end user Review of the mock-up based on the user s need. June 2016 Report Second version of the mock-up based on user interviews. Sep 1 st 2016 Workshop, Veryday Internal workshop between WP4 and WP7 to discuss and prioritize functionality Oct 2016 Report Final version of the mock-up. Results The design resulting from this workshop is presented in Appendix A. In this section we summarize some of the main features. Search for indicators There are a large numbers of indicators produced for each city within Urban SIS. It is important that the user easily gets an overview of indicators. Therefore the design proposes to present Urban SIS D4.3 Indicators for urban assessments, C3S_441 Lot3 Urban SIS, D4.3 1

left) Once a main indicator has been selected the a menu will appear where the user can choose details about which statistics of the indicator he wants to visualise on the map at the top or as a

6 Copernicus Climate Change Service indicators as an hierarchy, based on the hierarchy defined in the indicator report D4.2. In this hierarchy the user can choose based on category and, in addition, there is a possibility to search indicators by writing, where matching items in the hierarchy will be highlighted (figure 1 left) Once a main indicator has been selected the a menu will appear where the user can choose details about which statistics of the indicator he wants to visualise on the map at the top or as a graph at the bottom. Identifying relevant data Figure 1: Selection of indicators. One main use case that has been identified for the portal is to find an event of interest and then select a subset of data (time and space) based on this event. In the design, this is accomplished by allowing the user to show time series data for selected points and use this information to identify events and select which time periods to show on the portal. Figure 2 shows the design for this and figure 3 shows how it is currently implemented in the portal with real data for a rain event. Urban SIS D4.3 Indicators for urban assessments, C3S_441 Lot3 Urban SIS, D4.3 2

Figure 3: Detail from how this functionality is implemented in the portal with

7 Copernicus Climate Change Service Figure 2: Showing time series data as a basis for selecting interesting events for further discovery or download. Figure 3: Detail from how this functionality is implemented in the portal with real precipitation data. Urban SIS D4.3 Indicators for urban assessments, C3S_441 Lot3 Urban SIS, D4.3 3

Copernicus Climate Change Service Saving and sharing interesting views To make it easy to save interesting views of the data and then continue exploring the rightmost pane contains a button for

A sample list of saved views is showed to the right in figure 4. Based on this list the user can return to any of the views, share views to other users, or remove views that are no longer interesting.

8 Copernicus Climate Change Service Saving and sharing interesting views To make it easy to save interesting views of the data and then continue exploring the rightmost pane contains a button for saving an interesting view (figure 4 left). The button saved views shows a list of all views that has been saved during the current session. A sample list of saved views is showed to the right in figure 4. Based on this list the user can return to any of the views, share views to other users, or remove views that are no longer interesting. Exporting data Figure 4: Saving and sharing views. The list of saved views is also the basis for export of data. The idea is that the user selects which of the views he wants to export and then the desired export format. The user will then export data relevant for this view, i.e. data for the selected probes and time period currently shown in the view. However, the user will be presented with details of the current export and will be able to further specify or change these settings. For instance, if export of data for an area instead of for specific points is desired, the user will be requested to specify this area. Currently we plan to support export as NetCDF and at least one additional format, probably csv or GeoTIFF. The final decision on details of data export will be taken together with end users and based on tests with actual data. Further work WP 7 has already started the process of adapting the design to the look and feel required by Copernicus C3S. A first version of the updated portal is already available on the Urban SIS web pages (See menu item Access ECV:s and indicators.) This version contains all features of the suggested design except the split window functionality. During early 2017 more data and information will be added to the portal. This will allow further user input during the spring 2017 and, based on end-user experiences in Stockholm and Bologna, modifications of the system during fall Urban SIS D4.3 Indicators for urban assessments, C3S_441 Lot3 Urban SIS, D4.3 4

9 Copernicus Climate Change Service Appendix1: User journey in the Urban SIS portal Urban SIS D4.3 Indicators for urban assessments, C3S_441 Lot3 Urban SIS, D4.3 5

11 1 / Start screen Start screen with a grayed out map of entire Europe, a hint of what the start screen could look like when all Europe is available. On top of the map a dark gray layer with prototype shortcuts to the available cities. Layer with shortcuts can later be removed. Headers/footers Branded headers and/or footers added to the interface is recommended to be kept to a minimum. In a best practice they could be used either 1) as a start page where needed information is placed along with a link that opens the interface in a popup windown, or 2) that headers and/ or footers scrolls out of screen when mouse is not in near area. Add data indicator IN MAP Search location Health > Air quality > Heat stress and discomfort Energy > Indicator > Indicator Aggriculture and green infrastructure > Indicator > Indicator Precipitation and flooding > River discharge > Soil > Precipitation Prototype shortcuts: Non-sector specific > Temperature > Snow cover Stockholm Bologna Rotterdam

12 SAVE S 3 4 TOGGLE 2 / Navigating the map The selection of Stockholm loads a map with a large view of the entire data area. Tools and information about location and map settings is found in the top 1 right interface area. Add data IN MAP Stockholm 1 2 Below the navigation options the menu contains an data information area 2 and the options to save the view 3 including current map and indicators, and to export the saved views 4 from separate menu (see page 16).

13 SAVE S 3 TOGGLE 3 / Set view The hand cursor 1 and the zoom buttons 2 can be used to navigate in the map. The search bar 3 can also be used to find the desired area and zoom level. Add data 2 IN MAP Stockholm 1

14 TOGGLE 4 / Add data The left interface area is the Add data menu, where user adds what indicator to see in the view. The menu is both an area 1 for text search in all levels of the menu, and at the same time a drop down menu allowing visual navigation and selection in the menu 2, in the number of levels needed in the hierarchy. Add data indicator 1 IN MAP Stockholm Health > Air quality > Heat stress and discomfort Energy > Indicator > Indicator Aggriculture and green infrastructure > Indicator > Indicator Precipitation and flooding > River discharge > Soil > Precipitation 2 SAVE S Non-sector specific > Temperature > Snow cover

15 IN MAP Stockholm SAVE S TOGGLE 5 / Set indicator The indicator Air temperature is added, opening a new drop down menu bar 1. The arrow 2 allows the drop down to minimized. The X 3 deletes the selection of Air temperature and returns to Add data menu (as on page 2). When first indicator is set, the option for adding a Second indicator in a split screen is added to the right 4 (for use case see page 15). Available options for the indicator is available in a number of menus and settings. A first step is to choose the deired variable of the viewed data in the drop down menu Air temperature 1 Second indicator (split screen) 4 SHOW DATA ON MAP Choose indicator variable Hourly Daily Mean FILTER DATA: Minimal Max value: 0000 LEGEND 0000 COLOUR SETTINGS: Default colour scheme OPACITY SETTINGS: SHOW DATA IN GRAPH Choose indicator variable Maximal value:

16 RESOLUTION: MONTHS PRESENT TIME SPAN: 5 YEARS, 11 MONTHS, 1 DAYS, 1 HOURS, 34 MINUTES SAVE S TOGGLE 6 / Set variable When a desired variable is set the timeline 1 and the gridded data 2 is shown. Additional settings of the data layer can be made, filtering the data visualization 3 by changing the minimal and maximal value, and the opacity of the legend 4. Air temperature Second indicator (split screen) IN MAP Stockholm SHOW DATA ON MAP Choose indicator variable FILTER DATA: Minimal value: Maximal value: 9999 The colour settings 5 opens a drop down menu showing options for user to change settings not yet specified (for example colour blindness or other colour schemes than the default one). LEGEND COLOUR SETTINGS: Default colour scheme OPACITY SETTINGS: SHOW DATA IN GRAPH Choose indicator variable AIR TEMPERATURE 1 TIMEFRAME/SCENARIO START POINT: (00.00) PRESENT : (00.00) END POINT: (00.00) Historic ( )

17 RESOLUTION: MONTHS PRESENT TIME SPAN: 5 YEARS, 11 MONTHS, 1 DAYS, 1 HOURS, 34 MINUTES SAVE S TOGGLE 7 / Minimize variable A click on the arrow 1 in the top area of the indicator menu pulls the drop down menu up, minimizing the menu, showing more of the map. 1 Air temperature Second indicator (split screen) IN MAP Stockholm AIR TEMPERATURE TIMEFRAME/SCENARIO START POINT: (00.00) PRESENT : (00.00) END POINT: (00.00) Historic ( )

18 RESOLUTION: MONTHS PRESENT TIME SPAN: 5 YEARS, 11 MONTHS, 1 DAYS, 1 HOURS, 34 MINUTES TOGGLE 8 / Probe points The information area 1 to the right allways shows specific data for a specific point on the map. By default it shows the position of the cursor (a time delay may be needed to avoid real time rendering). The bottom half of the menu 2 is a list of saved probe points manually added by the user. Clicking one of the probe points shows it s data in the information area instead of the cursor. Clicking an X beside a saved probe point deletes it from the list. Air temperature Second indicator (split screen) IN MAP Stockholm 3 Position: Data 1: Data 2: Data 3: SAVE PROBE POINT TO LIST 1 2 SAVE S A probe point is added by right clicking 3 on the map and selecting Save probe point to list. AIR TEMPERATURE TIMEFRAME/SCENARIO START POINT: (00.00) PRESENT : (00.00) END POINT: (00.00) Historic ( )

19 7 TOGGLE 9 / Time line The timeline 1 on the bottom of the interface is the time controller of the data visualization. It renders the data out of three scenarios; historic, present and future. The desired scenario is selected in a drop down menu 2 to the left, where more options easily can be added later on. The right and main 3 part of the tool is the actual time line, controlling the date and time of the data shown on the map. The blue handle 4 is the navigation tool on the time line, setting the time and date for the data shown on the map. The green start handle 5 and orange end handle 6 sets the time frame available for navigation. As default this time frame is all data available in the selected scenario. Below the time line is a text 7 presenting the present time resolution between the start and end handles. 1 Air temperature Second indicator (split screen) AIR TEMPERATURE Future ( ) Present ( ) TIMEFRAME/SCENARIO START POINT: Historic ( ) 2 3 Position: Data 1: Data 2: Data 3: SAVE PROBE POINT TO LIST (00.00) PRESENT : (00.00) END POINT: (00.00) Stockholm 5 4 RESOLUTION: MONTHS PRESENT TIME SPAN: 5 YEARS, 11 MONTHS, 1 DAYS, 1 HOURS, 34 MINUTES 6 IN MAP SAVE S

20 RESOLUTION: HOURS PRESENT TIME SPAN: 2 DAYS, 0 HOURS, 0 MINUTES 4 IN MAP Stockholm SAVE S TOGGLE 10 / Using the time line Dragging the start 1 and stop 2 handles changes the start and end time, hence the time frame and resolution of the time line, allowing the user zoom in the time line and navigate to more exact moments with the blue handle 3. Air temperature Second indicator (split screen) The grey guides in the time line is shown in months, weeks, days, hours or minutes depending the time resolution, and are also specified in the below 5. The date and time of the handles can also be typed in manually 5 by clicking their text labels. Dragging the gray line between the handles 6 moves the entire time frame on the time line. AIR TEMPERATURE Future ( ) Present ( ) TIMEFRAME/SCENARIO Historic ( ) START POINT: ( ) PRESENT : ( ) END POINT: (00.00) ( ) ( )

21 1 TOGGLE 11 / Toggle tools To maximize the map and data view the tools and menus can be toggled 1 on and off.

22 RESOLUTION: HOURS PRESENT TIME SPAN: 2 DAYS, 0 HOURS, 0 MINUTES IN MAP Stockholm SAVE S TOGGLE 12 / Add data as graph In the indicator menu, the option Show data as graph 1 opens a new interface area, allowing the viewing of data types that needs to be shown as graphs instead of a map layer. Air temperature Second indicator (split screen) SHOW DATA ON MAP Choose indicator variable FILTER DATA: Minimal value: 0000 Maximal value: 9999 LEGEND COLOUR SETTINGS: Default colour scheme OPACITY SETTINGS: SHOW DATA IN GRAPH 1 Choose indicator variable Time series IDF-curves Indicator variable Indicator variable AIR TEMPERATURE TIMEFRAME/SCENARIO Historic ( ) START POINT: ( ) PRESENT : ( ) END POINT: (00.00) ( ) ( )

23 TOGGLE 5 13 / Data as graph The graph is added in the bottom of a bigger version of 1 the timeline, where the data in the graph can be related directly to the current set time frame. Air temperature Second indicator (split screen) IN MAP Stockholm 3 The data shown in the graph is related to the current cursor and the saved probe points 2, just as the information area in the top right 3 interface area. Desired points to be represented in the graph is selected by clicking the checkboxes 4. Clicking the X 5 closes the graph and reverts to default timeline. If the data in the graph isn t relative to the timeline, a separation of the two fields may be nesessary to avoid misunderstandings. 4 AIR TEMPERATURE TIMEFRAME/SCENARIO START POINT: Historic ( ) TIME SERIES 2 Norrmalm [Date/time] 1 Value 1 Value 2 Value 3 Value 4 Value (00.00) PRESENT : (00.00) END POINT: (00.00) RESOLUTION: MONTHS PRESENT TIME SPAN: 5 YEARS, 11 MONTHS, 1 DAYS, 1 HOURS, 34 MINUTES SAVE S Value 1 Value 2 Value 3 Value 4 Value 6 Value 7 Value 8 Value 9 Value 10 Value 11 Value 12 Value 13 Value 14 Value 15

24 1 3 2 AIR TEMPERATURE SYNC SPLIT SCREEN TIMELINES RESOLUTION: MONTHS PRESENT TIME SPAN: 5 YEARS, 11 MONTHS, 1 DAYS, 1 HOURS, 34 MINUTES SAVE S TOGGLE PRECIPITATION 14 / Split screen Adding a second indicator opens a split screen with two versions of the same map with one indicator on each screen. All map settings of the indicators uses the same principles, navigating in one map also changes the other one in the same way. Air temperature Precipitation IN MAP Stockholm The time line has added features in split screen. It has tabs to toggle between controlling the left 1 or the right 2 indicator. There is also the option of syncing the time lines 3, making one time line control the time frame for both indicators in the same way. TIMEFRAME/SCENARIO START POINT: (00.00) PRESENT : (00.00) END POINT: (00.00) Historic ( )

25 RESOLUTION: MONTHS PRESENT TIME SPAN: 5 YEARS, 11 MONTHS, 1 DAYS, 1 HOURS, 34 MINUTES SAVE S TOGGLE 15 / Synced time line The selection of syncing the time lines moves the right tab over to the left tab 1 and renders unclickable to indicate that one time line now control both indicators. Clicking the X 2 divides the time lines to default. Air temperature Precipitation IN MAP Stockholm 1 AIR TEMPERATURE PRECIPITATION 2 TIMEFRAME/SCENARIO START POINT: (00.00) PRESENT : (00.00) END POINT: (00.00) Historic ( )

The lower part 5 of the menu is the export options, allowing the selection of available file types 6 and the options of sharing or downloading 7 the data set.

All views has a shortcut 3 and an export 4 option. The menu 1 for viewing all saved views allows both bookmarks to re-open the views in the interface, and to export the desired views in a data set.

26 The lower part 5 of the menu is the export options, allowing the selection of available file types 6 and the options of sharing or downloading 7 the data set. The file size of the data set is shown 8 as a reminder of the large data that is handled. The upper part 2 of the menu is a list of all saved views that scrolls down to show all items. All views has a shortcut 3 and an export 4 option. The menu 1 for viewing all saved views allows both bookmarks to re-open the views in the interface, and to export the desired views in a data set. 16. Export views Historic ( ) TIMEFRAME/SCENARIO AIR TEMPERATURE Air temperature Add to export 4 2 Add to export START POINT: (00.00) Precipitation South Created: (13.14) Historic scenario Position: N W Go to view Precipitation South Created: (13.14) Historic scenario Position: N W Go to view Saved views Add to export Add to export Go to view Add to export Add to export 5 Add to export Add to export Raw data 6 File type File type EXPORT AS: File type Precipitation South Created: (13.14) Historic scenario Position: N W Go to view Precipitation South Created: (13.14) Historic scenario Position: N W Go to view RESOLUTION: MONTHS PRESENT TIME SPAN: 5 YEARS, 11 MONTHS, 1 DAYS, 1 HOURS, 34 MINUTES (00.00) Precipitation South Created: (13.14) Historic scenario Position: N W Go to view Precipitation South Created: (13.14) Historic scenario Position: N W PRESENT : Precipitation South Created: (13.14) Historic scenario Position: N W Go to view Precipitation South Created: (13.14) Historic scenario Position: N W Go to view Second indicator (split screen) Add to export Add to export SHARE DATA SET 7 8 SAVE (00.00) S 1 TOGGLE Stockholm END POINT: DOWNLOAD DATA SET CURRENT FILE SIZE: 14GB Precipitation South Created: (13.14) Historic scenario Position: N W Go to view Precipitation South Created: (13.14) Historic scenario Position: N W Go to view IN MAP 16 / 16

27 Copernicus Climate Change Service ECMWF Shinfield Park Reading RG2 9AX UK climate.copernicus.eu copernicus.eu ecmwf.int

Manual MARS web viewer

Manual MARS web viewer 08 July 2010 Document Change Log Issue Date Description of changes 0.1 03-FEB-2009 Initial version 0.2 13-MAR-2009 Manual for viewer version 16-3-2009 1.0 20-MAY-2009 Manual for