Difference between revisions of "1718t1is428T8"

From Visual Analytics for Business Intelligence
Jump to navigation Jump to search
 
(44 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
[[File:DOTA.png|center]]
 
[[File:DOTA.png|center]]
  
 +
{| style="background-color:#32cd32; color:white padding: 5px 0 0 0;" width="100%" height=50px cellspacing="0" cellpadding="0" valign="top" border="0" |
  
{| style="background-color:white; color:#e62b1e 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: 100; text-align:center; line-height: wrap_content; font-size:16px; border-bottom:1px solid #32cd32; border-top:1px solid #32cd32; font-family: helvetica"> [[Project_Groups | <b>Project Groups</b>]]
  
| style="vertical-align:top;width:16%;" | <div style="padding: 3px; font-weight: 100; text-align:center; line-height: wrap_content; font-size:16px; border-bottom:1px solid black; border-top:1px solid black; font-family: helvetica"> [[Project_Groups | <b>Project Groupings</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 #32cd32; border-top:1px solid #32cd32; font-family: helvetica"> [[1718t1is428T8 | <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 black; border-top:1px solid black; font-family: helvetica"> [[1718t1is428T8 | <b>Proposal</b>]]
+
| style="vertical-align:top;width:16%;" | <div style="padding: 3px; font-weight: 100; text-align:center; line-height: wrap_content; font-size:16px; border-bottom:1px solid #32cd32; border-top:1px solid #32cd32; font-family: helvetica"> [[1718t1is428T8 Poster | <b>Poster</b>]]
  
| style="vertical-align:top;width:16%;" | <div style="padding: 3px; font-weight: 100; text-align:center; line-height: wrap_content; font-size:16px; border-bottom:1px solid black; border-top:1px solid black; font-family: helvetica"> [[1718t1is428T8: Poster | <b>Poster</b>]]
+
| style="vertical-align:top;width:16%;" | <div style="padding: 3px; font-weight: 100; text-align:center; line-height: wrap_content; font-size:16px; border-bottom:1px solid #32cd32; border-top:1px solid #32cd32; font-family: helvetica"> [[1718t1is428T8 Application |   <b>Application</b>]]
  
| style="vertical-align:top;width:16%;" | <div style="padding: 3px; font-weight: 100; text-align:center; line-height: wrap_content; font-size:16px; border-bottom:1px solid black; border-top:1px solid black; font-family: helvetica"> [[1718t1is428T8: Application | <b>Application</b>]]
+
| style="vertical-align:top;width:16%;" | <div style="padding: 3px; font-weight: 100; text-align:center; line-height: wrap_content; font-size:16px; border-bottom:1px solid #32cd32; border-top:1px solid #32cd32; font-family: helvetica"> [[1718t1is428T8 Research Paper | <b>Research Paper</b>]]
 +
|}
  
| style="vertical-align:top;width:16%;" | <div style="padding: 3px; font-weight: 100; text-align:center; line-height: wrap_content; font-size:16px; border-bottom:1px solid black; border-top:1px solid black; font-family: helvetica"> [[1718t1is428T8: Research Paper | <b>Research Paper</b>]]
+
<br/>
|}
+
<div style="background: #32cd32; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px;letter-spacing:-0.08em;font-size:20px"><font color=white face="Century Gothic">Introduction</font></div>
 +
<p align="justify">
 +
[[File:Singaporecbd.jpg|center|350px]]
 +
<br/><br/>
 +
Singapore’s location at the tip of the Malay Peninsula has long made it a vital hub for the trade of goods through the Straits of Malacca. As a city-state with scarce natural resources, international trade forms the lifeblood of this bustling country, while at the same time, forming its greatest vulnerability. This establishes the importance of understanding trade patterns, influenced by multiple macroeconomic factors, to safeguard the stability and future of the nation.
 +
<br/><br/>
 +
Various government bodies such as the [https://www.google.com.sg/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&ved=0ahUKEwj1lKWp7aTXAhWBOo8KHfhBAVMQFggkMAA&url=https%3A%2F%2Fwww.iesingapore.gov.sg%2F-%2Fmedia%2FIE-Singapore%2FFiles%2FPublications%2FSingapore-Trade-Statistics%2FQuarterly-Trade-Statistics%2F2017%2FTrade-Report-2Q-2017.ashx&usg=AOvVaw3DeVXjqQFF7ykCECV4cDpa Ministry of Trade and Industry] (MTI) and Innovation and Enterprise (IE) Singapore pay close attention to these figures, continuously monitoring the trade numbers, its individual components and the countries that contribute to it. While the [http://www.straitstimes.com/business/economy/mixed-fortunes-for-singapore-firms-in-china Straits Times] regularly refers to trade figures when reporting trade-related news. As such, there is a need for a visualisation tool to quickly, clearly and concisely display this information for the relevant agencies to analyse and for the public to consume.
  
<br/><div style="background: black; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px;letter-spacing:-0.08em;font-size:20px"><font color=#e62b1e face="Century Gothic">INTRODUCTION</font></div>
+
</p>
DOTA 2 (Defense Of The Ancients 2) is a game where you play as one side of the ultimate struggle between the Radiant and the Dire. Each side consists of 5 players and the objective is to destroy the opponent's key structure and defending your own.
 
  
As of 13th October 2017, there are 112 heroes to be chosen for play. Heroes are the essential element of DOTA 2, as the course of the match is dependent on their intervention. During a match, two opposing teams select 5 out of 112 heroes that accumulate experience and gold to grow stronger and gain new abilities in order to destroy the opponent's key structure. Most heroes have a distinct role that defines how they affect the battlefield, though many heroes can perform multiple roles. 
+
<br/>
 +
<div style="background: #32cd32; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px;letter-spacing:-0.08em;font-size:20px"><font color=white face="Century Gothic">Problem and Motivation</font></div>
  
DOTA 2 is now not just some any other game being played for purely personal entertainment. Every year for the past 6 years, DOTA 2 tournaments has broken the record for the biggest prize pool in e-sports history. The tournament started off with an initial prize money of USD$1.6 million in 2011 before rising to USD$10 million by 2014, past USD$20 million in 2016, and recently close to USD$25 million in 2017. These eight-figure prizes have attracted the eye of mainstream media, and DOTA 2 made it to the front page of The New York Times. With that much money on the line, professional teams recognize the importance of hero selection.
+
<p align="justify">
  
<br/><div style="background: black; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px;letter-spacing:-0.08em;font-size:20px"><font color=#e62b1e face="Century Gothic">PROBLEM</font></div>
+
After reviewing the existing reports prepared by [https://www.google.com.sg/url?sa=t&rct=j&q=&esrc=s&source=web&cd=3&ved=0ahUKEwjfgJ7xianXAhXBRo8KHbmCA7cQFggxMAI&url=https%3A%2F%2Fwww.mti.gov.sg%2FResearchRoom%2FSiteAssets%2FPages%2FEconomic-Survey-of-Singapore-2015%2FFullReport_AES2015.pdf&usg=AOvVaw3jR6IlTrnQsDEhWEqBvpHn MTI] and similar graphs reported by the Straits Times, we identified the following objectives for our visualisation:
 +
<br/><br/>
 +
'''The Objectives'''
 +
<br/><br/>
 +
1) Visualisation of the trends in imports and exports over time, by country
 +
<br/><br/>
 +
[[File:TradeReportQ217.PNG|750px]]
 +
<br/><br/>
 +
2) Visualisation of the % Share of trade from each country
 +
<br/><br/>
 +
[[File:STexports.PNG|600px]]
 +
<br/><br/>
 +
We also identified the following areas in which our visualisation can value-add to:
 +
<br/><br/>
 +
'''Problems Solved'''
 +
<br/><br/>
 +
1) Interactivity and Customisability  - By allowing the reader to interact with the graph to filter periods to view as well as the level of detail. This will facilitate user-led investigation and exploration of the data without any data processing tools.
 +
<br/><br/>
 +
2) Professional and ready to use format – This will save stakeholders such as MTI and SPH time in the preparation of graphs, especially when graph formatting is necessary before release to the public.
 +
<br/><br/>
 +
3) Clarity - By utilising the data visualisation concepts and charts we've learned, we aim to display the data in clearer, more easily consumed formats
  
