Difference between revisions of "Sixes: Proposal Version 1"

From Visual Analytics for Business Intelligence
Jump to navigation Jump to search
(Created page with "|150px|center <p></p><br/> <!--Sub Header Start--> {| style="background-color:white; color:white padding: 5px 0 0 0;" width="100%" height=50px cellspac...")
 
 
(13 intermediate revisions by 2 users not shown)
Line 1: Line 1:
[[File:Sixes logo.jpg||150px|center]]
+
[[File:Sixes new logo.jpg||230px|center]]
 
<p></p><br/>
 
<p></p><br/>
 
<!--Sub Header Start-->
 
<!--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="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 #177226; border-top:1px solid #177226; 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| <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 #177226; border-top:1px solid #177226; 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: 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 #177226; border-top:1px solid #177226; 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: 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 #177226; border-top:1px solid #177226; 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: 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 #177226; border-top:1px solid #177226; font-family:helvetica"> [[Sixes: Research Paper | <b>Research Paper</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>]]
 
|}
 
|}
 +
<br />
 +
[[Project Groups|<< Go Back to Project Groups]]
 +
</br>
 
<!--Sub Header End-->
 
<!--Sub Header End-->
 
<p></p><br/>
 
<p></p><br/>
<div style="background: #177226; 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>
+
<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>
About 275 million people worldwide, which is roughly 5.6 per cent of the global population aged 15-64 years, used drugs at least once during 2016. Some 31 million of people who use drugs suffer from drug use disorders, meaning that their drug use is harmful to the point where they may need treatment. The consequences of illicit drug use are widespread, causing permanent physical and emotional damage to users and negatively impacting their families, coworkers, and many others with whom they have contact. Our aim is that users can do better drug use prevention, treatment and care with visual analytics on the use of drug.
+
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: #177226; 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>
+
<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>
 
<p>In this project, we are interested to create a visualisation that helps users perform the following:</p>
# View the geographical distribution of drug use in 2016
+
# View the geographical distribution of smokers from recent years
# Identify which drug types that people are most addicted
+
# Share of perniciousness attributed to smoking
# The distribution of drug users' age groups
+
# 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: #177226; 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>
+
<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">
 
<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 dataset for analysis will be retrieved from multiple databases, as elaborated below:<br>
The data set describes the annual prevalence of use of drug in 2016:<br>
+
{| class="wikitable" style="background-color:#FFFFFF;" width="100%"
[[File:Sixes DataInfo.PNG|1000px]]<br>
+
|-
 +
! style="font-weight: bold;background: #FEBF5F;color:#fbfcfd;width: 30%;" | Dataset/Source
 +
! style="font-weight: bold;background: #FEBF5F;color:#fbfcfd;width: 30%" | Data Attributes
 +
! style="font-weight: bold;background: #FEBF5F;color:#fbfcfd;" | Rationale Of Usage
 +
|-
 +
| <center> Consumption of tobacco products, prevalence of smoking and mortality <br/>
 +
(http://www.pnlee.co.uk/imass.htm) </center>
 +
||
 +
* Country name
 +
* Country code
 +
* Consumption
 +
* Year
 +
* Prevalence
 +
||
 +
# To evaluate the daily smoke consumption for every country at specific year
 +
# To evaluate the prevalence for every country at specific year
 +
# Analyze the trend
 +
|-
 +
 
 +
| <center>Death rates and absolute number of premature deaths from smoking and secondhand-smoke<br/>
 +
(http://ghdx.healthdata.org/gbd-results-tool)
 +
||
 +
* Country name
 +
* Country code
 +
* ISO Country code
 +
* Daily smoker
 +
* death
 +
* Year
 +
||
 +
# Group all countries by area to help analying the smoking situation and trend in each area
 +
# Daily smoker and death data are prepared to derive the percentage of smoking death amoung smokers by country and year
 +
# Analyze the trend of percentage of people who die due to smoking
 +
|-
 +
 
 +
|}
 +
 
 +
<!--DATASET END-->
 
</div>
 
</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%;" | Proposed Layout
 +
! style="font-weight: bold;background: #FEBF5F;color:#fbfcfd;" | What can we Analyse
 +
|-
 +
|
 +
[[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>
 +
[[File:sixestech.png|650px|frameless|center]]
 +
<br/>
 +
<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://ourworldindata.org/smoking#data-sources
 +
*http://ghdx.healthdata.org/gbd-results-tool
 +
*http://www.pnlee.co.uk/imass.htm
 +
<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>

Latest revision as of 21:35, 25 November 2018

Sixes new logo.jpg



<< Go Back to Project Groups


PROBLEM & MOTIVATION

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.


OBJECTIVES

In this project, we are interested to create a visualisation that helps users perform the following:

  1. View the geographical distribution of smokers from recent years
  2. Share of perniciousness attributed to smoking
  3. 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.


SELECTED DATASET

The dataset for analysis will be retrieved from multiple databases, as elaborated below:

Dataset/Source Data Attributes Rationale Of Usage
Consumption of tobacco products, prevalence of smoking and mortality
(http://www.pnlee.co.uk/imass.htm)
  • Country name
  • Country code
  • Consumption
  • Year
  • Prevalence
  1. To evaluate the daily smoke consumption for every country at specific year
  2. To evaluate the prevalence for every country at specific year
  3. Analyze the trend
Death rates and absolute number of premature deaths from smoking and secondhand-smoke

(http://ghdx.healthdata.org/gbd-results-tool)

  • Country name
  • Country code
  • ISO Country code
  • Daily smoker
  • death
  • Year
  1. Group all countries by area to help analying the smoking situation and trend in each area
  2. Daily smoker and death data are prepared to derive the percentage of smoking death amoung smokers by country and year
  3. Analyze the trend of percentage of people who die due to smoking


BACKGROUND SURVEY OF RELATED WORKS

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.

Related Works What We Can Learn

https://dataunodc.un.org/drugs/prevalence_map Related Work.png

  • 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.
Map of annual seizures

https://dataunodc.un.org/drugs/seizures_map%7C Related2.png

  • Filter is essential to hide unnecessary data when only a group of data is focused.


PROPOSED STORYBOARD
Proposed Layout What can we Analyse
Mainboard.png
  • 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
MapControl.png
  • 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.
CountryBreakdown.png
  • 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.
TimeBreakdown.png
  • 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.


KEY TECHNICAL CHALLENGES

The following are some of the key technical challenges that we may face throughout the course of the project:

Key Technical Challenges How We Propose To Resolve
Unfamiliarity of Visualization Tool Usage
  • Independent Learning on Visualization Tools
  • Peer Learning
New to R and Javascript
  • Attend R Workshop
  • Self explore on R & Technical Tools
  • Peer Learning
Data Cleaning & Transformation
  • Work together to clean, transform and analyze the data
  • Documentation to keep track of changes


PROJECT TIMELINE

The following shows our project timeline for the completion of this project:

Sixes Timeline.png


TOOLS/TECHNOLOGIES

The following are some of the tools/technologies that we will be utilizing during the project:

Sixestech.png



REFERENCES


COMMENTS

Feel free to comment here :)