You will create two simple visualizations using D3 (no other charting libraries are allowed) based on the provided dataset. Note that there are significant API changes from D3 v3 to D3 v4. Please use D3 v4 or above for this exercise. Note that some examples online might still use D3 v3.
Each of the visualizations needs to visually encode at least three variables (i.e., columns of the data table) in the dataset. For example, a scatterplot with x-axis, y-axis, and dot size representing three different variables is qualified.
The two visualizations need to be interactively linked together. When a user is hovering over an element in one visualization (e.g., a dot in a scatterplot), the corresponding visual elements in the other visualization (e.g., bars in a bar chart) need to be highlighted (e.g., with a change of color or border thickness), and vice versa. Corresponding visual elements are defined based on showing a overlapping set of records. For example, if the user is hovering over a dot in a scatterplot that represents all the people with Bachelors in the dataset, the other bar chart will highlight all the bars that contain people with Bachelors.
For each visualization, you will include a one- or two-sentence description (on the same webpage) to explain the variables selected, how you encode them, and some interesting findings from the visualization, as part of your solution description.
References:D3 bar chart example, D3 linking two charts example (note this example is in D3 v3, but the mouse event APIs remain the same in latest versions); see the Resources page for more information.
Submit: A single .html file with the D3 JavaScript code embedded in it. Note Learn will modify your html, so you need to zip the .html file.
The html webpage should be viewed through running python -m http.server with the dataset file in the same directory.
A solution description (see the Information page) on the webpage, along with your name, student number, and WatIAM ID as well as a declaimer of any external code/libraries that you used or inspired you.
VD2: Dimensionality reduction
Objectives:
You will apply different dimensionality reduction methods, including PCA, MDS, and t-SNE, with the given dataset by projecting the high-dimensional data points onto a 2D plane. You will design interactive visualizations to compare the results of different 2D projections. Such visualizations are very useful for understanding the embeddings generated by machine learning models, such as Google’s embedding projector. The visualizations will be created with the NodeJS framework, as a standalone webapp running on a local server.
You will preprocess the dataset using Python to generate the projected coordinates and feed those into your visualizations. You visualization needs to indicate/encode the labels of the data points. Moreover, the visualizations should be linked interactively, i.e., hovering over one dot in one visualization highlights the corresponding dots in other visualizations. You will also include a short description about any findings by comparing the three different dimensionality reduction methods.
You are provided with a starter code to setup a basic NodeJS server with D3 enabled, based on Webpack. However, it is up to you to use it or not.
Data:Fashion MNIST (use the 10,000 test set with labels; sub-sampling is allowed if there is a performance issue).
A NodeJS based web app for the interactive visualizations, usually runnable by typing npm start.
A Python script for preprocessing the data (which will be executed before running the web app).
Any precomputed data for running the web app.
A solution description README file (see the Information page), along with your name, student number and WatIAM ID, as well as a description of how to run your code and a declaimer of any external code/libraries that you used or inspired you.
VD3: Adjacency matrix v.s. node-link diagram
Objectives:
You will implement an animated transition in D3 between two most commonly used network visualizations: the adjacency matrix and the node-link diagram (any layout method is okay), with the given dataset. You will include a button on your webpage to trigger the transition from the adjacency matrix to the node-link diagram, and vice versa. The visualizations need to be created using the NodeJS framework, similar to VD2.
Your visualization should support some basic interactions to help understand the data and what is being visualized, such as hovering over a visual element to display the labels and metadata. The actual design of the visualizations (e.g., color codings) and animation behaviors are completely up to you. You will also include a short description about the visual encodings on the web page.
Hint: You can make a node-link diagram where each node has a duplicated copy moving along. To transit into an adjacency matrix, you could have the following animations: (1) moving one set of nodes to the columns and the other duplicated set of nodes to the rows (so they become row/column labels), (2) fading out the links, and (3) fading in the matrix cells.
A NodeJS based web app for the interactive visualizations, usually runnable by typing npm start.
A solution description README file (see the Information page), along with your name, student number and WatIAM ID, as well as a description of how to run your code and a declaimer of any external code/libraries that you used or inspired you.