A2: D3 assignment --- part 2
Due date: Nov 7 (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 6 of D3.
Use the usa_nominal_gdp_1997-2020.csv dataset for this 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 nominal GDP in a state
- Data points (lines) represent one state each.
- Label x and y axes: 1) "Years" underneath the x-axis, 2) "Nominal GDP (Millions of current dollars)" 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 state is shown above / next to the line
- On mouseclick, the highlight color of the line and the text containing the state'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 all the learning objectives plus all below. Please be aware that that means that if you haven’t met some objective for getting a 3 then you’ll get a 4 even if you’ve completed all the objectives for grade 2. 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 3 then you’ll need to show that you’ve also met all requirements for grade 4 and then some.
Grade 4
- Submitting according to the procedure
- Loading the data properly into d3
- Creating a line chart with each line representing one state
Grade 3
all the above plus:
- Label x and y axes: 1) "Years" underneath the x-axis, 2) "Nominal GDP (Millions of current dollars)" 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
Grade 2
all the above plus:
- On mouseover over a line, the line gets higlighted (select a highlight color that you find useful / informative) and the name of that state is shown above / next to the line
- On mouseclick, the highlight color of the line and the text containing the state's name become permanently visible.
Grade 1
all the above plus:
- 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.
- Add a title (an HTML "h1" element on top) summarizing the visualization
Submission instructions
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/~mmustermann/VIS21W/A2/ (replace 'mmustermann' with your u:account username, which you use to login to Uni Wien services such as u:space)
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: mmustermann (i.e. u:account username)
- Password: your student password
Under the user directory (/home/mmustermann) 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/~mmustermann/ (replace 'mmustermann' 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 "VIS21W". Inside VIS21W 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/~{u:account username}/VIS21W/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: “mmustermann_A2.zip” - replace mmustermann 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.
mmustermann
\
| README.md
| index.html
| d3.min.js
| vis.js
| style.css
| data.csv
Any additional libraries without prior permission will result in a 0
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.