Skip to content

Latest commit

 

History

History

Homework2

README.md

Homework 2: Visualization Dashboard: Layout Design + Visual Encoding

For homework 2, you will create a dashboard with three visualization views. This homework will not be using Observable. Instead, you will be developing a web-based interface in JavaScript with D3.js, where we have provided one template.

To begin, you need to first fork this repository. After the fork, clone the repository using the following commands:

  git clone https://github.com/<your-github-account-name>/ecs163-24w
  cd ecs163-24w/Homework2

Create a new folder inside the Homework 2 directory in the forked repository. The name of the folder should be the same as your UC Davis email account name (without ' @ucdavis.edu'). Inside this folder, you will add all your code.

Before coding, please go over one of the following tutorials:

If you need to learn more about JavaScript, you can refer to A re-introduction to JavaScript

Step 0: Choose a Dataset from the Following List

In this assignment, you can choose one of the following datasets:

To use a dataset, download the data file from the respective URL above and put it in the ./<your-template>/data folder.

Step 1: Set Up the Environment

We provided template using Javascript, you can find it and more technical details in ./Homework2/Template.

Note that you are free to use other existing frameworks and libraries in JavaScript to implement your interface, while d3.js remains required for completing this assignment.

To start the application, open folder which contains all your files in VSCode, then open index.html file, right click on the mouse and press "open with Live Server".

Requirements

Your task is to create a visualization dashboard. The design of this dashboard should facilitate the exploration of a dataset in an effective or interesting way.

  • This dashboard must have three visualization views, which should be created with different visualization methods (see below).
  • Your visualizations should include at least one advanced visualization method.
  • The visualizations should depict different dimensions or aspects of the dataset to be examined.
  • The three visualizations should fit on a fullscreen browser. Consider where each view should be placed while designing the layout of your dashboard.
  • Legends for each view need to be provided as well as axis labels and chart titles.
  • One of your three views should serve as an overview of the data.
  • Choose appropriate visual encodings.
  • Color choice matters and has an effect on the interpretability of the visualization. Depending on the data the type of color scale you will use will change (categorical, linear, etc).
  • Carefully consider the design for each encoding that you will use and its effectiveness for portraying the data. Depending on the data you are visualizing, certain pairings of marks and channels will be more effective.

The design paradigm you will be following is referred to as focus + context.

  • A focus view is where the data of most interest is displayed at full size or with full details.
  • A context view is a peripheral zone, an overview, where elements are displayed at reduced size or in a simplified way.

Note that creating a bar chart and a histogram only counts as using only one method, since their implementation is nearly the same.

Fundamental

  • Bar chart or histogram
  • Pie or donut chart
  • Line and area chart
  • 2D heatmap or matrix view
  • Scatter plot
  • Node-link diagram
  • Geographical map

Advanced

  • Parallel set or parallel coordinates plot
  • Sankey or alluvial diagram
  • Star coordinates or plot
  • Chord diagram
  • Stream graph
  • Arc diagram
  • Dendrogram

Submission

To submit for this assignment, you need to first fork this repository. After the fork, clone the forked repository using the following commands:

  git clone https://github.com/<your-github-account-name>/ecs163-24w
  cd ecs163-24w/Homework2

Create a new folder inside the Homework 2 directory in the forked repository. The name of the folder should be the same as your UC Davis email account name (without ' @ucdavis.edu'). Put all your codes inside this folder, and use "git add" to add all your codes, and then commit.

git add <your-filename> 
git commit -m "Homework2" 
git push

After you push your code to your repository, follow the instructions here to create a pull request for this repository. Finally, submit the hyperlink of the pull request to UCD Canvas. The hyperlink should look like this- "https://github.com/VIDITeaching/ecs163-24w/pull/{your-pull-request-id}".