Difference between revisions of "IS428-AY2019-20T1 HDBViz-Proposal"

From Visual Analytics for Business Intelligence
Jump to navigation Jump to search
(Created page with "== Problem Statement == '''Problem''': Our team has identified a lack of information on HDB resale flats for homebuyers who want to understand and make decisions on the type...")
 
 
(25 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 +
[[File:hdbviz-final.png|300px|center|frameless]]
 +
<!--Header-->
 +
<br/>
 +
<div style="width:100%; text-align:center;">
 +
{|style="background-color:#143c67; color:#4d79ff; padding: 10 0 10 0;" width="100%" cellspacing="0" cellpadding="0" valign="top" border="0"  |
 +
<div style="width:100%; text-align:center;">
 +
| style="background:none;" width="1%" | &nbsp;
 +
| style="padding:0.2em; font-size:100%; background-color:#143c67;  border-bottom:0px solid #3D9DD7; text-align:center; color:#F5F5F5" width="10%" |
 +
[[IS428-AY2019-20T1 HDBViz-Proposal|<font color="#F5F5F5" size=3 face="Helvetica">Proposal</font>]]
 +
 +
| style="background:none;" width="1%" | &nbsp;
 +
| style="padding:0.2em; font-size:100%; background-color:#143c67;  border-bottom:0px solid #3D9DD7; text-align:center; color:#F5F5F5" width="10%" |
 +
[[IS428-AY2019-20T1 HDBViz-Poster|<font color="#F5F5F5" size=3 face="Helvetica">Poster</font>]]
 +
 +
| style="background:none;" width="1%" | &nbsp;
 +
| style="padding:0.2em; font-size:100%; background-color:#143c67;  border-bottom:0px solid #3D9DD7; text-align:center; color:#F5F5F5" width="10%" |
 +
[[IS428-AY2019-20T1 HDBViz-Application|<font color="#F5F5F5" size=3 face="Helvetica">Application</font>]]
 +
 +
| style="background:none;" width="1%" | &nbsp;
 +
| style="padding:0.2em; font-size:100%; background-color:#143c67;  border-bottom:0px solid #3D9DD7; text-align:center; color:#F5F5F5" width="10%" |
 +
[[IS428-AY2019-20T1 HDBViz-Research Paper|<font color="#F5F5F5" size=3 face="Helvetica">Research Paper</font>]]
 +
|}
 +
</div>
 +
<!--/Header-->
 +
<br />
 +
<big> [[Project Groups|<--- Go Back to Project Groups]] </big>
 +
<br /><br />
 +
 +
 
== Problem Statement ==
 
== Problem Statement ==
  
'''Problem''': Our team has identified a lack of information on HDB resale flats for homebuyers who want to understand and make decisions on the type of HDB flat to buy based on past transaction trends.
+
'''Problem''': Our team has identified a lack of information on HDB resale flats for home-buyers who want to understand and make decisions on the type of HDB flat to buy based on past transaction trends.
  
'''Motivation''': With the increasing demand for housing, there is a need for homeowners to have a better understanding over the flats they are purchasing. Hence, there is a need to analyse the resale prices and transaction volume of the flats.
+
'''Motivation''': With the increasing demand for housing, there is a need for homeowners to have a better understanding of the flats they are purchasing. Hence, there is a need to analyse the resale prices and transaction volume of the flats.
  
 
== Objectives ==
 
== Objectives ==
Line 10: Line 39:
 
* Changes of resale prices by flat types, years and month   
 
* Changes of resale prices by flat types, years and month   
 
* Value of the house based on the estate area  
 
* Value of the house based on the estate area  
* Resale transaction price based on the age of the estates area (lease year)  
+
* Resale transaction price based on the age of the estate area (lease year)  
 
* Identify Estates that are worth buying
 
* Identify Estates that are worth buying
  
Line 53: Line 82:
  
 
||  
 
||  
* Shows detailed information on HDB flats but lacks the tool to show an overview on the hdb estates in singapore
+
* Shows detailed information on HDB flats but lacks the tool to show an overview on the HDB estates in Singapore
 
* It is usability is limited by its lack of function to filter by different data variables e.g. region, street, Model, Floor Range, Floor Area and etc.
 
* It is usability is limited by its lack of function to filter by different data variables e.g. region, street, Model, Floor Range, Floor Area and etc.
  
Line 83: Line 112:
 
* It does not come with any axis or bounds which makes it easy to implement
 
* It does not come with any axis or bounds which makes it easy to implement
 
* Horizon chart also supports mouse interaction when hovered or selected in the chart.
 
* Horizon chart also supports mouse interaction when hovered or selected in the chart.
* It makes use of color based code to separate positive and negative values
+
* It makes use of colour based code to separate positive and negative values
 
* It collapses the negative values to the positive side of the axis, taking up less space and shows the same data.
 
* It collapses the negative values to the positive side of the axis, taking up less space and shows the same data.
 
|-
 
|-
|<center><br/> '''Title: Horizon Chart'''
+
| <center><br/> '''Title: Tree-Map'''
[[File:Horizon1.png|150px|frame|center]]
 
Source: https://www.perceptualedge.com/blog/?p=390
 
</center>
 
||
 
* Using different colour codes, it made the interpretation of data between charts much easier.
 
* Using the mirrored approach, it is much easier to compare the variance of data when they are side by side.
 
 
 
|-
 
| <center><br/> '''Title: TreeMap'''
 
 
[[File:Treemap Resale.png|150px|frame|center]]
 
[[File:Treemap Resale.png|150px|frame|center]]
 
Source: http://rpubs.com/tskam/treemap
 
Source: http://rpubs.com/tskam/treemap
Line 101: Line 121:
 
||  
 
||  
 
* Main benefits of tree maps is that they make efficient use of compact space, so they can legibly display many items on the screen at the same time.
 
* Main benefits of tree maps is that they make efficient use of compact space, so they can legibly display many items on the screen at the same time.
* But treemaps with too many items tend to be hard to read because of the many lines that enclose each small node.
+
* But tree-maps with too many items tend to be hard to read because of the many lines that enclose each small node.
 
|-
 
|-
 
|<center><br/>  '''Title: Overlay BarChart'''
 
|<center><br/>  '''Title: Overlay BarChart'''
Line 108: Line 128:
 
</center>
 
</center>
 
||  
 
||  
* Overlay BarChart reduces the chances of frequency measurement error.
+
* Overlay Bar-chart reduces the chances of frequency measurement error.
 
|}
 
