Javascript technology 2018

From Rost Lab Open
Revision as of 21:12, 6 March 2018 by Gyachdav (Talk | contribs)

Jump to: navigation, search

Contents

Announcements

Course overview

JavaScript Technology - participating students get hands-on experience with designing and building modern JavaScript applications. The students will research the literature for design concepts and available technologies including the use of common JavaScript libraries. The students will prepare presentations 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, prepare a presentation that explains what you did and describes the JavaScript concepts you were using. Finally, the entire work will be summarized in a seminar report at the end of the term.

The students will be working in a highly agile environment, meaning that a collaborative work (communication!!) among all students will be essential for the successful completion of the project. Any results thus provided during the coding period of the seminar will need to be communicated and made available to peer coders asap!

Registration: Prior to registration on TUM Matching System, we would like to get to know you! Please send us an email to jstech@rostlab.org and tell us about yourself a bit: your current current degree, program (e.g. informatics) and explain why you want to join the seminar, what prior course work you have. Also please name a TUM faculty member as a reference. Without this information we won't be able to secure a spot for you at the seminar.

Project Description: This semester we will be building a system that can translate natural language directives to graphing commands. Our prototype will receive a set of commands in English and will automatically generate visualizations to a given dataset. The system will then use additional commands (again written in English) to manipulate and modify the graphical objects. The system will be a first step in designing and building a graphing tool used by professionals who have no expertise in data visualization for their every day business needs. For instance, our system will know how to ingest a dataset from an HR system and show the distribution of employees’ demographics just by taking an input directive such as “plot a histogram of employees age”. The project was conceived and will be accompanied by our collaborators at the Advanced Business Analytics unit at Allianz SE.

Number of students/ groups: We will have 16 students all together, so we can have 2 groups of 4 students for project A and 2 groups of 3 students working on project B. There will be two additional student TAs, each supervising a project. Two of the groups will always work on the same task in parallel. At some point in time, we will then merge the groups in two.

Tutors: Dr. Guy Yachdav, Dr. Cheng Guo (Allianz, NLP expert) Dr. Tatyana Goldberg (Allianz, coordinator)

Projects Description

App code name: “iGraph”

Project overview

This semester we will be building a system that can translate natural language directives to graphing commands in an agile way. Our prototype will receive a set of commands in English and will automatically generate visualizations to a given dataset. The system will then use additional commands (again written in English) to manipulate and modify the graphical objects. The system will be a first step in designing and building a graphing tool used by professionals who have no expertise in data visualization for their every day business needs. For instance, our system will know how to ingest a dataset from an HR system and show the distribution of employees’ demographics just by taking an input directive such as “plot a histogram of employees age”.

A simple example flow of the system can be broadly described as such:

  1. Given a csv file with structured data
  2. Allow plotting this data using natural language, e.g. by typing ‘histogram of 2017 salaries’ or ‘line chart of date, salaries and sales’
  3. And modify this chart by giving commands in natural language, e.g. ‘make bars wider by 10 pixels’, ‘add data labels’ or ‘grid lines’

The project will run in an agile way consisting of primary two iterations - phase one will include the core features of the system and phase two will expand on the capabilities of the system. The project was conceived and will be accompanied by our collaborators at the Advanced Business Analytics unit at Allianz SE.

The projects will be divided to two phases: phase one will include all basic requirements while phase two will include additional features that will only be developed after phase one requirements were completed, tested and integrated into the system.

Project A

Title: Plot data from a csv file using natural language

Description: In project A we will create the framework that translates natural language to data visualization creation. This project encompasses loading and querying data and creating simple graphs.

Phase I requirements:

  1. Load CSV file into the system
  2. Provide very basic interface for natural language querying of the data. The interface should implement the following operations:
    1. Select column a and b from the data
    2. Select min, max and average values from the data
  3. Perform the following plotting operations:
    1. a histogram
    2. a line chart of X vs Y
    3. a scatter plot of X and Y
    4. a pie chart
  4. Define a set of default parameters for each of the graphs being plotted
  5. Provide a basic UI that will allow entering natural language commands to the system for graph manipulation

For phase I you will need to implement the following:

Dataset A: https://www.kaggle.com/rhuebner/human-resources-data-set/data

Only use the core_dataset.csv table. Example plot commands:

  • Plot histogram of employee’s age.
  • Plot number of employees for each gender as a pie chart.
  • Plot number of employees for each gender as a pie chart for all departments.
  • Plot average pay rate of each race as a bar chart.
  • Plot number of employees hired each year as a line chart.
  • Make a scatter plot with age and pay rate.

Phase II requirements:

Expand possible querying options to include all commands on dataset B

For phase II you will need to implement the following:

Dataset B: https://www.kaggle.com/worldbank/world-development-indicators/data

Please use the Indicators.csv table. Example plot commands:

  • Plot the histogram of Urban population (% of total) in the year 2010.
  • Plot the life expectancy at birth for male and female each year as a line chart for Germany.
  • Make a scatter plot of countries with birth rate and GDP per capita as two axises.
  • Plot the CO2 emissions from gaseous fuel, liquid fuel and solid fuel as a pie chart for each country.


Milestones: To be defined by the students in a project milestones plan. The project milestones plan will need to be submitted by February 25th for tutor’s review. You can submit the document via the slack channel. An example of a project milestones plan will be shown during the kick off meeting.

Tools: Plotly API

Project B

Title: Edit plots using natural language

