Difference between revisions of "IS428 AY2019-20T1 Assign Christine Interactive Visualization"
Line 119: | Line 119: | ||
: <div id="Fc.13">[[File:christine.2016_figure_c.11_EditButtonDialog.png|200px|frameless|center]] | : <div id="Fc.13">[[File:christine.2016_figure_c.11_EditButtonDialog.png|200px|frameless|center]] | ||
<center>''Figure c.13 - Edit Button Dialog Box''</center></div> | <center>''Figure c.13 - Edit Button Dialog Box''</center></div> | ||
+ | |- | ||
+ | |} | ||
+ | </center> | ||
+ | <br/> | ||
+ | |||
+ | ==<div><font color=#100c08 face="Century Gothic"><b>DENSITY MAP DASHBOARD</b></font></div>== | ||
+ | In this section, density map especially for Mobile sensor will be provided so that user could identify the region that have high possibility of getting contaminated. | ||
+ | <div id="Fc.14">[[File:christine.2016_figure_c.14_DensityMap.png|1000px|frameless|center]] | ||
+ | <center>''Figure c.14 - Density Map Dashboard''</center></div></br> | ||
+ | |||
+ | <center> | ||
+ | {| class="wikitable" style="background-color:#ffffff;" width="90%" | ||
+ | |- | ||
+ | ! style="font-weight: bold;background: #FFDAB9;color:#000000;width: 30%;" | Interactive Technique | ||
+ | ! style="font-weight: bold;background: #FFDAB9;color:#000000;width: 20%" | Rationale | ||
+ | ! style="font-weight: bold;background: #FFDAB9;color:#000000;width: 50%;" | Implementation Step | ||
+ | |- | ||
+ | | <center><b>Traverse through minute time series by click the arrow and show all trails</b></center></br> | ||
+ | <div id="Fc.15">[[File:christine.2016_figure_c.15_TimeSlider.png|200px|frameless|center]] | ||
+ | <center>''Figure c.15 - Time Slider''</center></div> | ||
+ | || | ||
+ | <center>To provide user on all readings on one page at the end of period so that user can identify the possible affected area.</center> | ||
+ | || | ||
+ | * Drag attribute needed to the pages section. | ||
+ | : <div id="Fc.16">[[File:christine.2016_figure_c.16_TimestampMin.png|200px|frameless|center]] | ||
+ | <center>''Figure c.16 - Timestamp Minute Attribute'</center></div> | ||
+ | * Wait until the slider appears. | ||
+ | * Dropdown box allows users to select the specific timing that user want to display the result. | ||
+ | * Arrow under the dropdown box will allow users to play the animation when clicked. | ||
+ | : <div id="Fc.17">[[File:christine.2016_figure_c.17_PlaySlider.png|200px|frameless|center]] | ||
+ | <center>''Figure c.17 - Button to Play Slider'</center></div> | ||
+ | * In order to be able to trace the trails of the mobile sensor, click on the '''show history''' checkbox and click on the '''show history'''. | ||
+ | * When dialog box appears, select '''All, All length, and Marks''' option and choose the desired line format. | ||
+ | : <div id="Fc.18">[[File:christine.2016_figure_c.18_AllMarks.png|200px|frameless|center]] | ||
+ | <center>''Figure c.18 - Setting on Dialog Box''</center></div> | ||
|- | |- | ||
|} | |} | ||
Line 125: | Line 160: | ||
==<div><font color=#100c08 face="Century Gothic"><b>MAP DASHBOARD</b></font></div>== | ==<div><font color=#100c08 face="Century Gothic"><b>MAP DASHBOARD</b></font></div>== | ||
+ | In this dashboard, the size of the dots on map will represent the different level of readings. Additionally, in mobile sensor readings, we will able to monitor the movement of cars on map along with the level of readings. | ||
+ | <div id="Fc.19">[[File:christine.2016_figure_c.19_MapDashboard.png|1000px|frameless|center]] | ||
+ | <center>''Figure c.19 - Map Dashboard''</center></div></br> | ||
+ | |||
+ | <center> | ||
+ | {| class="wikitable" style="background-color:#ffffff;" width="90%" | ||
+ | |- | ||
+ | ! style="font-weight: bold;background: #FFDAB9;color:#000000;width: 30%;" | Interactive Technique | ||
+ | ! style="font-weight: bold;background: #FFDAB9;color:#000000;width: 20%" | Rationale | ||
+ | ! style="font-weight: bold;background: #FFDAB9;color:#000000;width: 50%;" | Implementation Step | ||
+ | |- | ||
+ | | <center><b>Traverse through minute time series by click the arrow</b></center></br> | ||
+ | <div id="Fc.20">[[File:christine.2016_figure_c.15_TimeSlider.png|200px|frameless|center]] | ||
+ | <center>''Figure c.20 - Time Slider''</center></div> | ||
+ | || | ||
+ | <center>To provide user the flexibility in selecting timestamp detailed to minutes and let user to play the animation so that the movement of sensor (especially mobile) can be observed.</center> | ||
+ | || | ||
+ | * Drag attribute needed to the pages section. | ||
+ | : <div id="Fc.21">[[File:christine.2016_figure_c.16_TimestampMin.png|200px|frameless|center]] | ||
+ | <center>''Figure c.21 - Timestamp Minute Attribute'</center></div> | ||
+ | * Wait until the slider appears. | ||
+ | * Dropdown box allows users to select the specific timing that user want to display the result. | ||
+ | * Arrow under the dropdown box will allow users to play the animation when clicked. | ||
+ | : <div id="Fc.22">[[File:christine.2016_figure_c.17_PlaySlider.png|200px|frameless|center]] | ||
+ | <center>''Figure c.22 - Button to Play Slider'</center></div> | ||
+ | * In order to be able to trace the trails of the mobile sensor, click on the '''show history''' checkbox and click on the '''show history'''. | ||
+ | * When dialog box appears, select '''Trails''' option and choose the desired line format. | ||
+ | : <div id="Fc.23">[[File:christine.2016_figure_c.23_TrailsMarks.png|200px|frameless|center]] | ||
+ | <center>''Figure c.23 - Setting on Dialog Box''</center></div> | ||
+ | |- | ||
+ | |||
+ | | <center><b>Multiple Values filtering on Date</b></center></br> | ||
+ | <div id="Fc.24">[[File:christine.2016_figure_c.24_FilterDayTimestamp.png|200px|frameless|center]] | ||
+ | <center>''Figure c.24 - Filter of Date''</center></div> | ||
+ | || | ||
+ | <center>To provide user the flexibility in viewing the values for specific day (either one day or all).</center> | ||
+ | || | ||
+ | * Drag '''Timestamp''' attribute to the '''filter''' section. | ||
+ | * When the filtering box appear, click on the arrow on the filtering box and choose '''Multiple Values (list)'''. | ||
+ | : <div id="Fc.25">[[File:christine.2016_figure_c.25_StepFilterDay.png|200px|frameless|center]] | ||
+ | <center>''Figure c.25 - How to set Filter''</center></div> | ||
+ | |- | ||
+ | |} | ||
+ | </center> | ||
<br/> | <br/> | ||
Revision as of 20:57, 10 October 2019
Visualization of Always Safe Nuclear Power Plant can be accessed here: <URL>.
More details on the individual dashboard as follow:
In this case, a large dataset is provided to the investigator to conduct a deep analysis of the problem in St. Himark. Due to large dataset, numerous analysis is needed in order to provide better insight in detecting the cause of the problem or even propose a solution to the detected problem. As such, it will be impossible to display all analyses in a single dashboard. While these analyses are interrelated to each other hence, there is no sequential order that should be followed. To resolve these issues, flexibility has become the main solution where it should provide users the flexibility to navigate the dashboard from one to another. To do so, the interactive button was created with 5 different categories – Homepage, Density Map, Map Dashboard, Radiation Level Readings, and Cumulative Sum of Sensors Readings. Each of these categories will be a further breakdown and provide the freedom of users to choose the analysis that they interested in.
Contents
COMMON INTERACTIVE FEATURES ACROSS ALL PAGES/DASHBOARDS
These interactive features will be available across all pages / dashboards.
Interactive Technique | Rationale | Implementation Step |
---|---|---|
* Except Density Map |
|
|
|
|
HOMEPAGE
In this page, there will be brief write-up for the problem statement as well as motivation behind this analysis conducted along with the navigation buttons.
Interactive Technique | Rationale | Implementation Step |
---|---|---|
*Navigation button will be available for every pages/dashboards |
|
|
|
|
DENSITY MAP DASHBOARD
In this section, density map especially for Mobile sensor will be provided so that user could identify the region that have high possibility of getting contaminated.
Interactive Technique | Rationale | Implementation Step |
---|---|---|
|
|
MAP DASHBOARD
In this dashboard, the size of the dots on map will represent the different level of readings. Additionally, in mobile sensor readings, we will able to monitor the movement of cars on map along with the level of readings.
Interactive Technique | Rationale | Implementation Step |
---|---|---|
|
| |
|
|
FINAL WORKFLOW AND DATASET
FINAL WORKFLOW AND DATASET