|}
  
Line 116: Line 136:
 
{| class="wikitable" style="margin-left: auto; margin-right: auto; width: 90%;
 
{| class="wikitable" style="margin-left: auto; margin-right: auto; width: 90%;
 
|-
 
|-
! style="background:#B0E0E6;|Dashboards !! style="background:#B0E0E6;|Rational
+
! style="background:#B0E0E6;|Dashboards !! style="background:#B0E0E6; width:50%;|Rationale
 
|-
 
|-
| Example || Example
+
| <center><br/> '''Dashboard 1: Overview'''
 +
[[File:Proposed_treemap.jpg|frameless|400px|center]]
 +
</center>
 +
||
 +
* An overview to show the Resale Prices and Transaction Volumes for the different flat types by region and town, in a hierarchy structure.
 +
* The size of the box will be based on the total transaction volume and the colour will be based on the median transaction price. 
 +
* The chart can be filtered by time and the tree-map will be updated according to the filter.
 
|-
 
|-
 
|
 
|
 
<center><br/> '''Dashboard 2: Price/Transaction Volume Dashboard'''
 
<center><br/> '''Dashboard 2: Price/Transaction Volume Dashboard'''
[[File:Dashboard 2.jpg|thumb|400px|center]]
+
[[File:Dashboard 2.1.jpg|400px|frameless|center]]
 
</center>
 
</center>
 
||  
 
||  
Line 131: Line 157:
 
|  
 
|  
 
<center><br/>'''Dashboard 3: Past HDB Resale Transactions'''
 
<center><br/>'''Dashboard 3: Past HDB Resale Transactions'''
[[File:Dashboard3.jpg|thumb|400px|center]]
+
[[File:Dashboard3.jpg|frameless|400px|center]]
 
</center>
 
</center>
 
||  
 
||  
* The user will apply filters on the price range, lease year, flat type and flat model
+
* The user will apply filters on the price range, lease year, flat type and flat model which will be reflected by the proportional map and heat-map accordingly
* When filters are applied, the proportional map and heat map will reflect the selections accordingly
 
 
* The proportional map’s symbol size is determined by the number of transactions within each town
 
* The proportional map’s symbol size is determined by the number of transactions within each town
* The heatmap shows the median past transaction prices by town and flat type
+
* The heat-map shows the median past transaction prices by town and flat type
* The heatmap shade intensity is determined by the median transaction price
+
* The heat-map shade intensity is determined by the median transaction price
 
* Upon hovering over the points on the proportional map, it will show a box plot with the distribution of the transaction prices by the specific town
 
* Upon hovering over the points on the proportional map, it will show a box plot with the distribution of the transaction prices by the specific town
 
|}
 
|}
Line 147: Line 172:
 
