View source for Sixes: Proposal Version 1

[[File:Sixes new logo.jpg||230px|center]]
<p></p><br/>
<!--Sub Header Start-->
{| style="background-color:white; color:white padding: 5px 0 0 0;" width="100%" height=50px cellspacing="0" cellpadding="0" valign="top" border="0" |

| style="vertical-align:top;width:16%;" | <div style="padding: 3px; font-weight: bold; text-align:center; line-height: wrap_content; font-size:16px; border-bottom:1px solid #FE7F48; border-top:1px solid #FE7F48; font-family:helvetica"> [[Sixes| <b>Home</b>]]

| style="vertical-align:top;width:16%;" | <div style="padding: 3px; font-weight: bold; text-align:center; line-height: wrap_content; font-size:16px; border-bottom:1px solid #FE7F48; border-top:1px solid #FE7F48; font-family:helvetica"> [[Sixes: Proposal Version 1 | <b>Proposal</b>]]

| style="vertical-align:top;width:16%;" | <div style="padding: 3px; font-weight: bold; text-align:center; line-height: wrap_content; font-size:16px; border-bottom:1px solid #FE7F48; border-top:1px solid #FE7F48; font-family:helvetica"> [[Sixes: Poster | <b>Poster</b>]]

| style="vertical-align:top;width:16%;" | <div style="padding: 3px; font-weight: bold; text-align:center; line-height: wrap_content; font-size:16px; border-bottom:1px solid #FE7F48; border-top:1px solid #FE7F48; font-family:helvetica"> [[Sixes: Application | <b>Application</b>]]

| style="vertical-align:top;width:16%;" | <div style="padding: 3px; font-weight: bold; text-align:center; line-height: wrap_content; font-size:16px; border-bottom:1px solid #FE7F48; border-top:1px solid #FE7F48; font-family:helvetica"> [[Sixes: Research Paper | <b>Research Paper</b>]]
|}
<!--Sub Header End-->
<p></p><br/>
<div style="background: #FE7F48; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px;letter-spacing:-0.08em;font-size:20px"><font color=#fbfcfd face="Century Gothic">PROBLEM & MOTIVATION</font></div>
Every year, more than 480,000 people die due to tobacco-related diseases. That is around 1 in 5 of all deaths annually. It is estimated that 1 in 2 smokers will die from a smoking-related disease. This interactive data visualization tool shows modeled trends in smoking prevalence worldwide. Our aim is to reveal perspectives of smoking and correlates, determinants and consequences about smoking with visual analytics.

<br/><div style="background: #FE7F48; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px;letter-spacing:-0.08em;font-size:20px"><font color=#fbfcfd face="Century Gothic">OBJECTIVES</font></div>
<p>In this project, we are interested to create a visualisation that helps users perform the following:</p>
# View the geographical distribution of smokers from recent years
# Share of perniciousness attributed to smoking
# Reveal the trends of smoking and other perniciousness attributed to smoking of specific area or countries, while compared to worldwide value, to bring to attentions for both individuals and countries.

