|
|
| (61 intermediate revisions by 3 users not shown) |
| Line 1: |
Line 1: |
| − | [[File:g1t7_weed_logo1.jpg|200px|center]] | + | [[File:g1t7_weed_logo1.jpg|600px|center]] |
| | | | |
| | <!------- Main Navigation Bar----> | | <!------- Main Navigation Bar----> |
| | <center> | | <center> |
| | {| style="background-color:#ffffff ; margin: 3px 10px 3px 10px; width="80%"| | | {| 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" | | | | 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>]] | + | [[1718t1is428T7 |<font color="#3c3c3c"><strong>HOME</strong></font>]] |
| | + | |
| | + | | style="font-family:Open Sans, Arial, sans-serif; font-size:15px; text-align: center; border-top:solid #ffffff; border-bottom:solid #f5f5f5" width="210px" | |
| | + | [[1718t1is428T7: Proposal 2|<font color="#3c3c3c"><strong>PROPOSAL</strong></font>]] |
| | | | |
| | | style="font-family:Open Sans, Arial, sans-serif; font-size:15px; text-align: center; border-top:solid #ffffff; border-bottom:solid #f5f5f5" width="210px" | | | | 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>]] | + | [[Poster|<font color="#3c3c3c"><strong>POSTER</strong></font>]] |
| | | | |
| | | style="font-family:Open Sans, Arial, sans-serif; font-size:15px; text-align: center; border-top:solid #ffffff; border-bottom:solid #f5f5f5" width="230px" | | | | 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>]] | + | [[Application|<font color="#3c3c3c"><strong>APPLICATION</strong></font>]] |
| | | | |
| | | style="font-family:Open Sans, Arial, sans-serif; font-size:15px; text-align: center; border-top:solid #ffffff; border-bottom:solid #f5f5f5" width="230px" | | | | 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>]] | + | [[Report|<font color="#3c3c3c"><strong>RESEARCH PAPER</strong></font>]] |
| | | | |
| | |} | | |} |
| | </center> | | </center> |
| | <!------- End of Main Navigation Bar----> | | <!------- End of Main Navigation Bar----> |
| − |
| |
| | <!-- Body --> | | <!-- 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>==
| + | <br><br> |
| − | <div style="margin:0px; padding: 10px; background: #f2f4f4; font-family: Open Sans, Arial, sans-serif; border-radius: 7px; text-align:left">
| + | [[File:G1t7 MMPR Home.jpg|1300px|center]] |
| − | TEXT <br />
| |
| − | | |
| − | | |
| − | TEXT <br />
| |
| − | | |
| − | | |
| − | 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 />
| |
| − | | |
| − | | |
| − | 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>Data Source</strong></font></div>==
| |
| − | <div style="margin:0px; padding: 10px; background: #f2f4f4; font-family: Open Sans, Arial, sans-serif; border-radius: 7px; text-align:left">
| |
| − | Datasets are retrieved from https://data.unodc.org/ and http://www.emcdda.europa.eu/data/stats2017_en.<br>
| |
| − | These two sites provides comprehensive and diverse data regarding drugs.<br>
| |
| − | <b>Data Snippet</b><br>
| |
| − | [[File:G1t7_proposal_sampledata.PNG|1000px]]
| |
| − | </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 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"
| |
| − | | |
| − | |-
| |
| − | | 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>
| |
| − | | 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>
| |
| − | | |
| − | |-
| |
| − | | style="font-family:Open Sans, Arial, sans-serif; text-align: center; padding:3px 10px; border-bottom:solid 1px #d8d8d8" | <strong>
| |
| − | Interactive Filled World Map<br> [[File:G1t7_proposal_map.png|300px]]<br />Source: [http://www.unodc.org/wdr2016/interactive-map.html link] </strong>
| |
| − | | style="font-family:Open Sans, Arial, sans-serif; text-align: left; padding:3px 10px; border-bottom:solid 1px #d8d8d8" |
| |
| − | Example shows the different intensity of percentage of the population affected by drug abuse and the total number of drug abusers as shape circle.<br>
| |
| − | <b>Pros:</b>
| |
| − | *Able to see an general picture of the drug landscape.
| |
| − | *Visually appealing and straightforward.
| |
| − | | |
| − | <b>Cons:</b>
| |
| − | *Unable to drill-down for more detailed information.
| |
| − | *Some parts of the world are not properly represented.
| |
| − | | |
| − | |-
| |
| − | | style="font-family:Open Sans, Arial, sans-serif; text-align: center; padding:3px 10px; border-bottom:solid 1px #d8d8d8" | <strong>
| |
| − | Stacked Distribution Pipeline<br> [[File:G1t7_proposal_distribution.png|300px]]<br />Source: [http://www.informationisbeautiful.net/visualizations/drug-deal-potential-tax-revenue-from-legalized-narcotics/ link] </strong>
| |
| − | | style="font-family:Open Sans, Arial, sans-serif; text-align: left; padding:3px 10px; border-bottom:solid 1px #d8d8d8" |
| |
| − | Example showcase a beautifully designed stacked bar, showing the ratio of revenue brought in by each type of drug that fuels the different types of activities at the right end of the chart.<br>
| |
| − | <b>Pros:</b>
| |
| − | *Gives the viewer a clear idea of what this chart is about.
| |
| − | *Easy to understand and highly customisable.
| |
| − | | |
| − | <b>Cons:</b>
| |
| − | *Too high level.
| |
| − | *Viewers might miss the fine details because of the colour.
| |
| − | | |
| − | |-
| |
| − | | style="font-family:Open Sans, Arial, sans-serif; text-align: center; padding:3px 10px; border-bottom:solid 1px #d8d8d8" | <strong>
| |
| − | Price OHLC<br> [[File:G1t7_proposal_price.png|300px]]<br />Source: [http://www.emcdda.europa.eu/data/stats2017_en link] </strong>
| |
| − | | style="font-family:Open Sans, Arial, sans-serif; text-align: left; padding:3px 10px; border-bottom:solid 1px #d8d8d8" |
| |
| − | Example shows the price level, high and low for a type of drug along the years.<br>
| |
| − | <b>Pros:</b>
| |
| − | *A detailed view of the price level along the years.
| |
| − | *Easy to understand.
| |
| − | | |
| − | <b>Cons:</b>
| |
| − | *Viewers who do not know how to read this chart might misinterpret the values.
| |
| − | *Not highly customisable.
| |
| − | | |
| − | |-
| |
| − | | style="font-family:Open Sans, Arial, sans-serif; text-align: center; padding:3px 10px; border-bottom:solid 1px #d8d8d8" | <strong>
| |
| − | Drug Prevalence Boxplot<br> [[File:G1t7_proposal_boxplot.png|300px]]<br />Source: [http://www.unodc.org/doc/wdr2016/WORLD_DRUG_REPORT_2016_web.pdf link] </strong>
| |
| − | | style="font-family:Open Sans, Arial, sans-serif; text-align: left; padding:3px 10px; border-bottom:solid 1px #d8d8d8" |
| |
| − | Example shows the prevalence of a drug abuse in each country<br>
| |
| − | <b>Pros:</b>
| |
| − | *Many information on one chart.
| |
| − | *High level and low level view of information.
| |
| − | | |
| − | <b>Cons:</b>
| |
| − | *Not straightforward, need time to digest the information.
| |
| − | *Chart might need filters to help summarise the data.
| |
| − | | |
| − | |}
| |
| − | </center>
| |
| − | </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>==
| |
| − | <div style="margin:0px; padding: 10px; background: #f2f4f4; font-family: Open Sans, Arial, sans-serif; border-radius: 7px; text-align:left">
| |
| − | [[File:G1t7_proposal_storyboard.PNG|600px|center]] | |
| − | Main dashboard should show the overview information of the drugs e.g. the screenshot above.<br>
| |
| − | <br>
| |
| − | First chart on the top left will be a parallel set, showing the relationship between countries and the different drug use. Sets should be customisable to enable different views.<br>
| |
| − | <br>
| |
| − | The next chart on the right will be a scatter plot. It will show the various statistics of a drug and be able to provide insights of the relationship between different groups of drugs. Chart will also show the trace line of each bubble. By selecting the individual bubble, the user can see another dashboard will more drill down information of that specific drug.<br>
| |
| − | <br>
| |
| − | The bottom chart will double as a adjustable timeline as well as a line graph showing the ups and downs over the years. Special milestone that affects the line will also be labelled. Adjusting this graph will filter the data that will be shown on the two charts above.
| |
| − | | |
| − | </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>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">
| |
| − | <b>Inexperienced with data visualisation tools</b><br>
| |
| − | *
| |
| − | *
| |
| − | | |
| − | <b>New to D3.js and Javascript</b><br>
| |
| − | *
| |
| − | *
| |
| − | | |
| − | <b>Data cleaning and transformation</b><br>
| |
| − | *
| |
| − | *
| |
| − | </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>==
| |
| − | <div style="margin:0px; padding: 10px; background: #f2f4f4; font-family: Open Sans, Arial, sans-serif; border-radius: 7px; text-align:left">
| |
| − | <center>[[File:Forensic Ninja Timeline.PNG|500px]]</center>
| |
| − | </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>Tools/Technologies</strong></font></div>==
| |
| − | <div style="margin:0px; padding: 10px; background: #f2f4f4; font-family: Open Sans, Arial, sans-serif; border-radius: 7px; text-align:left">
| |
| − | These are the tools and technologies that we will be learning and implementing for this project:
| |
| − | *Tableau
| |
| − | *Microsoft Excel
| |
| − | *D3.js
| |
| − | *Chart.js
| |
| − | *AngularJS
| |
| − | *Adobe Illustrator
| |
| − | </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>==
| |
| − | <div style="margin:0px; padding: 10px; background: #f2f4f4; font-family: Open Sans, Arial, sans-serif; border-radius: 7px; text-align:left">
| |
| − | *https://data.unodc.org/
| |
| − | *https://golearn-archive.unodc.org/olat/raw/static/unodc/cube/attempts.html#
| |
| − | *http://www.emcdda.europa.eu/data/stats2017_en
| |
| − | *https://d3js.org/
| |
| − | *http://www.chartjs.org/
| |
| − | </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>==
| |
| − | <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>
| |
| − | | |
| − | ==<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>==
| |
| − | <div style="margin:0px; padding: 10px; background: #f2f4f4; font-family: Open Sans, Arial, sans-serif; border-radius: 7px; text-align:left">
| |
| | | | |
| − | <!--Please leave your comments here :) --->
| |
| − | </div>
| |
| | <!-- End Body ---> | | <!-- End Body ---> |