Description: In this project we will enable user interaction with a plotted diagram (see the list of plot types in Project A). A user should be able to modify:

  • Width of bars and lines
  • Width of dots in the scatter plot
  • Color of bars, lines and dots
  • Axes names
  • Plot title
  • Size and position of the legend
  • Gridlines
  • Add standard errors for numerical data
  • Etc.

Note: natural language may not be the best UX to do all these edits, find the kind of edits you think fit best for natural languages.

For this project you should implement functionality for the following examples:

  • Editing histogram of Employee’s age
    • Use 20 bins.
    • Change x range to from a to b
  • Plot number of employees for each gender as a pie chart.
    • Display percentage instead of absolute number
    • Use blue for male and green for female.
  • Plot average pay rate of each race as a bar chart.
    • Use the following order to display the bars: a, b, c, d, e.
  • Plot number of employees hired each year as a line chart.
    • Use star as the symbol for datapoint.
    • Use dash line to connect the datapoint.
    • Remove the connection lines between data points.
    • Change the y axis’ range to from a to b.
  • Make a scatter plot with age and pay rate.
    • Make the data points 80% transparent.
    • Use circle as data points.
    • Reduce the size of data points by 20%.
    • Randomly remove half of the data points.

Milestones: To be defined by the students in a project milestones plan. The project milestones plan will need to be submitted by February 25th for tutor’s review. You can submit the document via the slack channel. An example of a project milestones plan will be shown during the kick off meeting.

Dataset: Students should start with any histogram, line chart, scatter plot and pie chart plotting any values from datasets A and B from Project A of their choice.

Tools: Plotly API

Important Dates

  • Pre-meeting: Feb. 2nd@11:00-12:00. Room number 01.10.011
  • Kick off meeting: Feb 23rd 10:30-13:00. Room number 01.09.034
  • Coding period begins: Feb 26th
  • Feature freeze: Fri, March ,30th 23:24:25
  • Beta release:Fri, April 6th, 22:23:24
  • Release (hopefully): April 10th, 21:22:23
  • Presentations week (in class, participation mandatory):
    • Thursday, March 22nd: 10:00 - 12:00: 01.10.011
    • Friday, March 23rd: 10:00 - 12:00: 01.10.011

Pre Requisites

Students are expected to have:

  • Basic familiarity with JavaScript
  • Knowledge in at least one functional OR Object Oriented Programming language
  • Basic knowledge of relational databases and NoSQL databases
  • Interest working with big data
  • Interest in challenging 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, documented and approved well in advance.

Preparation

Checklist to pass the seminar

  1. Register on TUM Matching System for this seminar
  2. Each group will be assigned one topic and one project to present in the presentation week. Please see the guidelines for topic and project presentations below.
  3. 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.
  4. Make sure to read these Hints and Rules for great presentations
  5. 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 4 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.

Presentation Themes

Theme 1

Title: JavaScript on the server. A Node.js crash course

Description: JavaScript’s not only a browser language. In this talk, we give a brief intro to the server side application development with Node.js. We’ll talk about the Node eco- and buildsystem (e.g. npm, gulp, webpack) and some commonly used frameworks for Node.js web development (e.g. Express.js, Mojito, Hapi, etc.). We’ll also give an overview of the event model and the event loop Node uses to serve mans concurrent users. (Check topic 2 to not have any overlaps)

Theme 2

Title: Data Driven Documents: Data visualization using D3.js

Description: In this topic, we take a look at the most popular data visualization library for JavaScript: D3.js. We’ll first take a look at what Data Driven Documents are, why and how to use them. This is a very visual topic, so apart from the concept, there will be a focus on the look & feel of D3. Also present a few alternatives that are better or worse than D3 to see what to use in your own projects in the future.

Theme 3

Title: RESTful APIs with the JavaScript Object Notation

Description: JavaScript also introduces one of the most used data exchange formats: JSON. JSON is commonly used to communicate between client and server, utilising the Facade Pattern. We’ll give a rationale, what a RESTful API is and where it is used. Then we’ll take a look at the various JavaScript frameworks to create, document and maintain those APIs (e.g. LoopBack, restify, swagger etc.). We will try to present the various pitfalls when it comes to versioning, maintaining and acceptance of RESTful APIs.

Theme 4

Title: The Storage Question: To SQL or NoSQL?

Description: In a data driven application, one key question is where to persist the data. In the JavaScript world, there are a lot of possible storage concepts: relational, filesystem based, document stores, key-value stores, graph databases and others. Not every type of data fits each database. In this topic, we’ll take a look into the differences and when to use which. Especially what the differences between session and local storage is and when to use cookies. In addition we will see how WebSQL and Sequilize impact the current development of Javascript applications. Finally, we will see if and how we can handle big data with Javascript tools in the frontend as well as in the backend.

Presentation Schedule

Group Date Time Theme

TBD

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://nodejs.org
  4. http://jqueryui.com
  5. http://www.jslint.com/lint.html
  6. http://jsfiddle.net
  7. http://www.crockford.com
  8. http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf
  9. http://www.sitepoint.com/creating-sentiment-analysis-application-using-node-js/
  10. Advanced Reading JavaScript Garden - the most quirky parts of the JavaScript programming language https://github.com/BonsaiDen/JavaScript-Garden/tree/master/doc/en
  11. RECOMMENDED VIDEO http://www.paulirish.com/2010/10-things-i-learned-from-the-jquery-source/
Personal tools