A5: Implementing Your Dashboard Design

Due date: Jan 30 (23:55)

This assignment will have you making your dreams into reality! Take your designs from your previous assignment and develop them into a concrete prototype. You should document all your steps in a short report and submit a final implementation of your dashboard.

Learning objectives

• Understand how design sketches might not work on actual data
• Be able to articulate the issues to your users
• Select from a set of design sketches to create a comprehensive visualization
• Describe how a visualization implements the various tasks
• Implement a visualization from scratch in D3 (optionally with Vue.js or another JS framework of your own choice)

Directions

1. Select a final dashboard design from your previous assignment to implement.
2. Implement your final design as a web-based dashboard using D3 (optionally with Vue.js or another JS framework of your own choice)
3. Document your process and findings as a report

If you have not submitted a low-fidelity design prototype in the 4th assignment, you should include at least one low-fidelity design alongside this 5th assignment (you can use up to two additional pages than the max. allowed: one text page & one pen and paper design page). Describe and justify your design decision in these two pages and what tasks you solve which each view.

Report

The short report (max. 5 pages) must contain the following sections:

• Motivation: Short reminder of the overall problem in your own words, what is your selected design, and why?
• Prototyping / Design Process: Describe the results of prototyping your design as a web-based dashboard. What can be found in the data using your visualization system? Did you have any visualization ideas that don’t work on the real data? If so why? If changes emerged during the prototyping process, describe the changes to your initial visualization design.
• Implementation Details:: Describe your final implementation, how it addresses the tasks, and your technical decisions regarding the implementation.
• Discussion: What have you learned? What would you do different next time? Are your users able to solve the tasks you defined in the beginning? If so, how? If not, what issues did you experience?
• Conclusion: Summarize the report.

Grading

The grading will be as follows (100% points total):

Report (40 points)

• Motivation (2.5 points)
• Prototyping / Design process (20 points)
• Implementation Details (10 points)
• Discussion (5 points)
• Conclusion (2.5 points)

Visualization Dashboard (60 points)

The basis for the evaluation is your proposed design and defined tasks. Your implementation will be graded according to the three main parts of the design pyramid:

• Functionality: the planned user tasks can be executed using the system (25 points)
• Usability: the system is intuitive for the users, and the tasks can be executed with ease of use and good performance (20 points)
• Aesthetics: consistent and appealing choices for layout, sizes, positions and colors of visual elements (15 points)

You will get points for the report only when you submit a working implementation. Failure to submit according to the instructions will result in a grade of 0%. The final implementation has to be submitted in addition to the report and should work as described in the report. Any serious discrepancies between the report and the final implementation will result in a grade of 0%. I.e. in the case your report mentions features which your final dashboard implementation is lacking. Important: Please be aware that you will need to reach a minimum of 25% of the points on this assignment since this is one of the requirements to pass this course successfully.

Submission instructions

Submit a pdf and the final implementation (a folder with HTML/JS/CSS and your source code if you used a JS framework such as Vue.js, React or Angular). Using a JS framework is not required, that means you can implement your design with only JS and D3. However, using a reactive framework such as Vue.js can be very helpful when developing a dashboard containing multiple interactive components connected to the same dataset. Using D3 is as visualization library is required. You can use any other library for other purposes than visualization, such as layout, utility and input components (e.g. Bootstrap, Lodash, Vue Select etc.). However, you're not allowed to use a visualization library other than D3, such as Plotly, Highcharts and similar.

Submissions should be done BOTH on Moodle and on the Uni Wien Almighty servers (see the instructions below), e.g.: http://wwwlab.cs.univie.ac.at/~a12345678/VIS21W/A5/ (replace 'a12345678' with your u:account username, which you use to login to Uni Wien services)

Important note regarding the submissions of vue.js web application (applies to the usage of other JS frameworks as well): You have to build your web application as distribution code and put these on the Almighty Web Instance. On Moodle you upload both the actual source code and the built code. When you build your source code, it should produce HTML, JS and CSS files which will be served on the web server without the need of Node.JS or the setup of the underlying JS framework. How this build process is executed is documented in the README document of the boilerplate (https://github.com/asilcetin/vis20w-vue-d3).

Make sure your submission (i.e. the code) on the almighty web instance and on the Moodle are identical. If you make any changes to your web instance submission after the deadline, make sure you submit the same changes to Moodle as well. These submissions will be compared by us and the modification dates of the files on the web servers will be checked in accordance with the deadlines & grace day usage.

Using your Almighty Web Instance

Login to your student web server instance with the following credentials using an FTP/SFTP client:

• Server: almighty.cs.univie.ac.at
• Username: a12345678 (i.e. u:account username)
• Password: your student password

Under the user directory (/home/a12345678) in the server, create a folder called "public_html" (if it doesn't exist already). The files in this directory are made automatically online under http://wwwlab.cs.univie.ac.at/~a12345678/ (replace 'a12345678' with your u:account username, which you use to login to Uni Wien services)

Inside the public_html folder create a folder called "VIS21W". Inside VIS21W create a folder called "A5". Your submission files should be placed directly in this order, that means your index.html should be immediately inside the A5 folder for this particular submission.

Make sure you visit the site http://wwwlab.cs.univie.ac.at/~{u:account username}/VIS21W/A5/ on your browser (we'll test with Chrome / Firefox) and that your code runs as expected.

Moodle Submission

Please submit a folder containing an index.html file which will open the view, the data file, and a short readme describing how to run your submission, and the data source(s) you used, as well as any other associated files to Moodle. Please submit your source code if you used a JS framework such as Vue.js, React or Angular. Please be sure if you submit a zip or tar.gz file that it properly unzips the files into a directory. It’s a good idea to try unzipping your file before submitting it to ensure that everything unzips properly and you don’t lose points. Use the following naming scheme for your submission: “a12345678_A5.zip” - replace a12345678 with your u:account username.

Late submission

Late Submissions are possible, you have a total of five grace days for all assignments. After these days are used up, remaining assignments must be submitted on time.

Academic Honesty