Due date: Jun 18 (23:55)
This assignment will have you make your dreams become 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.
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 which tasks you solve which each view.
The short report (max. 5 pages + 1 for screenshot) must contain the following sections:
For DH students, 10 points will be reserved to grade the submitted „data story“, which could lead to a deduction from the overall score.
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%, such as in the case that 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.
You will give a quick introductory presentation of your prototype and its functionality, and how it solves the tasks of your users.
More information about the presentations can be found here: Presentations
The presentation of A5 is a mandatory requirement for the successful completion of the course.
Submit the PDF-report and an export of the Tableau workbook in a single ZIP file on Moodle. Please include a link to a published data story in your report.
Make sure that your workbook includes all necessary data. It is a good idea to try unzipping your file before submitting it to ensure that everything unzips properly and you do not lose points. Use the following naming scheme for your submission: "a12345678_A5.zip" - replace a12345678 with your u:account username. We will deduct points for submissions that do not follow this naming convention.
Submit the report as 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, meaning 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 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 are 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/VIS23S/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.
Login to your student web server instance with the following credentials using an FTP/SFTP client:
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 "VIS23S". Inside VIS23S 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}/VIS23S/A5/ on your browser (we will test with Chrome / Firefox) and that your code runs as expected.
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 full 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 is a good idea to try unzipping your file before submitting it to ensure that everything unzips properly and you do not lose points. Use the following naming scheme for your submission: "a12345678_A5.zip" - replace a12345678 with your student number. We will deduct points for submissions that do not follow this naming convention.
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.