Due date: Jan 11 (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 explain which tasks you solve with each view.
The short report (max. 5 pages + 1 for screenshot) must contain the following sections:
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 must 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 when your report mentions features that 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.
AI usage in this assignment follows the course-wide policy described on the AI Usage in Coding Assignments page: AI Usage. You may use AI tools, but only with proper disclosure, verification, and understanding of all generated suggestions. Your report, design decisions, sketches, and overall dashboard concept and implementation must be your own work. You are fully responsible for the correctness and clarity of your implementation.
Please include a brief statement at the end of your report explaining whether and how you used AI for A5.
You will showcase your prototype and its functionality, and how it solves the tasks of your users (i.e., demonstrate how to find interesting insights or demonstrate how the requirement analysis has been achieved)
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 report as 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, meaning you can implement your design with only JS and D3. However, using a reactive framework such as Vue.js can be particularly helpful when developing a dashboard that contains multiple interactive components connected to the same dataset. Using D3 as a visualization library is required. You can use any other library for purposes other than visualization, such as layout, utility, and input components (e.g., Bootstrap, Lodash, Vue Select). However, you are not allowed to use a visualization library other than D3, such as Plotly, Highcharts, and similar.
Important note regarding the submissions of Vue.js web application (applies to the usage of other JS frameworks as well): You must build your web application as distribution code and upload it to 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 for Node.js or the setup of the underlying JS framework. The execution of this build process is documented in the README file of the boilerplate (https://github.com/asilcetin/vis-vue-d3).
Ensure your submission (i.e., the code) on the Almighty web instance and on Moodle are identical. If you make any changes to your web instance submission after the deadline, ensure that you also submit the same changes to Moodle. 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 "VIS25W". Inside VIS25W 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}/VIS25W/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 ensure that if you submit a zip or tar.gz file, 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 u:account username.
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.