Difference between revisions of "IS428 AY2019-20T1 Assign Ronald Lay Interactive Visualization"

From Visual Analytics for Business Intelligence
Jump to navigation Jump to search
Line 28: Line 28:
  
 
=== Home Page===
 
=== Home Page===
This is the homepage that provides the details of the problem happened in St. HiMark city. There are 3 tabs focusing on static sensor, mobile sensor, and both sensor's reading level shown in a regional map. Each sensor will focus on 3 type of charts namely map chart, line chart based on log scale and Cumulative Sum chart.
+
The homepage that provides the details of the problem happened in St. HiMark city. There are 5 topics which can be accessed on the cover page.
[[File:Homepage.PNG|500px|centre]]
+
[[File:Ronald.Lay.2017_Cover_Page.PNG|500px|centre]]
{| class="wikitable"
 
|-
 
! style="font-weight: bold;background: #7fc6cb;width: 20%;" | Interactive Features
 
! style="font-weight: bold;background: #7fc6cb;width: 40%" | Rationale
 
! style="font-weight: bold;background: #7fc6cb;" | Brief Implementation Steps
 
|-
 
| <center>'''Button to view the different visualizations ''' <br/>
 
|| <center>To improve user experience in data visualization </center>
 
||
 
# Create a dashboard in the tableau. Then, drag the button to the bottom of the page
 
# Edit the button accordingly as per shown in the picture <br/> [[File:Button.PNG|500px|center]]
 
|}
 
=== Radiation Level by Map Chart ===
 
I am using map chart to visualize the radiation measurements for both static and mobile sensors. With this chart, analysts will be able to see which areas are prone to high or low radiation levels from each sensor types. Adding on, they are able to visualize the track that one mobile sensor took throughout the day and how these affect the readings.
 
==== Static sensor radiation level ====
 
[[File:MapchartRadiationLevel.PNG|600px|centre]]  
 
  
==== Mobile sensor radiation level====
+
For instance, if the users would like to discover more charts, they can refer to navigation bars at the top as indicated in the image
[[File:Mobilemapchartradiationlevel.PNG|600px|centre]]
+
[[File:Ronald.Lay.2017_Navigation.png|500px|centre]]
 
 
To enhance the visualization of the data, implementing interactive elements would help users in analyzing the data intuitively. The following elements are used in this graph.
 
{| class="wikitable"
 
|-
 
! style="font-weight: bold;background: #7fc6cb;width: 20%;" | Interactive Features
 
! style="font-weight: bold;background: #7fc6cb;width: 40%" | Rationale
 
! style="font-weight: bold;background: #7fc6cb;" | Brief Implementation Steps
 
|-
 
| <center>'''Highlight Mobile sensor ID ''' <br/>[[File:HighlightsensorID.PNG|200px|center]]</center>
 
|| <center>To provide a better insight for the analyst to understand how one particular mobile sensor ID move and how it can affect the readings</center>
 
|| Click on the arrow button on the Sensor ID filter and choose "Show Highlighter
 
 
 
|-
 
| <center>'''Filter dates with the use of checkboxes ''' <br>[[File:Datefilter.PNG|200px|center]]</center>
 
|| <center>To provide flexibility for analysts to choose the dates that they are interested to analyse. They can choose only one or multiple dates.</center>
 
||
 
# Drag the Timestamp to the Filter
 
# Change the format of the timestamp to custom date Month/Date/Year with Date Part option <br/>[[File:CustomDate.PNG|200px|center]]
 
|-
 
| <center>'''Animate the radiation level throughout the day''' <br>[[File:TimestampAnimation(1).PNG|200px|center]]</center>
 
|| <center>To allow for greater analysis and aesthetics of the data. Analysts will be able to view the movement of mobile sensor and changes of the static sensor clearly.</center>
 
||
 
# Put the Timestamp in Pages section of the Tableau
 
# Change the format of the timestamp to Minute with a custom option of Date Value
 
 
 
|-
 
| <center>'''Trail Mark for Mobile Sensor''' </center>
 
|| <center>To visualize the movement of a particular mobile sensor clearly and analyse which places did it go through throughout the day.</center>
 
||  Change the setting of the Timestamp pages as per following image <br>[[File:Trailmark.PNG|200px|center]]
 
|}
 
