Difference between revisions of "Javascript technology 2016"

From Rost Lab Open
Jump to: navigation, search
(Description)
(New This Semester: The Game of Thrones Edition)
 
(115 intermediate revisions by 4 users not shown)
Line 1: Line 1:
  +
'''Plea: Please register for the seminar only if you will be able to attend all sessions taking place on March 14-18, 2016 and will complete the assignments set for your team prior the seminar takes place.'''
  +
 
== Description ==
 
== Description ==
The anatomy of a javascript system - participating students get hands on experience with designing and building a modern javascript applications. the student will research the literature on design concepts and available technologies including the use of common JavaScript libraries. The students will prepare presentation and introduce the concepts they chose to use. Each talk is summarized by the students in a seminar thesis.
+
The anatomy of a JavaScript system - participating students get hands-on experience with designing and building a modern JavaScript applications. The students will research the literature on design concepts and available technologies including the use of common JavaScript libraries. The students will prepare presentation and introduce the concepts they chose to use. Each talk is summarized by the students in a seminar report.
   
This is a completely hands-on seminar which means that you should be building your own app (no ripping off code from somewhere on the internet), prepare a presentation explaining what you did and describing the javascript concepts you were using and writing a seminar report at the end of the term.
+
This is a completely hands-on seminar which means that you should be building your own app (no ripping off code from somewhere on the internet), prepare a presentation explaining what you did and describing the JavaScript concepts you were using and writing a seminar report at the end of the term.
  +
  +
