CSE6242/CX4242:DataandVisualAnalytics|GeorgiaTech|Spring2016

Homework2:D3GraphsandVisualization
Due:Friday,February26,2016,11:55PMEST
PreparedbyGopiKrishnanNambiar,NilakshDas,PradeepVairamani,AjiteshJain,
VishakhaSingh,PoloChau

SubmissionInstructions:
It is important that you read the following instructions carefully and also those about the
deliverablesattheendofeachquestionor
youmaylosepoints
.

Submitasinglezippedfile,called
HW2{YOUR_LAST_NAME}{YOUR_FIRST_NAME}.zip,containingallthe
deliverablesincludingsourcecode/scripts,datafiles,andreadme.Example:
HW2DoeJohn.zipifyournameisJohnDoe.Only.zipisallowed(no.rar,etc.)
You may collaborate with other students on this assignment, but you must write your
own code and give the explanations in your own words
, and also mention the
collaborators names
on TSquares submissionpage.AllGTstudentsmustobserve
the
honor code
.
Suspected plagiarism and academic misconduct will be reported and
directly handled by the
Office of Student Integrity (OSI)
. Here are some examples
similartoProf.JacobEisensteins
NLPcoursepage
(gradingpolicy):

OK: discuss concepts (e.g., how crossvalidation works) and strategies (e.g., use
hashmapinsteadofarray)
Not OK: several students work on one master copy together (e.g.,bydividingitup),
sharingsolutions,orusingsolutionfrompreviousyearsorfromtheweb.
If you use any
slip days
, you must write down the number of days used in the
Tsquare submission page. For example, Slip days used: 1. Each slip day equals 24
hours.E.g.,ifasubmissionislatefor30hours,thatcountsas2slipdays.
At the end of this assignment, we have specified a folder structure of how to organize
yourfilesinasinglezippedfile.
5pointswillbedeductedfornotfollowingthisstrictly.
Wherever you are asked to write down an explanation for the task you perform,
stay
withinthewordlimit
oryoumaylosepoints.

In your final zip file,

We
willnotconsiderlatesubmissionofanymissingpartsofanhomeworkassignmentor
project deliverable. To make sure you have submitted everything, download your
submittedfilestodoublecheck.
1

Grading
The maximum possible score for this homework is 120 points, which includes 5 bonus
points. Students in the undergraduate section (CX4242) can choose to complete any 100
points worth of work to score the full 15% of the final course grade. Students in the grad
section (CSE6242) can choose to complete any 115 points. So, for example, if an
undergraduate student scores 120 pts, they will receive (120 / 100) * 15 = 18 pts towards
theirfinalcoursegrade.

Part0:Prerequisites
Download
thiszipfile
,whichcontainsallthedatasetstobeusedinthisassignment.