Next, let's look at how i displayed the line chart based on log scale.
 
 
 
=== Readings Level by sensor type ===
 
For further breakdown, I visualize how the readings changes over time according to the sensor type.This visualization allows the analyst to look at the pattern of the readings at one glance. to ensure that the distribution is less skewed, i used the logarithm on the value readings.
 
==== Static reading level ====
 
[[File:Staticreadings.PNG|500px|centre]]
 
 
 
==== Mobile reading level ====
 
The snapshot below is not limited. Analysts are able to scroll down to view more reading levels from different sensor Id
 
[[File:Mobilereading.PNG|500px|centre]]
 
{| class="wikitable"
 
|-
 
! style="font-weight: bold;background: #7fc6cb;width: 20%;" | Major features included
 
! style="font-weight: bold;background: #7fc6cb;width: 40%" | Rationale
 
! style="font-weight: bold;background: #7fc6cb;" | Brief Implementation Steps
 
|-
 
| <center>'''Differentiate sensor ID by the colour''' <br/>[[File:SensorIDColour.PNG|200px|center]]</center>
 
|| <center>To provide easy readability and improve on aesthetics.</center>
 
|| Drag the sensor ID to the color Marks
 
|-
 
| <center>'''Differentiate the timestamp by days''' <br>[[File:Timestampdifferentiate.PNG|200px|center]]</center>
 
|| <center>To provide easy readability and improve on aesthetics</center>
 
|| Drag the Timestamp in the Columns and custom the date to Month/Date/Year with Date Part option <br/>[[File:CustomDate.PNG|200px|center]]
 
|-
 
| <center>'''Log Transformation of the value''' <br>[[File:LogValue.PNG|200px|center]]</center>
 
|| <center>Log transformation will make the distribution to be less skewed. This will make the pattern to be more interpretable and inferential statistics are met </center>
 
|| Create a calculated field of log value. Then, put it at the Rows
 
|-
 
|}
 
=== Cumulative Sum Chart by sensor type ===
 
To visualize which sensors we need to pay more attention to based on the readings level, I am using a cumulative sum chart which display how
 
each sensor's reading level change over time since day 1 to day 5.
 
==== Static Cumulative Sum Chart ====
 
[[File:StaticCusumchart.PNG|500px|centre]]
 
==== Mobile Cumulative Sum Chart ====
 
[[File:Mobilecusumchart.PNG|500px|centre]]
 
{| class="wikitable"
 
|-
 
! style="font-weight: bold;background: #7fc6cb;width: 20%;" | Interactive Features
 
! style="font-weight: bold;background: #7fc6cb;width: 40%" | Rationale
 
! style="font-weight: bold;background: #7fc6cb;" | Brief Implementation Steps
 
|-
 
| <center>'''Highlight sensor ID ''' <br/>[[File:HighlightsensorID.PNG|200px|center]]</center>
 
|| <center>To provide a better insight for the analyst to understand how one particular sensor ID move and how it can affect the readings</center>
 
|| Click on the arrow button on the Sensor ID filter and choose "Show Highlighter"
 
|}
 
=== Regional reading levels  ===
 
I display the readings level by regional as well. With these, it will be able to provide insight on which area of concern that we need to pay attention to. For example, as we can see, <b> Jade Bridge, Wilson Forest, and Old Town area </b> has the highest readings level across time and sensors. More details will be explained in the later part.
 
[[File:RegionalChart.PNG|500px|centre]]
 

Revision as of 23:55, 13 October 2019

Logo VAST Challenge 2019: Mini-Challenge 1

 

Problem & Tasks

 

Data Transformation

Interactive Visualization

 

Answers

The interactive visualization can be accessed here: https://public.tableau.com/profile/ronald4812#!/vizhome/VastChallenge2019-MiniChallenge1_15709732797180/PageOne

Home Page

The homepage that provides the details of the problem happened in St. HiMark city. There are 5 topics which can be accessed on the cover page.

Ronald.Lay.2017 Cover Page.PNG

For instance, if the users would like to discover more charts, they can refer to navigation bars at the top as indicated in the image

Ronald.Lay.2017 Navigation.png