Due Wednesday, November 15th, 12 Noon
CS 4460 - Information Visualization - Fall 2017
In this assignment you will create a version of the charts from Nadieh Bremer's Urbanization in East Asia narrative visualization. We highly recommend going through this visualization as a great example of storytelling and to learn more about the dataset.
In this assignment you will create multiple coordinated charts. You will create 6 total subplots. Your submission should include a bar chart and a dot histogram for each of the following urbanization measures:
The bar charts should compare the 2000 and 2010 metrics for each country. While the histograms should show the distribution of the percent growth for each city (Note: percent growth is already calculated for all three metrics). Your final chart will look like this:
Your subplots will also need to support coordinated interactions for brushing and linking. First, your dot histogram charts will have brushing in the x-direction. The brush will highlight the selected cities from that histogram in the other 2 histograms. Note that only one brush can be active at a time, so you will have to save the state of the active brush. The interaction should look like this:
Next, your submission should include linking from the bar charts to the histogram plots. Since the bar charts display all of the East Asian countries, you will use
mouseout events (aka hovering) to trigger a linked highlighting in all other views. The dots in the histogram should be highlighted if they are the same country, and the grouped bars of that country in the other 2 bar charts should be highlighted as well. The interaction should look like this:
You will use the dataset at
./data/asia_urbanization.csv to re-create the Urbanization in East Asia interactive visualization. Use the above relative path when calling
d3.csv(). We will deduct 2 points if you do not use a proper relative path.
Here is a snippet of the dataset:
|Seoul||Republic of Korea||37.566535||126.9779692||1067||1192||0.117||14277211||15898238||0.114||13378||13342||-0.003||high-income|
string) - the name of the urban city
string) - the name of the country
number) - the recorded land in 2000 (sq. km)
number) - the recorded land in 2010 (sq. km)
number) - the percent growth in land between 2000 and 2010
number) - the recorded population in 2000
number) - the recorded population in 2010
number) - the percent growth in population between 2000 and 2010
number) - the recorded population density in 2000 (persons per sq. km)
number) - the recorded population in 2010 (persons per sq. km)
number) - the percent growth in population density between 2000 and 2010
You will use this dataset to create the above multiple coordinated plots.
The data-bindings on the grouped bar charts are:
population| mean of
density] in a
The data-bindings on the dot histograms are:
growthmeasure - recommend using
d3.histogramto calculate intermediate layout dataset (hint: use
xScale.ticks(80)to compute the histogram's
thresholds()like they do in this example)
2010value in y-direction
You will need to re-configure the dataset two different ways:
d3.nest()to compute an aggregated dataset for each country. You will compute the
population, and the
density_growth. As mentioned above to get good binning use
xScale.ticks(80)to compute the histogram's
thresholds()like they do in this example. Where
scaleLinearfunction that maps the input domain of the
growthmeasure to the width of the histogram.
You will create this interactive chart using D3's Brush tool. We will cover how to create brushing in Lab 8, so stay tuned. In the mean time, take a look at these examples for how to add brushing:
Reminder that this is an individual assignment. The code you turn in should be your own creation. You are certainly welcome to seek assistance from the TAs as you work on the assignment, however.
All of the starter code for the Programming Assignments can be found at the HW Github Repository.
git clone this repository for this assignments starter code. You will need to
git pull for all future starter code.
You are required to use the starter code for all programming assignments.
You will submit your code via T-Square. Compress your code (the
04_brush_and_link directory) into a zip file. Upload and submit this zip file via T-Square.
Your zipped code should be submitted to T-Square by 12 Noon on Wednesday, November 15th
This assignment will be graded out of a 100 point scale. If your D3 code does all of the following you will receive all 100 points:
You will not lose points on any of the following:
We will be giving up to 10 points of extra credit for styling your charts. Or any useful feature that enhances your visualization. Please make note of the additions/embellishments in the notes of your T-Square submission.