The problem here is that with the ever increasing prize pool for the tournaments, there are professional DOTA 2 players joining in aiming for the top prize money. In order to increase their chances to get into the finals and eventually win the top prize money, on top of possessing skill and techniques, they have to pick the 5 best heroes out of the 112 available heroes to play as a team. Some matches even took up to ten minutes for both teams to select their heroes.
 
  
 +
<br/><br/>
 +
This will provide a one stop visualization for stakeholders in the services industry in Singapore, to quickly consume the aspects of this data that is relevant to them, in an aesthetically pleasing and intuitive manner.
 +
</p>
  
However, finding this 'dream team' is proven to be extremely time consuming as there are about 134 million hero combinations. No team can afford the time to play multiple matches of all these 140 million hero teams just to find out the 'dream team', not to even mention spending time playing thousands of matches to improve the overall teamwork and synergy to prepare for the tournament.
+
<br/>
 +
<div style="background: #32cd32; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px;letter-spacing:-0.08em;font-size:20px"><font color=white face="Century Gothic">Data Source</font></div>
  
Even so, putting all the eggs into 1 basket can be pretty undesirable as during the actual tournament, any heroes in the 'dream team' could be picked by the opponent team or even banned for play in the match. Teams will usually specialize in a few heroes to prevent being placed in such difficult situation but different heroes having differing abilities will disrupt the synergy between the team.  
+
We are using the following two datasets from IE Singapore:
 +
