Assignment 4 80 points Due March 8, 2022 11.59 p.m The following assignment further builds on your understanding and usage of bar plots, scatter plots, scales and axes. In this assignment we will design complex plots with static interactivity features. We will analyze a subset of Summer Olympics dataset for this assignment. ? This assignment must be completed individually. ? All solutions must be written in the index.html, app.js,styles.css files provided with the assignment. ? You are required to use style classes in styles.css only. Do not add style classes in index.html. ? You must submit the assignment on Gradescope. More detailed information can be found at the end of this document. ? This assignment will take time. We recommend that you start early on this assignment Part A (index.html, app.js,styles.css) (80+20 points) In the last assignment you created some static interactive plots. In this assignment we will make plots that are dynamic and interactive. We have provided you with a dataset along with the assignment files. You will create visualizations based on questions to answer the problems. 1. [20 Points] Create an interactive bar plot to show the variation of total sales of video games in 4 regions - North America, Japan, Europe, Other. Consider the following years : 2011-2015. We have provided you with a radio button for every year. The interactivity will be based on the selection of the radio button. The plot shown in the svg should correspond to the year selected in the radio buttons. 2. [20 Points] Create a streamgraph to show variation of total sales of video games for 4 regions(North America, Japan, Europe, Other) for the following years: 2006-2015. Include appropriate axes, scales and legend for your plot. 3. [20 Points] Create an interactive connected scatter plot to show the variation of total sales of video games over the following years : 2011-2015. We have provided you with a radio button for every region(North America, Japan, Europe, Other) . The interactivity will be based on the selection of the radio button. The plot shown in the svg should correspond to the region selected in the radio buttons. Additionally, provide a tooltip which will display the value when you hover your mouse cursor over the scatter data point. 4. [20 Points] Create an interactive heat plot to show variations of sales for each region and genre. Here your two keys will be region and genre and the value will be total sales corresponding to that region and that genre. Provide a tooltip which will display the value when you hover your mouse cursor over the heat plot tile. 5. [extra credit 20 points] Create a basic node-link diagram using force objects to visualize the following data given below. Note: We have also provided this data in the assignment zip file in app.js under question 5. Data for Q5: data={ "nodes":[ {id: 1, name: 'USA', x: 87, y: 145}, {id: 2, name: 'CHINA', x: 176, y: 94}, {id: 3, name: 'INDIA', x: 249, y: 162}, {id: 4, name: 'RUSSIA', x: 208, y: 253}, {id: 5, name: 'JAPAN', x: 105, y: 246}, {id: 6, name: 'FRANCE', x: 345, y: 120} ], "edges":[{'source': {'id': 2, 'name': 'CHINA', 'x': 176, 'y': 94}, 'target': {'id': 6, 'name': 'FRANCE', 'x': 345, 'y': 120}}, {'source': {'id': 1, 'name': 'USA', 'x': 87, 'y': 145}, 'target': {'id': 4, 'name': 'RUSSIA', 'x': 208, 'y': 253}}, {'source': {'id': 1, 'name': 'USA', 'x': 87, 'y': 145}, 'target': {'id': 6, 'name': 'FRANCE', 'x': 345, 'y': 120}}, {'source': {'id': 5, 'name': 'JAPAN', 'x': 105, 'y': 246}, 'target': {'id': 6, 'name': 'FRANCE', 'x': 345, 'y': 120}}, {'source': {'id': 1, 'name': 'USA', 'x': 87, 'y': 145}, 'target': {'id': 5, 'name': 'JAPAN', 'x': 105, 'y': 246}}, {'source': {'id': 2, 'name': 'CHINA', 'x': 176, 'y': 94}, 'target': {'id': 3, 'name': 'INDIA', 'x': 249, 'y': 162}}, {'source': {'id': 2, 'name': 'CHINA', 'x': 176, 'y': 94}, 'target': {'id': 5, 'name': 'JAPAN', 'x': 105, 'y': 246}}, {'source': {'id': 3, 'name': 'INDIA', 'x': 249, 'y': 162}, 'target': {'id': 6, 'name': 'FRANCE', 'x': 345, 'y': 120}}] } Submission Guidelines 1) Your code should render plots according to the requirement of the question when run. Create a .zip file of the completed index.html, app.js and styles.css, along with a .pdf of the output in the browser and upload it on Gradescope.

Attachments:

assignment-4.....pdf