CS 4621 PPA2 Data Visualization

Out: Friday March 3, 2017

Due: Friday March 17, 2017 at 11:59pm

Work in groups of up to 4

Overview

In this programming assignment, you will implement a visualization tool for a dataset consisting of the population, GDP per capita, and life expectancy of 195 countries from 1800 to 2015. We took this dataset from Gapminder, a web site created by Swedish professor Hans Rosling and his son Ola Rosling. (It's very unfortunate that Hans passed away early in February.) What we ask you to do in this assignment is to reproduce a number of functionalities of the visualization software hosted on the Gapminder site, using WebGL and Javascript.

WARNING: WE THINK THIS ASSIGNMENT IS LONGER THAN THE LAST ONE. START EARLY.

What You Code Should Be Able to Do

Logistics

First, clone the CS 4620 web repository. You will find the template code for this assignment in the cs4621/ppa02_student directory.

Inside the directory, open index.html, and you should see a web page with only the page's header and some text asking you to list your team members.

Please modify index.html so that it visualizes the data in a way similar to what you saw in the video. You may also add other code to the directory. However, do not use any 3D rendering framework such as three.js. Linear algebra libraries such as glMatrix are fine. Our solution code, however, does not use any extra code besides what is already in the ZIP file.

Once you're done writing your solution, ZIP the cs4621/ppa02_student, and submit the ZIP file to CMS.

Features

Your submission will be graded by features that it implements. More features, more points. You do not have to implement the features exactly as we did in the videos to get the points. Think of the course staff as customers who want to use your software to look at the data. We'll be satisfied if you implement features that satisfy the requirements, work out of the box, and are easy to use. The features are as follows.

WebGL Rendering

1. You submission must render the bubbles and the grid lines using WebGL on a canvas. Don't use other graphics libraries.
2. Make the background color of the canvas something other than white so that we can distinguish between the canvas and the web page's background.
3. Draw vertical and horizontal grid lines so that we can distinguish whether the system is currently using a linear scale or a logarithmic scale.
4. Draw the bubble of a country in a certain year so that:
   • the area of the bubble is proportional to the population of the country that year,
   • the $x$-coordinate of the center of the bubble corresponds to the country's GDP per capita that year, and
   • the $y$-coordinate of the center of the bubble corresponds to the country's life expectancy that year.
5. Color the bubbles according to the regions of the countries.

User Interaction

1. A part of the web page should display the GDP per capita and the life expectancy that correspond to the point the mouse cursor is located at.
2. If the mouse pointer is over a bubble of a country:
   • A part of the web page should display information about that country, including its name, GDP per capita, and life expectancy in the year corresponding to the bubble.
   • The system should make the bubble conspicuous by making other bubbles more transparent (according to the transparency specified by the "Transparency" slider). It should also draw the bubble in a way that makes it clear that it's highlighted (e.g. we draw with a color that is different from the color of the bubble's region, and put three circles around it.)
3. The user should be able to drag the slider to change the year that is being displayed. The canvas should update accordingly.
4. The "Play!" button should work as indicated in the video. That is:
   • Once the user clicks the button, the year and the slider should progress forward automatically. The "Play!" button should become the "Stop!" button.
   • If the slider reaches year 2015, the progression of the year should stop and the "Stop!" button should change back to the "Play!" button.
   • If the user clicks the "Stop!" button while the year is progressing, the progress should stop there and the "Stop!" button should change back to the "Play!" button.
5. When at least one trend curve is on display, the bubbles not on any trend curve should become transparent. The transparency of these bubbles should be controlled by the "Transparency" slider

Trend Curves

1. The user should be able to select one or multiple countries to display their "trend curves."
2. If a country is chosen, its trend curve should be displayed by:
   • Drawing all the bubbles of that country from 1800 to the current year according to the year slider. The bubbles should be opaque.
   • Drawing line segments connecting bubbles of consecutive years. The line should have the same color as the region of the country.
3. The implementation should provide at least the following two ways to select/deselect countries for displaying trend curves.
   1. It should provide checkboxes, each corresponding to a country.
   2. The user may also click a bubble on the canvas to display the country's trend curve. If the user click on any bubble on that trend curve again, the curve should disappear.