<br/><br/> [http://www.tablebuilder.singstat.gov.sg/publicfacing/createDataTable.action?refId=4713 Merchandise Imports By Region/Country, Monthly]
 +
<br/><br/>
 +
[http://www.tablebuilder.singstat.gov.sg/publicfacing/createDataTable.action?refId=4715 Merchandise Exports By Region/Country, Monthly]
  
<br/><div style="background: black; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px;letter-spacing:-0.08em;font-size:20px"><font color=#e62b1e face="Century Gothic">OBJECTIVES</font></div>
+
Both data sources (import and export) consists information about the monthly trade volume from January 1976 to September 2017 between Singapore and 114 other countries/areas, where the data included existing countries and also dissolved countries that do not exists today.
In this project, we would like to use data from past matches to create a visualization that helps users increase the chances of winning a match by determining:
+
* What are the main factors that should be focused on in order to win a match?
 
* Which heroes are best to be played with a specific chosen hero?
 
  
<br/><div style="background: black; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px;letter-spacing:-0.08em;font-size:20px"><font color=#e62b1e face="Century Gothic">DATA SOURCE</font></div>
+
<div style="background: #32cd32; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px;letter-spacing:-0.08em;font-size:20px"><font color=white face="Century Gothic">Visualisation Plan</font></div>
 +
To meet the required objectives of customisability and interactivity, we drew our inspiration from [http://www.nytimes.com/interactive/2013/03/29/sports/baseball/Strikeouts-Are-Still-Soaring.html?ref=baseball Mike Bostock's Visualisation on Baseball Strikeouts]. We would like to reproduce his method of incorporating the many components of a time series visualisation into one graph, hidden in the background of the overall trend, as well as the ability to select a component to view when needed.
 +
<br/><br/>
 +
[[File:Strikeouts_on_the_Rise.PNG]]
 +
<br/><br/>
 +
'''Trend Over Time'''
 +
<br/><br/>
 +
Our plan is to produce a similar visualisation, with countries instead of baseball players and exports or imports of services instead of strikeouts. This will allow us to view the long-term trend of this dataset while viewing the individual country data in the background, as well as allowing selection and highlighting of individual countries upon request.
 +
<br/><br/>
  
We are using the [https://www.kaggle.com/jraramirez/dota-2-matches-dataset Dota 2 Matches Dataset] from Kaggle.  
+
For additional customisability, we will include filters to toggle between viewing the absolute merchandise trade, the percentage change over the years and selection of imports or exports. On top of that, to facilitate country selection, we will have a bar graph on the right denoting the measure selected, such as exports, by each individual country. This bar graph will be linked to the time series chart, allowing us to quickly view and select, for example, the largest importer from Singapore and quickly highlight it on the main chart to view its trend relative to the other countries.
 +
<br/><br/>
 +
'''Components Analysis'''
 +
<br/><br/>
 +
[[File:Chord.PNG|500px]]
 +
<br/><br/>
 +
In addition to analysing the trade trends over time, another area of interest is in the amount of trade we do with each individual country. In a particular year, who was our largest trade partner as well as how much of the trade was imports versus exports. To visualise, we chose the [http://www.delimited.io/blog/2014/11/18/interactive-chord-diagrams-in-d3 Chord Diagram] implementation of the same problem as it is an intuitive but clear way of visualising trade flow and its components.
 +
<br/><br/>
 +
The chord chart will order the countries in descending amount of imports and exports done with that country, allowing us to quickly view which countries most of our exports go to, as well as whether our imports with them are equally large, essentially displaying the trade balance as well.  
  
The dataset consists of the following columns:
+
<br/>
   
+
<div style="background: #32cd32; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px;letter-spacing:-0.08em;font-size:20px"><font color=white face="Century Gothic">Key Technical Challenges</font></div>
* match_id - INTEGER, unique match id
 
* match_seq_num - INTEGER, match sequence number
 
* radiant_win - STRING, boolean variable than indicates if radiant won or not in the match
 
* start_time - INTEGER, start time of the match
 
* duration - INTEGER, duration of the match
 
* tower_status_radiant - INTEGER, remaining health of the towers of the radiant side
 
* tower_status_dire - INTEGER, remaining health of the towers of the dire side
 
* barracks_status_radiant - INTEGER, remaining health of the barracks of the radiant side
 
* barracks_status_dire - INTEGER , remaining health of the towers of the direside
 
* cluster - INTEGER,
 
* first_blood_time - INTEGER, time when the first blood occured in the match
 
* lobby_type - INTEGER, type of the looby of the match
 
* human_players - INTEGER, number of human players in the match leagueid - INTEGER, league id
 
* positive_votes - INTEGER, number of positive votes
 
* negative_votes - INTEGER, number of negative votes
 
* game_mode - INTEGER, game mode
 
* engine - INTEGER, engine
 
* picks_bans - STRING, picks and bans
 
* parse_status - INTEGER, parse status
 
* item - STRING, a complex JSON that also include all the columns mentioned but may need more processing since the more interesting data are found here (e.g. chats, teamfights, purchase logs, etc. )
 
  
<br/><div style="background: black; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px;letter-spacing:-0.08em;font-size:20px"><font color=#e62b1e 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:
 
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%"
 
{| class="wikitable" style="background-color:#FFFFFF;" width="100%"
 
|-
 
|-
! style="font-weight: bold;background: black;color:#e62b1e;width: 50%;" | Key Technical Challenges
+
! style="font-weight: bold;background: #32cd32;color:white;width: 50%;" | Key Technical Challenges
! style="font-weight: bold;background: black;color:#e62b1e;" | Plans to resolve these issues
+
! style="font-weight: bold;background: #32cd32;color:white;" | Plans to resolve these issues
 
|-
 
|-
 
| <center> Data Cleaning & Transformation </center> ||  
 
| <center> Data Cleaning & Transformation </center> ||  
Line 81: Line 108:
 
|}
 
|}
  
<br/><div style="background: black; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px;letter-spacing:-0.08em;font-size:20px"><font color=#e62b1e face="Century Gothic">PROJECT TIMELINE</font></div>
+
<br/>
 +
<div style="background: #32cd32; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px;letter-spacing:-0.08em;font-size:20px"><font color=white face="Century Gothic">Project Timeline</font></div>
 
<p>The timeline for this project until its completion is as follows:</p>
 
<p>The timeline for this project until its completion is as follows:</p>
  
 
[[File:T8_Timeline.png]]
 
[[File:T8_Timeline.png]]
  
<br/><div style="background: black; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px;letter-spacing:-0.08em;font-size:20px"><font color=#e62b1e face="Century Gothic">TOOLS/TECHNOLOGIES</font></div>
+
<br/>
 +
<div style="background: #32cd32; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px;letter-spacing:-0.08em;font-size:20px"><font color=white face="Century Gothic">Tools & Technologies</font></div>
 
<p>The tools and technologies we will be using for this project:</p>
 
<p>The tools and technologies we will be using for this project:</p>
  
Line 97: Line 126:
 
<!--
 
<!--
  
<br/><div style="background: black; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px;letter-spacing:-0.08em;font-size:20px"><font color=#e62b1e face="Century Gothic">REFERENCES</font></div>
+
<br/>
 +
<div style="background: #32cd32; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px;letter-spacing:-0.08em;font-size:20px"><font color=white face="Century Gothic">References</font></div>
 
-->
 
-->
  
<br/><div style="background: black; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px;letter-spacing:-0.08em;font-size:20px"><font color=#e62b1e face="Century Gothic">COMMENTS</font></div>
+
<br/>
 +
<div style="background: #32cd32; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px;letter-spacing:-0.08em;font-size:20px"><font color=white face="Century Gothic">Comments</font></div>
 +
Please give us feedbacks! Thank you!

Latest revision as of 17:54, 23 November 2017

DOTA.png


Introduction

Singaporecbd.jpg



Singapore’s location at the tip of the Malay Peninsula has long made it a vital hub for the trade of goods through the Straits of Malacca. As a city-state with scarce natural resources, international trade forms the lifeblood of this bustling country, while at the same time, forming its greatest vulnerability. This establishes the importance of understanding trade patterns, influenced by multiple macroeconomic factors, to safeguard the stability and future of the nation.

Various government bodies such as the Ministry of Trade and Industry (MTI) and Innovation and Enterprise (IE) Singapore pay close attention to these figures, continuously monitoring the trade numbers, its individual components and the countries that contribute to it. While the Straits Times regularly refers to trade figures when reporting trade-related news. As such, there is a need for a visualisation tool to quickly, clearly and concisely display this information for the relevant agencies to analyse and for the public to consume.


Problem and Motivation

After reviewing the existing reports prepared by MTI and similar graphs reported by the Straits Times, we identified the following objectives for our visualisation:

The Objectives

1) Visualisation of the trends in imports and exports over time, by country

TradeReportQ217.PNG

2) Visualisation of the % Share of trade from each country

STexports.PNG

We also identified the following areas in which our visualisation can value-add to:

Problems Solved

1) Interactivity and Customisability - By allowing the reader to interact with the graph to filter periods to view as well as the level of detail. This will facilitate user-led investigation and exploration of the data without any data processing tools.

2) Professional and ready to use format – This will save stakeholders such as MTI and SPH time in the preparation of graphs, especially when graph formatting is necessary before release to the public.

