Description
CSE 6242/CX 4242
Q1 [10 pts] Designing a good table. Visualizing data with Tableau. Imagine you are a data scientist working with United Nations High Commissioner for Refugees (UNHCR). Perform the following tasks to aid UNHCR’s understanding of persons of concern. a. [5 pts] Good table design. Create a table to display the details of the refugees (Total Population) in the year 2005 from the data provided in unhcr_persons_of_concern.csv. You can use any tool (e.g., Excel, HTML) to create the table. Keep suggestions from class in mind when designing your table (see lectures slides, specifically slide 43, for what to, but you are not limited to the techniques described). Describe your reason for choosing the techniques you use in explanation.txt in no more than 50 words. 2 b. [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 Q1) for any given year in one chart. Tableau is a popular InfoViz tool and the company has provided us with student licenses. Go to tableau activation 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 in T-Square Resources as “Tableau Desktop Key”. This key is for your use in this course only. Do not share the key with anyone. Provide a rationale for your design choices in this step in the file explanation.txt in no more than 50 words. Q1 Deliverables: The directory structure should be as follows: Q1/ table.(png / pdf) chart.(png / pdf) explanation.txt unhcr_persons_of_concern.csv unhcr_popstats_demographics.csv ● table.(png / pdf) – An image/screenshot of the table in Q1.a (png or pdf format only). ● chart.(png / pdf) – An image of the chart in Q1.b (png or pdf format only, Tableau workbooks will not be graded!). The image should be clear and of high-quality. ● explanation.txt – Your explanations for parts Q1.a and Q1.b in this file. ● unhcr_persons_of_concern.csv and unhcr_popstats_demographics.csv – the datasets Q2 [15 pts] Force-directed graph layout You will experiment with many aspects of D3 for graph visualization. To help you get started, we have provided the graph.html file (in the folder Q2). Note: You are welcome to split graph.html into graph.html, graph.css, and graph.js. a. [3 pts] Adding node labels: Modify graph.html to show a node label (the node name, i.e., the source) to the right of each node. If a node is dragged, its label must also move with the node. b. [3 pts] Coloring links: Color the links based on the “value” field in the links array. Assign the following colors: If the value of the edge is < 1.0 : assign Blue color to the link. If the value of the edge is >= 1.0 and <= 2.0 : assign Green color to the link. If the value of the edge is > 2.0 : assign Red color to the link. 3 c. [3 pts] Scaling node sizes: 1. Scale the radius of each node in the graph based on the degree of the node. 2. In explanation.txt, using no more than 40 words, discuss your scaling method you have used and explain why you think it is a good choice. There are many possible ways to scale, e.g., scale the radii linearly, by the square root of the degree, etc. d. [6 pts] Pinning nodes (fixing node positions): 1. Modify the html so that when you double click a node, it pins the node’s position such that it will not be modified by the graph layout algorithm (note: pinned nodes can still be dragged around by the user but they will remain at their positions otherwise). Node pinning is an effective interaction technique to help users spatially organize nodes during graph exploration. 2. Mark pinned nodes to visually distinguish them from unpinned nodes, e.g., pinned nodes are shown in a different color, border thickness or visually annotated with an “asterisk” (*), etc. 3. Double clicking a pinned node should unpin (unfreeze) its position and unmark it. Q2 Deliverables: The directory structure should be as follows: Q2/ graph.html explanation.txt graph.js, graph.css (if not included in graph.html) Q3 [15 pts] Scatter plots Tutorial: Making a scatter plot Use the dataset provided in the file data.tsv (in the folder Q3) to create two scatter plots. 1 a. [8 pts] Create a scatter plot with the distribution feature on the Y-axis and the body mass feature on the X-axis. Use different symbols and colors to indicate the different species: ● Red circles for Lagomorpha ● Blue squares for Didelphimorphia ● Green triangles for Dasyuromorphia b. [2 pts] Add a legend to the scatter plot to show how species names map to the colored symbols. c. [3 pts] Create another scatter plot using the same data, symbols, and legend as above, but use the log scale instead for both axes. Note: The two scatter plots should be placed on a single html page, one after the other, as shown in Figure 1; your plots’ visual design can be different from what is shown. d. [2 pts] Explain in no more than 50 words, in explanation.txt, when we may want to use log scales in charts (e.g., in scatter plots). 1 Derived from source: http://www.esapubs.org/archive/ecol/E084/094/#data 4 Figure 1. Example of how the two scatter plots should be arranged on a single HTML page. First show the plot from part a, then the one from part c. Q3 Deliverables: The directory structure should be organized as follows: Q3/ scatterplot.(html / js / css) explanation.txt scatterplot.(pdf / png) data.tsv ● scatterplot.(html / js / css) – the html/js/css files created. ● explanation.txt – the text file with your answer for 3d. ● scatterplot.(pdf / png) – a screenshot (png or pdf format) showing the two scatter plots created above. ● data.tsv – the dataset 5 Q4 [15 pts] Heatmap and Select Box Example: 2D Histogram, Select Options Use the dataset provided in heatmap.csv (in the folder Q4) that describes power usage (kWh) across 2 multiple zip codes in Los Angeles and visualize it using D3 heatmaps. a. [6 pts] Create a heatmap of the power usage over time for zip code 90077. Place the month on the heatmap’s horizontal axis and the year on its vertical axis. Power readings will be represented by colors in the heatmap. b. [3 pt] Add axes and legends to both charts similar to the 2D Histogram example. Instead of placing the month number on the horizontal axis, place the name of the month (“Jan”, “Feb”, “Mar”, etc.). Use d3.axis()’s member function .tickFormat() to provide a custom format to each tick value on the axis. c. [6 pt] Now create a drop down select box with D3 that is populated with the unique zip codes in ascending order. When the user selects a different zip code in this select box, the heatmap for power usage should be updated with the values corresponding to the selected zip code. The default zip code when the page loads should be 90077. 2 Source: https://catalog.data.gov/dataset/water-and-electric-usage-from-2005-2013-83298 6 Q4 Deliverables: The directory structure should look like (remember to include the d3 library): Q4/ heatmap.(html / js /css) heatmap.(png / pdf) heatmap.csv ● heatmap.(html / js/ css) – the html / js / css files created. ● heatmap.(png / pdf) – a screenshot (png or pdf format) of the plots created in Q4.b ● heatmap.csv – the dataset Q5 [25 pts] Sankey Chart Example: Sankey diagram from formatted JSON Formula One racing is a championship sport in which race drivers represent teams to compete for points over several races (also called Grand Prix) in a season. The team with the most points at the end of a season wins the prestigious Formula One World Constructors’ Championship award. You will visualize the flow of points for the races held in 2016 . The drivers win points according to their final 3 standing in each race, which finally get added to their respective team’s total. Note: The implementation of certain parts in this question may be quite challenging. Figure 2. Example Sankey Chart visualizing the flow of points for the 2015 season 3 Source: http://ergast.com/mrd/ 7 a. [15 pts] Create a Sankey Chart using the provided datasets (races.csv and teams.csv) in the Q5 folder. The chart should visualize the flow of points in the order: race → driver → team You must use the sankey.js provided in the lib folder. You can keep the blocks’ vertical positions static. Your chart should look similar to the example Sankey Chart for the 2015 season as shown in the above image. Note: For this part, you will have to read in the csv files and combine the data into a format that can be passed to the sankey library. To accomplish this, you may find the following javascript functions useful: d3.nest(), array.filter(), array.map() b. [6 pts] Use the d3-tip library to add tooltips as shown in the above image. You are welcome to make your own visual style choices using css properties. Note: You must create the tooltip by only using d3.tip.v0.6.3.js p resent in the lib folder. c. [4 pts] From the visualization you have created, determine the following: 1. [1 pt] Which driver won the Grand Prix 2016? 2. [1 pt] Which team won the Grand Prix 2016? 3. [1 pt] Which driver won the Spanish Grand Prix? 4. [1 pt] Which team has the maximum number of players? Put your answers in observations.txt. Modify the template provided to you (in Q5 folder) by replacing team_name/driver_name with your answer Sample observations.txt 1.driver_name 2.team_name 3.driver_name 4.team_name Q5 Deliverables: The directory structure should be as follows: Q5/ races.csv teams.csv viz.(html/js/css) observations.txt ● races.csv and teams.csv – the data sets (unmodified) ● viz.(html/js/css) – The html, javascript, css to render the visualization in Q5.a and b. ● observations.txt – Your answer for Q5.c. 8 Q6 [20 pts] Interactive visualization Mr. Fluke runs a small company named FooBar. His company manufactures eight products around the year. He wants you to create an interactive visualization report using D3 so that he can see the total revenue generated per product type and the revenue breakdown across product types for the four quarters in 2015. Use the dataset provided in the Q6 folder. Integrate the dataset provided in dataset.txt directly in an array variable in the script. Example:a. [5 pts] Create a horizontal bar chart with its vertical axis denoting the product names and its horizontal axis denoting the total revenue. Each bar should have the total revenue amount in dollars labelled inside it. Refer to the example shown in Figure 6a. b. [10 pts] On hovering over a bar, another smaller bar chart representing the revenue of each quarter for that product should be displayed in the top right corner. For example, product B generates revenue of $959, $1653, $1999 and $697 for the four quarters. On hovering over the bar representing product B, a bar chart depicting these 4 values is displayed. See Figure 6b for an example. c. [3 pts] On mouse out, the bar chart of the quarters should no longer be visible. d. [2 pts] On hovering over any horizontal bar representing a product, the color of the bar should change. You can use any color that is visually distinct from the regular bars. On mouseout, the color should be reset. Note: The vertical axis of the chart should use product names as labels for the products, and quarter numbers for the quarters. Figure 6a. Bars representing total revenue of each product. 9 Figure 6b. On hovering over the bar for product B, a smaller bar chart representing the revenue generated by product B in the 4 quarters is displayed at the top right corner. Q6 Deliverables: The directory structure should be as follows: Q6/ interactive.(html/js/css) interactive.(html/js/css) – The html, javascript, css to render the visualization in Q6 (dataset.txt is not required to be included in the final directory structure as the data provided in dataset.txt should have already been integrated into the “data” variable). Q7 [20 pts] Choropleth Map of College Data Example: Unemployment rates Use the provided datasets in sat_scores.csv, us.json and median_earnings.json (in the folder Q7) and visualize them as a choropleth map. ● Each record in sat_scores.csv represents a college and is of the form <id,name,sat_avg> , where id corresponds to the state the college is in, name corresponds to the name of the college and sat_avg corresponds to the average SAT score of admitted students. ● The median_earnings.json file contains a list of JSON objects, each having two fields: an id field corresponding to a state in the United States, and a median_earnings field corresponding to the median earnings of students in that state after 10 years. ● The us.json file is a TopoJSON topology containing three geometry collections: counties, states, and nation. 10 CSE 6242/CX 4242 Figure 4. Reference example for Choropleth Maps a. [15 pts] Create a choropleth map using the provided datasets. The color of each state should correspond to the median earnings in that state, i.e., darker colors correspond to higher median earnings in that state and lighter colors correspond to lower median earnings in that state. Add a legend showing how colors map to median earnings. Use d3-queue (in the lib folder) to easily load data from multiple files into a function . Use topojson (present in lib) to draw the choropleth map. 4 b. [5 pts] Add a tooltip using the d3.tip library (in the lib folder) that, on hovering over a state, shows the top 5 colleges in that state with the highest SAT scores, along with those scores. Note: You must create the tooltip by only using d3.tip.v0.6.3.js present in the lib folder. Q7 Deliverables: The directory structure should be organized as follows: Q7/ q7.(html/js/css) sat_scores.csv median_earnings.json us.json ● q7.(html /js /css )- The html/js/css file to render the visualization. ● sat_scores.csv and median_earnings.json – The datasets used. ● us.json – Dataset needed to draw the map. 4 d3-queue evaluates a number of asynchronous tasks concurrently — in this question, each task would be loading one data file. When all tasks have finished, d3-queue passes the results to a user-defined callback function. 11 CSE 6242/CX 4242 Important Instructions on Folder structure The directory structure must be as follows. The files that should be included in each question’s folder (e.g., Q1 for question 1) have been clearly specified at the end of each question’s problem description above. HW2-LastName-FirstName/ |— lib/ |—- d3.v3.min.js |—- d3.tip.v0.6.3.js |—- sankey.js |— Q1/ |—- … |— Q2/ |—- … |— Q3/ |—- … |— Q4/ |—- … |— Q5/ |—- … |— Q6/ |—- … |— Q7/ |—- … 12 CSE 6242/CX 4242