<br/><div style="background: #FE7F48; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px;letter-spacing:-0.08em;font-size:20px"><font color=#fbfcfd face="Century Gothic">SELECTED DATASET</font></div>
<div style="margin:0px; padding: 10px; background: #f2f4f4; font-family: Open Sans, Arial, sans-serif; border-radius: 7px; text-align:left">
Datasets are retrieved from https://data.unodc.org/#state:1<br>
The data set describes the annual prevalence of use of drug in 2016:<br>
[[File:Sixes DataInfo.PNG|750px]]<br>
</div>
<br/><div style="background: #FE7F48; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px;letter-spacing:-0.08em;font-size:20px"><font color=#fbfcfd face="Century Gothic">BACKGROUND SURVEY OF RELATED WORKS</font></div>
There are many charts and visualisations available which illustrates the various trends of house prices and index. We have selected a few of these to study and learn before we begin developing our own visualizations.
{| class="wikitable" style="background-color:#FFFFFF;" width="100%"
|-
! style="font-weight: bold;background: #FEBF5F;color:#fbfcfd;width: 50%;" | Related Works
! style="font-weight: bold;background: #FEBF5F;color:#fbfcfd;" | What We Can Learn
|-
| <center> Annual prevalence of use of drugs  </center> |
https://dataunodc.un.org/drugs/prevalence_map
[[File:Related Work.png|550px]]
| 
* Heatmap is an explicit way to show the goegraphical distribution of data.
* The breakdowns shown upon hover give further details without distracting the audience at the first glance.
|-
| <center> Map of annual seizures </center> 
https://dataunodc.un.org/drugs/seizures_map|
[[File:Related2.png|550px]]
| 
* Filter is essential to hide unnecessary data when only a group of data is focused.
|}
</div>
<br/>
<div style="background: #FE7F48; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px;letter-spacing:-0.08em;font-size:20px"><font color=#fbfcfd face="Century Gothic">PROPOSED STORYBOARD</font></div>
{| class="wikitable" style="background-color:#FFFFFF;" width="100%"
|-
! style="font-weight: bold;background: #FEBF5F;color:#fbfcfd;width: 50%;" | Key Technical Challenges
! style="font-weight: bold;background: #FEBF5F;color:#fbfcfd;" | How We Propose To Resolve
|-
| 
[[File:Mainboard.png|600px|center]]
|| 
* The navigation bar on top of the screen gives the entrances of the two visualisation sub-parts.
* Analysts will begin the process of investigation once they click map or data
|-
|
[[File:MapControl.png|600px|center]]
|| 
* There are two filters to change the category and region displayed on the map
* The legend on bottom is to differentiate the concentration of the population of a specific category.
* The slider is to autoplay the changes of the map across the years. 
|-
| 
[[File:CountryBreakdown.png|600px|center]]
|| 
* Upon clicking an individual country on the map, the dialog will be shown.
* The diagram is to show the comparasion between the country and the global situation.
* Upon hovering on one data point on the diagram, the detail comparasion data including the world rank is displayed.
|-
| 
[[File:TimeBreakdown.png|600px|center]]
|| 
* Upon clicking an individual concentration level on the legend, the dialog will be shown.
* This dialog provides a vertical comparasion among the countries within the same concentration level.
* The inner circle is the corresponding continent, while the outer circle is the countries belonging to the continent.
|


}

</div>

<br/><div style="background: #FE7F48; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px;letter-spacing:-0.08em;font-size:20px"><font color=#fbfcfd face="Century Gothic">KEY TECHNICAL CHALLENGES</font></div>
The following are some of the key technical challenges that we may face throughout the course of the project:
{| class="wikitable" style="background-color:#FFFFFF;" width="100%"
|-
! style="font-weight: bold;background: #FEBF5F;color:#fbfcfd;width: 50%;" | Key Technical Challenges
! style="font-weight: bold;background: #FEBF5F;color:#fbfcfd;" | How We Propose To Resolve
|-
| <center> Unfamiliarity of Visualization Tool Usage </center> || 
* Independent Learning on Visualization Tools
* Peer Learning
|-
| <center> New to R and Javascript </center> || 
* Attend R Workshop
* Self explore on R & Technical Tools
* Peer Learning
|-
| <center> Data Cleaning & Transformation </center> || 
* Work together to clean, transform and analyze the data
* Documentation to keep track of changes
|}
<br/><div style="background: #FE7F48; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px;letter-spacing:-0.08em;font-size:20px"><font color=#fbfcfd face="Century Gothic">PROJECT TIMELINE</font></div>
<p>The following shows our project timeline for the completion of this project:</p>
<div style="width:100%">[[File:Sixes Timeline.png|1000px|center]]</div>
<br/><div style="background: #FE7F48; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px;letter-spacing:-0.08em;font-size:20px"><font color=#fbfcfd face="Century Gothic">TOOLS/TECHNOLOGIES</font></div>
<p>The following are some of the tools/technologies that we will be utilizing during the project:</p>
*Excel
*Github
*Tableau
*R
WIP
<br/><div style="background: #FE7F48; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px;letter-spacing:-0.08em;font-size:20px"><font color=#fbfcfd face="Century Gothic">REFERENCES</font></div>
*https://data.unodc.org/
WIP
<br/><div style="background: #FE7F48; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px;letter-spacing:-0.08em;font-size:20px"><font color=#fbfcfd face="Century Gothic">COMMENTS</font></div>
<p>Feel free to comment here :)</p>