Difference between revisions of "Ball4life proposal"

From Visual Analytics for Business Intelligence
Jump to navigation Jump to search
 
(15 intermediate revisions by 2 users not shown)
Line 3: Line 3:
 
<p></p><br/>
 
<p></p><br/>
 
<div style="width:100%; text-align:center;">
 
<div style="width:100%; text-align:center;">
{|style="background-color:#f67c6c; color:#fff; padding: 10 0 10 0;" width="100%" cellspacing="0" cellpadding="0" valign="top" border="0"  |
+
{|style="background-color:#e80707; color:#fff; padding: 10 0 10 0;" width="100%" cellspacing="0" cellpadding="0" valign="top" border="0"  |
| style="padding:0.2em; font-size:100%; background-color:#f67c6c; text-align:center; color:#fff" width="10%" |  
+
| style="padding:0.2em; font-size:100%; background-color:#e80707; text-align:center; color:#fff" width="10%" |  
[[ball4life_team |<font color="#fff" size=3 face="Helvetica">Team</font>]]
+
[[ball4life_proposal|<font color="#fff" size=3 face="Helvetica">Proposal</font>]]
  
 
| style="background:none;" width="1%" | &nbsp;
 
| style="background:none;" width="1%" | &nbsp;
| style="padding:0.2em; font-size:100%; background-color:#ffd4cc;  border-bottom:0px solid #3D9DD7; text-align:center; color:#100c08" width="10%" |
+
| style="padding:0.2em; font-size:100%; background-color:#e80707;  border-bottom:0px solid #e80707; text-align:center; color:#fff" width="10%" |  
[[ball4life_proposal|<font color="#100c08" size=3 face="Helvetica">Proposal</font>]]
 
 
 
| style="background:none;" width="1%" | &nbsp;
 
| style="padding:0.2em; font-size:100%; background-color:#f67c6c;  border-bottom:0px solid #3D9DD7; text-align:center; color:#fff" width="10%" |  
 
 
[[ball4life_poster|<font color="#fff" size=3 face="Helvetica">Poster</font>]]
 
[[ball4life_poster|<font color="#fff" size=3 face="Helvetica">Poster</font>]]
  
 
| style="background:none;" width="1%" | &nbsp;
 
| style="background:none;" width="1%" | &nbsp;
| style="padding:0.2em; font-size:100%; background-color:#f67c6c;  border-bottom:0px solid #3D9DD7; text-align:center; color:#fff" width="10%" |  
+
| style="padding:0.2em; font-size:100%; background-color:#e80707;  border-bottom:0px solid #e80707; text-align:center; color:#fff" width="10%" |  
 
[[ball4life_application|<font color="#fff" size=3 face="Helvetica">Application</font>]]
 
[[ball4life_application|<font color="#fff" size=3 face="Helvetica">Application</font>]]
  
 
| style="background:none;" width="1%" | &nbsp;
 
| style="background:none;" width="1%" | &nbsp;
| style="padding:0.2em; font-size:100%; background-color:#f67c6c;  border-bottom:0px solid #3D9DD7; text-align:center; color:#fff" width="10%" |  
+
| style="padding:0.2em; font-size:100%; background-color:#e80707;  border-bottom:0px solid #e80707; text-align:center; color:#fff" width="10%" |  
 
[[ball4life_research_paper Paper|<font color="#fff" size=3 face="Helvetica">Research Paper</font>]]
 
[[ball4life_research_paper Paper|<font color="#fff" size=3 face="Helvetica">Research Paper</font>]]
 
|}  
 
|}  
Line 26: Line 22:
  
 
<!--/Header-->
 
<!--/Header-->
 +
 +
<!--SubHeader-->
 +
<p></p><br/>
 +
<div style="width:100%; text-align:center;">
 +
{|style="background-color:#e80707; color:#fff; padding: 10 0 10 0;" width="100%" cellspacing="0" cellpadding="0" valign="top" border="0"  |
 +
| style="padding:0.2em; font-size:100%; background-color:#e80707; text-align:center; color:#fff" width="10%" |
 +
[[ball4life_proposal|<font color="#fff" size=3 face="Helvetica">Version 1</font>]]
 +
 +
| style="background:none;" width="1%" | &nbsp;
 +
| style="padding:0.2em; font-size:100%; background-color:#e80707;  border-bottom:0px solid #e80707; text-align:center; color:#fff" width="10%" |
 +
[[ball4life_proposal_2|<font color="#fff" size=3 face="Helvetica">Version 2</font>]]
 +
|}
 +
</div>
 +
<!--/SubHeader-->
 +
 
<br />
 
<br />
 
<big> [[Project Groups|<--- Go Back to Project Groups]] </big>
 
<big> [[Project Groups|<--- Go Back to Project Groups]] </big>
 
<br /><br />
 
<br /><br />
  
