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.

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:

Given a csv file with structured data

Allow plotting this data using natural language, e.g. by typing ‘histogram of 2017 salaries’ or ‘line chart of date, salaries and sales’

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:

Load CSV file into the system

Provide very basic interface for natural language querying of the data. The interface should implement the following operations:

Select column a and b from the data

Select min, max and average values from the data

Perform the following plotting operations:

a histogram

a line chart of X vs Y

a scatter plot of X and Y

a pie chart

Define a set of default parameters for each of the graphs being plotted

Provide a basic UI that will allow entering natural language commands to the system for graph manipulation

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.

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

Register on TUM Matching System for this seminar

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.

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.

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.