Difference between revisions of "1718t1is428T3"

From Visual Analytics for Business Intelligence
Jump to navigation Jump to search
(Created page with "center|150px <p></p><br/> <!--Sub Header Start--> {| style="background-color:white; color:white padding: 5px 0 0 0;" width="100%" height=50px cell...")
 
Line 1: Line 1:
[[File:Addourgrouplogo.png|center|150px]]
+
[[File:VisualAutolyticsLogo.png|200px|center]]
<p></p><br/>
 
<!--Sub Header Start-->
 
{| style="background-color:white; color:white padding: 5px 0 0 0;" width="100%" height=50px cellspacing="0" cellpadding="0" valign="top" border="0" |
 
  
| style="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 #3D9DD7; border-top:1px solid #3D9DD7; font-family:helvetica"> <b>Home</b>
+
<!-- Header 1 START-->
 +
{| style="background-color:#000000; color:#000000 padding: 5px 0 0 0;" width="100%" cellspacing="0" cellpadding="0" valign="top" border="0" |
 +
| style="padding:0.3em; font-family:Raleway; background: #346ec4; text-align:center;" width="19%" |
 +
[[Visual Autolytics|<font color="#FFFFFF"><strong>Proposal</strong></font>]]
  
| 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 #3D9DD7; border-top:1px solid #3D9DD7; font-family:helvetica"><b>Proposal</b>]]
+
| style="background:#ffffff;" width="1%" | &nbsp;
 +
| style="padding:0.3em; font-family:Raleway; background:#86566f; text-align:center;" width="19%" | 
 +
[[Visual Autolytic: Poster|<font color="#FFFFFF"><strong>Project Presentation</strong></font>]]
  
| 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 #3D9DD7; border-top:1px solid #3D9DD7; font-family:helvetica"><b>Poster</b>]]
+
| style=" background:#ffffff;" width="1%" | &nbsp;
 +
| style="padding:0.3em; font-family:Raleway; background:#d04b29; text-align:center;" width="19%" | 
 +
[[Visual Autolytic: Application|<font color="#FFFFFF"><strong>Project Application</strong></font>]]
  
| 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 #3D9DD7; border-top:1px solid #3D9DD7; font-family:helvetica"><b>Application</b>]]
+
| style=" background:#ffffff;" width="1%" | &nbsp;
 +
| style="padding:0.3em; font-family:Raleway; background:#e25729; text-align:center;" width="19%" | 
 +
[[Visual Autolytic: Report|<font color="#FFFFFF"><strong>Research Paper</strong></font>]]
  
| 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 #3D9DD7; border-top:1px solid #3D9DD7; font-family:helvetica"><b>Research Paper</b>]]
+
| style=" background:#ffffff;" width="1%" | &nbsp;
 +
| style="padding:0.3em; font-family:Raleway; background:#f69c3a; text-align:center;" width="19%" |
 +
[[Visual Autolytic: Poster|<font color="#FFFFFF"><strong>Poster</strong></font>]]
 +
 
 +
|}
 +
<!-- END Header 1 -->
 +
 
 +
 
 +
 
 +
<!--Body Start-->
 +
<div style="background: #346ec4; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px; font-size: 20px;margin-top:25px"><font color=#FFFFFF>Project Introduction</font></div>
 +
With the continually rising prices of car prices in Singapore and the increasing polarisation of incomes in the country, our group is curious as to discover what have been the changes in the market demand for cars.
 +
 
 +
 
 +
 
 +
 
 +
 
 +
<div style="background: #346ec4; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px; font-size: 20px;margin-top:25px"><font color=#FFFFFF>Project Motivation</font></div>
 +
Going deeper into the market, we will also show how the tastes for car brands have waxed and waned over the years. Demand for cars like Datsun and Supra have disappeared off the roads, while Fords and Audis have taken their places. Are Singaporeans starting to prefer more American and German cars than before? From this visualisation, car manufacturers are able to clearly segment the car market in Singapore and target the right group of buyers.
 +
 
 +
 
 +
<div style="background: #346ec4; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px; font-size: 20px;margin-top:25px"><font color=#FFFFFF>Deliverables and Target Audience</font></div>
 +
We aim to deliver a highly interactive web application that allows someone to easily navigate between a large amount of time-series data and geographical data.
 +
 
 +
Our intended audience is:
 +
#Car dealers to make better forecast for car stock
 +
#Prospective car buyers
 +
 
 +
 
 +
<div style="background: #346ec4; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px; font-size: 20px;margin-top:25px"><font color=#FFFFFF>Objectives</font></div>
 +
In this project, we will be focusing on the following:
 +
* To discover the trend of registered cars and the COE for different brands across time
 +
* To help consumers discover current and future COE trends for different cars categories (A & B)
 +
* Trends in Singapore car market by brand (geography, market segmentation)
 +
 
 +
<div style="background: #346ec4; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px; font-size: 20px;margin-top:25px"><font color=#FFFFFF>Dataset</font></div>
 +
For this visualisation we need a few datasets.
 +
#Airline Codes - List of airlines IATA and ICAO codes. Retrieved using [https://www.import.io/ Import IO] viahttp://www.flugzeuginfo.net/table_airlinecodes_airline_en.php.
 +
#Airport Locations - List of Longitude and Latitude points of all the airports. (We just need United States) Retrieved from Open Flights.org via http://openflights.org/data.html.
 +
#Domestic US flights Data - List of number of passengers travelling within US. Retrieved from US Department of Transportation via https://www.transportation.gov/policy/aviation-policy/domestic-airline-consumer-airfare-report.
 +
#Airline Crashes - List of airplane crashes happening throughout the world. Retrieved via http://www.planecrashinfo.com/database.htm.
 +
 
 +
Below are the list of Table Header name, description and an example for each table.
 +
 
 +
<b>1. Airline Codes</b>
 +
{| class="wikitable"
 +
|-
 +
! Name
 +
! Description
 +
! Example
 +
|-
 +
| Airline Company Name
 +
| The name of the airline company
 +
| Singapore Airlines
 +
|-
 +
| IATA Airline Code
 +
| 2 letter codes given by IATA to uniquely identify an airline company
 +
| SQ
 +
|-
 +
| ICAO Airline Designators
 +
| 3 Letter Codes given by ICAO to uniquely identify an airline comapny
 +
| SIA
 
|}
 
|}
<!--Sub Header End-->
+
 