==<div style="background:#f67c6c; padding: 15px; font-weight: bold; line-height: 0.3em; letter-spacing:0.5em;font-size:20px"><font color=#fff face="Century Gothic"><center>INTRODUCTION</center></font></div>==
+
==<div style="background:#e80707; padding: 15px; font-weight: bold; line-height: 0.3em; letter-spacing:0.5em;font-size:20px"><font color=#fff face="Century Gothic"><center>INTRODUCTION</center></font></div>==
 
<br/>
 
<br/>
 
The National Basketball Association (NBA) is a men’s professional basketball league in North America. Comprising of 30 teams (29 in the United States and 1 in Canada), it is one of the 4 major professional sports leagues in the United States and Canada. Furthermore, it is widely regarded as the premier basketball league in the world, with many fans touting it as the hardest league with the world’s best players competing in it.
 
The National Basketball Association (NBA) is a men’s professional basketball league in North America. Comprising of 30 teams (29 in the United States and 1 in Canada), it is one of the 4 major professional sports leagues in the United States and Canada. Furthermore, it is widely regarded as the premier basketball league in the world, with many fans touting it as the hardest league with the world’s best players competing in it.
Line 36: Line 47:
 
With an average NBA team being valued at US$1.9 billion, the NBA continues to generate earnings in the hundreds of millions.  This, coupled with growing fan bases in China, Philippines, Vietnam and Europe ensures that the NBA will be able to provide entertaining and competitive basketball games for all their fans.
 
With an average NBA team being valued at US$1.9 billion, the NBA continues to generate earnings in the hundreds of millions.  This, coupled with growing fan bases in China, Philippines, Vietnam and Europe ensures that the NBA will be able to provide entertaining and competitive basketball games for all their fans.
 
<br>
 
<br>
==<div style="background:#f67c6c; padding: 15px; font-weight: bold; line-height: 0.3em; letter-spacing:0.5em;font-size:20px"><font color=#fff face="Century Gothic"><center>PROBLEM & MOTIVATION</center></font></div>==
+
==<div style="background:#e80707; padding: 15px; font-weight: bold; line-height: 0.3em; letter-spacing:0.5em;font-size:20px"><font color=#fff face="Century Gothic"><center>PROBLEM & MOTIVATION</center></font></div>==
 
<br/>
 
<br/>
 
Despite the success of the NBA in global markets, it remains relatively obscure in our local society. Many Singaporeans play a variety of sports and know of many famous athletes both worldwide and locally, such as:
 
Despite the success of the NBA in global markets, it remains relatively obscure in our local society. Many Singaporeans play a variety of sports and know of many famous athletes both worldwide and locally, such as:
  
 
International:
 
International:
Cristiano Ronaldo: Soccer
+
<ul>
Lionel Messi: Soccer
+
<li>Cristiano Ronaldo: Soccer</li>
Roger Federer: Tennis
+
<li>Lionel Messi: Soccer</li>
 +
<li>Roger Federer: Tennis</li>
 +
</ul>
  
 
Local:
 
Local:
Table Tennis: Feng Tianwei
+
<ul>
Swimming: Joseph Schooling
+
<li>Table Tennis: Feng Tianwei</li>
 +
<li>Swimming: Joseph Schooling</li>
 +
</ul>
  
 
However, few to no Singaporeans could say out even the name of an NBA player, apart from Michael Jordan, who has retired 16 years ago in 2003. However, there has been an increase in interest in the sport, as more and more locals begin to be associated with the sport.
 
However, few to no Singaporeans could say out even the name of an NBA player, apart from Michael Jordan, who has retired 16 years ago in 2003. However, there has been an increase in interest in the sport, as more and more locals begin to be associated with the sport.
Line 54: Line 69:
 
<br/>
 
<br/>
 
<br/>
 
<br/>
==<div style="background:#f67c6c; padding: 15px; font-weight: bold; line-height: 0.3em; letter-spacing:0.5em;font-size:20px"><font color=#fff face="Century Gothic"><center>OBJECTIVE</center></font></div>==
+
==<div style="background:#e80707; padding: 15px; font-weight: bold; line-height: 0.3em; letter-spacing:0.5em;font-size:20px"><font color=#fff face="Century Gothic"><center>OBJECTIVE</center></font></div>==
 
<br/>
 
<br/>
 
This visualisation aims to provide insights into the following:
 
This visualisation aims to provide insights into the following:
1. What is the key attribute to help basketball teams win games
+
<ol>
2. Is height truly essential to be a good basketball player
+
<li>What is the key attribute to help basketball teams win games</li>
3. Which type of shot will make you a more efficient player
+
<li>Is height truly essential to be a good basketball player</li>
 +
<li>Which type of shot will make you a more efficient player</li>
 +
</ol>
 +
 
 
<br>
 
<br>
 
<br/>
 
