View source for Home Sweet Home: Proposal

[[File:Add Image Here|center|150px]]

{| 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"> [[Home Sweet Home | <b>Home</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 #3D9DD7; border-top:1px solid #3D9DD7; font-family:helvetica"> [[Home Sweet Home: Proposal | <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 #3D9DD7; border-top:1px solid #3D9DD7; font-family:helvetica"> [[Home Sweet Home: Poster | <b>Poster</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 #3D9DD7; border-top:1px solid #3D9DD7; font-family:helvetica"> [[Home Sweet Home: Application | <b>Application</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 #3D9DD7; border-top:1px solid #3D9DD7; font-family:helvetica"> [[Home Sweet Home: Research Paper | <b>Research Paper</b>]]
|}

<p></p><br/>
<div style="background: #364558; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px;letter-spacing:-0.08em;font-size:20px"><font color=#fbfcfd face="Century Gothic">PROBLEM & MOTIVATION</font></div>
In the year 1960, Singapore was facing a huge crisis. Many people were living in unhygienic slums and crowded squatters with only a meager 9% of Singaporeans lived in government flats, while everyone else yearned for a place to call home sweet home.To counter this crisis,, the Housing & Development Board (HDB) was incorporated on 1 February, 1960 and tasked with the critical mission of solving the crisis ar hand. In a mere span of 10 years, HDB had attained its goal and solved the housing crisis.

However, in 1993, HDB stopped deciding the prices of new apartments based on construction costs, instead they decided based on market prices. Prices of resale flats and new flats entered in a vicious circle, rising 50% in just 6 months of 1993 and tripled to 1996. This move closed the price gap between small and large flat types and hub pricing have never been he same again. 

Thus, as graduates to be who will most likely enter the job market soon and start looking for a place to call home, we felt that it would be interesting to look into the historical flat data so that we can see which flats in Singapore would be the most value for money so that we can actually get a home which is worth its investment. We also felt that it would be fun to explore trends in the resale flat prices and see what factors really affect the prices of HDBs and see how much of a premium people attach to amenities such as proximity to public transport, schools and etc... 

<br/><div style="background: #364558; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px;letter-spacing:-0.08em;font-size:20px"><font color=#fbfcfd face="Century Gothic">OBJECTIVES</font></div>
<p>In this project, we are interested to create a visualization that helps analysts perform the following:</p>
# Identify terrorist organizations active in each country and the spread/types of activities they conducted to threaten the safety of the country, over different time periods
# Identify possible linkages between the number of terrorist activities occurring in a country and its development status
# Get a clearer understanding of each terrorist organization and the type of attacks they have conducted in a country/globally, over different time periods
# Compare different terrorist organizations and identify similarities and differences in their attack patterns, over different time periods
<p>By conducting the analysis, it allows respective policy makers, government or intelligence agencies to better understand terrorist organizations and their spread internationally so that they could devise appropriate policies/measures to prevent potential attacks within their own country, regionally or globally in future.</p>

<br/><div style="background: #364558; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px;letter-spacing:-0.08em;font-size:20px"><font color=#fbfcfd face="Century Gothic">SELECTED DATASET</font></div>
In our analysis, we will only be using data within the year of 2000 - 2015. The rationale for the range of data selected is as follows:
* It does not provide strong relevance/insights for analysts to look at all the data in the past 45 years and attempt to predict activities of these terrorist organizations now/in the future. Due to the rapid changes in the globalized world, a range of 15 years will be adequate to help analysts spot trends/patterns of terrorist activities.
* Due to limitations of the data collected about each country's development status, the dataset only provides information from year 2000 - 2015.
* Due to technical limitations, loading past 45 years of data (156,773 records) into the application may cause it to become non-responsive and users may not be satisfied with the response rate. A range of 15 years (87,010 records) will yield just enough data for an insightful analysis and yet, does not sacrifice on the application's response rate. <br/>
The dataset for analysis will be retrieved from multiple databases, as elaborated below:<br/>
{| class="wikitable" style="background-color:#FFFFFF;" width="100%"
|-
! style="font-weight: bold;background: #536a87;color:#fbfcfd;width: 30%;" | Dataset/Source
! style="font-weight: bold;background: #536a87;color:#fbfcfd;width: 30%" | Data Attributes
! style="font-weight: bold;background: #536a87;color:#fbfcfd;" | Rationale Of Usage
|-
| <center>Global Terrorism Database (GTD)<br/>
(https://www.start.umd.edu/gtd/using-gtd/) </center>
|| 
* Geographical spread of terrorist attacks
* Type of terrorist attacks
* Target of terrorist attacks
* Perpetrators of terrorist attacks
* Extent of damage in terrorist attacks 
|| 
<center>This dataset will be used as a main source of information in our analysis to understand the spread of terrorist activities in each country/globally.</center>
|-
| <center>Big Allied and Dangerous Database (BAAD)<br/>
(https://dataverse.harvard.edu/dataset.xhtml?persistentId=hdl%3A1902.1/16062)</center>
|| 
* Information about each terrorist organization (e.g. ideology, location, state sponsored, number of allies and rivals) 
|| 
<center>This dataset aims to complement the main dataset by providing detailed information about each terrorist organization, in addition to the attacks that it carried out globally.</center>
|-
| <center>World Development Indicators<br/>
(Retrieved from World Bank)</center>
|| 
* Annual GDP Growth (%)
* Poverty Ratio (%)
* Unemployment Rate (%)
* Adult Literacy Rate (%)
|| 
<center>This dataset aims to help analysts identify possible linkages <br/>between the number of terrorist activities occurring in the country and the development state of the selected country.</center>
|-
| <center>UIS Data Center<br/>
(Retrieved from UN Data - UNESCO Institute for Statistics)</center>
|| 
* Youth Literacy Rate (%)
|| 
<center>This dataset aims to help analysts identify possible linkages <br/>between the number of terrorist activities occurring in the country and the development state of the selected country.</center>
|-
| <center>World Telecommunications/ICT Indicators Database<br/>
(Retrieved from UN Data - International Telecommunications Union)</center>
|| 
* Individuals Using Internet (%)
|| 
<center>This dataset aims to help analysts identify possible linkages <br/>between the number of terrorist activities occurring in the country and the development state of the selected country.</center>
|-
|}

<br/><div style="background: #364558; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px;letter-spacing:-0.08em;font-size:20px"><font color=#fbfcfd face="Century Gothic">BACKGROUND SURVEY OF RELATED WORKS</font></div>
Many visual and data analysts have made use of data collected from the Global Terrorism Database to visualize and understand the extent of terrorist attacks around the world. Some of their works include the following:
{| class="wikitable" style="background-color:#FFFFFF;" width="100%"
|-
! style="font-weight: bold;background: #536a87;color:#fbfcfd;width: 50%;" | Related Works
! style="font-weight: bold;background: #536a87;color:#fbfcfd;" | What We Can Learn
|-
| 
<p><center>'''An Analysis of Death Tolls & Terrorist Incidents''' </center></p>
[[File:Related Works - Infographic Group7.jpg|400px|center]]
<p><center>'''Source''': http://www.dailymail.co.uk/news/article-3322308/Number-people-killed-terrorists-worldwide-soars-80-just-year.html</center></p>
 || 
* The infographic provides annotations to help the users understand major terrorist attacks that have happened overtime.
* Colour scheme used by the infographic is clean and neat. 
* Use of colors on the same color scale ensures that it will not confuse the users. Also, the need to reference to a legend repeatedly will also be reduced.
|-
| <p><center> '''An Animated Time-Lapse Visualization of Terror Attacks On The World Map''' </center></p>
[[File:Related Works - Time Lapse Group7.gif|400px|center]]
<p><center> '''Source''': https://www.youtube.com/watch?v=cHbYk2l9w-E </center> </p>
||
* The time-lapse animation provides a clear overview to users as it shows the spread of terrorist activities over the years.
|-
| <p><center> '''An Interactive Visualization to Show Trends And Events Shaping History of Terrorism''' </center></p>
[[File:Related Works - Interactive Visualization Group7.png|400px|center]]
<p><center> '''Source''': http://parano.github.io/Global-Terrorism-Visualization/ </center></p>
|| 
* The time-series chart allow users to make use of a scrollbar to look at a time range (of 12 months). Use of a scrollbar act as a filter to look at the selected time range and this prevents users from getting overwhelmed by the data.
* The visualization consists of 2 charts linked together and this provides a clear representation of the spread of terrorist activities overtime. Firstly, the bar chart shows the number of fatalities in each month across the years. Secondly, the world map shows the spread of terrorist activities as user selects a time series. When the user drags across the scrollbar on the bar chart, the activities in the world map changes based on the selected time series. Such linkage between charts are useful and provides a good interactive tool to help users analyze spread of terrorist activities overtime.
* Use of tooltips allow users to know more information about the number of fatalities as they interact with the map.
|}

<br/><div style="background: #364558; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px;letter-spacing:-0.08em;font-size:20px"><font color=#fbfcfd face="Century Gothic">PROPOSED STORYBOARD</font></div>
Our group has proposed the following storyboard to assist analysts in the use of our visual application:
{| class="wikitable" style="background-color:#FFFFFF;" width="100%"
|-
! style="font-weight: bold;background: #536a87;color:#fbfcfd;width: 50%;" | Proposed Layout
! style="font-weight: bold;background: #536a87;color:#fbfcfd;" | How Analyst Can Conduct Analysis
|-
| 
<p><center>'''Introduction''' </center></p><br/>
[[File:Storyboard Intro (Page 1) Group7.png|700px|center]]
 || 
# Introduce analysts to the topic of terrorism and the objectives of the visualization project
# Select an option of whether they wish to analyze terrorist activities based on each country or each terrorist organization
|-
| 
<p><center>'''Analyze Terrorist Activities By Country''' </center></p><br/>
[[File:Storyboard Country Specific (Page 2) Group7.png|700px|center]]
 || 
# Inspired by one of the related works mentioned previously, the filter in the page will be based on a bar chart showing the count of terrorist attacks over the years.
# A scrollbar will be implemented on the bar chart to allow users to choose the time series they are interested to look at. At any point in time, users can analyse one year of data. As the time period changes, the data in all 3 charts will change dynamically.
# A choropleth map of the country will be displayed and the count of terrorist attacks conducted in each state will be colored accordingly based on the selected time period.
# A star chart (glyph) will also be displayed to show the development state of the country for the selected time period.
# A zoomable sunburst diagram will also be displayed to show the terrorist organizations active in the country, the type of attacks conducted by each terrorist organization and their target victims.
# By selecting to view more information about the terrorist organization, the user will be directed to the next page about the terrorist organizations.
|-
| 
<p><center>'''Analyze Terrorist Activities By Terrorist Organizations''' </center></p><br/>
[[File:Storyboard Terrorist Org Specific (Page 3) Group7.png|700px|center]]
 || 
# If user enters the page from the country specific page, the top 3 active terrorist organization in the country will be shown. Otherwise, the top 3 active terrorist organization globally will be shown.
# Similar to the country specific page, a bar chart showing the count of attacks occurring globally will be shown. At any point in time, users can analyse one year of data. As the time period changes, the data in all charts will change dynamically.
# Other than the time period, users can also choose to add/remove the terrorist organizations they wish to compare against. If the country is selected as a filter, the top 3 terrorist organization in the country will be displayed.
# The choropleth world map will be colored based on the number of attacks conducted by the selected terrorist organizations.
# The data points on the choropleth world map will be colored by the different types of the terrorist organization who conducted the attack. The size of the data point will be determined by the number of deaths in the particular attack.
# More information about the terrorist organization will also be displayed. These information will come from the BAAD dataset, Google Search and the GTD dataset on the number of attacks conducted based on attack types.
|-
|}

<br/><div style="background: #364558; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px;letter-spacing:-0.08em;font-size:20px"><font color=#fbfcfd face="Century Gothic">ADDRESSING KEY TECHNICAL CHALLENGES</font></div>
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%"
|-
! style="font-weight: bold;background: #536a87;color:#fbfcfd;width: 50%;" | Key Technical Challenges
! style="font-weight: bold;background: #536a87;color:#fbfcfd;" | How We Propose To Resolve
|-
| <center> Unfamiliarity of Visualization Tool Usage </center> || 
* Independent Learning on Visualization Tools
* Peer Learning
|-
| <center> Data Cleaning & Transformation </center> || 
* Work together to clean, transform and analyze the data
|-
| <center> Unfamiliarity in Programming using Javascript & D3 Libraries </center> || 
* Attend D3 Programming Workshop
* Independent Learning on D3 Libraries & Technical Tools
* Peer Learning
|-
| <center> Unfamiliarity in Implementing Interactivity and Animation Tools/Techniques in Visualization App </center> || 
* Develop a Storyboard/Design Flow
* Assign members to specialize on Interactivity/Animation Techniques
|}

<br/><div style="background: #364558; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px;letter-spacing:-0.08em;font-size:20px"><font color=#fbfcfd face="Century Gothic">PROJECT TIMELINE</font></div>
<p>The following shows our project timeline for the completion of this project:</p>
[[File:Project Schedule Group7.png|1000px|center]]

<br/><div style="background: #364558; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px;letter-spacing:-0.08em;font-size:20px"><font color=#fbfcfd face="Century Gothic">TOOLS/TECHNOLOGIES</font></div>
<p>The following are some of the tools/technologies that we will be utilizing during the project:</p>
* D3.js
* Chart.js
* Google Charts
* Google Search API
* Github
* Netbeans

<br/><div style="background: #364558; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px;letter-spacing:-0.08em;font-size:20px"><font color=#fbfcfd face="Century Gothic">REFERENCES</font></div>
* Marina Bay Attack Plot from Batam ‘Not to be Taken Lightly’ (http://www.straitstimes.com/singapore/rocket-attack-plot-not-to-be-taken-lightly)
* National Consortium for the Study of Terrorism and Responses to Terrorism (START). (2016). Global Terrorism Database [Data file]. Retrieved from http://www.start.umd.edu/gtd
* UN Datasets (http://data.un.org/)
* Big Allied and Dangerous Database (https://dataverse.harvard.edu/dataset.xhtml?persistentId=hdl%3A1902.1/16062)
* World Bank Database (http://databank.worldbank.org/data/home.aspx)
* D3.js (https://d3js.org/)
* Examples By Mike Bostock (https://bost.ocks.org/mike/example/)

<br/><div style="background: #364558; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px;letter-spacing:-0.08em;font-size:20px"><font color=#fbfcfd face="Century Gothic">OUR BRAINSTORMING SESSIONS</font></div>
<p>The following are some of the proposed storyboard that we designed during our brainstorming sessions:</p>
[[File:Proposed Storyboard v1 Group7.jpg|800px|center]]<br/>
[[File:Brainstorm Proposed Storyboard v2.1 Group7.jpg|800px|center]]<br/>
[[File:Brainstorm Proposed Storyboard v2.2.jpg|800px|center]]

<br/><div style="background: #364558; padding: 15px; font-weight: bold; line-height: 0.3em; text-indent: 15px;letter-spacing:-0.08em;font-size:20px"><font color=#fbfcfd face="Century Gothic">COMMENTS</font></div>
<p>Feel free to comment to help us improve our project! (:</p>