Difference between revisions of "Two Eyes One Pizza"

From Visual Analytics for Business Intelligence
Jump to navigation Jump to search
 
(66 intermediate revisions by 2 users not shown)
Line 3: Line 3:
 
<!--Header-->
 
<!--Header-->
 
{|style="background-color:#1D1D1D; color:#8b1209; padding: 10 0 10 0;" width="100%" cellspacing="0" cellpadding="0" valign="top" border="0"  |
 
{|style="background-color:#1D1D1D; color:#8b1209; padding: 10 0 10 0;" width="100%" cellspacing="0" cellpadding="0" valign="top" border="0"  |
| style="padding:0.2em; font-size:100%; background-color::#1D1D1D; text-align:center; color:#F5F5F5" width="10%" |
 
[[1920t1is428g1/Two_Eyes_One_Pizza |<font color="#F5F5F5" size=2 face="Helvetica"><b>HOME</b></font>]]
 
  
 
| style="background:none;" width="1%" | &nbsp;
 
| style="background:none;" width="1%" | &nbsp;
 
| style="padding:0.2em; font-size:100%; background-color:#8b1209;  border-bottom:0px solid #3D9DD7; text-align:center; color:#F5F5F5" width="10%" |  
 
| style="padding:0.2em; font-size:100%; background-color:#8b1209;  border-bottom:0px solid #3D9DD7; text-align:center; color:#F5F5F5" width="10%" |  
[[1718t1is428T10_Proposal|<font color="#F5F5F5" size=2 face="Helvetica"><b>PROPOSAL</b></font>]]
+
[[Two_Eyes_One_Pizza|<font color="#F5F5F5" size=2 face="Helvetica"><b>PROPOSAL</b></font>]]
  
 
| style="background:none;" width="1%" | &nbsp;
 
| style="background:none;" width="1%" | &nbsp;
 
| style="padding:0.2em; font-size:100%; background-color:#1D1D1D;  border-bottom:0px solid #3D9DD7; text-align:center; color:#F5F5F5" width="10%" |  
 
| style="padding:0.2em; font-size:100%; background-color:#1D1D1D;  border-bottom:0px solid #3D9DD7; text-align:center; color:#F5F5F5" width="10%" |  
[[1718t1is428T10_Poster|<font color="#F5F5F5" size=2 face="Helvetica"><b>POSTER</b></font>]]
+
[[Two_Eyes_One_Pizza_Poster|<font color="#F5F5F5" size=2 face="Helvetica"><b>POSTER</b></font>]]
  
 
| style="background:none;" width="1%" | &nbsp;
 
| style="background:none;" width="1%" | &nbsp;
 
| style="padding:0.2em; font-size:100%; background-color:#1D1D1D;  border-bottom:0px solid #3D9DD7; text-align:center; color:#F5F5F5" width="10%" |  
 
| style="padding:0.2em; font-size:100%; background-color:#1D1D1D;  border-bottom:0px solid #3D9DD7; text-align:center; color:#F5F5F5" width="10%" |  
[[1718t1is428T10_Application|<font color="#F5F5F5" size=2 face="Helvetica"><b>APPLICATION</b></font>]]
+
[[Two_Eyes_One_Pizza_Application|<font color="#F5F5F5" size=2 face="Helvetica"><b>APPLICATION</b></font>]]
  
 
| style="background:none;" width="1%" | &nbsp;
 
| style="background:none;" width="1%" | &nbsp;
 
| style="padding:0.2em; font-size:100%; background-color:#1D1D1D;  border-bottom:0px solid #3D9DD7; text-align:center; color:#F5F5F5" width="10%" |  
 
| style="padding:0.2em; font-size:100%; background-color:#1D1D1D;  border-bottom:0px solid #3D9DD7; text-align:center; color:#F5F5F5" width="10%" |  
[[1718t1is428T10_Research Paper|<font color="#F5F5F5" size=2 face="Helvetica"><b>RESEARCH PAPER</b></font>]]
+
[[Two_Eyes_One_Pizza_Research Paper|<font color="#F5F5F5" size=2 face="Helvetica"><b>RESEARCH PAPER</b></font>]]
 
|}  
 
|}  
 
<!--/Header-->
 
<!--/Header-->
Line 27: Line 25:
 
<br/>
 
<br/>
  
==<div style="background: #8b1209; padding: 15px; line-height: 0.3em; text-indent: 15px; font-size:18px; font-family:Helvetica"><font color= #FFFFFF>Problem and Motivation</font></div>==
+
==<div style="background: #8b1209; padding: 15px; line-height: 0.3em; text-indent: 15px; font-size:18px; font-family:Helvetica"><font color= #FFFFFF>Introduction</font></div>==
 
<div style="font-family:Helvetica;font-size:16px">
 
<div style="font-family:Helvetica;font-size:16px">
To build an exploratory analysis tool that allows
+
International Food Chain (IFC) is a leading brand in its sector, with over 18000 outlets worldwide and an ever-growing presence in the global market. In Taiwan alone, IFC has over 240 branches and are constantly expanding.
  
Business profiling of the company’s outlet to determine point of interests that can generate insights such as:
+
However, as the franchise grows bigger, so does its challenges. One of the challenges involves the lack of a tool to efficiently compare the performance of each chain to one another.
Highest earning outlets
 
Relative performance of outlets
 
Outlet’s profile patterns
 
Item sales information
 
  
Create dynamic visualisations to make informed business decisions:
+
Leveraging on this fact, our group aims to build a dashboard for IFC that allows for visualization and modeling. We hope to track the performance of each chain in relation to Point-Of-Interests surrounding each chain, uncovering and comprehending phenomena, with the aid of spatial data.
Eg. Determining locations for new outlet opening with matching POIs of high sales outlets
 
Clearly visualise the sales of different outlets and insights on what can be improved
 
  
 +
