A3: D3 assignment --- part 3
Due date: Nov 23 (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 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
Tools & Technologies
We provide you with the following boilerplate code to start with: https://github.com/asilcetin/vis-vue-d3. The boilerplate code for this assignment uses the following technologies:- Vue.js (v3): a JavaScript framework for building modern and "reactive" user interfaces
- Pinia: a store library for Vue which allows to share a state across components/pages. See the following example: https://github.com/asilcetin/vis-vue-d3/blob/main/src/stores/store.js
- D3.js (v7): a JavaScript library for producing interactive data visualizations on the web. In this assignment you will get familiar with the "geo" features (e.g. map projections) of D3.
- Bootstrap (v5): an open-source CSS framework for creating responsive websites with solid design principles
Recommended procedure
Image credits: Michaela Hubweber
- Use the vue.js boilerplate (https://github.com/asilcetin/vis-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 (what is a bi-variate choropleth?) for your two data dimensions (average personal 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 average personal income vs. educational attainment in that state. Use the AlbersUSA map projection with d3's function: d3.geoAlbersUsa()
- 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. (See an example of a scatterplot and a linked choropleth in action).
- 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 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%)
- 7%: Submitting according to the procedure
- 30%: Creating a choropleth map and filling each state's polygon on the map with a color representing the average personal income vs. educational attainment in that state for the currently selected year. Use the AlbersUSA map projection with d3's function: d3.geoAlbersUsa()
- 25%: 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 (62.5% - 74.5%)
all the above plus:
- 7.5%: Implement a year slider which interactively changes the data displayed both in the choropleth and the scatter plot.
- 5%: On mouseover each data point (circle) on the scatter plot shows a tooltip containing the name of that state.
Grade 2 (75% - 87%)
all the above plus:
- 12.5%: 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 (87.5% - 100%)
all the above plus:
- 12%: 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.
- 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): Color binning for bivariate scheme, map vs. scatter roles, linking rationale.
- Code walkthrough (3 min): Walk through what your code actually does — not just what happens when it runs. Explain the logic, state management (store), data joins, projection setup, color binning, linking/brush logic, etc. We see your understanding of the code you submit, not just the final behavior on the screen.
- Technical setup / AI usage (1 min): Build/run steps (dist deployment) 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.
Time Limit: The video should not exceed 5 minutes. However if the time limit is overshot, then 1% of the achievable points will be deducted per extra minute, starting from 5min 30seconds.
Audio check: Ensure that your microphone is properly set up and that your voice is clearly audible. Please test your audio levels and microphone placement prior to recording to ensure clear and consistent sound quality.
Submission instructions
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. "npm run build") and put these (copy the files from the /dist folder) 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.
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 'username' 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 "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/VIS25W/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 open the dist/index.html in a modern web browser (Chrome / Firefox). So please ensure that your visualization works correctly under those conditions. Also, please make sure that you include your name in the readme file.
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., username_A3.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.