You may need to setup your own HTTPservertoproperlyrunyourD3visualizations(aswe

You can and are encouraged to decouple the style, functionality andmarkupinthecodefor
eachquestion,i.e.,youcanuseseparatefilesforcss,javascriptandhtml.

Include all the files related to d3*.js in the lib folder, and use a relative path to reference
these files from html files in other folders, i.e., Q1, Q2,etc.
Thisalsomeansthatyoushould
run the local server in your root homework folder. This way the files in the lib folder can
eitherbeaccessedas/lib/<pathtofile>or../lib/<pathtofile>fromQ1,Q2,etc.

Part1:VisualizingDatausingD3[35pts]
1
1. [10 pts]
Use the data provided in thefile
ForestFires.csv(intheQ1folder)tocreate
ascatterplotvisualization.Refertothetutorialforscatterplot
here
.

Features/attributesofthedata:
1.Monthoftheyear
2.Windspeedinkm/h
3.Burntareaoftheforestinhectares

a. [6pts]
Creatingscatterplot
:
Createascatterplotwiththefollowingspecifications:
1. Xaxisrepresentsthewindspeed,in
linearscale
2. Yaxisrepresentstheburntarea,in
linearscale
3. Datapointsareshownassquares.Allsquareshavesamesize.
4. Usea
categoricalscaleto
assigndifferentcolorsforsquarescorrespondingto
datapointshavingdifferentmonths
5. Addalegendofhowcolorsmaptothemonths
You can choose any appropriate range for linear scale in parts 1 and 2, and any
appropriate size for squares in part 3. Take a screenshot of this scatter plot and
includeitin
scatterplots.pdf
.
1

Thisisasubsetofdatatakenfrom
http://archive.ics.uci.edu/ml/datasets/Forest+Fires

b. [3pts]
SymbolsandLogscale:
Modifytheaboveplotto:
1. Usecirclesfordatapoints
2. Set the size (radius in pixels) of each circle in the plot to be proportional to
squarerootofthetheburntarea
3. Use
logscale
forYaxis
Takeascreenshotofthisscatterplotandincludeitin
scatterplots.pdf
.

c. [1 pt] Explain in no more than 20 words why using log scale forYaxisisbetterthan
usinglinearscaleforthisdata.Writedownyouranswerin
scatterplots.pdf

Q1Deliverables:
Thedirectorystructureshouldbeasfollows:
Q1/
scatterplot.(html/js/css)
scatterplots.pdf
ForestFires.csv

scatterplot.(html / js / css)
the html/js/css files after Q1.b. You do not have to
submitcodeforQ1.a
scatterplots.pdf

screenshot of the two scatter plots created in Q1.a andQ1.band
answertoQ1.c

2.

[10pts]
Usethedataset2providedinthefile
nepal.csv
(intheQ2folder)tocreatea
stackedbarchart
visualization.Thisquestionrequirestovisualizethenumberof
teachersinNepalfromyear20072011.

a. [3pts]Manipulatethedatafile
nepal.csv
into
nepal_new.csv
suchthatthefilelooks
likeFigure1.Youmustwriteascriptinanylanguage(Python,Javaetc.)todothe
same.Submitthescript
asQ2.yyy
.

Figure1
b. [1pt]Selectany9districtsfromthefileanduseappropriatescaletoadjustthemon
thexaxis.
c. [1pt]Selectappropriateformattingtechniquetopresenttheycolumnasshownin
2

Source:
https://datahub.io/dataset/numberofteachersinnepalfromtheyear20072012

Figure2.
d. [2pts]Addalegendtothegraphsuchthateachcolourclearlyrepresentstheyears
from2007to1011.
e. [3pts]Explainallthemethodsusedtocreatethegraphinnotmorethan50words.
Theexplanationmust
explicitly
mentionthemethods.
Takeascreenshotofthemapandsaveitas
stacked.jpg
.

Figure2

Q2Deliverables:
Thedirectorystructureshouldlooklike(remembertoincludethed3library):
Q2/
Q2.yyy(Python,Javaetc.)
nepal_new.csv
stacked.jpg
stacked_barchart.(html/css/js)
explanation.txt

Q2.yyy
Thescript(inPython/Javaetc.)usedtomanipulatethedatafilenepal.csv.
nepal_new.csv
theresultant.csvfile
stacked.jpg
Screenshotoftheresultantgraph.
stacked_barchart.(html/css/js)
html,javascript,cssfilestorenderthe
visualizationmadeinQ2.
explanation.txt
Thetextfileexplainingallthemethodsusedtocreatethegraph.

3.

[15pts]

ForceDirectedGraphLayoutinD3

You will experiment with many aspects of D3 for graph visualization. To get you
started,weprovidegraph.html(inthefolderQ3).
4


a. [4 pts]
Adding nodelabels
:Modifythegraph.htmltoshowlabelstotherightofeach
node in the graph. The label should be the name of company that the node
represents. If a node is dragged, its label must also move with the node. (You are
freetosplitgraph.htmlintograph.html,graph.jsandgraph.css)

b. [2pts]
Coloringlinks
:Colorthelinksbasedonthetypefieldinthelinksarray.
Assignthefollowingcolors:

Type

Color

licensing

blue

suit

red

resolved

green

c. [4 pts]
Pinning nodes (fixing node positions). Modify the html so that when you
double click a node it fixes the nodes position (The pinned nodes can still be
dragged directly but they will remain in their position when the other nodes are
moved). Mark fixed nodes so that they are visually distinguishable from unfixed
nodes, e.g., pinned nodes can be shown in a different color, or border thickness, or
visually annotated with astar(*),etc.Therest ofthenodespositionsshouldremain
unfixed.Doubleclickingafixednodeshouldunfreezeitspositionandunmarkit.

d. [5 pts]
Adding
Tooltips
: Using the d3tip library, add a tooltip for each node. A
mouseover event on the node should display a tooltip containing the list of
neighborsofthenode(bothinboundandoutboundneighbors).

Thefinalgraphcouldlooklikethis:

Figure3
Q3Deliverables:
Thedirectorystructureshouldbeasfollows:
Q3/
graph.(html/js/css)
5

graph.(html/js/css)
thehtmlfilebasedontheinitialcodethatcontainsthe
changesmadein(ad)aboveandjs/cssfilescreated(ifany).

Part2:VisualizingStatisticsofRefugeesinEurope[65pts]

4.

[65 pts] After the training in Part 1, assume that you are analyzing data for United
Nations High Commissioner for Refugees (UNHCR) and need to perform the
following tasks to aid in the UNHCRs understanding of the persons of concern,
consideringtheongoingEuropeanmigrantcrisis.

a. [5 pts]Convertthe dataset3providedinthefile
unhcr_persons_of_concern.csv
(inthe
folder Q4) to a json file (poc.json). This dataset represents a subset of the
information available from UNHCR about Persons of Concern during the timeframe
20052015 residing in select European countries. The conversion to json file can be
done by hand, a tool, or a script of your choice. Only the json file will be graded so
youdontneedtoturninthescript.

b. [5 pts]
Table. Create a table to display details of the refugees in theyear2005.You
can use any tool(e.g.,Excel,HTML,Tableau,D3)youwanttomakethetable.Keep
suggestions from class in mind when designing your table (see
lectures slides for
what to and what not to do, but you are not limited to the techniques in the slides).
Your tabular visualization needs to convey the data clearly and effectively to the
reader (displaying all rows that match thefiltermaynot beaneffectivevisualization).
No user interaction is required. Describe your reason for choosing the techniques
youusein
explanation.txt
innotmorethan50words
.

c. [50 pts]
Visualizations
using D3. Visualize country of origin, asylumandnumberof
refugeesovertheyears.
i.
[20 pts] Use the poc.json file generated in the previous part to create a
Sankey Chart. The chart should visualize the flow of refugees from one
country to another over the years, as shown in the example below. Youmay
refer to
this example to create the chart (sankey.js is provided in the lib
folder).Youcankeeptheverticalpositionoftheblocksstatic.
ii.
[10pts]Thecountriesshouldbesortedinalphabeticalorder.
iii.
[15 pts] Create a slider to navigate over the years. The chart should update
based on the position of the slider. You shouldeitherusethe
d3.sliderlibrary
or the
noUiSlider library for this. This subpart is optional for undergraduate
students,whomayonlyplotthechartfortheyear2012.
iv.
[5pts]Usethed3tiplibrarytoaddtooltipsasshown.

HINT
: You may find the following functions useful d3.nest(), array.filter(),
array.map(),array.sort()

Source:
http://popstats.unhcr.org/en/persons_of_concern

NOTE
:
ECMAScript 6 was finalized in
June 2015 that introduces significant
changes to the new javascript version.
5 pts bonus will be awarded for a
correct solution that uses at least one of the
new features introduced in
ECMAScript6(we suggestusingarrowfunctionsdont justusetrivialthingslike
const
or
let
).

Figure4

d. [5 pts]
Tableau: Visualize the demographic attributes (age, sex, country of origin,
asylum seeking country) in the file
unhcr_popstats_demographics.csv (in the folder
Q4) for any given year in one chart. Tableau is a popular InfoViz tool and the
company has provided us with student licenses. Go to
this link and select Get
Started. On the form, enter your Georgia Tech email address for Business email
and Georgia Institute of Technology for "Organization". The Desktop Key for
activation is available on TSquare. Do not share the key with anyone. Provide a
rationale for your design choices in this step in the file
explanation.txt
in not more
than50words.

Q4Deliverables:
Thedirectorystructureshouldbeasfollows:
Q4/
poc.json
table.yyy
viz.(html/js/css)
chart.xxx(fromTableau)
explanation.txt
table.yyy
Anymodernimageformat(e.g.,jpg,png,pdf)showingthetablecreated
inQ4.b.
7

viz.html/js/css
Thehtml,javascript,csstorenderthevisualizationinQ4.c.
chart.xxx
ThefigureforthechartgeneratedfromTableauinQ4.d.Youcanuse
formatslikepngandpdf,butbesuretomakeitahighqualityandclearimage).
explanation.txt
WritetheexplanationforpartsQ4.bandQ4.dinthisfile.Also
explainhowyouusedECMAScript6inQ4.c.Keepitsuccinct.Ifyourean
undergraduatestudent,mentionithere,andsaywhetheryouveattemptedQ.4.c.iii.