<br/>
+
<b>2. Airport Locations</b>
[[File:addpic.jpg|800px|center]]
+
{| class="wikitable"
<br/>
+
|-
 +
! Name
 +
! Description
 +
! Example
 +
|-
 +
| Name
 +
| The name of the airport
 +
| John F Kennedy International Airport
 +
|-
 +
| latitude_deg
 +
| The Latitude of the Airport in decimal degrees, usually to six significant digits. Negative is South, positive is North.
 +
| 40.63980103
 +
|-
 +
| longitude_deg
 +
| The Longitude of the Airport in decimal degrees, usually to six significant digits. Negative is West, positive is East.
 +
| -73.77890015
 +
|-
 +
| municipality
 +
| The state where the airport resides in.
 +
| New York
 +
|-
 +
| iata_code
 +
| The 3 letter unique identifier for an airport.
 +
| JFK
 +
|}
 +
 
 +
<b>Domestic US flights Data</b>
 +
{| class="wikitable"
 +
|-
 +
! Name
 +
! Description
 +
! Example
 +
|-
 +
| Year
 +
| Year of the data
 +
| 2014
 +
|-
 +
| Quarter
 +
| Quarter of the data
 +
| 2
 +
|-
 +
| City1
 +
| Descriptive Label for place of departure
 +
| Los Angeles, CA (Metropolitan Area)
 +
|-
 +
| City2
 +
| Descriptive Label for place of arrival
 +
| San Francisco, CA (Metropolitan Area)
 +
|-
 +
| Passengers
 +
| Market Passenger Per Day
 +
| 21,378
 +
|}
 +
 
 +
<b>Airline Crashes</b>
 +
{| class="wikitable"
 +
|-
 +
! Name
 +
! Description
 +
! Example
 +
|-
 +
| Date
 +
| The date which the incident occured
 +
| 2/3/2005
 +
|-
 +
| plane_type
 +
| The type of plane flying
 +
| Boeing 747-131
 +
|-
 +
| country
 +
| The country where the incident occured
 +
| China
 +
|-
 +
| airline
 +
| The airline which resulted the accident occured
 +
| Southwest Air
 +
|-
 +
| fat
 +
| The number of Fatalities from the crash
 +
| 4
 +
|-
 +
| phase
 +
| Which phase the airplane was. (approach, initial_climb, etc.)
 +
| en_route
 +
|-
 +
| meta
 +
| The main category of the cause of the crash (weather, human_error, criminal)
 +
| Weather
 +
|-
 +
| cause
 +
| The cause of the crash
 +
| bad weather
 +
|}
 +
 
 +
 
 +
