A3: D3 assignment --- part 3

Due date: Nov 28 (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_ba-degree-or-higher_2006-2019.csv and usa_personal-income-by-state_2006-2019.csv datasets for this assignment. Additionally you will need a geojson file for displaying the geographical features (i.e. states as polygons) on the map, for this you can use us-states-geo.json file.

Learning objectives

• Map projections and displaying geographically related data in d3
• Linking multiple d3 charts and the data reactively (e.g. with vue.js)
• Creating a scatter plot using two different datasets
• Brush selections and filtering
• Selecting and implementing an appropriate color scheme for bi-variate color encoding

Recommended procedure

• Use the vue.js boilerplate (https://github.com/asilcetin/vis20w-vue-d3) provided. If you have sufficient knowledge in any other reactive JS framework (React, Angular etc.) you're free to use those as well. In that case make sure you document in detail the framework you use and its setup in your README file.
• Import the datasets into the state of your web application on load. The choropleth and scatter plot components bind to that data in state.
• Define a 3x3 bi-variate color scheme for your two data dimensions (median income vs. educational attainment)
• Implement a year slider, which is by default set to the first available year, 2006. This year selection will be used by both the choropleth and the scatter plot.
• Create a choropleth map and fill each state's polygon on the map with a color representing the personal income vs. educational attainment rate in that state.
• Create a scatter plot with 1) the x-axis displaying the educational attainment rate (bachelor's degree or higher) in a state, and 2) y-axis displaying the average personal yearly income in a state. The background of the scatter plot should be divided and filled by the 3x3 color scheme you have defined.
• Data points (circles) in the scatter plot should have a fixed size (radius) and represent one state each.
• Label x and y axes of the scatter plot: 1) "Educational Attainment: Bachelor's Degree or Higher (%)" underneath the x-axis, 2) "Average Yearly Personal Income (in $)" 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 each data point (circle) shows a tooltip containing the name of that state.
• Implement brushing on the scatter plot. Only the states corresponding to the data points which are selected by the brushed rectangle will be shown on the map and the other states will be grayed out. Clicking an empty area inside the scatter plot should deactivate the brush selection.
• Interactivity on the map: on mouseclick on a state highlight the data point of that particular state on the scatter plot. Clicking an empty area inside the map component should deactivate the highlighting.

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
• Creating a choropleth map and filling each state's polygon on the map with a color representing the personal income vs. educational attainment rate in that state.
• Creating a scatter plot with 1) the x-axis displaying the educational attainment rate (bachelor's degree or higher) in a state, and 2) y-axis displaying the average personal yearly income in a state. The background of the scatter plot should be divided and filled by the 3x3 color scheme you have defined. The axes and their scales are labeled.

Grade 3

all the above plus:

• Implement a year slider which interactively changes the data displayed both in the choropleth and the scatter plot.
• On mouseover each data point (circle) on the scatter plot shows a tooltip containing the name of that state.

Grade 2

all the above plus:

• Implement brushing on the scatter plot. Only the states corresponding to the data points which are selected by the brushed rectangle will be shown on the map and the other states will be grayed out. Clicking an empty area inside the scatter plot should deactivate the brush selection.

Grade 1

all the above plus:

• Interactivity on the map: on mouseclick on a state the data point of that particular state on the scatter plot is highlighted. Clicking an empty area inside the map component should deactivate the highlighting.
• 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/~username/VIS21W/A3/ (replace 'username' with your u:account username, which you use to login to Uni Wien services such as u:space)

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 (e.g. "yarn run build") 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 will be shown and documented in the vue.js tutorial and in the README document of the boilerplate.

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: username (i.e. u:account username)
• Password: your student password

Under the user directory (/home/username) 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/~username/ (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 "A3". Your submission files should be placed directly in this order, that means your index.html should be immediately inside the A3 folder for this particular submission.

Make sure you visit the site http://wwwlab.cs.univie.ac.at/~username/VIS21W/A3/ 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: “username_A3.zip” - replace username 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.

username
      \
      | 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.

Academic Honesty