A2: D3 assignment --- part 2
Due date: Nov 2 (23:55)
This is an introductory assignment designed to get you up and running with HTML, CSS, JavaScript, and designing a visualization with D3. Be aware that this course uses version 7.9.0 of D3.
Use the world_fertility_rate_1960_2020.csv dataset for this assignment. (Data source: https://data.worldbank.org/indicator/SP.DYN.TFRT.IN) (Note that some countries with missing values on certains years have been removed from the dataset for the sake of simplicity for the current assignment.)
Learning objectives
- Loading and iterating through the dataset in d3
- Plotting two dimensional data on a line chart
- Creating basic interactions
- Focus + context via brushing
Recommended procedure
- Ensure that you load the dataset properly into d3
- Create a line chart with 1) the x-axis displaying the years from the earliest to the latest, and 2) y-axis displaying the fertility rate (births per woman) per country
- Data points (lines) represent one country each.
- Label x and y axes: 1) "Years" underneath the x-axis, 2) "Fertility Rate (Births per Woman)" on the left side of the y-axis
- Label the scales on x and y axes: select the intervals and formatting that you find useful / informative
- On mouseover over a line, the line gets higlighted (select a highlight color that you find useful / informative) and the name of that country is shown above / next to the line
- On mouseclick, the highlight color of the line and the text containing the country's name become permanently visible.
- Implement a context area underneath the line chart, which allows brushing a certain period of years that makes the line chart focus on that period.
Grading
We’ve broken the learning objectives down by numerical grade, 1 through 5. You will receive the best grade for which you’ve met at least one objective plus all fully completed grades below. Please be aware that that means that if you haven’t fully met all objectives for getting a 3 then you won't get a 2 or 1 even if you’ve completed all the objectives for the grade 2 or 1. We’ve structured the objectives so that they build on each other for the most part. So, in order to show that you’ve learned something for grade 2 then you’ll need to show that you’ve also met all requirements for grade 3, grade 4 and then some.
Grade 4 (50% - 62%)
- 10%: Submitting according to the procedure
- 17%: Loading the data properly into d3
- 35%: Creating a line chart with each line representing one country
Grade 3 (62.5% - 74.5%)
all the above plus:
- 5%: Label x and y axes: 1) "Years" underneath the x-axis, 2) "Fertility Rate (Births per Woman)" on the left side of the y-axis
- 7.5%: Label the scales on x and y axes: select the intervals and formatting that you find useful / informative
Grade 2 (75% - 87%)
all the above plus:
- 7.5%: On mouseover over a line, the line gets higlighted (select a highlight color that you find useful / informative) and the name of that country is shown above / next to the line
- 5%: On mouseclick, the highlight color of the line and the text containing the country's name become permanently visible.
Grade 1 (87.5% - 100%)
all the above plus:
- 12%: Implement a context area underneath the line chart, which allows brushing a certain period of years that makes the line chart focus on that period.
- 1%: Add a title (an HTML "h1" element on top) summarizing the visualization
Video Walkthrough (5 minutes)
With each submission, include a short screen-recorded video (max. 5 minutes) with voice-over that covers:
- Design decisions (1 min): Interaction choices (hover, click, brushing) and axis/scale design.
- Code walkthrough (3 min): Show key parts: data loading/parsing, scales, line generator, axes, brushing implementation.
- Technical setup / AI usage (1 min): How to run, and whether/how you used AI. If you used AI, disclose tool/model and purpose. See AI Usage.
Required: This video is mandatory. Submissions without a Video Walkthrough will be graded with 0 points. If you have limitations or hurdles creating the video, contact the teaching staff in a timely manner so that a solution can be provided.
Submission instructions
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 a FTP/SFTP client:
- Server: almighty.cs.univie.ac.at
- Username: uaccountusername (your u:account username)
- Password: your student password
Under the user directory (/home/uaccountusername) 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/~uaccountusername/ (replace 'uaccountusername' with your u:account username, which you use to login to Uni Wien services such as u:space)
Inside the public_html folder create a folder called "VIS25W". Inside VIS25W create a folder called "A2". Your submission files should be placed directly in this order, that means your index.html should be immediately inside the A2 folder for this particular submission.
Make sure you visit the site http://wwwlab.cs.univie.ac.at/~uaccountusername/VIS25W/A2/ 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 readme describing what you did, why, and the data source(s) you used, as well as any other associated files to moodle. 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: “uaccountusername_A1.zip” - replace uaccountusername with your u:account username. When we grade your work we will run
python -m SimpleHTTPServer
in the directory and then open index.html. So please ensure that your visualization works correctly under those conditions. Also, please make sure that you include your name in the readme file.
Just to be clear, here is a sample directory layout. You do not have to use this exact format but it must be clear which file is your readme, your html page, your data file, and your javascript file.
uaccountusername
\
| README.md
| index.html
| d3.min.js
| vis.js
| style.css
| data.csv
| video.mp4
Any additional libraries without prior permission will result in 0% points (Grade 5).
Include your 5-minute video walkthrough file (mp4/mov/webm) inside the same ZIP you upload to Moodle, at the top level of the archive (e.g., uaccountusername_A2.zip contains video.mp4). See AI Usage for disclosure guidance.
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.