<div style="background: #346ec4; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px; font-size: 20px;margin-top:25px"><font color=#FFFFFF>Exploration of Visualisation Methods</font></div>
 +
<b>Chord Diagram</b><br>
 +
Chord Diagrams are a graphical method of displaying inter-relationships between data in a matrix. In this graphical method, the data is arranged in a circle where it will show the relationships between the various points. We believe that using a chord diagram would be effective as we would be able to visualise the number of passengers travelling between the various states. We would be using D3.js's [https://bost.ocks.org/mike/uberdata/ Chord diagram], since it is both easy to implement and is interactive at the same time. <br><br>
 +
[[File:ATV_ChordDiagram.png|600px|center]]
 +
 
 +
<b>Brick Map</b><br>
 +
Brick Maps are maps that use bricks to give visualise the absolute amount of people in a geospatial space. We chose to use brick map, because it would give an overview of the number of passengers travelling from each state, and also because it is challenging, as stated from the prof. In order to build this, we would have to build our own libraries, since there is no brick map in any library.
 +
[[File:ATV_Brickmap.png|600px|center]]
 +
 
 +
<b>Cross Filter</b><br>
 +
[http://square.github.io/crossfilter/ Cross filter] is a library that is flexible and allows for people to select a range of dates easily. Since we have to visualise time-based data over 15 years. we intend to make it as flexible and easy to use for all users.
 +
[[File:ATV_Crossfilter.png|600px|center]]
 +
 
 +
<div style="background: #346ec4; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px; font-size: 20px;margin-top:25px"><font color=#FFFFFF>Proposal of StoryBoard</font></div>
 +
Our Group has decided on the below storyboard in order to make it clear for users to have an overview of the flight data, airplane crashes, have a comparison between 2 dates, and any details that they would like to have.
 +
[[File:ATV_Storyboard.jpg|800px|center]]
 +
 
 +
 
 +
<div style="background: #346ec4; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px; font-size: 20px;margin-top:25px"><font color=#FFFFFF>Technical Challenges</font></div>
 +
{| class="wikitable"
 +
|-
 +
! Technical Challenges
 +
! Mitigation Plan
 +
|-
 +
| Lack of Javascript/d3.js Competence
 +
|
 +
#Peer learning
 +
#Consult Professor Prakash
 +
#View online Tutorials
 +
|-
 +
| Acquiring Data, Data Cleaning
 +
|
 +
#Work closely to clean and analyse all data sources
 +
|-
 +
| Creation of Brick Map overlay
 +
|
 +
#Start Early
 +
# Using references from other d3.js libraries
 +
|}
 +
 
 +
<div style="background: #346ec4; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px; font-size: 20px;margin-top:25px"><font color=#FFFFFF>Project Timeline</font></div>
 +
[[File:ACV_Timeline.png|800px|center]]
 +
 
 +
<div style="background: #346ec4; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px; font-size: 20px;margin-top:25px"><font color=#FFFFFF>Technologies and Tools</font></div>
 +
Our team has decided to focus on these few tools and libraries in order to showcase our product.
 +
* Brackets (IDE)
 +
* Github (for version control and Github Pages)
 +
* Microsoft Excel (Data Cleaning)
 +
* Adobe Photoshop (Prototyping storyboard and Wiki Illustrations)
 +
* D3.js (one of the library used to visualise the data)
 +
 
 +
<!--Body End-->

Revision as of 21:46, 15 October 2017

Proposal

 

Project Presentation

 

Project Application

 

Research Paper

 

Poster


Project Introduction

With the continually rising prices of car prices in Singapore and the increasing polarisation of incomes in the country, our group is curious as to discover what have been the changes in the market demand for cars.



Project Motivation

Going deeper into the market, we will also show how the tastes for car brands have waxed and waned over the years. Demand for cars like Datsun and Supra have disappeared off the roads, while Fords and Audis have taken their places. Are Singaporeans starting to prefer more American and German cars than before? From this visualisation, car manufacturers are able to clearly segment the car market in Singapore and target the right group of buyers.


Deliverables and Target Audience

We aim to deliver a highly interactive web application that allows someone to easily navigate between a large amount of time-series data and geographical data.

Our intended audience is:

  1. Car dealers to make better forecast for car stock
  2. Prospective car buyers


Objectives

In this project, we will be focusing on the following:

  • To discover the trend of registered cars and the COE for different brands across time
  • To help consumers discover current and future COE trends for different cars categories (A & B)
  • Trends in Singapore car market by brand (geography, market segmentation)
Dataset

For this visualisation we need a few datasets.

  1. Airline Codes - List of airlines IATA and ICAO codes. Retrieved using Import IO viahttp://www.flugzeuginfo.net/table_airlinecodes_airline_en.php.
  2. Airport Locations - List of Longitude and Latitude points of all the airports. (We just need United States) Retrieved from Open Flights.org via http://openflights.org/data.html.
  3. Domestic US flights Data - List of number of passengers travelling within US. Retrieved from US Department of Transportation via https://www.transportation.gov/policy/aviation-policy/domestic-airline-consumer-airfare-report.
  4. Airline Crashes - List of airplane crashes happening throughout the world. Retrieved via http://www.planecrashinfo.com/database.htm.

Below are the list of Table Header name, description and an example for each table.

1. Airline Codes

Name Description Example
Airline Company Name The name of the airline company Singapore Airlines
IATA Airline Code 2 letter codes given by IATA to uniquely identify an airline company SQ
ICAO Airline Designators 3 Letter Codes given by ICAO to uniquely identify an airline comapny SIA

2. Airport Locations

Name Description Example
Name The name of the airport John F Kennedy International Airport
latitude_deg The Latitude of the Airport in decimal degrees, usually to six significant digits. Negative is South, positive is North. 40.63980103
longitude_deg The Longitude of the Airport in decimal degrees, usually to six significant digits. Negative is West, positive is East. -73.77890015
municipality The state where the airport resides in. New York
iata_code The 3 letter unique identifier for an airport. JFK

Domestic US flights Data

Name Description Example
Year Year of the data 2014
Quarter Quarter of the data 2
City1 Descriptive Label for place of departure Los Angeles, CA (Metropolitan Area)
City2 Descriptive Label for place of arrival San Francisco, CA (Metropolitan Area)
Passengers Market Passenger Per Day 21,378

Airline Crashes

Name Description Example
Date The date which the incident occured 2/3/2005
plane_type The type of plane flying Boeing 747-131
country The country where the incident occured China
airline The airline which resulted the accident occured Southwest Air
fat The number of Fatalities from the crash 4
phase Which phase the airplane was. (approach, initial_climb, etc.) en_route
meta The main category of the cause of the crash (weather, human_error, criminal) Weather
cause The cause of the crash bad weather


Exploration of Visualisation Methods

Chord Diagram
Chord Diagrams are a graphical method of displaying inter-relationships between data in a matrix. In this graphical method, the data is arranged in a circle where it will show the relationships between the various points. We believe that using a chord diagram would be effective as we would be able to visualise the number of passengers travelling between the various states. We would be using D3.js's Chord diagram, since it is both easy to implement and is interactive at the same time.

Brick Map
Brick Maps are maps that use bricks to give visualise the absolute amount of people in a geospatial space. We chose to use brick map, because it would give an overview of the number of passengers travelling from each state, and also because it is challenging, as stated from the prof. In order to build this, we would have to build our own libraries, since there is no brick map in any library.

Cross Filter
Cross filter is a library that is flexible and allows for people to select a range of dates easily. Since we have to visualise time-based data over 15 years. we intend to make it as flexible and easy to use for all users.

Proposal of StoryBoard

Our Group has decided on the below storyboard in order to make it clear for users to have an overview of the flight data, airplane crashes, have a comparison between 2 dates, and any details that they would like to have.


Technical Challenges
Technical Challenges Mitigation Plan
Lack of Javascript/d3.js Competence
  1. Peer learning
  2. Consult Professor Prakash
  3. View online Tutorials
Acquiring Data, Data Cleaning
  1. Work closely to clean and analyse all data sources
Creation of Brick Map overlay
  1. Start Early
  2. Using references from other d3.js libraries
Project Timeline
Technologies and Tools

Our team has decided to focus on these few tools and libraries in order to showcase our product.

  • Brackets (IDE)
  • Github (for version control and Github Pages)
  • Microsoft Excel (Data Cleaning)
  • Adobe Photoshop (Prototyping storyboard and Wiki Illustrations)
  • D3.js (one of the library used to visualise the data)