This project was made in tandem with: https://wiki.smu.edu.sg/1920t1smt201/G1-Group10
  
Scalable program to incorporate future data to generate current information (Using data from other countries besides Taiwan)
+
==<div style="background: #8b1209; padding: 15px; line-height: 0.3em; text-indent: 15px; font-size:18px; font-family:Helvetica"><font color= #FFFFFF>Problem and Motivation</font></div>==
 +
<div style="font-family:Helvetica;font-size:16px">
 +
To build a dashboard that allows for:
  
 +
* Business profiling of the company’s outlet to determine Points-Of-Interests that can generate insights such as: Highest earning outlets, relative performance of outlets, outlet’s profile patterns and item sales information.
 +
* Creating dynamic visualisations to make informed business decisions, such as determining locations for new outlet openings with matching POIs of high sales outlets
 +
* Digitizing of each chain’s trade and delivery area
 +
* Scalable program to incorporate future data to generate current information (Using data from other cities besides Taiwan)
 +
* Easy and intuitive tool to quickly view information with regards to all branches
  
==<div style="background: #8b1209; padding: 15px; line-height: 0.3em; text-indent: 15px; font-size:18px; font-family:Helvetica"><font color= #FFFFFF>Information about Data</font></div>==
+
==<div style="background: #8b1209; padding: 15px; line-height: 0.3em; text-indent: 15px; font-size:18px; font-family:Helvetica"><font color= #FFFFFF>Objectives</font></div>==
  
 
<div style="font-family:Helvetica;font-size:16px">
 
<div style="font-family:Helvetica;font-size:16px">
This project DATA IS:
+
This project aims to provide insights into the following:
<br>
 
  
<font color="navy"><b>
+
# Outlets with the highest monthly sales
PLACE HOLDER
+
# Relative monthly performance of each outlet
</b></font color>
+
# Each branch geographical information, including the type and number of POI’s in the surroundings
 +
# Profiling of similar types of branches
 +
# Improvements for poor performing outlets
 +
# Scalable system to incorporate future data
  
 
==<div style="background: #8b1209; padding: 15px; line-height: 0.3em; text-indent: 15px; font-size:18px; font-family:Helvetica"><font color= #FFFFFF>Background Survey of Related Works</font></div>==
 
==<div style="background: #8b1209; padding: 15px; line-height: 0.3em; text-indent: 15px; font-size:18px; font-family:Helvetica"><font color= #FFFFFF>Background Survey of Related Works</font></div>==
 +
<div style="font-family:Helvetica;font-size:11px">
 