! style="background:#B0E0E6;|Challenges !! style="background:#B0E0E6;|Action Taken
 
! style="background:#B0E0E6;|Challenges !! style="background:#B0E0E6;|Action Taken
 
|-
 
|-
| Example || Example
+
|  
 +
<center>
 +
Unfamiliarity with R and the different packages required to build the visualizations
 +
</center>
 +
||
 +
<center>
 +
Explore online resources (e.g. Rpubs)
 +
Self-learn on Data-camp
 +
</center>
 
|-
 
|-
| Example || Example
+
|  
 +
<center>
 +
Lack ideas in designing the storyboard
 +
</center>
 +
||  
 +
<center>
 +
Explore online resources such as Tableau Public Library to gather insights and inspirations
 +
</center>
 
|-
 
|-
| Example || Example
+
|  
 +
<center>
 +
Retrieving the coordinates for the different town required to build a map for our visualization
 +
</center>
 +
||  
 +
<center>
 +
Look into various projects and examples that made use of geographical mapping as reference
 +
</center>
 
|}
 
|}
 +
 +
== Tools and Technologies Used ==
 +
<p>
 +
[[File:Archi.png|900px|center]]
  
 
== Milestones ==
 
== Milestones ==
[[File:Milestones.png|frame|center]]
+
[[File:Milestone2.jpg|600px|center]]
 +
 
 +
== References ==
 +
http://freerangestats.info/blog/2018/05/13/nz-govt-shinyapps <br>
 +
http://rpubs.com/tskam/treemap <br>
 +
https://public.tableau.com/profile/yslin#!/vizhome/HDBResalePrice_OverallTrend/DB_OverviewofHDBResalePrice
  
== References ==
+
== Comments ==
 +
{| class="wikitable" style="margin-left: auto; margin-right: auto; width: 90%;
 +
|-
 +
! style="background:#B0E0E6;|Name !! style="background:#B0E0E6;|Comments
 +
|-
 +
|
 +
Your Name
 +
||
 +
* Comment
 +
|-
 +
|
 +
Your Name
 +
||
 +
* Comment
 +
|}

Latest revision as of 22:25, 19 November 2019

Hdbviz-final.png


 

Proposal

 

Poster

 

Application

 

Research Paper


<--- Go Back to Project Groups


Problem Statement

Problem: Our team has identified a lack of information on HDB resale flats for home-buyers who want to understand and make decisions on the type of HDB flat to buy based on past transaction trends.

Motivation: With the increasing demand for housing, there is a need for homeowners to have a better understanding of the flats they are purchasing. Hence, there is a need to analyse the resale prices and transaction volume of the flats.

Objectives

Target: Home Buyers
In this project, we aim to create a visualization tool that helps homeowners make decisions by identifying:

  • Changes of resale prices by flat types, years and month
  • Value of the house based on the estate area
  • Resale transaction price based on the age of the estate area (lease year)
  • Identify Estates that are worth buying

Selected Data Sets

Dataset/Source Data Attributes Rationale of Usage

