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
You submission must render the bubbles and the grid lines using WebGL on a canvas.
Don't use other graphics libraries.
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.
Draw vertical and horizontal grid lines so that we can distinguish whether the system is
currently using a linear scale or a logarithmic scale.
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.
Color the bubbles according to the regions of the countries.
User Interaction
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.
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.)
The user should be able to drag the slider to change the year that is being displayed.
The canvas should update accordingly.
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.
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
The user should be able to select one or multiple countries to display their "trend curves."
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.
The implementation should provide at least the following two ways to
select/deselect countries for displaying trend curves.
It should provide checkboxes, each corresponding to a country.
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.
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.
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
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.
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.
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.
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.
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.
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.
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
These files are already referred to in ppa02_student/index.html file.
They define the following functions:
getCountryList()
getPopulation()
getGdpPerCapita()
getLifeExpectancy()
Your code should call each of these functions only once to get the data.
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.