3) Clarity - By utilising the data visualisation concepts and charts we've learned, we aim to display the data in clearer, more easily consumed formats

This will provide a one stop visualization for stakeholders in the services industry in Singapore, to quickly consume the aspects of this data that is relevant to them, in an aesthetically pleasing and intuitive manner.


Data Source

We are using the following two datasets from IE Singapore:

Merchandise Imports By Region/Country, Monthly

Merchandise Exports By Region/Country, Monthly

Both data sources (import and export) consists information about the monthly trade volume from January 1976 to September 2017 between Singapore and 114 other countries/areas, where the data included existing countries and also dissolved countries that do not exists today.


Visualisation Plan

To meet the required objectives of customisability and interactivity, we drew our inspiration from Mike Bostock's Visualisation on Baseball Strikeouts. We would like to reproduce his method of incorporating the many components of a time series visualisation into one graph, hidden in the background of the overall trend, as well as the ability to select a component to view when needed.

Strikeouts on the Rise.PNG

Trend Over Time

Our plan is to produce a similar visualisation, with countries instead of baseball players and exports or imports of services instead of strikeouts. This will allow us to view the long-term trend of this dataset while viewing the individual country data in the background, as well as allowing selection and highlighting of individual countries upon request.

For additional customisability, we will include filters to toggle between viewing the absolute merchandise trade, the percentage change over the years and selection of imports or exports. On top of that, to facilitate country selection, we will have a bar graph on the right denoting the measure selected, such as exports, by each individual country. This bar graph will be linked to the time series chart, allowing us to quickly view and select, for example, the largest importer from Singapore and quickly highlight it on the main chart to view its trend relative to the other countries.

Components Analysis

Chord.PNG

In addition to analysing the trade trends over time, another area of interest is in the amount of trade we do with each individual country. In a particular year, who was our largest trade partner as well as how much of the trade was imports versus exports. To visualise, we chose the Chord Diagram implementation of the same problem as it is an intuitive but clear way of visualising trade flow and its components.

The chord chart will order the countries in descending amount of imports and exports done with that country, allowing us to quickly view which countries most of our exports go to, as well as whether our imports with them are equally large, essentially displaying the trade balance as well.


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 Plans to resolve these issues
Data Cleaning & Transformation
  • Understanding the data
  • Cleaning and Transforming the data together
Unfamiliarity in Javascript, especially D3 Libraries
  • Attending D3 Programming Workshop
  • Research on different types of charts
  • Independent Learning on D3 Libraries
  • Asking questions on sites like StackOverflow to seek help


Project Timeline

The timeline for this project until its completion is as follows:

T8 Timeline.png


Tools & Technologies

The tools and technologies we will be using for this project:

  • Data Cleaning
    • Excel
    • JMP
    • R
  • Data Visualization
    • D3.js


Comments

Please give us feedbacks! Thank you!