<br/>
==<div style="background:#f67c6c; padding: 15px; font-weight: bold; line-height: 0.3em; letter-spacing:0.5em;font-size:20px"><font color=#fff face="Century Gothic"><center>SELECTED DATABASE</center></font></div>==
+
==<div style="background:#e80707; padding: 15px; font-weight: bold; line-height: 0.3em; letter-spacing:0.5em;font-size:20px"><font color=#fff face="Century Gothic"><center>SELECTED DATABASE</center></font></div>==
 
<br/>
 
<br/>
 
The Data Sets we will be using for our analysis and for our application is listed below:
 
The Data Sets we will be using for our analysis and for our application is listed below:
Line 68: Line 86:
 
{| class="wikitable" style="background-color:#FFFFFF;" width="90%"
 
{| class="wikitable" style="background-color:#FFFFFF;" width="90%"
 
|-
 
|-
! style="font-weight: bold;background: #141414;color:#fbfcfd;width: 50%;" | Dataset/Source
+
! style="font-weight: bold;background: #e80707;color:#fbfcfd;width: 50%;" | Dataset/Source
! style="font-weight: bold;background: #141414;color:#fbfcfd;width: 50%;" | Rationale Of Usage
+
! style="font-weight: bold;background: #e80707;color:#fbfcfd;width: 50%;" | Rationale Of Usage
 
|-
 
|-
  
Line 90: Line 108:
 
<br>
 
<br>
 
<br/>
 
<br/>
==<div style="background:#f67c6c; padding: 15px; font-weight: bold; line-height: 0.3em; letter-spacing:0.5em;font-size:20px"><font color=#fff face="Century Gothic"><center>BACKGROUND SURVEY</center></font></div>==
+
==<div style="background:#e80707; padding: 15px; font-weight: bold; line-height: 0.3em; letter-spacing:0.5em;font-size:20px"><font color=#fff face="Century Gothic"><center>BACKGROUND SURVEY</center></font></div>==
 
<br/>
 
<br/>
 
We did basic background research on some existing visualizations or dashboards we could drive inspirations from or make it better. Below are a few visuals we found:
 
We did basic background research on some existing visualizations or dashboards we could drive inspirations from or make it better. Below are a few visuals we found:
Line 96: Line 114:
 
{| class="wikitable" style="background-color:#FFFFFF;" width="90%"
 
{| class="wikitable" style="background-color:#FFFFFF;" width="90%"
 
|-
 
|-
! style="font-weight: bold;background: #141414;color:#fbfcfd;width: 45%;" | Reference of Other Interactive Visualization
+
! style="font-weight: bold;background: #e80707;color:#fbfcfd;width: 45%;" | References to Existing Visualizations
! style="font-weight: bold;background: #141414;color:#fbfcfd;width: 55%" | Learning Point
+
! style="font-weight: bold;background: #e80707;color:#fbfcfd;width: 55%" | Key Takeaways
 
|-
 
|-
 
| <center>
 
| <center>
'''Title''': Export Destination Country For 10 Main Commodities
+
[[File:ball1.png|300px|frameless|center]]
[[File:Cakrawala_Background1.png|300px|frameless|center]]
+
Title: NBA Shot Tracker<br>
<br/>
+
Link: http://www.estherbaek.com/NBAShotTracker/
'''Source''': https://www.kemendag.go.id/en/economic-profile/10-main-and-potential-commodities/10-main-commodities
 
</center>
 
 
 
 
||  
 
||  
'''Positive Points:'''
+
'''Feedback'''
# The bar graph shows the comparison of export in Jan-Jul 2017 to Jan-Jul 2018 for a specific commodity, e.g. Textile and Product Textile. It allows immediate comparison of export performance for the top trading partners of Indonesia.
+
Clear illustration of insights on player’s field goal percentage
 
+
Simple and intuitive UI to better engage audiences
'''Negative Points:'''
+
Too little information, would require more information to better understand individual’s game
# There is no data label and it is hard to manually trace the graph to the figure.
 
# It only gives information in 2017 and 2018 from January to July
 
# There are no interactive tools that allow the user to choose the year or the commodities that they want to see
 
# The y-axis should start from 0 instead of a dash symbol
 
 
|-
 
|-
  
 
| <center>
 
| <center>
'''Title''': Indonesia Growth of Export by Sector
+
[[File:ball2.png|300px|frameless|center]]
[[File:Cakrawala_Background2.png|300px|frameless|center]]
+
Title: Player Analysis<br>
<br/>
+
Link: https://shotline.peterbeshai.com/p/1415
'''Source''': https://www.kemenperin.go.id/statistik/peran.php?ekspor=1
 
 
</center>
 
</center>
  
 
||  
 
||  
'''Positive Points:'''
+
'''Feedback'''
# The first pie chart (yellow) shows the breakdown of Indonesian export by sector. It follows by the red and blue pie chart that shows further breakdown into percentage of non-oil and gas sector export. It gives the viewer more details and breakdown of Indonesia export.
+
Detailed breakdown of player’s efficiency rate in the 2 key offensive tools
 
+
Leveraged on time-series data to better understand player’s growth or decline
'''Negative Points:'''
+
Too little information, would require more information to better understand individual’s game
# It takes time and effort to understand the 3 pie charts at once.
 
# The use of the pie chart is not suitable to display the breakdown of export by sector. Instead, a stack bar chart can be used to show the total export and what made up of Indonesia export.
 
# Lack of Legend to show what goes inside the industry in the pie chart red and blue.
 
 
|-
 
|-
  
 
| <center>
 
| <center>
'''Title''': Marchendise Trade Performance
+
[[File:ball3.png|300px|frameless|center]]
[[File:Cakrawala_Background3.png|300px|frameless|center]]
+
Title: Best Draft Class<br>
<br/>
+
Link: https://towardsdatascience.com/basketball-analytics-the-best-draft-class-13a6eac0cdb5
'''Source''': https://www.singstat.gov.sg/modules/infographics/singapore-international-trade
 
 
</center>
 
</center>
  
 
||  
 
||  
'''Positive Points:'''
+
'''Feedback'''
# It shows the 2 information at once, which are merchandise trade value and the trading partners in 2018.
+
Could have included trend line to predict next round of best draft class
# Able to spot which the highest import and export trading partner clearly by the bubble position and its size.
+
There is a lack of filter to show what are the factors being considered in efficiency
 
 
'''Negative Points:'''
 
# The bubbles are overlapped yet the color use is opaque. It should use opacity so that the viewer will still be able to see the whole bubble.
 
# It is messy to cluster all elements on the graph (bubble + legend) and take a lot of time to make sense of the graph.
 
# Lack of interactive element and limited information as it only contain 2018 information. It would be better to include the filter so that the viewer is able to choose the year's input.
 
 
|-
 
|-
 +
|}
  
| <center>
+
==<div style="background:#e80707; padding: 15px; font-weight: bold; line-height: 0.3em; letter-spacing:0.5em;font-size:20px"><font color=#fff face="Century Gothic"><center>PROPOSED STORYBOARD</center></font></div>==
'''Title''': ASEAN's Stat
 
[[File:Cakrawala_Background4.png|300px|frameless|center]]
 
 
<br/>
 
<br/>
'''Source''': https://data.aseanstats.org/dashboard/tis
+
With a clearer idea of what we want after looking at a few visualization examples, we came up with a few storyboard ideas.  
</center>
+
<center>
  
||
 
'''Positive Points:'''
 
# Interactive filter that gives choice for the viewer to filter the data that they want to see
 
# The toggle export and import allows the user to view both data on the same platform. It also helps the user to figure out the trade balance of service.
 
# The Trade in Services Service Flows (Reporter -> Services) graph is useful in showing the distribution contribution of service based on the quantity.
 
|}
 
</center>
 
<br>
 
<br/>
 
==<div style="background:#f67c6c; padding: 15px; font-weight: bold; line-height: 0.3em; letter-spacing:0.5em;font-size:20px"><font color=#fff face="Century Gothic"><center>CONSIDERATION & VISUAL SELECTION</center></font></div>==
 
<br/>
 
Below are a few visualizations and charts we considered making for our projects.
 
<center>
 
 
{| class="wikitable" style="background-color:#FFFFFF;" width="90%"
 
{| class="wikitable" style="background-color:#FFFFFF;" width="90%"
 
|-
 
|-
! style="font-weight: bold;background: #141414;color:#fbfcfd;width: 45%;" | Visual Considerations
+
! style="font-weight: bold;background: #e80707;color:#fbfcfd;width: 45%;" | Proposed Storyboard
! style="font-weight: bold;background: #141414;color:#fbfcfd;width: 55%" | Insights / Comments
+
! style="font-weight: bold;background: #e80707;color:#fbfcfd;width: 55%" | Description
 
|-
 
|-
 
| <center>
 
| <center>
'''Title''': Candlestick Graph
+
[[File:landing_page_ball4life.jpg|300px|frameless|center]]
[[File:Cakrawala_ConsiderationVisual1.png|250px|frameless|center]]
 
'''Source''': https://thestophunter.co.uk/technical-analysis-candlestick-charts/
 
</center>
 
 
 
 
||  
 
||  
'''Show the price movement at given instrument'''
+
'''Homepage'''
*'''Pros:'''
+
This page will display a brief overview of our motivation and list down the key areas which the visualisation will address. This provides a first touch point for users and sets the user journey in an organised manner.
** Can be used in describing the trade balance (export-import) of Indonesia
 
** With color-coding can easily point out of the possible earning / losses
 
 
 
*'''Cons:'''
 
** Need a minimum number of data to work with (e.g. must have Open/Close, High/Low data to work).
 
 
|-
 
|-
  
 
| <center>
 
| <center>
'''Title''': Chord Graph
+
[[File:ball5.jpeg|300px|frameless|center]]
[[File:Cakrawala_ConsiderationVisual2.png|250px|frameless|center]]
 
'''Source''': https://www.data-to-viz.com/graph/chord.html
 
</center>
 
 
 
 
||  
 
||  
'''Shows flows / connection between several entities'''
+
'''Understanding Efficiency of James Harden'''
*'''Pros:'''
+
The visualization in this page will  
** Aim to show the import and export of Indonesia
 
** With highlighting, we will be able to spot them in and outflow of Indonesia’s Trade
 
 
 
*'''Cons:'''
 
** Over-cluttering makes figure unreadable (too many data / country)
 
** Hard to discover the pattern
 
 
|-
 
|-
  
 
| <center>
 
| <center>
'''Title''': Choropleth Map
+
[[File:ball6.jpeg|300px|frameless|center]]
[[File:Cakrawala_ConsiderationVisual3.png|250px|frameless|center]]
 
'''Source''': https://viscomvibz.wordpress.com/2012/03/17/the-pros-cons-of-choropleth-maps-blot-maps-patch-maps/
 
</center>
 
 
 
 
||  
 
||  
'''Using coloring scheme to show the value levels'''
+
This implements the shooting efficiency of an NBA athlete on the court to measure where does he perform the best in
*'''Pros:'''
 
** Can effectively show the reported country that works with Indonesia through the shaded area.
 
** Can detect the relationship between the encoded variable and geographic location.
 
 
 
*'''Cons:'''
 
** Choropleth map used average value to represent the area so the user might not able to access detail information.
 
** Area is not uniform so that it might misleading between the area on map and the value levels represented.
 
 
|-
 
|-
  
 
| <center>
 
| <center>
'''Title''': Sunburst Graph
+
[[File:ball7.jpeg|300px|frameless|center]]
[[File:Cakrawala_ConsiderationVisual4.png|250px|frameless|center]]
 
'''Source''': https://observablehq.com/@julesbonnard/sunburst
 
</center>
 
 
 
 
||  
 
||  
'''Display the hierarchical data in circular format'''
+
This graph draws inspiration from a ternary graph to implement a rating based on a few factors, such as:
*'''Pros:'''
+
<ol>
** Can visualize the hierarchical of import and export items based on the amount
+
<li>Height</li>
** Can visualize the breakdown between oil & gas and non-oil & gas
+
<li>Weight</li>
 +
<li>Offensive Efficiency</li>
 +
<li>Defensive Efficiency</li>
 +
</ol>
 +
|-
 +
|}
  
*'''Cons:'''
 
** Cannot clearly define which is belong to oil & gas and non-oil & gas
 
** Too many breakdowns make it hard to identify the details clearly
 
|}
 
</center>
 
<br>
 
<br/>
 
==<div style="background:#f67c6c; padding: 15px; font-weight: bold; line-height: 0.3em; letter-spacing:0.5em;font-size:20px"><font color=#fff face="Century Gothic"><center>BRAINSTORMING SESSION</center></font></div>==
 
<br/>
 
[[File:Cakrawala_Brainstorming.png|500px|frameless|center]]
 
 
<br/>
 
<br/>
During the first few brainstorming sessions, our initial idea was visualizing the hotspot (forest fire) in Indonesia. It started from our concern with the current haze situation in Singapore. Thus, we are determined to explore the effect of forest fire towards the air quality in several neighbouring country. After some preliminary research and consultation, feedback that we got was this topic will be more useful for scientific research purpose instead of visualization project. On top of that, this topic might limit the team to visualize as when PSI reading is involved, the affecting factor might not only forest fire but also wind direction and rainfall which is difficult to obtain the accurate data. Hence, we decided to drop the idea due to time constraint.
 
 
In the next few discussion, our group tried to look at the aspect of Indonesia that still lacking in visualization which directs us to the trading of Indonesia. We feel the importance to visualize trading in Indonesia as it is one of the most important factors for the country’s economic growth. Our group met several times to discuss the project objective and design the storyboard. In the import and export context, we tried to visualize what information is interesting for the user. Initially, we came up with the first four charts for our project with simple views so that the user can get all the information at one glance.
 
  
The first chart is the bar chart where it shows the total amount of both import and export every year; with second and third charts shows the proportion of oil & gas and non-oil & gas for both import and export.  
+
==<div style="background:#e80707; padding: 15px; font-weight: bold; line-height: 0.3em; letter-spacing:0.5em;font-size:20px"><font color=#fff face="Century Gothic"><center>CHALLENGES</center></font></div>==
 
 
The most interesting part will be on candlestick chart; where it will show the trade balance with the calculation of export minus import and each candlestick will be shaded with color where green means positive net trade balance while red means negative net trade balance. However, we decided to drop the candlestick chart that shows trade balance. It was because candlestick meant to show the price difference where raw data should have 4 attributes (e.g. close-open, high-low) and our data did not match with the purpose of this chart.
 
 
 
After a few sessions of brainstorming, we came up with our final designs which are listed below.
 
 
<br/>
 
<br/>
<br/>
 
==<div style="background:#f67c6c; padding: 15px; font-weight: bold; line-height: 0.3em; letter-spacing:0.5em;font-size:20px"><font color=#fff face="Century Gothic"><center>PROPOSED STORYBOARD</center></font></div>==
 
<br/>
 
Below is the proposed story board for our project:
 
 
 
<center>
 
<center>
 
{| class="wikitable" style="background-color:#FFFFFF;" width="90%"
 
{| class="wikitable" style="background-color:#FFFFFF;" width="90%"
 
|-
 
|-
! style="font-weight: bold;background: #141414;color:#fbfcfd;width: 45%;" | Storyboard
+
! style="font-weight: bold;background: #e80707;color:#fbfcfd;width: 45%;" | Challenges
! style="font-weight: bold;background: #141414;color:#fbfcfd;width: 55%" | Insights / Comments
+
! style="font-weight: bold;background: #e80707;color:#fbfcfd;width: 55%" | Mitigation Plan
 
|-
 
|-
| <center>
 
'''Title''': DASHBOARD 1 - OVERVIEW (STORY 1 - OVERVIEW)
 
[[File:Cakrawala_ProposedStoryboard1.png|400px|frameless|center]]
 
</center>
 
  
 +
|
 +
* Data Extraction from Web Sources/Pages.
 
||  
 
||  
* Aim to show the overall import and export of Indonesia over the year (Graph 1.1)
+
Refine web scraping techniques to write automated scripts to scrape from NBA web pages
* Aim to show the proportion of exported (Graph 1.2) and imported (Graph 1.3) goods at certain year
 
* There is a dropdown list where user can choose the desired result on a particular year (dropdown available in Graph 1.2 & 1.3)
 
 
|-
 
|-
  
| <center>
+
|
'''Title''': DASHBOARD 1 - OVERVIEW (STORY 2 - EXPORT, STORY 3 - IMPORT)
+
* Data Cleaning and Transformation
[[File:Cakrawala_ProposedStoryboard2.png|400px|frameless|center]]
 
</center>
 
||
 
* Consist of two main stories: separated by Export and Import
 
* Aim to show the trend of import and export of Indonesia within certain year range (line graph)
 
* Show the total amount of export and import of each country on the map on a particular year (geographical map)
 
* Show the performance of each country between 2 selected years (slope graph)
 
* Show the product that is exported and imported along with the total amount (Sankey graph)
 
* There is a slider of year range provided to let the user view the trend of import and export on the year range
 
* There is a dropdown list of year and country provided to let the user filter the year and country to highlight on the map
 
* There are dropdown list on category and year to let the user show the performance of certain country on category selected between these 2 years
 
|-
 
  
| <center>
 
'''Title''': DASHBOARD 2 - CATEGORY (STORY 2 - EXPORT & IMPORT OF GAS & OIL; STORY 3 - EXPORT & IMPORT OF NON-GAS & OIL)
 
[[File:Cakrawala_ProposedStoryboard3.png|400px|frameless|center]]
 
</center>
 
 
||  
 
||  
* Table radio button to let the user choose the export and import graph on specific category breakdown (e.g. oil & gas, non-oil & gas can be a consumer good such as white pepper, etc.)
+
* Assign each team member with a data source to clean
* Aim to show the trend of exported and imported goods category of Indonesia within certain year range (line graph)
+
* Organize team meeting to collate it into desired form
* Show the total amount of exported and imported category of each country on the map on particular year (geographical map)
 
* Show the performance of each country between 2 selected years (slope graph)
 
* Slider of year will be provided to let the user choose the year range
 
* Dropdown list of category and year will be provided to show additional information
 
 
|-
 
|-
  
| <center>
+
|
'''Title''': DASHBOARD 3 - TRADE BALANCE
+
* Lack of Experience with R and ShinyR
[[File:Cakrawala_ProposedStoryboard4.png|400px|frameless|center]]
 
</center>
 
 
||  
 
||  
* Aim to show the trade balance of Indonesia over the years where can derive insight of surplus and deficit trade balance
+
* Go through available DataCamp courses
* Aim to look at the performance of each country in terms of export and import by using the percentile (graph divided into 4 main areas - area where Indonesia should focus more on the country that contributes the most in export, country of goods that Indonesia imported the most, country that makes no big effect on trading, and area where Indonesia should focus more - positive relationship in both import and export).
+
* Refers to online documentation and past examples to learn
 
|}
 
|}
</center>
+
 
 
<br>
 
<br>
 
<br/>
 
<br/>
==<div style="background:#f67c6c; padding: 15px; font-weight: bold; line-height: 0.3em; letter-spacing:0.5em;font-size:20px"><font color=#fff face="Century Gothic"><center>TECHNOLOGIES</center></font></div>==
+
==<div style="background:#e80707; padding: 15px; font-weight: bold; line-height: 0.3em; letter-spacing:0.5em;font-size:20px"><font color=#fff face="Century Gothic"><center>TIMELINE</center></font></div>==
 +
<br/>
 +
[[File:ball8.png|1000px|frameless|center]]
 +
<br>
 
<br/>
 
<br/>
The technologies we will be using for this Project is as below:
 
[[File:Cakrawala_Technologies_V2.png|650px|frameless|center]]
 
  
 +
<br>
 
<br/>
 
<br/>
==<div style="background:#f67c6c; padding: 15px; font-weight: bold; line-height: 0.3em; letter-spacing:0.5em;font-size:20px"><font color=#fff face="Century Gothic"><center>CHALLENGES</center></font></div>==
+
==<div style="background:#e80707; padding: 15px; font-weight: bold; line-height: 0.3em; letter-spacing:0.5em;font-size:20px"><font color=#fff face="Century Gothic"><center>TOOLS/TECHNOLOGIES</center></font></div>==
 
<br/>
 
<br/>
<center>
+
[[File:ball9.png|1000px|frameless|center]]
{| class="wikitable" style="background-color:#FFFFFF;" width="90%"
 
|-
 
! style="font-weight: bold;background: #141414;color:#fbfcfd;width: 45%;" | Challenges
 
! style="font-weight: bold;background: #141414;color:#fbfcfd;width: 55%" | Mitigation Plan
 
|-
 
|
 
* Unfamiliarity of visualisation tools such as R, R Shiny, Tableau.
 
||  
 
* Hands on practice using the different training platforms such as Data Camps
 
* Watch video tutorials from YouTube
 
* Peer Learning
 
|-
 
|
 
* Unfamiliarity of data cleaning and transformation using Tableau Prep
 
||
 
* Attend workshop on data cleaning methods
 
* Watch video tutorials on how to fully utilise Tableau Prep
 
* Trial and test on the different cleaned data sets while maintaining the raw data
 
|-
 
|
 
* Limited knowledge and the jargon used in Indonesia’s trading industry
 
||
 
* Research and learn the situation of Indonesia’ export and import in the last ten years
 
* Read articles or news to find out the recent trends and global updates on trade
 
|}
 
 
<br>
 
<br>
 
<br/>
 
<br/>
==<div style="background:#f67c6c; padding: 15px; font-weight: bold; line-height: 0.3em; letter-spacing:0.5em;font-size:20px"><font color=#fff face="Century Gothic"><center>TIMELINE</center></font></div>==
 
<br/>
 
[[File:Cakrawala_TimelineProposal.png|1000px|frameless|center]]
 
  
<br>
+
==<div style="background:#e80707; padding: 15px; font-weight: bold; line-height: 0.3em; letter-spacing:0.5em;font-size:20px"><font color=#fff face="Century Gothic"><center>COMMENTS</center></font></div>==
<br/>
 
==<div style="background:#f67c6c; padding: 15px; font-weight: bold; line-height: 0.3em; letter-spacing:0.5em;font-size:20px"><font color=#fff face="Century Gothic"><center>COMMENTS</center></font></div>==
 
 
<br/>
 
<br/>
 
Feel free to leave us some comments so that we can improve!
 
Feel free to leave us some comments so that we can improve!
Line 369: Line 251:
 
{| class="wikitable" width="100%"
 
{| class="wikitable" width="100%"
 
|-
 
|-
! style="font-weight: bold;background: #141414;color:#fbfcfd;width: 5%;" |No.
+
! style="font-weight: bold;background: #e80707;color:#fbfcfd;width: 5%;" |No.
! style="font-weight: bold;background: #141414;color:#fbfcfd;width: 25%;" |Name
+
! style="font-weight: bold;background: #e80707;color:#fbfcfd;width: 25%;" |Name
! style="font-weight: bold;background: #141414;color:#fbfcfd;width: 20%;" |Date
+
! style="font-weight: bold;background: #e80707;color:#fbfcfd;width: 20%;" |Date
! style="font-weight: bold;background: #141414;color:#fbfcfd;width: 50%;" |Comments
+
! style="font-weight: bold;background: #e80707;color:#fbfcfd;width: 50%;" |Comments
 
|-
 
|-
 
| 1.
 
| 1.

Latest revision as of 19:08, 23 November 2019

Ball4life.png


Proposal

 

Poster

 

Application

 

Research Paper



Version 1

 

Version 2


<--- Go Back to Project Groups

INTRODUCTION


The National Basketball Association (NBA) is a men’s professional basketball league in North America. Comprising of 30 teams (29 in the United States and 1 in Canada), it is one of the 4 major professional sports leagues in the United States and Canada. Furthermore, it is widely regarded as the premier basketball league in the world, with many fans touting it as the hardest league with the world’s best players competing in it.

With an average NBA team being valued at US$1.9 billion, the NBA continues to generate earnings in the hundreds of millions. This, coupled with growing fan bases in China, Philippines, Vietnam and Europe ensures that the NBA will be able to provide entertaining and competitive basketball games for all their fans.

PROBLEM & MOTIVATION


Despite the success of the NBA in global markets, it remains relatively obscure in our local society. Many Singaporeans play a variety of sports and know of many famous athletes both worldwide and locally, such as:

International:

  • Cristiano Ronaldo: Soccer
  • Lionel Messi: Soccer
  • Roger Federer: Tennis

Local:

  • Table Tennis: Feng Tianwei
  • Swimming: Joseph Schooling

However, few to no Singaporeans could say out even the name of an NBA player, apart from Michael Jordan, who has retired 16 years ago in 2003. However, there has been an increase in interest in the sport, as more and more locals begin to be associated with the sport.

Therefore, the team wishes to teach and showcase the insights behind each NBA game for the rising pool of basketball enthusiasts. This will serve to allow basketball enthusiasts get a better appreciation of the game, and help players with their basketball skills by providing them with actionable insights on how to improve their game. This will be done through data visualisation insights derived from the premier players and teams of the NBA.

OBJECTIVE


This visualisation aims to provide insights into the following:

  1. What is the key attribute to help basketball teams win games
  2. Is height truly essential to be a good basketball player
  3. Which type of shot will make you a more efficient player



SELECTED DATABASE


The Data Sets we will be using for our analysis and for our application is listed below:

Dataset/Source Rationale Of Usage
NBA Player Profile

Having the profile statistics (eg. Height, Weight) of an NBA player will allow us to accurately assess if there is indeed any correlation between his player profile and his ability to be a good player.

NBA Team Breakdown

This will help us to determine which are the teams that consistently outperform other teams, and through analysis allow us to determine the key aspects that gives each team their edge.

NBA Player Scoring Breakdown

This will help us to properly segment each player into different categories based on various metrics, which will ultimately help us to determine what are the things that each player does that best maximizes their abilities.



BACKGROUND SURVEY


We did basic background research on some existing visualizations or dashboards we could drive inspirations from or make it better. Below are a few visuals we found:

References to Existing Visualizations Key Takeaways
Ball1.png

Title: NBA Shot Tracker
Link: http://www.estherbaek.com/NBAShotTracker/

Feedback Clear illustration of insights on player’s field goal percentage Simple and intuitive UI to better engage audiences Too little information, would require more information to better understand individual’s game

Ball2.png

Title: Player Analysis
Link: https://shotline.peterbeshai.com/p/1415

Feedback Detailed breakdown of player’s efficiency rate in the 2 key offensive tools Leveraged on time-series data to better understand player’s growth or decline Too little information, would require more information to better understand individual’s game

Ball3.png

Title: Best Draft Class
Link: https://towardsdatascience.com/basketball-analytics-the-best-draft-class-13a6eac0cdb5

Feedback Could have included trend line to predict next round of best draft class There is a lack of filter to show what are the factors being considered in efficiency

PROPOSED STORYBOARD


With a clearer idea of what we want after looking at a few visualization examples, we came up with a few storyboard ideas.

Proposed Storyboard Description
Landing page ball4life.jpg

Homepage This page will display a brief overview of our motivation and list down the key areas which the visualisation will address. This provides a first touch point for users and sets the user journey in an organised manner.

Ball5.jpeg

Understanding Efficiency of James Harden The visualization in this page will

Ball6.jpeg

This implements the shooting efficiency of an NBA athlete on the court to measure where does he perform the best in

Ball7.jpeg

This graph draws inspiration from a ternary graph to implement a rating based on a few factors, such as:

  1. Height
  2. Weight
  3. Offensive Efficiency
  4. Defensive Efficiency


CHALLENGES


Challenges Mitigation Plan
  • Data Extraction from Web Sources/Pages.

Refine web scraping techniques to write automated scripts to scrape from NBA web pages

  • Data Cleaning and Transformation
  • Assign each team member with a data source to clean
  • Organize team meeting to collate it into desired form
  • Lack of Experience with R and ShinyR
  • Go through available DataCamp courses
  • Refers to online documentation and past examples to learn



TIMELINE


Ball8.png





TOOLS/TECHNOLOGIES


Ball9.png



COMMENTS


Feel free to leave us some comments so that we can improve!

No. Name Date Comments
1. Insert your name here Insert date here Insert comment here
2. Insert your name here Insert date here Insert comment here
3. Insert your name here Insert date here Insert comment here