HDB Resale Flat Prices
(https://data.gov.sg/dataset/resale-flat-prices)

  • Month
  • Town
  • Flat Type
  • Block
  • Street Name
  • Storey Range
  • Floor Area Sqm
  • Flat Model
  • Lease Commence Date
  • Remaining Lease
  • Resale Price

To gain information on the HDB procurement over the years such as:

  • The Resales prices by flat type
  • Area size and Floor level and;
  • The lease date of the flat.

Background Survey of Related Work

Reference of Other Interactive Visualization What we Learnt

Title: HDB One Map
Onemap.png

Source: https://services2.hdb.gov.sg/web/fi10/emap.html

  • Shows detailed information on HDB flats but lacks the tool to show an overview on the HDB estates in Singapore
  • It is usability is limited by its lack of function to filter by different data variables e.g. region, street, Model, Floor Range, Floor Area and etc.

Title: SRX Heat Map
SRX Heatmap.png

Source: https://www.srx.com.sg/heat-map

  • Shows an overview of the price and transaction volume of the different types of estate in different towns.
  • Bad color scheme used
  • Could include more interactive elements to the chart & detailed information (eg when hover over a district can show price & no. of transactions)

Title: Line Chart
Linegraph.png

Source: https://www.teoalida.com/singapore/hdbprices/

  • Able to see the trend in a glance based on the different flat type
  • Messy, not interactive as it does not show any highlight line when users hover over to the town that they want to see

Title: Horizon Chart
Horizon.png

Source: https://flowingdata.com/2015/07/02/changing-price-of-food-items-and-horizon-graphs/

  • It allows users to look at patterns over time
  • It does not come with any axis or bounds which makes it easy to implement
  • Horizon chart also supports mouse interaction when hovered or selected in the chart.
  • It makes use of colour based code to separate positive and negative values
  • It collapses the negative values to the positive side of the axis, taking up less space and shows the same data.

Title: Tree-Map
Treemap Resale.png

Source: http://rpubs.com/tskam/treemap

  • Main benefits of tree maps is that they make efficient use of compact space, so they can legibly display many items on the screen at the same time.
  • But tree-maps with too many items tend to be hard to read because of the many lines that enclose each small node.

Title: Overlay BarChart
OverlayBarchart.png

Source: https://blogs.sas.com/content/graphicallyspeaking/2014/07/27/overlay-bar-charts/

  • Overlay Bar-chart reduces the chances of frequency measurement error.

Proposed Dashboard

Our group has proposed the following storyboard in our Visual Application:

Dashboards Rationale

Dashboard 1: Overview
Proposed treemap.jpg
  • An overview to show the Resale Prices and Transaction Volumes for the different flat types by region and town, in a hierarchy structure.
  • The size of the box will be based on the total transaction volume and the colour will be based on the median transaction price.
  • The chart can be filtered by time and the tree-map will be updated according to the filter.

Dashboard 2: Price/Transaction Volume Dashboard
Dashboard 2.1.jpg
  • A horizon Chart to show the Resale Prices or Transaction Volumes by Towns.
  • When Filtered to Resale Prices and Selected Town, the right graph will display a Line chart. It will show the absolute Resale price of the selected town and the changes of Resale price from the previous year to the current year.
  • When filtered by Transaction Volume, it will show the absolute Transaction Volume of the selected town and changes of transaction volume from the previous year to the current year.

Dashboard 3: Past HDB Resale Transactions
Dashboard3.jpg
  • The user will apply filters on the price range, lease year, flat type and flat model which will be reflected by the proportional map and heat-map accordingly
  • The proportional map’s symbol size is determined by the number of transactions within each town
  • The heat-map shows the median past transaction prices by town and flat type
  • The heat-map shade intensity is determined by the median transaction price
  • Upon hovering over the points on the proportional map, it will show a box plot with the distribution of the transaction prices by the specific town

Key Technical Challenges

Challenges Action Taken

Unfamiliarity with R and the different packages required to build the visualizations

Explore online resources (e.g. Rpubs) Self-learn on Data-camp

Lack ideas in designing the storyboard

Explore online resources such as Tableau Public Library to gather insights and inspirations

Retrieving the coordinates for the different town required to build a map for our visualization

Look into various projects and examples that made use of geographical mapping as reference

Tools and Technologies Used

Archi.png

Milestones

Milestone2.jpg

References

http://freerangestats.info/blog/2018/05/13/nz-govt-shinyapps
http://rpubs.com/tskam/treemap
https://public.tableau.com/profile/yslin#!/vizhome/HDBResalePrice_OverallTrend/DB_OverviewofHDBResalePrice

Comments

Name Comments

Your Name

  • Comment

Your Name

  • Comment