{| class="wikitable" style="background-color:#ffffff;" width="100%"
 
{| class="wikitable" style="background-color:#ffffff;" width="100%"
 
|-
 
|-
! style="font-weight: bold;background: #000000;color:#fbfcfd;width: 50%;" | Visualizations
+
! style="font-weight: bold;background: #000000;color:#fbfcfd;width: 10%;" | Visualizations
! style="font-weight: bold;background: #000000;color:#fbfcfd;" | Explaination
+
! style="font-weight: bold;background: #000000;color:#fbfcfd;width: 10%;" | Explaination
 
|-
 
|-
| [[Image:teamveg4.jpg|550px|center]]  
+
| [[Image:11.png|300px]]  
 
<br>
 
<br>
<center>Data source: http://bbvatourism.vizzuality.com/?nationality=US#tourism</center>
+
||
||
+
Data source: https://www.researchgate.net/publication/324949619_Visualization_of_Fast_Food_Restaurant_Location_using_Geographical_Information_System<br>
This visualisation enables the viewer to find out the countries that the tourists are coming from. This, combined with the thickness of the line to represent the relative number of tourists compared to the other countries will enable us to have a quick and clear overview. Additionally, the team will look into customising this current chart, to allow for a more detailed view of each countries' actual proportion of tourists that are coming into Singapore compared to the other countries being visited.
+
 +
The visualization provides the buffer polygons, as well as representing population density of the area through colour. By comparing the two, we can conclude whether the center of activity is proportional to the population density in a region. It allows us to perform further exploration to see what spatial information significantly affects the level of activity in a city, such as the availability of points-of-interest. This visualization is great as it allows the viewer to clearly see multiple dimensions dealing with spatial data in an elegant way.  
 +
 
 
|-
 
|-
| [[Image:teamveg1.jpg|550px|center]]  
+
| [[Image:12.png|300px]]  
 
<br>
 
<br>
<center>Data source: https://www.stb.gov.sg/statistics-and-market-insights</center>
+
||
||
+
Data source: https://www.researchgate.net/publication/324949619_Visualization_of_Fast_Food_Restaurant_Location_using_Geographical_Information_System<br>  
This visualisation comprises of two charts in one - a time-series line chart, and a bar chart, which compares the international visitor arrival with the year on year change. Despite the limitations with this visualisation (seemingly confusing), the team feels that it is necessary to give a broad overview of the overall trend in relation to the total number of visitors. Additionally, it would be good to subsequently break this down to enable zooming into a certain country's monthly changes.
+
The graph on the left shows the distribution of outlets on the geographical map. The right graph describes the outlets grid distribution, result from grid creation and spatial joint operation. From both figures, they can show the potential tendency of whether the outlets are clustered, and with the number of outlets in each grid. We could use them together to justify and adjust the outlet locations.
 
|-
 
|-
| [[Image:teamveg2.jpg|550px|center]]  
+
| [[Image:13.png|300px|]]  
 
<br>
 
<br>
<center>Data source: https://www.stb.gov.sg/statistics-and-market-insights/Documents/STB%20Q1%202016%20Tourism%20Sector%20Performance%20Report.pdf</center>
+
||
||
+
Data source: https://www.researchgate.net/publication/324949619_Visualization_of_Fast_Food_Restaurant_Location_using_Geographical_Information_System<br>  
The bar chart allow user to compare data between the countries. Next to each bar, we will indicate whether the number of visitors increases or decreases from the previous year, and how much different is the percentage.  This chart is to let our user get a rough gauge of the number of visitors to Singapore.
+
This visualization provides a novel way of linking a variable to its geographical location when hovering over the respective area. It would be great in our case, if we were to allow the user to view the corresponding branch through the tooltip, for example profit.
 
|-
 
|-
| [[Image:teamveg3.jpg|550px|center]]  
+
| [[Image:14.png|300px]]  
 
<br>
 
<br>
<center>Data source: https://www.stb.gov.sg/statistics-and-market-insights/Documents/STB%20Q1%202016%20Tourism%20Sector%20Performance%20Report.pdf</center>
+
||
||
+
Data source: https://www.researchgate.net/publication/324949619_Visualization_of_Fast_Food_Restaurant_Location_using_Geographical_Information_System<br>  
The used of stacked horizontal bar charts is an effective way of displaying the expenditure of visitors by country. The columns allow users to see the expenditure breakdown of visitors from the given country, as well as compare this breakdown against other visitor countries. This helps with understanding the distribution of expenditure by overseas visitors to Singapore, which will help with targeted marketing efforts such as market segmentation.
+
This shows kernel density surface, based on the number of fast food restaurants around Jakarta and distribute them smoothly, so it provides average surface estimation. Kernel density estimation allows us to observe both the centrality and agglomeration of existing outlets. This visualization allows us to view multiple dimensions at a time in an effective manner, through the choice of colour and size.
|}
 
 
 
==<div style="background: #8b1209; padding: 15px; line-height: 0.3em; text-indent: 15px; font-size:18px; font-family:Helvetica"><font color= #FFFFFF>Design Inspirations</font></div>==
 
<div style="font-family:Helvetica;font-size:16px">
 
The following interactive data visualisations were used as inspiration for our application:
 
{| class="wikitable" style="background-color:#ffffff;" width="100%"
 
 
|-
 
|-
! style="font-weight: bold;background: #000000;color:#fbfcfd;width: 40%;" | Visualization example
+
| [[Image:15.png|300px|]]  
! style="font-weight: bold;background: #000000;color:#fbfcfd;width: 40%;" | What was learnt
 
! style="font-weight: bold;background: #000000;color:#fbfcfd;width: 20%;" | Desired objective to meet
 
|-
 
 
 
| [[Image:teamveg_worldmap.jpg|550px|center|link=https://datamaps.github.io/]]  
 
 
<br>
 
<br>
<center>World Map Visualisation</center>
+
||
||  
+
Data source:  
We learnt how to display the geographical locations through a world map, to showcase the physical distance that travelers travel to get to Singapore. This visualisation also shows the use of scale and colors, to convey the number of visitors coming to Singapore from a given country, compared to the other top 13 countries.
+
https://public.tableau.com/profile/mirandali#!/vizhome/Salesforce-SalesPerformance/SalesPerformance<br>
||
+
<b>#1: Countries who are sending the most tourists to Singapore</b>
+
This databoard shows the cumulative sales. We could learn from this and display by outlets to compare the performance by having multiple forms of visualization. We really like the fact that certain key summarizations and variables are displayed on the top, and will consider using this in our project.
<br><br>
+
|} </div>
<b>#2: Proportion of tourists coming to Singapore against the total outbound residents of the country</b>
 
 
 
|-
 
| [[Image:teamveg_fisheye.jpg|550px|center|link=https://bost.ocks.org/mike/fisheye/]]
 
<br>
 
<center>Fisheye Zoom</center>
 
||
 
We learnt how to make use of the fisheye zoom to allow for better viewing of clustered data. Many of the top 13 visiting countries are in the ASEAN region, and due to their close proximity to Singapore, many arrows and labels makes it difficult for a viewer to make active selections or comparisons. The fisheye zoom allows for finer mouse control by the user, without compromising on the overall view of the world map or distorting the sense of scope and scale. 
 
||
 
<b>#1: Countries who are sending the most tourists to Singapore</b>
 
<br><br>
 
<b>#2: Proportion of tourists coming to Singapore against the total outbound residents of the country</b>
 
|-
 
 
 
| [[Image:teamveg_radialchart.jpg|550px|center|link=https://www.visualcinnamon.com/2015/10/different-look-d3-radar-chart.html]]
 
<br>
 
<center>Radar Chart Visualisation</center>
 
||
 
We learnt how to use a radar chart to demonstrate the breakdown of expenditure into different categories. This allowed for an insightful expenditure distribution to be displayed, along with being aesthetically pleasing. The ability to overlay multiple such breakdowns helps with comparison via area and skew easily. We also learnt that too many overlays will make the radar chart too cluttered and lose its prime value in its pure simplicity.
 
||
 
<b>#3: Comparison of their expenditure and income patterns</b>
 
<br><br>
 
<b>#4: Breakdown of tourists’ expenditures to find out which industries they are spending most on</b>
 
|}
 
</div>
 
  
 
==<div style="background: #8b1209; padding: 15px; line-height: 0.3em; text-indent: 15px; font-size:18px; font-family:Helvetica"><font color= #FFFFFF>Proposed Storyboard</font></div>==
 
==<div style="background: #8b1209; padding: 15px; line-height: 0.3em; text-indent: 15px; font-size:18px; font-family:Helvetica"><font color= #FFFFFF>Proposed Storyboard</font></div>==
<div style="font-family:Helvetica;font-size:16px">
 
The following storyboard was designed:
 
[[File:teamveg_storyboard.jpg|1200px|frameless|center]]
 
</div>
 
<br>
 
 
===#1: Title Screen===
 
The title screen indicates the objectives that the data visualisation application seeks to accomplish on the topic of <i>Visitors to Singapore</i>.
 
The use of a video background is meant to capture the different sights and places of interest in Singapore, playing to the theme of tourism. We liken our application user to that of a Singapore tourist, with the landing page akin to landing in Singapore.
 
<br><br>
 
The screens are assembled as part of a single-page website design, where each screen occupies the entirety of a screen display and page navigation is accomplished via scrolling or arrow keys.
 
 
===#2: Visitor Arrivals===
 
The <i>Visitor Arrivals</i> visualisation consists of a geomap, line graph and bar chart in order to visualise different aspects of Visitor Arrivals, due to the multifaceted nature of the data. These visualisations are all linked by year, with the <u>dropdown menu</u> dictating the data that is presented on all charts to present a unified dashboard view of Visitor Arrivals.
 
 
====Geomap====
 
The geomap visualises the travel pattern of visitors from Singapore’s Top 15 visitor countries between 2010–2016. The geomap allows the viewer to see the geographical locations of visiting countries on a scaled world map, depicting, the number of visitors, the distance they travelled to Singapore, and how geographically close these countries are to each other.
 
 
The following controls have been added to enhance the analysis of the geomap:
 
* Dropdown menu to select year to display
 
* Directed weighted arrows from visiting country to Singapore, with the weight being proportional to the absolute number of visitors visiting Singapore
 
* Tooltip when hovering the mouse over a labelled country to provide
 
** Number of visitor arrivals to Singapore
 
** Total number of departures from selected country
 
** Proportion of total departures to Singapore
 
* Fisheye zoom on mouse cursor for better navigation and viewability
 
 
====Bar Chart====
 
The bar chart compares the number of Singapore visitors across the Top 13 visitor countries per year. These are ranked in descending order, showing the absolute number of visitors to Singapore per country. Following which, a toggle can be done to depict the absolute number of outbound visitors per country, allowing for a comparison by proportion of total outbound visitors arriving in Singapore.
 
 
 
The following controls have been added to enhance the analysis of the bar chart:
 
* Bar chart
 
* Dropdown menu to select year to display
 
* Toggle to display “Arrived in Singapore” (default) or “Departed from Home Country”
 
* Tooltip when hovering the mouse over a bar to provide
 
** Number of visitor arrivals to Singapore
 
** Total number of departures from selected country
 
 
====Line Graph====
 
The line graph depicts a time-series of Singapore visitors from the Top 13 visitor countries between 2010-2015. This allows for a quick yet meaningful comparison of the visitor arrival trend over time, along with a detailed drilldown which allows the user to see the individual country's visitor trends over time.
 
 
The following controls have been added to enhance the analysis of the line graph:
 
* Toggle to display individual country or all countries (default)
 
* Tooltip when hovering the mouse over each point of the line to provide
 
** Year of visitor arrival
 
** Number of visitor arrivals to Singapore
 
  
===#3: Visitor Expenditure===
+
===1. IFC Store Sales Overview===
The <i>Visitor Expenditures</i> visualisation consists of a radar chart and line graph, to compare the yearly expenditure by country and their detailed breakdown against the average. These visualisations are all linked by country and year, with the dropdown menu dictating the country and the pill buttons dictating the year to render data that is presented on all charts to present a unified dashboard view of Visitor Expenditures.  
+
Upon entering the application, the user will be greeted with the IFC Stores Sales Overview page. Users will be able to analyse the sales performance of all stores, through a selected
 +
period using this page. It will consist of an interactive choropleth map and bar chart. User will also be able to filter the data by Sales by Month and sort the bar chart by ascending or descending sales.
  
====Radar Chart====
+
[[Image: Dsadas.jpeg |500px|center]]
The radar chart provides the breakdown of visitor expenditure per country, with a comparison against the average tourist expenditure. This allows for easy comparisons to be made, visualising any skews in the data clearly.
 
  
The following controls have been added to enhance the analysis of the radar chart:
+
===2. Individual IFC Store Information===
* Dropdown menu to select country to display
+
This page allows the user to inspect each individual stores, and view its POI and Sales. It consists of an interactive choropleth map, line chart and data table. The map displays all subzones of the trade area, denoted by the names on the polygon. The line chart shows the total sales for Store X and the median for all stores over time. The line chart is interactive, and mousing over the points bring up the date and sales of the respective stores. The data table shows all POIs located in the trade area of Store X. The table contains an alphabetical search function, as well as the ability to sort by numerical value by clicking on the arrows buttons on the top right. User will also be able to filter by store and POI through a side panel.
* Toggle to select year to display
 
* Highlighting of country or average expenditure on hovering mouse over a bounded area
 
  
====Line Graph====
+
[[Image: Vaidea21.jpg |500px|center]]
The line graph provides the time series of visitor expenditure per country, with a comparison against the average tourist expenditure between the period of 2013-2015. This allows for easy comparisons to be made, visualising any fluctuations in the expenditure pattern clearly.
 
  
The following controls have been added to enhance the analysis of the line graph:
+
===3. Comparison Between Stores===
* Toggle to display individual country, average or both (default)
+
This dashboard allows the user to compare Store X and Store Y to analyse its Points of Interest (POI), Sales and discover the differences between the two stores. It consists of an interactive choropleth map, line chart and data table. The map displays the trade area of Stores X and Y, denoted by the names on the polygon. Clicking on the Pizza Symbol brings up the full name of the store. Clicking on the trade area brings up the total number of selected POIs in the trade area. The line chart shows the total sales for Store X, Y and the median over time. The line chart is interactive, and mousing over the points bring up the date and sales of the respective stores. The data table shows all POIs located in the trade area of Store X,Y. The table contains an alphabetical search function, as well as the ability to sort by numerical value by clicking on the arrows buttons on the top right.
* Tooltip when hovering the mouse over each point of the line to provide
 
** Year of visitor arrival
 
** Number of visitor arrivals to Singapore
 
  
===#4: Key findings and conclusion===
+
[[Image: Vaidea22.jpg |500px|center]]
The key findings and conclusion screen display the important insights gathered to meet the objectives of the <i>Visitors to Singapore</i> topic, along with a conclusion on what this dataviz application accomplishes and how might STB benefit from such findings. The use of the video background wraps up the theme of tourism, with a flying plane used to invoke a sense of completion and departure. We further the metaphor used for our application user, gaining much from the experience and leaving the application in a similar fashion as leaving Singapore: <b>fulfilled</b>.
 
  
==<div style="background: #8b1209; padding: 15px; line-height: 0.3em; text-indent: 15px; font-size:18px; font-family:Helvetica"><font color= #FFFFFF>Tools / Libraries</font></div>==
+
==<div style="background: #8b1209; padding: 15px; line-height: 0.3em; text-indent: 15px; font-size:18px; font-family:Helvetica"><font color= #FFFFFF>Tools and Libraries</font></div>==
 
<div style="font-family:Helvetica;font-size:16px">
 
<div style="font-family:Helvetica;font-size:16px">
 
The following tools and libraries are used in the development of the web-based data visualisation application:
 
The following tools and libraries are used in the development of the web-based data visualisation application:
[[File:teamveg_techstack.jpg|1000px|frameless|center]]
+
[[File:Data.png|1000px|frameless|center]]
 +
*QGIS
 
*Microsoft Excel
 
*Microsoft Excel
*D3.js
+
*R Studio
*Chart.js
+
*R Shiny
*HighCharts.js
 
*JQuery
 
*Github
 
 
*Tableau
 
*Tableau
*Bower
+
*Adobe Suite
 +
*Google Drive
 +
 
 
</div>
 
</div>
  
 
==<div style="background: #8b1209; padding: 15px; line-height: 0.3em; text-indent: 15px; font-size:18px; font-family:Helvetica"><font color= #FFFFFF>Architectural Diagram</font></div>==
 
==<div style="background: #8b1209; padding: 15px; line-height: 0.3em; text-indent: 15px; font-size:18px; font-family:Helvetica"><font color= #FFFFFF>Architectural Diagram</font></div>==
 
<div style="font-family:Helvetica;font-size:16px">
 
<div style="font-family:Helvetica;font-size:16px">
The architecture diagram depicts the design implementation of the web-based data visualisation application:
+
The following architectural is used in the implementation of the visualisation tool:
[[File:teamveg_architecturediagram.jpg|1000px|frameless|center]]
+
The application is deployed through R Shiny with shinyapps.io.
 +
[[File:User.png|1000px|frameless|center]]
 
</div>
 
</div>
  
 
==<div style="background: #8b1209; padding: 15px; line-height: 0.3em; text-indent: 15px; font-size:18px; font-family:Helvetica"><font color= #FFFFFF>Datasets</font></div>==
 
==<div style="background: #8b1209; padding: 15px; line-height: 0.3em; text-indent: 15px; font-size:18px; font-family:Helvetica"><font color= #FFFFFF>Datasets</font></div>==
 
<p>
 
<p>
We have chosen the following datasets to do data discovery:
+
These are the datasets we plan to use:
 
</p>
 
</p>
 
{| class="wikitable" style="background-color:#FFFFFF;" width="100%"
 
{| class="wikitable" style="background-color:#FFFFFF;" width="100%"
Line 230: Line 147:
 
! style="font-weight: bold;background: #000000;color:#fbfcfd;" | Rationale
 
! style="font-weight: bold;background: #000000;color:#fbfcfd;" | Rationale
 
|-
 
|-
| <center> Singapore Tourism Board Master Plan </center> ||  
+
| <center> Administrative Boundaries, Taiwan </center> ||  
* To understand STB's strategy for tourism - a key focus area of Singapore economy
+
* A dataset containing SHP files of the administrative boundaries of taiwan (county, town, village)
 +
* Used as a reference to digitize IFC branch trade areas
 
|-
 
|-
| <center> CEIC Outgoing Tourist Data </center> ||  
+
| <center> Branch location of IFC, Taiwan </center> ||  
* Study the outgoing pattern of residents from a given country
+
* A dataset containing the geographical information of each individual branch.
* Obtain the proportion of these outgoing residents as incoming tourists to Singapore
+
* Used as the main target of our project
 
|-
 
|-
| <center> STB Tourist Expenditure Data </center> ||  
+
| <center> Point of Interests , Taiwan </center> ||
* Study the spending pattern of Singapore tourists
+
* A dataset containing each individual Point-Of-Interests in Taiwan (e.g. ATMs, Amusement Parks, Banks)
* Drilldown into different aspects
+
* Used as features for analysis with regards to each branch
 +
|-
 +
| <center> Outlets Daily Sales Data </center> ||  
 +
* A dataset containing the daily sales information of each individual branch
 +
* Used to study the sales data along with the profile of each branch to generate yielding patterns (e.g. top and bottom performer)
 
|-
 
|-
 
|}
 
|}
  
==<div style="background: #8b1209; padding: 15px; line-height: 0.3em; text-indent: 15px; font-size:18px; font-family:Helvetica"><font color= #FFFFFF>Technical Challenges</font></div>==
+
==<div style="background: #8b1209; padding: 15px; line-height: 0.3em; text-indent: 15px; font-size:18px; font-family:Helvetica"><font color= #FFFFFF>Foreseen Technical Challenges</font></div>==
 
We encountered the following technical challenges throughout the course of the project. We have indicated our proposed solutions, and the outcomes of the solutions.
 
We encountered the following technical challenges throughout the course of the project. We have indicated our proposed solutions, and the outcomes of the solutions.
 
{| class="wikitable" style="background-color:#FFFFFF;" width="100%"
 
{| class="wikitable" style="background-color:#FFFFFF;" width="100%"
Line 251: Line 173:
 
! style="font-weight: bold;background: #000000;color:#fbfcfd;width: 33%;" | Outcome
 
! style="font-weight: bold;background: #000000;color:#fbfcfd;width: 33%;" | Outcome
 
|-
 
|-
| <center> Data Unavailability </center>  
+
| <center> Data is already pre-aggregated to display monthly sales  </center>  
 
||  
 
||  
*Countries may disclose their inbound tourism data sets but not their outbound tourism data due to their political nature in data confidentiality, for example China. (Source: Contemporary Perspectives on China Tourism)
+
*The dataset is given directly to us from IFC, and we are unable to change it. Thus, We shall utilize and do our best with the available data.
 
||
 
||
The use of the CEIC database was used for the most accurate information. For information that simply could not be sourced, or are from less credible sources, consultation with Professor Kam was arranged to seek his guidance on the matter.
+
NA
 
|-
 
|-
| <center> Unfamiliarity in D3.js </center>  
+
| <center> Unfamiliarity in R Shiny </center>  
 
||  
 
||  
* Initial hands-on experience during D3.js workshop.
+
* Watching video tutorials about R Shiny
* Independent learning on D3.js.
+
* Independent learning on the design and syntax
* Peer learning and sharing  
+
* Peer learning and sharing
 +
* Using Datacamp as our mentor
 
||
 
||
The independent learning and team sharing greatly aided the team with our competence and confidence in using D3.js and other programmatic visualisation tools. The D3.js workshop that was organised was excellent in ensuring that the right skills were learnt.  
+
We managed to start using the packages quickly and suit our own project needs.
 +
Each of us work on different parts such as setting up, designing, logic and deployment.
 +
This speeds up our project progress.
 +
 
 
|-
 
|-
 
| <center> Data Cleaning & Transformation Proposed Solution </center>  
 
| <center> Data Cleaning & Transformation Proposed Solution </center>  
Line 270: Line 196:
 
||
 
||
 
The adopted process was having clear instructions issued to each member in the team, along with maintaining constant communication with each other. In the event that the dataset is deemed too dirty to be usable, it was dropped along with sourcing for new data that would be a suitable replacement.
 
The adopted process was having clear instructions issued to each member in the team, along with maintaining constant communication with each other. In the event that the dataset is deemed too dirty to be usable, it was dropped along with sourcing for new data that would be a suitable replacement.
 +
|-
 +
| <center> Lack of geospatial knowledge to understand the dataset initially </center>
 +
||
 +
*Attend SMT201 class to learn more, as well as reading up on resources given by Prof Kam to gain further contextual knowledge
 +
||
 +
NA
 +
|-
 +
| <center> Digitising of trade areas from powerpoint slide to QGIS </center>
 +
||
 +
*The process is manual and we had to put in a lot of effort to convert the drawn polygon to data points in QGIS.
 +
||
 +
The data points can better allow us to generate insights on the profile of each outlet via its trade area.
 
|-
 
|-
 
| <center> Integrating Relevant Data from Multiple Sources Proposed Solution </center>  
 
| <center> Integrating Relevant Data from Multiple Sources Proposed Solution </center>  
||
 
*Working together to decide on what data to extract or eliminate
 
 
||
 
||
The constant communication and discussion helped with deciding on which data should be integrated and displayed. Professor Kam's advice was also sought, with his guidance serving most helpful throughout the integration process.
+
*Working together to decide on what data to extract or eliminate
 +
||
 +
NA
 
|-
 
|-
 
| <center> Determining the Most Effective Ways in Visualising the Data </center>  
 
| <center> Determining the Most Effective Ways in Visualising the Data </center>  
 
||
 
||
*Proposed solution: Gain exposure to various forms of data visualisations - revisit course materials, assess existing libraries to gain inspirations  
+
*Gain exposure to various forms of data visualisations - revisit course materials, assess existing libraries to gain inspirations.
 
||
 
||
The design inspirations phase and background research greatly aided the team in understanding the most effective ways in visualising the data. Understanding the type of data that we worked with, along with adopting the best design practices helped with creating meaningful visualisations. Professor Kam was also consulted to provide feedback on ideal visualisations for the given dataset.
+
NA
 
|}
 
|}
  
 
==<div style="background: #8b1209; padding: 15px; line-height: 0.3em; text-indent: 15px; font-size:18px; font-family:Helvetica"><font color= #FFFFFF>Roles & Milestones </font></div>==
 
==<div style="background: #8b1209; padding: 15px; line-height: 0.3em; text-indent: 15px; font-size:18px; font-family:Helvetica"><font color= #FFFFFF>Roles & Milestones </font></div>==
  
*Project Timeline
+
<br/>
[[Image: teamveg7.jpeg |800px|center]]
+
*Roles
 +
{| class="wikitable" style="background-color:#FFFFFF;" width="100%"
 +
|-
 +
! style="font-weight: bold;background: #000000;color:#fbfcfd;width: 33%;" | Kelvin Chia Sen Wei
 +
! style="font-weight: bold;background: #000000;color:#fbfcfd;width: 33%;" | Linus Cheng Xin Wei
 +
! style="font-weight: bold;background: #000000;color:#fbfcfd;width: 33%;" | Wang Xuze
 +
|-
 +
| <center>
 +
App Developer<br/>
 +
Wiki Writer
 +
</center>
 +
||
 +
<center>
 +
Project Manager<br/>
 +
Design Architect
 +
</center>
  
 +
||
 
<center>
 
<center>
{| class="wikitable"
+
Report Writer<br/>
|-
+
Poster man
|  [[Image: teamveg5.jpg |thumb|150px|center|Version 1]]
+
</center>
|  [[Image: teamveg7.jpeg |thumb|150px|center|Version 2]]
+
 
 
|}
 
|}
</center>
+
 
 +
 
 +
*Project Timeline
 +
[[Image: Tl.png |600px|center]]
  
 
*Gantt Chart
 
*Gantt Chart
[[Image: teamveg_ganttchart.jpg |800px|center]]
+
<center>
 +
[[Image: Gantt.png |1050px]]</center>
  
 
==<div style="background: #8b1209; padding: 15px; line-height: 0.3em; text-indent: 15px; font-size:18px; font-family:Helvetica"><font color= #FFFFFF>References</font></div>==
 
==<div style="background: #8b1209; padding: 15px; line-height: 0.3em; text-indent: 15px; font-size:18px; font-family:Helvetica"><font color= #FFFFFF>References</font></div>==
*D3.js: https://d3js.org/
+
*Tableau: https://www.tableau.com/learn/training
*Singapore Inbound Tourism Data: https://www.stb.gov.sg/statistics-and-market-insights/Pages/statistics-Visitor-Arrivals.aspx
+
*R Shiny: https://shiny.rstudio.com/tutorial/
*Singapore Tourism Board Marketing Strategy Report 2016: https://www.stb.gov.sg/news-and-publications/publications/Documents/Marketing_Strategy-Of_Stories_Fans_and_Channels.pdf
+
*QGIS: http://www.qgistutorials.com/en/
*CEIC Database: https://www.ceicdata.com/en
 
  
==<div style="background: #8b1209; padding: 15px; line-height: 0.3em; text-indent: 15px; font-size:18px; font-family:Helvetica"><font color= #FFFFFF>Ideation Drafts</font></div>==
+
==<div style="background: #8b1209; padding: 15px; line-height: 0.3em; text-indent: 15px; font-size:18px; font-family:Helvetica"><font color= #FFFFFF>List of Proposed Features</font></div>==
In the process of completing this research project, an iterative approach was adopted. This comprised of various ideation drafts, where whiteboarding and draft prototyping was conducted.
+
 
<center>
+
[[Image: Vaidea33.jpg |500px|center]]
{| class="wikitable"
 
|-
 
[[Image: teamvej_draft1.jpg |300px|center|Draft 1]]
 
|  [[Image: teamvej_draft2.jpeg |300px|center|Draft 2]]
 
|}
 
</center>
 
  
 
==<div style="background: #8b1209; padding: 15px; line-height: 0.3em; text-indent: 15px; font-size:18px; font-family:Helvetica"><font color= #FFFFFF>Comments</font></div>==
 
==<div style="background: #8b1209; padding: 15px; line-height: 0.3em; text-indent: 15px; font-size:18px; font-family:Helvetica"><font color= #FFFFFF>Comments</font></div>==

Latest revision as of 01:14, 22 November 2019

2e1p2.png

Back to Project Home

 

PROPOSAL

 

POSTER

 

APPLICATION

 

RESEARCH PAPER


Introduction

International Food Chain (IFC) is a leading brand in its sector, with over 18000 outlets worldwide and an ever-growing presence in the global market. In Taiwan alone, IFC has over 240 branches and are constantly expanding.

However, as the franchise grows bigger, so does its challenges. One of the challenges involves the lack of a tool to efficiently compare the performance of each chain to one another.

Leveraging on this fact, our group aims to build a dashboard for IFC that allows for visualization and modeling. We hope to track the performance of each chain in relation to Point-Of-Interests surrounding each chain, uncovering and comprehending phenomena, with the aid of spatial data.

This project was made in tandem with: https://wiki.smu.edu.sg/1920t1smt201/G1-Group10

Problem and Motivation

To build a dashboard that allows for:

  • Business profiling of the company’s outlet to determine Points-Of-Interests that can generate insights such as: Highest earning outlets, relative performance of outlets, outlet’s profile patterns and item sales information.
  • Creating dynamic visualisations to make informed business decisions, such as determining locations for new outlet openings with matching POIs of high sales outlets
  • Digitizing of each chain’s trade and delivery area
  • Scalable program to incorporate future data to generate current information (Using data from other cities besides Taiwan)
  • Easy and intuitive tool to quickly view information with regards to all branches

Objectives

This project aims to provide insights into the following:

  1. Outlets with the highest monthly sales
  2. Relative monthly performance of each outlet
  3. Each branch geographical information, including the type and number of POI’s in the surroundings
  4. Profiling of similar types of branches
  5. Improvements for poor performing outlets
  6. Scalable system to incorporate future data

Background Survey of Related Works

Visualizations Explaination
11.png


Data source: https://www.researchgate.net/publication/324949619_Visualization_of_Fast_Food_Restaurant_Location_using_Geographical_Information_System

The visualization provides the buffer polygons, as well as representing population density of the area through colour. By comparing the two, we can conclude whether the center of activity is proportional to the population density in a region. It allows us to perform further exploration to see what spatial information significantly affects the level of activity in a city, such as the availability of points-of-interest. This visualization is great as it allows the viewer to clearly see multiple dimensions dealing with spatial data in an elegant way.

12.png


Data source: https://www.researchgate.net/publication/324949619_Visualization_of_Fast_Food_Restaurant_Location_using_Geographical_Information_System
The graph on the left shows the distribution of outlets on the geographical map. The right graph describes the outlets grid distribution, result from grid creation and spatial joint operation. From both figures, they can show the potential tendency of whether the outlets are clustered, and with the number of outlets in each grid. We could use them together to justify and adjust the outlet locations.

13.png


Data source: https://www.researchgate.net/publication/324949619_Visualization_of_Fast_Food_Restaurant_Location_using_Geographical_Information_System
This visualization provides a novel way of linking a variable to its geographical location when hovering over the respective area. It would be great in our case, if we were to allow the user to view the corresponding branch through the tooltip, for example profit.

14.png


Data source: https://www.researchgate.net/publication/324949619_Visualization_of_Fast_Food_Restaurant_Location_using_Geographical_Information_System
This shows kernel density surface, based on the number of fast food restaurants around Jakarta and distribute them smoothly, so it provides average surface estimation. Kernel density estimation allows us to observe both the centrality and agglomeration of existing outlets. This visualization allows us to view multiple dimensions at a time in an effective manner, through the choice of colour and size.

15.png


Data source: https://public.tableau.com/profile/mirandali#!/vizhome/Salesforce-SalesPerformance/SalesPerformance

This databoard shows the cumulative sales. We could learn from this and display by outlets to compare the performance by having multiple forms of visualization. We really like the fact that certain key summarizations and variables are displayed on the top, and will consider using this in our project.

Proposed Storyboard

1. IFC Store Sales Overview

Upon entering the application, the user will be greeted with the IFC Stores Sales Overview page. Users will be able to analyse the sales performance of all stores, through a selected period using this page. It will consist of an interactive choropleth map and bar chart. User will also be able to filter the data by Sales by Month and sort the bar chart by ascending or descending sales.

Dsadas.jpeg

2. Individual IFC Store Information

This page allows the user to inspect each individual stores, and view its POI and Sales. It consists of an interactive choropleth map, line chart and data table. The map displays all subzones of the trade area, denoted by the names on the polygon. The line chart shows the total sales for Store X and the median for all stores over time. The line chart is interactive, and mousing over the points bring up the date and sales of the respective stores. The data table shows all POIs located in the trade area of Store X. The table contains an alphabetical search function, as well as the ability to sort by numerical value by clicking on the arrows buttons on the top right. User will also be able to filter by store and POI through a side panel.

Vaidea21.jpg

3. Comparison Between Stores

This dashboard allows the user to compare Store X and Store Y to analyse its Points of Interest (POI), Sales and discover the differences between the two stores. It consists of an interactive choropleth map, line chart and data table. The map displays the trade area of Stores X and Y, denoted by the names on the polygon. Clicking on the Pizza Symbol brings up the full name of the store. Clicking on the trade area brings up the total number of selected POIs in the trade area. The line chart shows the total sales for Store X, Y and the median over time. The line chart is interactive, and mousing over the points bring up the date and sales of the respective stores. The data table shows all POIs located in the trade area of Store X,Y. The table contains an alphabetical search function, as well as the ability to sort by numerical value by clicking on the arrows buttons on the top right.

Vaidea22.jpg

Tools and Libraries

The following tools and libraries are used in the development of the web-based data visualisation application:

Data.png
  • QGIS
  • Microsoft Excel
  • R Studio
  • R Shiny
  • Tableau
  • Adobe Suite
  • Google Drive

Architectural Diagram

The following architectural is used in the implementation of the visualisation tool: The application is deployed through R Shiny with shinyapps.io.

User.png

Datasets

These are the datasets we plan to use:

Dataset Rationale
Administrative Boundaries, Taiwan
  • A dataset containing SHP files of the administrative boundaries of taiwan (county, town, village)
  • Used as a reference to digitize IFC branch trade areas
Branch location of IFC, Taiwan
  • A dataset containing the geographical information of each individual branch.
  • Used as the main target of our project
Point of Interests , Taiwan
  • A dataset containing each individual Point-Of-Interests in Taiwan (e.g. ATMs, Amusement Parks, Banks)
  • Used as features for analysis with regards to each branch
Outlets Daily Sales Data
  • A dataset containing the daily sales information of each individual branch
  • Used to study the sales data along with the profile of each branch to generate yielding patterns (e.g. top and bottom performer)

Foreseen Technical Challenges

We encountered the following technical challenges throughout the course of the project. We have indicated our proposed solutions, and the outcomes of the solutions.

Key Technical Challenges Proposed Solution Outcome
Data is already pre-aggregated to display monthly sales
  • The dataset is given directly to us from IFC, and we are unable to change it. Thus, We shall utilize and do our best with the available data.

NA

Unfamiliarity in R Shiny
  • Watching video tutorials about R Shiny
  • Independent learning on the design and syntax
  • Peer learning and sharing
  • Using Datacamp as our mentor

We managed to start using the packages quickly and suit our own project needs. Each of us work on different parts such as setting up, designing, logic and deployment. This speeds up our project progress.

Data Cleaning & Transformation Proposed Solution
  • Having a systematic process while working together in order to maximise efficiency e.g. taking turns to clean, transform and perform checks on the data to ensure accuracy

The adopted process was having clear instructions issued to each member in the team, along with maintaining constant communication with each other. In the event that the dataset is deemed too dirty to be usable, it was dropped along with sourcing for new data that would be a suitable replacement.

Lack of geospatial knowledge to understand the dataset initially
  • Attend SMT201 class to learn more, as well as reading up on resources given by Prof Kam to gain further contextual knowledge

NA

Digitising of trade areas from powerpoint slide to QGIS
  • The process is manual and we had to put in a lot of effort to convert the drawn polygon to data points in QGIS.

The data points can better allow us to generate insights on the profile of each outlet via its trade area.

Integrating Relevant Data from Multiple Sources Proposed Solution
  • Working together to decide on what data to extract or eliminate

NA

Determining the Most Effective Ways in Visualising the Data
  • Gain exposure to various forms of data visualisations - revisit course materials, assess existing libraries to gain inspirations.

NA

Roles & Milestones


  • Roles
Kelvin Chia Sen Wei Linus Cheng Xin Wei Wang Xuze

App Developer
Wiki Writer

Project Manager
Design Architect

Report Writer
Poster man


  • Project Timeline
Tl.png
  • Gantt Chart
Gantt.png

References

List of Proposed Features

Vaidea33.jpg

Comments

Feel free to leave comments / suggestions!