4. The implementation should keep the UI elements consistent with the list of selected countries. In other words, if the user selects/deselect a country by clicking on a bubble, the checkbox corresponding to that country should be updated appropriately.
5. The implemention must provide a "Deselect All" button that, when clicked, should deselect all the countries currently being selected to display their trend curves.

Display Customization

1. The implementation should allow the user to choose whether to display the GPD per capita and the life expentancy with a linear scale of a logarithmic scale.
2. The implementation should allow the user to set the scaling factor that is used to derive the size of the bubble with respect to the population.
3. The implemention should provide a slider that allows the user to control the transparency of the bubbles that are obscured so that it becomes easy to see bubbles on the trend curve of the bubble under the mouse cursor.

Extra Credits

The features below are not implemented by the reference solution. Implement them to get extra credits.

1. Smooth animation. From the video, you will see that when we click "Play!," the animation is jumpy because we do not interpolate bubbles between frames. Implement between-frame interpolation and to get smooth animation.
2. Tooltips. Information about a particular bubble is displayed in a separate table in the reference implementation. This is rather inconvenient because the table is far away from the canvas. Implement your visualization tool so that it shows a bubble's info as a tooltip that appears near the mouse pointer instead.
3. Zooming. Implement your submission so that it allows the user to zoom in to the area of the canvas they are interested in and also out to the canonical view.
4. Other datasets. Dig up some other datasets from the Gapminder web site and allow the user to choose which one to display.

Implementation Details

The dataset is contained in the following 4 Javascript files:

• ppa02_student/data/country_list.js
• ppa02_student/data/population.js
• ppa02_student/data/gdp_per_capita.js
• ppa02_student/data/life_expectancy.js

• getCountryList()
• getPopulation()
• getGdpPerCapita()
• getLifeExpectancy()

The return value of getCountryList() is an array containing Javascript objects, each corresponding to a country and having the following fields:

• name: the name of the country.
• region: the name of the region of the country, which can be "Asia", "Europe", "Africa" or "America".
• abbreviation: a three-lettered abbreviation of the country's name.

The return values of the three other functions have the same format. Each of them is a mapping from country names to arrays containing $2015-1800+1 = 216$ numerical values, which are either the population, GDP per capita, or life expectancy from 1800 to 2015. Some of the entries might be null, indicating that there's no data point for that particular year.

Hints

Use jQuery and jQuery UI

We implemented the reference solution with heavy help from jQuery and jQuery UI, and we could imagine how life would be much more difficult without them. We recommend that you take advantage of these libraries too. The template code we distribute already has them, so you don't have to figure out how to set them up.

How to Use UI Widgets

Past exhibits have code that demonstrate how to use a number of UI widgets.

• Look at Exhibit #2 of Lecture 2 to learn about jQuery UI sliders.
• Look at Exhibit #6 of Lecture 1 or PPA 1 to learn about the select tag.
• Look at the source code of this web page to see how the "Play!" button is implemented.
  

  1800
  Play!

  
  
• Look at the source of code of this web page to see how to implement the checkboxes.
  
  

  Presidents of the United States of America

  George Washington John Adams Thomas Jefferson James Madison James Monroe John Quincy Adams Andrew Jackson Martin Van Buren William Henry Harrison John Tyler James Knox Polk Zachary Taylor Millard Fillmore Franklin Pierce James Buchanan Abraham Lincoln Andrew Johnson Ulysses S. Grant Rutherford Birchard Hayes James Abram Garfield Chester Alan Arthur Grover Cleveland Benjamin Harrison Grover Cleveland William McKinley Theodore Roosevelt William Howard Taft Woodrow Wilson Warren Gamaliel Harding Calvin Coolidge Herbert Clark Hoover Franklin Delano Roosevelt Harry S. Truman Dwight David Eisenhower John Fitzgerald Kennedy Lyndon Baines Johnson Richard Milhous Nixon Gerald Rudolph Ford James Earl Carter, Jr. Ronald Wilson Reagan George Herbert Walker Bush William Jefferson Clinton George Walker Bush Barack Hussein Obama Donald John Trump

  
  Select All   Deselect All

Rendering and Interaction

• Review Exhibit #3 of Lecture 2 to see how to draw circles.
• Review Exhibit #2 of Lecture 3 to see how to handle mouse events.
• Use WebGL blending when implementing transparency. We use SRC_ALPHA and ONE_MINUS_SRC_ALPHA as our blend functions.