'''Tutors:''' [https://www.linkedin.com/in/gyachdav Dr. Guy Yachdav], Dr. Lothar Richter, [https://rostlab.org/~goldberg/ Tatyana Goldberg], Christian Dallago and Dmitrii Nechaev
  +
  +
'''Date/Time:''' March 14-18, 2016/ 10am - 12pm (1pm)
  +
  +
'''Room:''' <strike>MI 01.10.011</strike> MI 00.13.09A
   
 
== Pre Requisites ==
 
== Pre Requisites ==
Line 8: Line 10:
 
Students are expected to have:
 
Students are expected to have:
   
* Interest working with big data
+
* Basic familiarity with JavaScript
 
* Basic knowledge of relational databases and NoSQL databases
 
* Basic knowledge of relational databases and NoSQL databases
  +
* Interest working with big data
 
* Interest in the Game of Thrones show
 
* Interest in the Game of Thrones show
 
* Interest in challenge themselves to do something totally cool
 
* Interest in challenge themselves to do something totally cool
  +
* '''Participation in all meetings throughout the presentation week is mandatory. We would only consider one absence that is justified and communicated and approved well in advance.'''
   
 
== New This Semester: The Game of Thrones Edition ==
 
== New This Semester: The Game of Thrones Edition ==
   
This semester students are getting a chance to build a web site and applications that use data related to the HBO show Game of Thrones. The sixth season of Game of Thrones will start in April and we hope to have our apps ready in time for the new season.
+
<!-- [[File:Got21_400.jpg|frame|right| New this semester: Game of Thrones meets JavaScript!]] -->
   
[http://www.hbo.com/game-of-thrones Game of Thrones] is a popular HBO TV show based on George R. R. Martin's series of epic fantasy novels [http://www.amazon.com/George-Hardcover-featuring-Thrones-Exclusive/dp/0307292134 "A Song of Ice and Fire"]. The novels paint a picture of a world that blends realism with magic and mystery. Both the HBO show and the novels are extremely popular (to date the books sold over 60 million copies!) and have become a cultural phenomenon world-wide. The web is also filled with activity around the show and the books - there are currently numerous fan sites, youtube videos, review and analysis, marketing outlets, social media groups, community sites and wiki pages.
+
In this seminar we will tell some of the Game of Thrones’ stories using data that we acquire on the web. Many fans of the Ice and Fire books and of the HBO show have amassed a lot of data about the plot, the characters, the great houses of westeros, the history and culture of the world of Ice and Fire, and in general anything you can think about this cultural phenomenon. The sixth season of Game of Thrones will start on April 24th and we hope to have our apps ready in time for the new season.
   
In this seminar we will tap into this wealth of knowledge and information and will build data driven applications in JavaScript that will help make sense of the Game of Thrones world.
+
In the projects described below we will focus on building a database mashup of heterogenous data from multiple sources. The data will be used as an input source for machine learning and natural language processing applications, the results of which will be visualized and presented on our community website. Most if not all of the code, libraries and solutions used for these projects should be done in JavaScript. If for some reason you cannot use JavaScript for any component in your project, you should consult the tutors first and get their approval.
   
For instance consider the following toy project - I wanted to analyze the balance of power in Westeros right around the period discussed in the "A Clash of Kings" book. To do this I had to pull data from [http://awoiaf.westeros.org/ the wiki of ice and fire ] -- a wiki site that acts as the most comprehensive source of information about the world of Ice and Fire. The data from the wiki helped me construct a visualization that shows a network of allegiance (appear as edges in the network) of the great houses (appear as nodes in the networks). Here is the visualization - https://rostlab.org/~gyachdav/awoiaf/#/. clicking on nodes will give you detail information and you can use the mouse wheel to zoom and navigate the network.
+
For instance consider the following toy project - Guy wanted to analyze the balance of power in Westeros right around the period discussed in the "A Clash of Kings" book. To do this Guy had to pull data from [http://awoiaf.westeros.org/ the wiki of ice and fire ] -- a wiki site that acts as the most comprehensive source of information about the world of Ice and Fire. The data from the wiki helped him construct a visualization that shows a network of allegiance (appear as edges in the network) of the great houses (appear as nodes in the networks). Here is the visualization - https://rostlab.org/~gyachdav/awoiaf/#/. Clicking on nodes will give you detailed information and you can use the mouse wheel to zoom and navigate the network.
   
In the projects for this seminar you are expected to use Game of Thrones related data that you find online (the awoiaf wiki is a highly recommended source) to build and drive your apps. Remember that the apps should focus on showing (in order of importance):
+
== Preparation ==
   
# the concepts learned in your assigned topic
+
=== Checklist to pass the seminar ===
# how you use the data in your app.
 
   
== Presentations ==
+
#Register on TUM Online for this seminar
  +
#Upon acceptance on TUM Online ('''Feb. 17th'''), join the seminar’s [https://groups.google.com/forum/#!forum/javascript-technology-2016 Google group]
  +
#* use only the Google group for communication with tutors (expect huge delays in responses to emails sent to tutors’ private addresses otherwise). The tutors will use this group also for general announcements.
  +
#* students are encouraged to answer questions of their fellow students posted in the Google group
  +
#* check the mailbox of the email address you used to sign up to the Google group regularly!!!
  +
# Upon acceptance to the Google group, send a notification with the group number you would like to join. The tutors will then update the ‘groups assignment’ table below with your name.
  +
# Each group will be assigned one topic and one project to present in the week from March 14th to March 18th. Please see the guidelines for topic and project presentations below.
  +
# The slides for your topic presentation and the preliminary visualization of your project results are due for comments 1 week before the presentation date. Send your drafts to presentations to [mailto:jstech@rostlab.org jstech@rostlab.org].
  +
# Make sure to read these [https://www.rostlab.org/teaching/hints_en Hints and Rules] for great presentations
  +
# Submit a 5 pages long report (one per group) describing solutions to your topic (4 pages) and the project (1 page). Due: 2 weeks after the seminar.
   
'''Presentations are due for comments 3 weeks before the presentation date. '''
+
=== Topic presentation ===
  +
We prepared 12 different topics about JavaScript technology for this seminar. These will be assigned to groups of 3-4 people. The students are welcome to divide the work within their team as they wish.
  +
=== Project presentation ===
   
The mini web app should be ready and functional at the dat of the seminar. All code should be available for other class participants to check out. You are highly encouraged to use git hub as the repository for your code.
+
We prepared 6 different projects as hands-on exercises.
   
=== Tips for your presentation ===
+
Project A will be assigned to groups 2 and 3. The students of both groups will need to work '''together''' to complete the project. The work can be divided within the groups as the students wish.
   
The presentation should:
+
Each of the projects B, C and D will also be assigned to two groups (e.g. groups 6 and 7 will work on Project B). The groups will work '''independently''' from each other (i.e. group 6 will work independently from group 7). Thus, there will be two different solutions to the same project.
   
# introduce to the class the javascript concept you are using in your web-app,
+
Project E will be assigned to groups 1 and 11. The students of both groups will need to work '''together''' to complete the project. The work can be divided within the groups as the students wish.
# focus on why you chose to use one technology over the other, if you tried more then one concept show the way you experimented and measured key software engineering metrics such as code performance, readability, reusability etc.
 
# while you are requested to show your work do not show us heaps of code, instead focus on the interesting parts of your code that highlight implementation decisions.
 
# A demo of the working app is required
 
   
== Learning outcome ==
+
Project F will be assigned to groups 8 and 9. The students of both groups will need to work '''together''' to complete the project. The work can be divided within the groups as the students wish.
In the end students know about typical components of a Java Script based system, they can communicate sophisticated technological matters to their peers and they can summarize this in a written report.
 
   
== VERY IMPORTANT INFORMATION ==
+
== Schedule ==
   
'''READ THIS PAGE:''' [https://www.rostlab.org/teaching/hints_en Hints and Rules for the seminar]. Keep in mind that the rules on this page supersede any conflicting recommendation on the hints page.
+
{| class="wikitable"
  +
|-
  +
| April 3 ||Submission of the report. Submission of Projects B-E. Project A is due on April 1, Project F is due on April 10.
  +
|-
  +
|March 14-18 ||Students present their topics and the project results:
  +
30 min - topic presentation
  +
  +
10 min - project presentation
  +
  +
15 min - discussion
  +
|-
  +
| March 7-11 || Students send their slides and preliminary project results to tutors for review
  +
|-
  +
| Latest by February 22 || Students are assigned to groups
  +
  +
Students start a GitHub repository (one per assigned project) to make their code available
  +
  +
Students start working on their topics and projects
  +
|-
  +
| '''February 17-21''' || Use the Google group to choose the group number to join
  +
|-
  +
| '''February 17''' || Sign up to the Google group [https://groups.google.com/forum/#!forum/javascript-technology-2016 here]
  +
|-
  +
| '''February 17''' || Acceptance notification on TUM Online
  +
|-
  +
| Before February 15 || Sign up for the seminar on TUM Online
  +
|}
  +
  +
== Projects ==
  +
=== Getting started ===
  +
All groups should take a look and clone this repository: https://github.com/gyachdav/awoiaf. The repo contains scripts (in python) that pull data from the AWOIAF wiki and:
  +
* structures it in JSON format
  +
* organizes it as list of houses and characters
  +
* pulls a complete page (for characters), cleans away the html and converts to plain text.
  +
  +
'''Don’t wait for the teams working on Project A to finish the setup of the database. Instead you can start working on your project with the data provided in the data folder: ''' https://github.com/gyachdav/awoiaf/blob/master/Data/.
  +
  +
Whenever you are missing some data, don’t worry, create your own dummy data (by e.g. creating random associations between characters and places) and let project A groups know that you are waiting for them.
  +
  +
=== Project A ===
  +
'''Title''': Database setup, data integration and creation of database APIs
  +
  +
'''Description''': In this project we will lay the foundations for our system by integrating data from multiple sources into a central database. The database will serve the apps and the visualization tool that will be developed in other projects.
  +
  +
'''Due''': Since the database will serve as the data source for other projects, the deadline for this project is on March 6th. Please send [mailto:jstech@rostlab.org jstech@rostlab.org] your preliminary results for review a week before, on February 29.
  +
  +
'''Assigned to groups''': 2 and 3
  +
  +
'''Data sources''':
  +
* http://awoiaf.westeros.org/
  +
* https://twitter.com/search?q=Game%20of%20Thrones&src=tyah&lang=en
  +
  +
'''Tools''':
  +
NoSQL database (e.g. MongoDB)
  +
  +
'''Hint''': look at Guy’s GitHub repo here: https://github.com/gyachdav/awoiaf. There are some python scripts Guy wrote to pull the data out of the wiki and populate his own Mongo database - https://github.com/gyachdav/awoiaf.
  +
  +
'''Milestones''':
  +
*Set up a document-oriented database (DB)
  +
*Design and develop a set of data extractions and parsing tools that will pull data from the unstructured and semi-structured text on the awoiaf site. Semi-structured text in the awoiaf is only found in the infobox portion of the wiki page.
  +
*You should focus on extracting data from '''all''' the following portals in the wiki site:
  +
**Charachters: http://awoiaf.westeros.org/index.php/Portal:Characters
  +
**History: http://awoiaf.westeros.org/index.php/Timeline_of_major_events
  +
**Culture: http://awoiaf.westeros.org/index.php/Portal:Culture
  +
**Geography: http://awoiaf.westeros.org/index.php/Portal:Geography
  +
**Houses: http://awoiaf.westeros.org/index.php/Houses_of_Westeros
  +
**TV episodes: http://awoiaf.westeros.org/index.php/Game_of_Thrones, especially dates of TV episodes.
  +
** http://jsfiddle.net/davidThomas/nujtymy6/3/embedded/result/
  +
**Anything else?
  +
'''Hint''': To link a character to a geographic location, pick out the character name in the wiki and then search for name of places mentioned in the Character page. For instance, to see if Arya Stark is connected to Dunkensdale, you will be pulling this page (http://awoiaf.westeros.org/index.php/Arya_Stark) and then search for the Dunkensdale mention.
  +
Populate the database with the data extracted from awoiaf site automatically and periodically (once a month is fine).
  +
*Visualize the schema of the database
  +
*Provide an API, so other projects will be able to easily and flexibly query your database. Make sure that it will be easy just look at the visual schema of the DB and at the structure of DB API to perform queries.
  +
*Provide an API that will help us mine tweets and combine those with data that we populated in our database. For instance, query a list of characters that belong to “house greyjoy” and then use that list of character names to mine for tweets that mention each name.
  +
*Visualize the statistics: how many data points and what are they?
  +
  +
===Project B===
  +
'''Title''': Which character is in most pressing need for life insurance?
  +
  +
'''Description''': Game of Thrones characters are always in danger of being eliminated. The challenge in this assignment is to see at what risk are the characters that are still alive of being eliminated. The goal of this project is to rank characters by their Percentage Likelihood of Death (PLOD). You will assign a PLOD using machine learning approaches.
  +
  +
'''Due''': April 3rd (or earlier, if possible)
  +
  +
'''Assigned to groups''': 6 and 7
  +
  +
'''Data''':
  +
Database developed in Project A (will be made available on March 7th).
  +
Before the database is created, please use the data from [https://github.com/gyachdav/awoiaf/tree/master/Data here] (please see above: getting started).
  +
  +
'''Tool''':
  +
Machine Learning tools, e.g. https://www.npmjs.com/browse/keyword/machine%20learning
  +
Database from project A
  +
  +
'''Milestones''':
  +
*Select features related to the question if a character is going to die next (e.g. killed, died of age, died of disease)
  +
*Split the data set (stratified cross-validation: the data set is split in e.g. 5 sets, each of which has an equal number of dead and alive people). Possibly stratification based on ranks (e.g. nobleman, warrior, *peasant, males and females, etc.)
  +
  +
'''Outcome''':
  +
*visualization of how features contribute to the prediction (binary separation)
  +
*assign each character a PLOD (percent likelihood of death)
  +
*visualize the PLODs
  +
  +
'''How to apply machine learning''':
  +
  +
Weka is an extremely popular workbench employing a variety of machine learning methods including [https://en.wikipedia.org/wiki/Support_vector_machine Support Vector Machines (SVMs)], which we will use for this project. To get a feeling about how to apply machine learning, it is a good idea to use the GUI version of weka before jumping into [https://www.npmjs.com/browse/keyword/machine%20learning JavaScript implementations].
  +
* First, get the [http://www.cs.waikato.ac.nz/ml/weka/index.html weka software] and the [http://www.cs.waikato.ac.nz/ml/weka/documentation.html weka manual]
  +
* To start weka, choose the 'Explorer' application and using the 'Open file' button you can upload your data in the ARFF format (please refer to the manual to understand the ARFF format)
  +
* In the ARFF file, each character will be represented by a string of attributes and the class label 'dead' or 'alive'
  +
* After uploading the ARFF file, you will see in the GUI window some simple statistic about the dsitribution of features in your data set. Does the distribution look right?
  +
* If yes, you are ready to run the classification! Choose the 'Classify' tab in the GUI
  +
* Select the classifier: Choose -> functions -> SMO
  +
* Leave the [https://en.wikipedia.org/wiki/Cross-validation_%28statistics%29 cross-validation] option at 10
  +
* Click on Start!
  +
* Repear the prediction with the [https://en.wikipedia.org/wiki/Radial_basis_function_kernel RBF kernel] instead of the [https://en.wikipedia.org/wiki/Polynomial_kernel Polynomial kernel]
  +
* Report the results of both experiments in the google group as soon as you have them!
  +
  +
=== Project C===
  +
  +
'''Title''': Globetrotters
  +
  +
'''Description''': The known GoT world is vast and stretches over the three continents of Westeros, Essos and Sothorys. Readers of the Ice and Fire books will get acquainted and transported from King's Landing to the borders of the Seven Kingdoms, and further on across the Narrow Sea. Over two thousand characters mentioned in the books have been associated with multiple landmarks in the GoT world. Your mission is to find character-place associations and put those associations on an interactive GoT map. Such a tool will help us figure out where did Gregor “the hound” Clegane went on his travels and how are these travels coincide with the travels of Breanne of Tarth (hint: they never crossed paths in the books, however they had a deadly duel during the show).
  +
  +
'''Due''': April 3rd (or earlier, if possible)
  +
  +
'''Assigned to groups''': 10 and 12
  +
  +
'''Data''':
  +
*Database from Project A (geographical location; will be made available on March 7th).
  +
*Before the database is created, please use the data from [https://github.com/gyachdav/awoiaf/tree/master/Data here] (please see above: getting started).
  +
*Map (e.g. from [http://awoiaf.westeros.org/index.php/File:WorldofIceandFire.png here]).
  +
*For a list of cities start [http://awoiaf.westeros.org/index.php/Category:Cities here].
  +
  +
'''Outcome''':
  +
*Visualization of locations mentioned for a specific character in the [http://awoiaf.westeros.org/ wiki].
  +
*Map used should be in an acceptable resolution and in color.
  +
*You will need to create a coordinate system and log the coordinates of each location into the database from Project A.
  +
*For a given name drop pins to locations where a character is associated with.
  +
*Easy user interface to add more characters-locations associations. Use autocomplete when entering a new character name to recreate its locations on the map.
  +
*Different character-location associations added to the map should be colored in different colors for easier recognition.
  +
*Hovering over a location name should load and display information from the [http://awoiaf.westeros.org/ awoiaf] wiki.
  +
  +
=== Project D ===
  +
  +
'''Title''': Sentiments
  +
  +
'''Description''': Joffrey Baratheon is one of the most loathed characters in TV history. As a matter of fact people were celebrating his TV death on Twitter. We are interested to learn more on how people feel about different characters by analyzing tweets mentioning GoT characters. In this project you will be analyzing Twitter feeds across a timeline, you will look for the name of GoT characters in that feed and try to identify whether the tweet is positive or negative. You can then generate a metric that evaluates what is the accumulated sentiment expressed on Twitter for that given character at a given point in time, and what is the trend (positive, negative). It will be interesting to intersect the sentiments for characters following the airing of a certain episode (you can easily get the airing date for an episode from the database constructed in Project A).
  +
  +
'''Due''': April 3rd (or earlier, if possible)
  +
  +
'''Assigned to groups''': 4 and 5
  +
  +
'''Data''':
  +
*Twitter
  +
*Database from Project A (geographical location; will be made available on March 7th).
  +
*Before the database is created, please use [https://github.com/gyachdav/awoiaf/tree/master/Data this] dummy data (please see above: getting started).
  +
  +
'''Hint''': a very helpful example http://www.sitepoint.com/creating-sentiment-analysis-application-using-node-js/
  +
  +
'''Milestones''':
  +
*Develop an API to interact with Twitter’s API
  +
*Get the characters’ names
  +
*Get the info from Twitter posts
  +
*Lay them over time
  +
*Show a popularity chart (after the episode how the popularity increased/decreased)
  +
  +
'''Questions to answer''':
  +
*Whom people liked the best from the last episode?
  +
*Analysis of characters popularity over time
  +
*Analyze the sentiments of characters on Twitter over time
  +
  +
'''Outcome''':
  +
* A graph showing a character's sentiment trend over time laid out against episodes’ airing date.
  +
  +
=== Project E ===
  +
  +
'''Title''': Integration
  +
  +
'''Description''': In this project we will put all the apps developed in Projects B, C and D into the website that is developed in Project F. In this project you will pull the code from each project repository, compile it with the set of dependencies and package the apps, so that they can be easily called from the web site developed in project F.
  +
  +
'''Due''': April 3rd (or earlier, if possible)
  +
  +
'''Assigned to groups''': 1 and 11
  +
  +
'''Data''':
  +
*Configuration information for each application created in Projects B, C and D.
  +
*Information on the web framework used in project F and how to include applications/modules into that web app.
  +
  +
'''Milestones''':
  +
*Create unit tests for the applications to make sure you are only integrating packages that were successfully built.
  +
*Package applications including their dependencies.
  +
*Convert the packages into modules that will fit into the web app.
  +
*Make the process continuous, so that each new release of an app (Projects B-D) would be tested and integrated into the web site.
  +
  +
'''Outcome''':
  +
*Continuous integration of apps into the website.
  +
*A page reporting on latest build, where the source code was pulled from, alerts if errors exist (i.e. build history).
  +
  +
=== Project F ===
  +
  +
'''Title''': Putting it all together on the web
  +
  +
'''Assigned to groups''': 8 and 9
   
== Important Dates ==
+
'''Description''': In this project we will build a web portal for our GoT data analysis and visualization system. The website will integrate all the apps created in projects B-D with the help of the integration team assigned to Project E.
   
January 29th : Seminar pre-meeting.
+
'''Due''': April 10th (or earlier, if possible)
   
Seminar Dates: March 14 - 18
+
'''Outcomes''':
+
*Create the shell of an Model-View-Control website
Room: Rostlab seminar room I12
+
*Create the menus that will load the apps created in projects B-D
  +
*Create the user interaction controls for the apps integrated and enable them with the help of the integrators from project E
  +
*Create an absolutely awesome UX/UI for the website :)
  +
*Make sure that the home page displays some cool statistics that you pulled from the apps
  +
*Have a gallery showing what the site has to offer
  +
*Make arrangements to host the web site on a host that can scale for traffic demands (preferably there should be no cost associated with this step. Check Heroku, AWS, etc).
   
 
== Presentation Schedule ==
 
== Presentation Schedule ==
Line 62: Line 66:
 
! Topic
 
! Topic
 
! Assigned to
 
! Assigned to
! Slides
+
! Project
 
! Source
 
! Source
 
|-
 
|-
Line 69: Line 73:
 
| 10:00
 
| 10:00
 
| Language basics -- grammar, variables, data structures, control structures, conditionals, functions etc.
 
| Language basics -- grammar, variables, data structures, control structures, conditionals, functions etc.
|
+
| Jonas Ebel, Javid Salahov, Ange Kouemo
|
+
| E
|
+
| [https://github.com/Rostlab/JS16_ProjectE JS16_ProjectE]
 
|-
 
|-
 
| 2
 
| 2
 
| March 14
 
| March 14
 
| 11:00
 
| 11:00
| Object oriented javascript
+
| Object oriented JavaScript
|
+
| Michael Legenc, Theodor Cheslerean Boghiu, Sohel Mahmud
|
+
| A
|
+
| rowspan="2" | [https://github.com/Rostlab/JS16_ProjectA JS16_ProjectA]
 
|-
 
|-
 
| 3
 
| 3
Line 85: Line 89:
 
| 12:00
 
| 12:00
 
| The module pattern and AMD
 
| The module pattern and AMD
|
+
| Kordian Bruck, Togi Dashnyam, Boris Idesman, Alex Schmidle
|
+
| A
|
 
 
|-
 
|-
 
| 4
 
| 4
Line 92: Line 96:
 
| 10:00
 
| 10:00
 
| The event handling system using using anonymous functions, callbacks, promises etc.
 
| The event handling system using using anonymous functions, callbacks, promises etc.
|
+
| Julien Schmidt, Santanu Mohanta, Marcus Novotny
|
+
| D
|
+
| [https://github.com/Rostlab/JS16_ProjectD_Group4 JS16_ProjectD_Group4]
 
|-
 
|-
 
| 5
 
| 5
Line 100: Line 104:
 
| 11:00
 
| 11:00
 
| Functional reactive programming frameworks
 
| Functional reactive programming frameworks
|
+
| Jonas Kaltenbach, Camille Mainz, Dat Nguyen
|
+
| D
|
+
| [https://github.com/Rostlab/JS16_ProjectD_Group5 JS16_ProjectD_Group5]
 
 
|-
 
|-
 
| 6
 
| 6
Line 108: Line 112:
 
| 10:00
 
| 10:00
 
| Server side JavaScript with Node.js basics
 
| Server side JavaScript with Node.js basics
|
+
| Subburam Rajaram, Thuy Tran, Anna Sesselmann, Georg Gar
|
+
| B
|
+
| [https://github.com/Rostlab/JS16_ProjectB_Group6 JS16_ProjectB_Group6]
 
|-
 
|-
 
| 7
 
| 7
Line 116: Line 120:
 
| 11:00
 
| 11:00
 
| The MEAN stack
 
| The MEAN stack
|
+
| Daniel Albert, Shuo Feng, Konstantinos Angelopoulos, Nicola De Socio
|
+
| B
|
+
| [https://github.com/Rostlab/JS16_ProjectB_Group7 JS16_ProjectB_Group7]
 
|-
 
|-
 
| 8
 
| 8
Line 124: Line 128:
 
| 10:00
 
| 10:00
 
| Web development basics: DOM, DOM manipulation, styles
 
| Web development basics: DOM, DOM manipulation, styles
|
+
| Georgi Anastasov, <strike>Jakob Braito</strike>, Max Muth, Pallabi Bhowmick
|
+
| F
|
+
| rowspan="2" | [https://github.com/Rostlab/JS16_ProjectF JS16_ProjectF]
 
|-
 
|-
 
| 9
 
| 9
Line 132: Line 136:
 
| 11:00
 
| 11:00
 
| Web development frameworks (Angular, Backbone, React)
 
| Web development frameworks (Angular, Backbone, React)
|
+
| Andreas Salvermoser, Mina Zaki, Yasar Kücükkaya
|
+
| F
|
 
 
|-
 
|-
 
| 10
 
| 10
Line 139: Line 143:
 
| 12:00
 
| 12:00
 
| Data visualization using SVG, Canvas and framework libraries
 
| Data visualization using SVG, Canvas and framework libraries
|
+
| Maximilian Bandle, Alexander Beischl, Tobias Piffrader
|
+
| C
|
+
| [https://github.com/Rostlab/JS16_ProjectC_Group10 JS16_ProjectC_Group10]
 
|-
 
|-
 
| 11
 
| 11
Line 147: Line 151:
 
| 10:00
 
| 10:00
 
| Build tools, continuous integration and distribution
 
| Build tools, continuous integration and distribution
|
+
| Florian Gareis, Oleksii Moroz, Emiliyana Kalinova
|
+
| E
|
+
| [https://github.com/Rostlab/JS16_ProjectE JS16_ProjectE]
  +
|-
  +
| <strike>12</strike>
  +
| <strike>March 18</strike>
  +
| <strike>11:00</strike>
  +
| <strike>EcmaScript 6 (es6) language features</strike>
  +
| <strike>Pallabi Bhowmick, Arald Haveriku, Gani Qinami</strike>
  +
| <strike>C</strike>
  +
| <strike>[https://github.com/Rostlab/JS16_ProjectC_Group12 JS16_ProjectC_Group12]</strike>
 
|-
 
|-
| 12
 
| March 18
 
| 11:00
 
| EcmaScript 6 (es6) language features
 
|
 
|
 
|
 
 
|}
 
|}
   
== References ==
+
== Recommended literature ==
 
# JavaScript: The Definitive Guide, 6th Edition http://shop.oreilly.com/product/9780596805531.do
 
# JavaScript: The Definitive Guide, 6th Edition http://shop.oreilly.com/product/9780596805531.do
 
# '''(Highly recommended:)''' JavaScript: The Good Parts http://shop.oreilly.com/product/9780596517748.do
 
# '''(Highly recommended:)''' JavaScript: The Good Parts http://shop.oreilly.com/product/9780596517748.do
Line 175: Line 172:
 
# http://www.crockford.com
 
# http://www.crockford.com
 
# http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf
 
# http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf
  +
# http://www.sitepoint.com/creating-sentiment-analysis-application-using-node-js/
 
# ''Advanced Reading'' JavaScript Garden - the most quirky parts of the JavaScript programming language https://github.com/BonsaiDen/JavaScript-Garden/tree/master/doc/en
 
# ''Advanced Reading'' JavaScript Garden - the most quirky parts of the JavaScript programming language https://github.com/BonsaiDen/JavaScript-Garden/tree/master/doc/en
 
# '' RECOMMENDED VIDEO '' http://www.paulirish.com/2010/10-things-i-learned-from-the-jquery-source/
 
# '' RECOMMENDED VIDEO '' http://www.paulirish.com/2010/10-things-i-learned-from-the-jquery-source/

Latest revision as of 09:06, 26 April 2016

Plea: Please register for the seminar only if you will be able to attend all sessions taking place on March 14-18, 2016 and will complete the assignments set for your team prior the seminar takes place.

Description

The anatomy of a JavaScript system - participating students get hands-on experience with designing and building a modern JavaScript applications. The students will research the literature on design concepts and available technologies including the use of common JavaScript libraries. The students will prepare presentation and introduce the concepts they chose to use. Each talk is summarized by the students in a seminar report.

This is a completely hands-on seminar which means that you should be building your own app (no ripping off code from somewhere on the internet), prepare a presentation explaining what you did and describing the JavaScript concepts you were using and writing a seminar report at the end of the term.

Tutors: Dr. Guy Yachdav, Dr. Lothar Richter, Tatyana Goldberg, Christian Dallago and Dmitrii Nechaev

Date/Time: March 14-18, 2016/ 10am - 12pm (1pm)

Room: MI 01.10.011 MI 00.13.09A

Pre Requisites

Students are expected to have:

  • Basic familiarity with JavaScript
  • Basic knowledge of relational databases and NoSQL databases
  • Interest working with big data
  • Interest in the Game of Thrones show
  • Interest in challenge themselves to do something totally cool
  • Participation in all meetings throughout the presentation week is mandatory. We would only consider one absence that is justified and communicated and approved well in advance.

New This Semester: The Game of Thrones Edition

In this seminar we will tell some of the Game of Thrones’ stories using data that we acquire on the web. Many fans of the Ice and Fire books and of the HBO show have amassed a lot of data about the plot, the characters, the great houses of westeros, the history and culture of the world of Ice and Fire, and in general anything you can think about this cultural phenomenon. The sixth season of Game of Thrones will start on April 24th and we hope to have our apps ready in time for the new season.

In the projects described below we will focus on building a database mashup of heterogenous data from multiple sources. The data will be used as an input source for machine learning and natural language processing applications, the results of which will be visualized and presented on our community website. Most if not all of the code, libraries and solutions used for these projects should be done in JavaScript. If for some reason you cannot use JavaScript for any component in your project, you should consult the tutors first and get their approval.

For instance consider the following toy project - Guy wanted to analyze the balance of power in Westeros right around the period discussed in the "A Clash of Kings" book. To do this Guy had to pull data from the wiki of ice and fire -- a wiki site that acts as the most comprehensive source of information about the world of Ice and Fire. The data from the wiki helped him construct a visualization that shows a network of allegiance (appear as edges in the network) of the great houses (appear as nodes in the networks). Here is the visualization - https://rostlab.org/~gyachdav/awoiaf/#/. Clicking on nodes will give you detailed information and you can use the mouse wheel to zoom and navigate the network.

Preparation

Checklist to pass the seminar

  1. Register on TUM Online for this seminar
  2. Upon acceptance on TUM Online (Feb. 17th), join the seminar’s Google group
    • use only the Google group for communication with tutors (expect huge delays in responses to emails sent to tutors’ private addresses otherwise). The tutors will use this group also for general announcements.
    • students are encouraged to answer questions of their fellow students posted in the Google group
    • check the mailbox of the email address you used to sign up to the Google group regularly!!!
  3. Upon acceptance to the Google group, send a notification with the group number you would like to join. The tutors will then update the ‘groups assignment’ table below with your name.
  4. Each group will be assigned one topic and one project to present in the week from March 14th to March 18th. Please see the guidelines for topic and project presentations below.
  5. The slides for your topic presentation and the preliminary visualization of your project results are due for comments 1 week before the presentation date. Send your drafts to presentations to jstech@rostlab.org.
  6. Make sure to read these Hints and Rules for great presentations
  7. Submit a 5 pages long report (one per group) describing solutions to your topic (4 pages) and the project (1 page). Due: 2 weeks after the seminar.

Topic presentation

We prepared 12 different topics about JavaScript technology for this seminar. These will be assigned to groups of 3-4 people. The students are welcome to divide the work within their team as they wish.

Project presentation

We prepared 6 different projects as hands-on exercises.

Project A will be assigned to groups 2 and 3. The students of both groups will need to work together to complete the project. The work can be divided within the groups as the students wish.

Each of the projects B, C and D will also be assigned to two groups (e.g. groups 6 and 7 will work on Project B). The groups will work independently from each other (i.e. group 6 will work independently from group 7). Thus, there will be two different solutions to the same project.

Project E will be assigned to groups 1 and 11. The students of both groups will need to work together to complete the project. The work can be divided within the groups as the students wish.

Project F will be assigned to groups 8 and 9. The students of both groups will need to work together to complete the project. The work can be divided within the groups as the students wish.

Schedule

April 3 Submission of the report. Submission of Projects B-E. Project A is due on April 1, Project F is due on April 10.
March 14-18 Students present their topics and the project results:

30 min - topic presentation

10 min - project presentation

15 min - discussion

March 7-11 Students send their slides and preliminary project results to tutors for review
Latest by February 22 Students are assigned to groups

Students start a GitHub repository (one per assigned project) to make their code available

Students start working on their topics and projects

February 17-21 Use the Google group to choose the group number to join
February 17 Sign up to the Google group here
February 17 Acceptance notification on TUM Online
Before February 15 Sign up for the seminar on TUM Online

Projects

Getting started

All groups should take a look and clone this repository: https://github.com/gyachdav/awoiaf. The repo contains scripts (in python) that pull data from the AWOIAF wiki and:

  • structures it in JSON format
  • organizes it as list of houses and characters
  • pulls a complete page (for characters), cleans away the html and converts to plain text.

Don’t wait for the teams working on Project A to finish the setup of the database. Instead you can start working on your project with the data provided in the data folder: https://github.com/gyachdav/awoiaf/blob/master/Data/.

Whenever you are missing some data, don’t worry, create your own dummy data (by e.g. creating random associations between characters and places) and let project A groups know that you are waiting for them.

Project A

Title: Database setup, data integration and creation of database APIs

Description: In this project we will lay the foundations for our system by integrating data from multiple sources into a central database. The database will serve the apps and the visualization tool that will be developed in other projects.

Due: Since the database will serve as the data source for other projects, the deadline for this project is on March 6th. Please send jstech@rostlab.org your preliminary results for review a week before, on February 29.

Assigned to groups: 2 and 3

Data sources:

Tools: NoSQL database (e.g. MongoDB)

Hint: look at Guy’s GitHub repo here: https://github.com/gyachdav/awoiaf. There are some python scripts Guy wrote to pull the data out of the wiki and populate his own Mongo database - https://github.com/gyachdav/awoiaf.

Milestones:

Hint: To link a character to a geographic location, pick out the character name in the wiki and then search for name of places mentioned in the Character page. For instance, to see if Arya Stark is connected to Dunkensdale, you will be pulling this page (http://awoiaf.westeros.org/index.php/Arya_Stark) and then search for the Dunkensdale mention. Populate the database with the data extracted from awoiaf site automatically and periodically (once a month is fine).

  • Visualize the schema of the database
  • Provide an API, so other projects will be able to easily and flexibly query your database. Make sure that it will be easy just look at the visual schema of the DB and at the structure of DB API to perform queries.
  • Provide an API that will help us mine tweets and combine those with data that we populated in our database. For instance, query a list of characters that belong to “house greyjoy” and then use that list of character names to mine for tweets that mention each name.
  • Visualize the statistics: how many data points and what are they?

Project B

Title: Which character is in most pressing need for life insurance?

Description: Game of Thrones characters are always in danger of being eliminated. The challenge in this assignment is to see at what risk are the characters that are still alive of being eliminated. The goal of this project is to rank characters by their Percentage Likelihood of Death (PLOD). You will assign a PLOD using machine learning approaches.

Due: April 3rd (or earlier, if possible)

Assigned to groups: 6 and 7

Data: Database developed in Project A (will be made available on March 7th). Before the database is created, please use the data from here (please see above: getting started).

Tool: Machine Learning tools, e.g. https://www.npmjs.com/browse/keyword/machine%20learning Database from project A

Milestones:

  • Select features related to the question if a character is going to die next (e.g. killed, died of age, died of disease)
  • Split the data set (stratified cross-validation: the data set is split in e.g. 5 sets, each of which has an equal number of dead and alive people). Possibly stratification based on ranks (e.g. nobleman, warrior, *peasant, males and females, etc.)

Outcome:

  • visualization of how features contribute to the prediction (binary separation)
  • assign each character a PLOD (percent likelihood of death)
  • visualize the PLODs

How to apply machine learning:

Weka is an extremely popular workbench employing a variety of machine learning methods including Support Vector Machines (SVMs), which we will use for this project. To get a feeling about how to apply machine learning, it is a good idea to use the GUI version of weka before jumping into JavaScript implementations.

  • First, get the weka software and the weka manual
  • To start weka, choose the 'Explorer' application and using the 'Open file' button you can upload your data in the ARFF format (please refer to the manual to understand the ARFF format)
  • In the ARFF file, each character will be represented by a string of attributes and the class label 'dead' or 'alive'
  • After uploading the ARFF file, you will see in the GUI window some simple statistic about the dsitribution of features in your data set. Does the distribution look right?
  • If yes, you are ready to run the classification! Choose the 'Classify' tab in the GUI
  • Select the classifier: Choose -> functions -> SMO
  • Leave the cross-validation option at 10
  • Click on Start!
  • Repear the prediction with the RBF kernel instead of the Polynomial kernel
  • Report the results of both experiments in the google group as soon as you have them!

Project C

Title: Globetrotters

Description: The known GoT world is vast and stretches over the three continents of Westeros, Essos and Sothorys. Readers of the Ice and Fire books will get acquainted and transported from King's Landing to the borders of the Seven Kingdoms, and further on across the Narrow Sea. Over two thousand characters mentioned in the books have been associated with multiple landmarks in the GoT world. Your mission is to find character-place associations and put those associations on an interactive GoT map. Such a tool will help us figure out where did Gregor “the hound” Clegane went on his travels and how are these travels coincide with the travels of Breanne of Tarth (hint: they never crossed paths in the books, however they had a deadly duel during the show).

Due: April 3rd (or earlier, if possible)

Assigned to groups: 10 and 12

Data:

  • Database from Project A (geographical location; will be made available on March 7th).
  • Before the database is created, please use the data from here (please see above: getting started).
  • Map (e.g. from here).
  • For a list of cities start here.

Outcome:

  • Visualization of locations mentioned for a specific character in the wiki.
  • Map used should be in an acceptable resolution and in color.
  • You will need to create a coordinate system and log the coordinates of each location into the database from Project A.
  • For a given name drop pins to locations where a character is associated with.
  • Easy user interface to add more characters-locations associations. Use autocomplete when entering a new character name to recreate its locations on the map.
  • Different character-location associations added to the map should be colored in different colors for easier recognition.
  • Hovering over a location name should load and display information from the awoiaf wiki.

Project D

Title: Sentiments

Description: Joffrey Baratheon is one of the most loathed characters in TV history. As a matter of fact people were celebrating his TV death on Twitter. We are interested to learn more on how people feel about different characters by analyzing tweets mentioning GoT characters. In this project you will be analyzing Twitter feeds across a timeline, you will look for the name of GoT characters in that feed and try to identify whether the tweet is positive or negative. You can then generate a metric that evaluates what is the accumulated sentiment expressed on Twitter for that given character at a given point in time, and what is the trend (positive, negative). It will be interesting to intersect the sentiments for characters following the airing of a certain episode (you can easily get the airing date for an episode from the database constructed in Project A).

Due: April 3rd (or earlier, if possible)

Assigned to groups: 4 and 5

Data:

  • Twitter
  • Database from Project A (geographical location; will be made available on March 7th).
  • Before the database is created, please use this dummy data (please see above: getting started).

Hint: a very helpful example http://www.sitepoint.com/creating-sentiment-analysis-application-using-node-js/

Milestones:

  • Develop an API to interact with Twitter’s API
  • Get the characters’ names
  • Get the info from Twitter posts
  • Lay them over time
  • Show a popularity chart (after the episode how the popularity increased/decreased)

Questions to answer:

  • Whom people liked the best from the last episode?
  • Analysis of characters popularity over time
  • Analyze the sentiments of characters on Twitter over time

Outcome:

  • A graph showing a character's sentiment trend over time laid out against episodes’ airing date.

Project E

Title: Integration

Description: In this project we will put all the apps developed in Projects B, C and D into the website that is developed in Project F. In this project you will pull the code from each project repository, compile it with the set of dependencies and package the apps, so that they can be easily called from the web site developed in project F.

Due: April 3rd (or earlier, if possible)

Assigned to groups: 1 and 11

Data:

  • Configuration information for each application created in Projects B, C and D.
  • Information on the web framework used in project F and how to include applications/modules into that web app.

Milestones:

  • Create unit tests for the applications to make sure you are only integrating packages that were successfully built.
  • Package applications including their dependencies.
  • Convert the packages into modules that will fit into the web app.
  • Make the process continuous, so that each new release of an app (Projects B-D) would be tested and integrated into the web site.

Outcome:

  • Continuous integration of apps into the website.
  • A page reporting on latest build, where the source code was pulled from, alerts if errors exist (i.e. build history).

Project F

Title: Putting it all together on the web

Assigned to groups: 8 and 9

Description: In this project we will build a web portal for our GoT data analysis and visualization system. The website will integrate all the apps created in projects B-D with the help of the integration team assigned to Project E.

Due: April 10th (or earlier, if possible)

Outcomes:

  • Create the shell of an Model-View-Control website
  • Create the menus that will load the apps created in projects B-D
  • Create the user interaction controls for the apps integrated and enable them with the help of the integrators from project E
  • Create an absolutely awesome UX/UI for the website :)
  • Make sure that the home page displays some cool statistics that you pulled from the apps
  • Have a gallery showing what the site has to offer
  • Make arrangements to host the web site on a host that can scale for traffic demands (preferably there should be no cost associated with this step. Check Heroku, AWS, etc).

Presentation Schedule

Group Date Time Topic Assigned to Project Source
1 March 14 10:00 Language basics -- grammar, variables, data structures, control structures, conditionals, functions etc. Jonas Ebel, Javid Salahov, Ange Kouemo E JS16_ProjectE
2 March 14 11:00 Object oriented JavaScript Michael Legenc, Theodor Cheslerean Boghiu, Sohel Mahmud A JS16_ProjectA
3 March 14 12:00 The module pattern and AMD Kordian Bruck, Togi Dashnyam, Boris Idesman, Alex Schmidle A
4 March 15 10:00 The event handling system using using anonymous functions, callbacks, promises etc. Julien Schmidt, Santanu Mohanta, Marcus Novotny D JS16_ProjectD_Group4
5 March 15 11:00 Functional reactive programming frameworks Jonas Kaltenbach, Camille Mainz, Dat Nguyen D JS16_ProjectD_Group5
6 March 16 10:00 Server side JavaScript with Node.js basics Subburam Rajaram, Thuy Tran, Anna Sesselmann, Georg Gar B JS16_ProjectB_Group6
7 March 16 11:00 The MEAN stack Daniel Albert, Shuo Feng, Konstantinos Angelopoulos, Nicola De Socio B JS16_ProjectB_Group7
8 March 17 10:00 Web development basics: DOM, DOM manipulation, styles Georgi Anastasov, Jakob Braito, Max Muth, Pallabi Bhowmick F JS16_ProjectF
9 March 17 11:00 Web development frameworks (Angular, Backbone, React) Andreas Salvermoser, Mina Zaki, Yasar Kücükkaya F
10 March 17 12:00 Data visualization using SVG, Canvas and framework libraries Maximilian Bandle, Alexander Beischl, Tobias Piffrader C JS16_ProjectC_Group10
11 March 18 10:00 Build tools, continuous integration and distribution Florian Gareis, Oleksii Moroz, Emiliyana Kalinova E JS16_ProjectE
12 March 18 11:00 EcmaScript 6 (es6) language features Pallabi Bhowmick, Arald Haveriku, Gani Qinami C JS16_ProjectC_Group12

Recommended literature

  1. JavaScript: The Definitive Guide, 6th Edition http://shop.oreilly.com/product/9780596805531.do
  2. (Highly recommended:) JavaScript: The Good Parts http://shop.oreilly.com/product/9780596517748.do
  3. http://www.htmlgoodies.com/beyond/javascript/some-javascript-object-prototyping-patterns.html
  4. http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html
  1. http://jquery.com
  2. http://d3js.org
  3. http://raphaeljs.com
  4. http://nodejs.org
  5. http://jqueryui.com
  6. http://www.jslint.com/lint.html
  7. http://jsfiddle.net
  8. http://www.crockford.com
  9. http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf
  10. http://www.sitepoint.com/creating-sentiment-analysis-application-using-node-js/
  11. Advanced Reading JavaScript Garden - the most quirky parts of the JavaScript programming language https://github.com/BonsaiDen/JavaScript-Garden/tree/master/doc/en
  12. RECOMMENDED VIDEO http://www.paulirish.com/2010/10-things-i-learned-from-the-jquery-source/