Part3:VisualizingCollegeScorecarddata[15pts]

5.

[15pts]

Visualization.
UsingD3,constructavisualizationusingthecollege

scorecarddatasetthatmayhelpstudentsmakecollegedecisions.Thedataset
(
locatedintheQ5folder
)containsmanystatisticsaboutaffordabilityandvalue.

Createonelargevisualizationormultiplesmallonesusingtheentiredatasetora
subsetofit.(Thevisualizationdoes
not
needtosupportanyinteractions.)

Youmayalsorefertotheinformationonthiswebsitetoaugmentyourdataorfor
moreideas:
http://catalog.data.gov/dataset/collegescorecard

Themaingoalofthistaskisforyoutocomeupwithacreative,practicaland
informativeideathatcouldaimdecisionmaking,andimplementitinD3inthe
bestwayyoucan.Pointswillbeawardedforfunctionality,andalsofor
interestingideas.
Summarizeyourmainideasbehindthevisualizationin
explanation.txt
inno
morethan50words
.

Q5Deliverables:
Thedirectorystructureshouldbeasfollows:
Q5/
q5.(html/jss/css)
*.json
explanation.txt

q5.(html/js/css
)Thehtml,javascript,cssfilestorenderthevisualizationmadein
Q5.
*.json
Includeallthejsonfile(s)usedasdatasources.
explanation.txt
Asdescribedinthequestion.

ImportantInstructionsonFolderstructure

Wewillbeexecutingthefollowingcommandstovalidatethesubmissionisallright.Ifsome
filesaremissinginourqueryofthezipfolder,markswillbededucted.Forexample,if
Q1/explanation.txtismissing,pointscouldbededucted.

Thedirectorystructureshouldbeasfollows:
HW2LastNameFirstName/
| lib/

|d3/

|d3.v3.min.js

|d3.tip.v0.6.3.js

|sankey.js

|d3.slider.css

|d3.slider.js

|nouislider.css

|nouislider.js

|nouislider.pips.css

|nouislider.tooltips.css
| Q1/

|scatterplot.(html/js/css)

|scatterplots.pdf
|ForestFires.csv

| Q2/

|Q2.yyy

|nepal_new.csv

|stacked.jpg
| stacked_barchart.(html/css/js)
|explanation.txt
| Q3/

|graph.(html/js/css)
| Q4/

|poc.json

|table.yyy

|viz.(html/js/css)

|chart.xxx(fromTableau)
|explanation.txt
| Q5/

|*.json

|q5.(html/js/css)
|explanation.txt