Difference between revisions of "1718t1is428T7"

From Visual Analytics for Business Intelligence
Jump to navigation Jump to search
Line 1: Line 1:
−
[[File:|center|150px]]
+
[[File:GroupLogo.png|300px|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"> [[LINK | <b>Home</b>]]
+
<!------- Main Navigation Bar---->
 +
<center>
 +
{| style="background-color:#ffffff ; margin: 3px 10px 3px 10px; width="80%"|
 +
| style="font-family:Open Sans, Arial, sans-serif; font-size:15px; text-align: center; border-top:solid #ffffff; border-bottom:solid #0091b3" width="190px" |
 +
[[Forensic_Ninja|<font color="#3c3c3c"><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"> [[LINK | <b>Proposal</b>]]
+
| style="font-family:Open Sans, Arial, sans-serif; font-size:15px; text-align: center; border-top:solid #ffffff; border-bottom:solid #f5f5f5" width="210px" | 
 +
[[Forensic_Ninja_Poster|<font color="#3c3c3c"><strong>POSTER</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"> [[LINK | <b>Poster</b>]]
+
| style="font-family:Open Sans, Arial, sans-serif; font-size:15px; text-align: center; border-top:solid #ffffff; border-bottom:solid #f5f5f5" width="230px" | 
 +
[[Forensic_Ninja_Application|<font color="#3c3c3c"><strong>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"> [[LINK | <b>Application</b>]]
+
| style="font-family:Open Sans, Arial, sans-serif; font-size:15px; text-align: center; border-top:solid #ffffff; border-bottom:solid #f5f5f5" width="230px" | 
 +
[[Forensic_Ninja_Report|<font color="#3c3c3c"><strong>REPORT</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"> [[LINK | <b>Research Paper</b>]]
 
 
|}
 
|}
 +
</center>
 +
<!------- End of Main Navigation Bar---->
 +
 +
<!-- Body -->
 +
==<div style="background: #ffffff; padding: 17px; line-height: 0.1em;  text-indent: 10px; font-size:17px; font-family: Helvetica;  border-left:8px solid #0091b3"><font color= #000000><strong>Problem and Motivation</strong></font></div>==
 +
<div style="margin:0px; padding: 10px; background: #f2f4f4; font-family: Open Sans, Arial, sans-serif; border-radius: 7px; text-align:left">
 +
TEXT <br />
 +
  
−
{| style="background-color:white; color:white padding: 5px 0 0 0;" width="100%" height=50px cellspacing="0" cellpadding="0" valign="top" border="0" |
+
TEXT <br />
  
−
| style="vertical-align:top;width:10%;" |
 
  
−
| style="vertical-align:top;width:20%;" |
+
TEXT
 +
</div>
 +
 
 +
==<div style="background: #ffffff; padding: 17px; line-height: 0.1em;  text-indent: 10px; font-size:17px; font-family: Helvetica;  border-left:8px solid #0091b3"><font color= #000000><strong>Objectives</strong></font></div>==
 +
<div style="margin:0px; padding: 10px; background: #f2f4f4; font-family: Open Sans, Arial, sans-serif; border-radius: 7px; text-align:left">
 +
TEXT <br />
  
−
| style="vertical-align:top;width:20%;" |
 
−
|}
 
−
<!--Sub Header End-->
 
−
<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">OBJECTIVES</font></div>
 
−
<p>TEXT</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>
 
−
TEXT<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>TEXT<br/>
 
−
</center>
 
−
||
 
 
TEXT
 
TEXT
−
||
+
</div>
−
<center>TEXT</center>
+
 
−
|-
+
==<div style="background: #ffffff; padding: 17px; line-height: 0.1em;  text-indent: 10px; font-size:17px; font-family: Helvetica;  border-left:8px solid #0091b3"><font color= #000000><strong>Data Source</strong></font></div>==
−
| <center>TEXT<br/>
+
<div style="margin:0px; padding: 10px; background: #f2f4f4; font-family: Open Sans, Arial, sans-serif; border-radius: 7px; text-align:left">
−
</center>
 
−
||
 
 
TEXT
 
TEXT
−
||
+
</div>
−
<center>TEXT</center>
+
 
 +
==<div style="background: #ffffff; padding: 17px; line-height: 0.1em;  text-indent: 10px; font-size:17px; font-family: Helvetica;  border-left:8px solid #0091b3"><font color= #000000><strong>References to Related Work</strong></font></div>==
 +
<div style="margin:0px; padding: 10px; background: #f2f4f4; font-family: Open Sans, Arial, sans-serif; border-radius: 7px; text-align:left">
 +
<center>
 +
{| style="background-color:#ffffff ; margin: 3px 10px 3px 10px; font-size:15px" width="85%"
 +
|- style="background:#f2f4f4; font-size:17px"
 +
 
 
|-
 
|-
−
| <center>TEXT<br/>
+
| style="font-family:Open Sans, Arial, sans-serif; font-size:16px; text-align: center; padding:5px; border-bottom:solid #0091b3" | <font color="#3c3c3c"><strong>Screenshots</strong></font>
−
</center>
+
| style="font-family:Open Sans, Arial, sans-serif; font-size:16px; text-align: center; padding:5px; border-bottom:solid #0091b3" | <font color="#3c3c3c"><strong>What we can learn</strong></font>
−
||  
+
 
−
TEXT
 
−
||
 
−
<center>TEXT</center>
 
 
|-
 
|-
−
| <center>TEXT<br/>
+
| style="font-family:Open Sans, Arial, sans-serif; text-align: center; padding:3px 10px; border-bottom:solid 1px #d8d8d8" | <strong>
−
</center>
+
HEADER [[File:Forensic Ninja ParallelVizTianjin.png|300px]]<br />Source:LINK </strong>
−
||  
+
| style="font-family:Open Sans, Arial, sans-serif; text-align: left; padding:3px 10px; border-bottom:solid 1px #d8d8d8" |  
−
TEXT
+
<b>Pros:</b>
−
||
+
*
−
<center>TEXT</center>
+
*
 +
 
 +
<b>Cons:</b>
 +
*
 +
*
 +
 
 
|-
 
|-
−
|}
+
| style="font-family:Open Sans, Arial, sans-serif; text-align: center; padding:3px 10px; border-bottom:solid 1px #d8d8d8" | <strong>
 +
HEADER [[File:Forensic Ninja ParallelVizTianjin.png|300px]]<br />Source:LINK </strong>
 +
| style="font-family:Open Sans, Arial, sans-serif; text-align: left; padding:3px 10px; border-bottom:solid 1px #d8d8d8" |
 +
<b>Pros:</b>
 +
*
 +
*
 +
 
 +
<b>Cons:</b>
 +
*
 +
*
  
−
<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>
 
−
TEXT
 
−
{| class="wikitable" style="background-color:#FFFFFF;" width="100%"
 
 
|-
 
|-
−
! style="font-weight: bold;background: #536a87;color:#fbfcfd;width: 50%;" | Related Works
+
| style="font-family:Open Sans, Arial, sans-serif; text-align: center; padding:3px 10px; border-bottom:solid 1px #d8d8d8" | <strong>
−
! style="font-weight: bold;background: #536a87;color:#fbfcfd;" | What We Can Learn
+
HEADER [[File:Forensic Ninja ParallelVizTianjin.png|300px]]<br />Source:LINK </strong>
 +
| style="font-family:Open Sans, Arial, sans-serif; text-align: left; padding:3px 10px; border-bottom:solid 1px #d8d8d8" |  
 +
<b>Pros:</b>
 +
*
 +
*
 +
 
 +
<b>Cons:</b>
 +
*
 +
*
 +
 
 
|-
 
|-
−
| <p><center> '''TEXT''' </center></p>
+
| style="font-family:Open Sans, Arial, sans-serif; text-align: center; padding:3px 10px; border-bottom:solid 1px #d8d8d8" | <strong>
−
[[File:|400px|center]]
+
HEADER [[File:Forensic Ninja ParallelVizTianjin.png|300px]]<br />Source:LINK </strong>
−
<p><center>TEXT</center></p>
+
| style="font-family:Open Sans, Arial, sans-serif; text-align: left; padding:3px 10px; border-bottom:solid 1px #d8d8d8" |  
−
||
+
<b>Pros:</b>
−
TEXT
+
*
−
|-
+
*
−
| <p><center> '''TEXT''' </center></p>
+
 
−
[[File:|400px|center]]
+
<b>Cons:</b>
−
<p><center>TEXT</center> </p>
+
*
−
||
+
*
−
TEXT
+
 
−
|-
 
−
| <p><center> '''TEXT''' </center></p>
 
−
[[File:|400px|center]]
 
−
<p><center>TEXT</center></p>
 
−
||
 
−
TEXT
 
 
|}
 
|}
 +
</center>
 +
</div>
  
−
<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">DESIGN INSPIRATIONS</font></div>
+
==<div style="background: #ffffff; padding: 17px; line-height: 0.1em; text-indent: 10px; font-size:17px; font-family: Helvetica; border-left:8px solid #0091b3"><font color= #000000><strong>Storyboard</strong></font></div>==
−
Other than looking at related works of others, we also reference and draw inspirations from interactive visualizations created by others. Some of these visualizations that we draw inspiration from, are as follows:
+
<div style="margin:0px; padding: 10px; background: #f2f4f4; font-family: Open Sans, Arial, sans-serif; border-radius: 7px; text-align:left">
 +
[[File:storyboard1.png|600px|center]]
 +
TEXT
  
−
{| class="wikitable" style="background-color:#FFFFFF;" width="100%"
 
−
|-
 
−
! style="font-weight: bold;background: #536a87;color:#fbfcfd;width: 50%;" | Reference of Other Interactive Visualization
 
−
! style="font-weight: bold;background: #536a87;color:#fbfcfd;" | What We Can Learn
 
−
|-
 
−
| <p><center>'''TEXT''' </center></p>
 
−
[[File:|400px|center]]
 
−
<p><center>TEXT</center></p>
 
−
||
 
 
TEXT
 
TEXT
−
|-
 
−
| <p><center>TEXT</center></p>
 
−
[[File:|400px|center]]
 
−
<p><center>TEXT</center></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">PROPOSED STORYBOARD</font></div>
 
−
{| 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
 
−
|-
 
−
| [[File:|600px|center]]
 
−
||
 
 
TEXT
 
TEXT
−
|-
 
−
| [[File:|600px|center]] 
 
−
||
 
−
TEXT
 
−
|-
 
−
| [[File:|600px|center]]
 
−
||
 
−
TEXT
 
−
|}
 
  
−
<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>
+
</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%"
+
==<div style="background: #ffffff; padding: 17px; line-height: 0.1em; text-indent: 10px; font-size:17px; font-family: Helvetica; border-left:8px solid #0091b3"><font color= #000000><strong>Key Technical Challenges</strong></font></div>==
−
|-
+
<div style="margin:0px; padding: 10px; background: #f2f4f4; font-family: Open Sans, Arial, sans-serif; border-radius: 7px; text-align:left">
−
! style="font-weight: bold;background: #536a87;color:#fbfcfd;width: 50%;" | Key Technical Challenges
+
<b>TEXT</b><br>
−
! style="font-weight: bold;background: #536a87;color:#fbfcfd;" | How We Propose To Resolve
+
TEXT<br>
−
|-
+
 
−
| <center> Unfamiliarity of Visualization Tool Usage </center> ||
+
<b>TEXT</b><br>
−
* Independent Learning on Visualization Tools
+
TEXT<br>
−
* Peer Learning
+
 
−
|-
+
<b>TEXT</b><br>
−
| <center> Data Cleaning & Transformation </center> ||
+
TEXT<br>
−
* Work together to clean, transform and analyze the data
+
 
−
|-
+
</div>
−
| <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>
+
==<div style="background: #ffffff; padding: 17px; line-height: 0.1em; text-indent: 10px; font-size:17px; font-family: Helvetica; border-left:8px solid #0091b3"><font color= #000000><strong>Project Schedule</strong></font></div>==
−
<p>The following shows our project timeline for the completion of this project:</p>
+
<div style="margin:0px; padding: 10px; background: #f2f4f4; font-family: Open Sans, Arial, sans-serif; border-radius: 7px; text-align:left">
−
[[File:Project Schedule v2 GwendolineTanWanXin.png|1000px|center]]
+
<center>[[File:Forensic Ninja Timeline.PNG|500px]]</center>
 +
</div>
  
−
<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>
+
==<div style="background: #ffffff; padding: 17px; line-height: 0.1em; text-indent: 10px; font-size:17px; font-family: Helvetica; border-left:8px solid #0091b3"><font color= #000000><strong>References</strong></font></div>==
−
<p>The following are some of the tools/technologies that we will be utilizing during the project:</p>
+
<div style="margin:0px; padding: 10px; background: #f2f4f4; font-family: Open Sans, Arial, sans-serif; border-radius: 7px; text-align:left">
−
* D3.js
+
#
−
* Chart.js
+
#
−
* Notepad++
+
</div>
−
* Adobe PhotoShop
 
  
−
<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>
+
==<div style="background: #ffffff; padding: 17px; line-height: 0.1em; text-indent: 10px; font-size:17px; font-family: Helvetica; border-left:8px solid #0091b3"><font color= #000000><strong>Our Team</strong></font></div>==
−
TEXT
+
<div style="margin:0px; padding: 10px; background: #f2f4f4; font-family: Open Sans, Arial, sans-serif; border-radius: 7px; text-align:left">
 +
<b>Group 7</b><br>
 +
Fan Kaiyang<br>
 +
Mark Ng Wei Jie<br>
 +
Gary Quek Jian Zhang
 +
</div>
  
−
<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>
+
==<div style="background: #ffffff; padding: 17px; line-height: 0.1em; text-indent: 10px; font-size:17px; font-family: Helvetica; border-left:8px solid #0091b3"><font color= #000000><strong>Comments</strong></font></div>==
−
<p>The following show the proposed storyboard that we designed during our brainstorming sessions:</p>
+
<div style="margin:0px; padding: 10px; background: #f2f4f4; font-family: Open Sans, Arial, sans-serif; border-radius: 7px; text-align:left">
−
[[File:Sketch of Dashboard TeamVigilante.jpg|400px|center]]
 
−
TEXT
 
  
−
<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>
+
<!--Please leave your comments here :) --->
−
<p>Feel free to comment to help us improve our project! (:</p>
+
</div>
 +
<!-- End Body --->

Revision as of 18:55, 12 October 2017

300px

PROPOSAL

POSTER

APPLICATION

REPORT

Problem and Motivation

TEXT


TEXT


TEXT

Objectives

TEXT


TEXT

Data Source

TEXT

References to Related Work

Screenshots What we can learn

HEADER 300px
Source:LINK

Pros:

Cons:

HEADER 300px
Source:LINK

Pros:

Cons:

HEADER 300px
Source:LINK

Pros:

Cons:

HEADER 300px
Source:LINK

Pros:

Cons:

Storyboard

600px

TEXT

TEXT

TEXT

Key Technical Challenges

TEXT
TEXT

TEXT
TEXT

TEXT
TEXT

Project Schedule

500px

References

Our Team

Group 7
Fan Kaiyang
Mark Ng Wei Jie
Gary Quek Jian Zhang

Comments

Retrieved from ‘https://wiki.smu.edu.sg/1718t1is428g1/index.php?title=1718t1is428T7&oldid=3293’