Difference between revisions of "Ball4life proposal"

From Visual Analytics for Business Intelligence
Jump to navigation Jump to search
Line 96: Line 96:
 
{| 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: #141414;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: #141414;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/>
+
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>
 
'''Title''': Indonesia Growth of Export by Sector
 
[[File:Cakrawala_Background2.png|300px|frameless|center]]
 
<br/>
 
'''Source''': https://www.kemenperin.go.id/statistik/peran.php?ekspor=1
 
</center>
 
 
 
||
 
'''Positive Points:'''
 
# 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.
 
 
 
'''Negative Points:'''
 
# 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>
 
'''Title''': Marchendise Trade Performance
 
[[File:Cakrawala_Background3.png|300px|frameless|center]]
 
<br/>
 
'''Source''': https://www.singstat.gov.sg/modules/infographics/singapore-international-trade
 
</center>
 
 
 
||
 
'''Positive Points:'''
 
# It shows the 2 information at once, which are merchandise trade value and the trading partners in 2018.
 
# Able to spot which the highest import and export trading partner clearly by the bubble position and its size.
 
 
 
'''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>
 
'''Title''': ASEAN's Stat
 
[[File:Cakrawala_Background4.png|300px|frameless|center]]
 
<br/>
 
'''Source''': https://data.aseanstats.org/dashboard/tis
 
</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%"
 
|-
 
! style="font-weight: bold;background: #141414;color:#fbfcfd;width: 45%;" | Visual Considerations
 
! style="font-weight: bold;background: #141414;color:#fbfcfd;width: 55%" | Insights / Comments
 
|-
 
| <center>
 
'''Title''': Candlestick Graph
 
[[File:Cakrawala_ConsiderationVisual1.png|250px|frameless|center]]
 
'''Source''': https://thestophunter.co.uk/technical-analysis-candlestick-charts/
 
</center>
 
 
 
||
 
'''Show the price movement at given instrument'''
 
*'''Pros:'''
 
** 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:ball2.png|300px|frameless|center]]
[[File:Cakrawala_ConsiderationVisual2.png|250px|frameless|center]]
+
Title: Player Analysis
'''Source''': https://www.data-to-viz.com/graph/chord.html
+
Link: https://shotline.peterbeshai.com/p/1415
 
</center>
 
</center>
  
 
||  
 
||  
'''Shows flows / connection between several entities'''
+
'''Feedback'''
*'''Pros:'''
+
Detailed breakdown of player’s efficiency rate in the 2 key offensive tools
** Aim to show the import and export of Indonesia
+
Leveraged on time-series data to better understand player’s growth or decline
** With highlighting, we will be able to spot them in and outflow of Indonesia’s Trade
+
Too little information, would require more information to better understand individual’s game
 
 
*'''Cons:'''
 
** Over-cluttering makes figure unreadable (too many data / country)
 
** Hard to discover the pattern
 
 
|-
 
|-
  
 
| <center>
 
| <center>
'''Title''': Choropleth Map
+
[[File:ball3.png|300px|frameless|center]]
[[File:Cakrawala_ConsiderationVisual3.png|250px|frameless|center]]
+
Title: Best Draft Class
'''Source''': https://viscomvibz.wordpress.com/2012/03/17/the-pros-cons-of-choropleth-maps-blot-maps-patch-maps/
+
Link: Link: https://towardsdatascience.com/basketball-analytics-the-best-draft-class-13a6eac0cdb5
 
</center>
 
</center>
  
 
||  
 
||  
'''Using coloring scheme to show the value levels'''
+
'''Feedback'''
*'''Pros:'''
+
Could have included trend line to predict next round of best draft class
** Can effectively show the reported country that works with Indonesia through the shaded area.
+
There is a lack of filter to show what are the factors being considered in efficiency
** 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>
 
'''Title''': Sunburst Graph
 
[[File:Cakrawala_ConsiderationVisual4.png|250px|frameless|center]]
 
'''Source''': https://observablehq.com/@julesbonnard/sunburst
 
</center>
 
 
||
 
'''Display the hierarchical data in circular format'''
 
*'''Pros:'''
 
** Can visualize the hierarchical of import and export items based on the amount
 
** Can visualize the breakdown between oil & gas and non-oil & gas
 
 
*'''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/>
 
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.
 
 
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/>
 
 
==<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>==
 
==<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/>
 
<br/>
Below is the proposed story board for our project:
+
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>
 
 
{| 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: #141414;color:#fbfcfd;width: 45%;" | Proposed Storyboard  
! style="font-weight: bold;background: #141414;color:#fbfcfd;width: 55%" | Insights / Comments
+
! style="font-weight: bold;background: #141414;color:#fbfcfd;width: 55%" | Description
 
|-
 
|-
 
| <center>
 
| <center>
'''Title''': DASHBOARD 1 - OVERVIEW (STORY 1 - OVERVIEW)
+
[[File:ball4.jpeg|300px|frameless|center]]
[[File:Cakrawala_ProposedStoryboard1.png|400px|frameless|center]]
 
</center>
 
 
 
 
||  
 
||  
* Aim to show the overall import and export of Indonesia over the year (Graph 1.1)
+
'''Homepage'''
* Aim to show the proportion of exported (Graph 1.2) and imported (Graph 1.3) goods at certain year
+
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.
* 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>
 
| <center>
'''Title''': DASHBOARD 1 - OVERVIEW (STORY 2 - EXPORT, STORY 3 - IMPORT)
+
[[File:ball5.jpeg|300px|frameless|center]]
[[File:Cakrawala_ProposedStoryboard2.png|400px|frameless|center]]
 
</center>
 
 
||  
 
||  
* Consist of two main stories: separated by Export and Import
+
'''Evolving Elements for Championship'''
* Aim to show the trend of import and export of Indonesia within certain year range (line graph)
+
The visualization in this page will list down all the former championship teams, display their game breakdown and highlight the key winning factor. This information can help illustrate the change in emphasis of the modern basketball game.
* 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>
 
| <center>
'''Title''': DASHBOARD 2 - CATEGORY (STORY 2 - EXPORT & IMPORT OF GAS & OIL; STORY 3 - EXPORT & IMPORT OF NON-GAS & OIL)
+
[[File:ball6.jpeg|300px|frameless|center]]
[[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.)
+
This implements the shooting efficiency of an NBA athlete on the court to measure where does he perform the best in
* Aim to show the trend of exported and imported goods category of Indonesia within certain year range (line graph)
 
* 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>
 
| <center>
'''Title''': DASHBOARD 3 - TRADE BALANCE
+
[[File:ball7.jpeg|300px|frameless|center]]
[[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
+
This graph draws inspiration from a ternary graph to implement a rating based on a few factors, such as:
* 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).
+
1. Height
 +
2. Weight
 +
3. Shooting Efficiency
 +
|-
 
|}
 
|}
</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>TECHNOLOGIES</center></font></div>==
 
<br/>
 
The technologies we will be using for this Project is as below:
 
[[File:Cakrawala_Technologies_V2.png|650px|frameless|center]]
 
  
 
<br/>
 
<br/>
Line 335: Line 185:
 
! style="font-weight: bold;background: #141414;color:#fbfcfd;width: 55%" | Mitigation Plan  
 
! style="font-weight: bold;background: #141414;color:#fbfcfd;width: 55%" | Mitigation Plan  
 
|-
 
|-
 +
 
|
 
|
* Unfamiliarity of visualisation tools such as R, R Shiny, Tableau.
+
* Data Extraction from Web Sources/Pages.
 
||  
 
||  
* Hands on practice using the different training platforms such as Data Camps
+
Refine web scraping techniques to write automated scripts to scrape from NBA web pages
* Watch video tutorials from YouTube
 
* Peer Learning
 
 
|-
 
|-
 +
 
|
 
|
* Unfamiliarity of data cleaning and transformation using Tableau Prep
+
* Data Cleaning and Transformation
 +
 
 
||  
 
||  
* Attend workshop on data cleaning methods
+
* Assign each team member with a data source to clean
* Watch video tutorials on how to fully utilise Tableau Prep
+
* Organize team meeting to collate it into desired form
* 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
+
* Lack of Experience with R and ShinyR
 
||  
 
||  
* Research and learn the situation of Indonesia’ export and import in the last ten years
+
* Go through available DataCamp courses
* Read articles or news to find out the recent trends and global updates on trade
+
* Refers to online documentation and past examples to learn
 
|}
 
|}
 +
 
<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>==
 
==<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/>
 
<br/>
[[File:Cakrawala_TimelineProposal.png|1000px|frameless|center]]
+
[[File:ball8.png|1000px|frameless|center]]
 +
<br>
 +
<br/>
  
 
<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>Tools/Technologies</center></font></div>==
 +
<br/>
 +
[[File:ball9.png|1000px|frameless|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>COMMENTS</center></font></div>==
 
==<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/>

Revision as of 22:41, 13 October 2019

Ball4life.png


Team

 

Proposal

 

Poster

 

Application

 

Research Paper


<--- 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: 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
Ball4.jpeg

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

Evolving Elements for Championship The visualization in this page will list down all the former championship teams, display their game breakdown and highlight the key winning factor. This information can help illustrate the change in emphasis of the modern basketball game.

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. Shooting 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