[SOLVED] Cse6242-data and visual analytics

“Visualization gives you answers to questions you didn’t know you have” – Ben Schneiderman This homework focuses on exploring and creating data visualizations using two of the most popular tools in the field. Data visualization is an integral part of exploratory analysis and communicating key insights. All of the questions in this homework use data on the same topic in order to highlight some of the uses and strengths of different types of visualizations. The data for this homework comes from BoardGameGeek and includes information on games’ ratings, popularity, and metadata.Part 1 of the homework uses Tableau to connect to online data which feeds multiple visualizations including a table and bar charts. Part 2 of the homework uses D3 and includes graphs with different scales, network graphs, and a map.Below are some terms you will often see in the questions:In Q1, you will design a table, a grouped bar chart, and a stacked bar chart with filters. The data for this question is hosted online and will help you practice connecting Tableau to online data sources.Questions 2-5 highlight different features of D3. The provided skeletons scaffold coding in D3 with the most complete template code being provided for Q2. Q4 and Q5 provide scaled back templates. Q3 does not provide template code, and is an excellent opportunity to separate html, css, and js files because a separate js file can be used for each of the visualizations.Q2: a network graph shows relationships between games. You will add interactive features like pinning nodes to give the viewer some control over the visualization.Q3: you will explore temporal patterns in the BoardGameGeek data, using line charts to compare how the number of ratings grew from month to month for 8 games. You will also integrate additional data about board game rankings onto these line charts and explore the effect of axis scale choice on what information is emphasized in the graph.Q4: you will create line charts that use interactive elements to display additional data. This time, the line charts will show the number of games with each rating for multiple years. You will then implement a bar chart that appears when you mouse over a point on the line chart.Q5: you will create a choropleth map to explore the average rating of each game in different countries.Note the following important points <script type=”text/javascript” src=”C:/Users/polo/hw2-skeleton/lib/d3.v5.min.js”></script>Q1 ] Designing a good table. Visualizing data with Tableau.Setting Up TableauTableau has provided us with student licenses for Tableau Desktop, available for Mac and Windows. Go to Tableau and select “Products/Tableau Desktop”. After installation, you will be asked to provide an activation key, which you can find on the Canvas page for this assignment. This key is for your use in this course only. Do not share the key with anyone. If you already have Tableau installed on your machine, for example from a previous trial, you may use this key to reactivate it.If you do not have access to a Mac or Windows machine, please use the 14-day trial version of Tableau Online:One final option, if neither of the above methods work, is to take advantage of Tableau for Students. Follow the link and select “Get Tableau For Free”. You should be able to receive an activation key which offers you a one-year use of Tableau Desktop at no cost by providing a valid Georgia Tech email. Note that it is unclear whether Tableau intends for these licenses to be renewable, so you may only be eligible to receive one in the event that you have never used a Tableau for Students license before. Connecting to the Data Complete all parts of Q1 using a single Tableau workbook. (Technically, you could use multiple workbooks, but we do not recommend that here. The directions below assume you are using one workbook.) If you are unable to connect to data.world for any reason, flat data files for Q1 have also been provided in the skeleton folder. The preferred data source is connecting online as that provides valuable experience (and something you may choose to use in your final projects). The provided csv files are identical to those hosted online and can be loaded directly into Tableau. That is, if data.world does not work for you, use the csv files. The company is interested in grouping popular games into “support solo” (minimum player = 1) and“not support solo” (minimum player > 1), because single-player games require a different design strategy.Instructions:Your table should clearly communicate information about these two groups (games that support solo & games that do not support solo) simultaneously. For each group, show:Refer to the tutorial here. Note: If there is no game under a particular group and category, think about how to visually represent missing data in your table. You may decide on the most meaningful column names to use, the number of columns, and the column order. Keep suggestions from lecture in mind when designing your table. You are not limited to use only the techniques described in lecture. For OMS students, the online lecture video pertaining to this topic is Week 4 – Fixing Common Visualization Issues – Fixing Bar Charts, Line Charts. For campus student, please review slide 52 and onwards of the lecture slides.  The main goal here is for you to get familiarized with Tableau. Thus, we keep this part more open-ended, so you can practice making design decisions. We will accept most designs from you all. We show one possible design in Figure 1a, based on the tutorial from Tableau, and you are not limited to the techniques presented there. Instructions:Figure 1a: Example of a grouped bar chart. Your chart may appear different, and can earn full credit if it meets all stated requirements. Your submitted image should include your GT username in the bottom left.  A stacked bar chart is one way that can help understand this kind of information, where each bar represents a game category. A bar’s length represents the total game count in that category. For a bar, its “sub bars” show how games are divided into different game mechanics. (Optional reading: the effectiveness of stacked bar charts is often debated — sometimes, they can be confusing, difficult to understand, and may make data series comparisons challenging.) Instructions:Figure 1b: Example of a stacked bar chart after selecting “4 Players” in Max.Players filter. Your chart may appear different, and can earn full credit if it meets all the stated requirements. Your submitted image should include your GT username in the bottom left.Q1 Deliverables: The directory structure should be as follows: Q1/table.png  grouped_barchart.png stacked_barchart_1.png stacked_barchart_2.png  Note: Your Tableau workbooks will not be graded. Your images should be clear and of high resolution. 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 Q2 folder) and an undirected graph dataset of boardgames, board_games.csv file (in the Q2 folder). The dataset for this question had inspiration from this post on reddit network visualization using boardgames in which the author calculates the similarity between board games based on categories and game mechanics where the edge value between each board game (node) is the total weighted similarity index. This dataset has been modified and simplified for this question and does not fully represent actual data found from this post. Note: You are welcome to split graph.html into graph.html, graph.css, and graph.js. Make sure that all paths in your code are relative paths. Nonfunctioning code will result in a   Note:Regardless of which scale you decide to use, you should avoid extreme node sizes, which will likely lead to low-quality visualization (e.g., nodes that are mere points, barely visible, or of huge sizes).Note: D3 v5 does not support d.weight (which was the typical approach to obtain node degree in D3 v3). You may need to calculate node degrees yourself. Example relevant approach is here.  nodes in a different color, border thickness or visually annotated with an “asterisk” (*), etc.  Figure 2a. Example of Visualization with pinned node (yellow). Your chart may appear different, and can earn full credit if it meets all the stated requirements.Q2 Deliverables:The directory structure should be as follows: Q2/graph.(html / js / css)board_games.csv  Use the dataset provided in the file boardgame_ratings.csv (in the Q3 folder) to create line charts. Refer to the tutorial for line chart here. Note: You will create four charts in this question, which should be placed one after the other on a single HTML page, similar to the example image below (Figure 3). Note that your design need NOT be identical to the example.      Note: the horizontal axes should be kept in linear scale, and only the vertical axes are affected. Hint: You may need to carefully set the scale domain to handle the 0s in data.    Figure 3a: Example line chart. Your chart may appear different, and can earn full credit if it meets all stated requirements.Figure 3b: Example of a line chart with rankings. Your chart may appear different, and can earn full credit if it meets all stated requirements. Figure 3c-1: Example of a line chart using square root scale. Your chart may appear different, and can earn full credit if it meets all stated requirements. Figure 3c-2: Example of a line chart using log scale. Your chart may appear different, and can earn full credit if it meets all stated requirements. Q3 Deliverables:The directory structure should be organized as follows:Q3/     boardgame_ratings.csv     linecharts.(html / js / css)     linecharts.pdfexplanation.txt for Q3.a, one for Q3.b and two for Q3.c). You should print the HTML page as a PDF file, and each PDF page shows one chart (hint: use CSS page break). Clearly title the charts as instructed (see examples in Figure 3). Make sure your Georgia Tech username that you added in the last chart (see example figure 3c-2) is shown in this PDF document.Use the dataset average-rating.csv provided in the Q4 folder to create an interactive frequency polygon line chart. This dataset contains a list of games, their ratings and supporting information like numbers of users who rated and year it was published. In the data sample below, each row under the header represents a game name, year, average rating, and number of users who rated the game. name,year,average_rating,users_rated Codenames,2015,7.71148,51209King of Tokyo,2011,7.23048,48611  All axes must automatically adjust based on the data. Do not hard-code any values.  Figure 4b shows an example line chart design. Yours may look different, and can earn full credit if it meets all stated requirements. Note: The data provided in average-rating.csv requires some processing for aggregation. All aggregation must only be performed in JavaScript; you must NOT modify average-rating.csv. That is, your code should first read the data from .csv file as is, then you may process the loaded data using JavaScript.Figure 4b: Line chart representing count of board games by rating for each year. Your chart may appear different, and can earn full credit if it meets all stated requirements. Interactivity and sub-chart. In the next few sub-questions, you will create event handlers to detect mouseover and mouseout events over each circle that you added in Q4.b. Figure 4c: Bar chart representing the number of users who rated the top 5 board games with the rating 6 in year 2019. Your chart may appear different, and can earn full credit if it meets all stated requirements. Note: No bar chart should be displayed when the count of games is 0 for hovered year and rating. Axes: All axes should automatically adjust based on the data. Do not hard-code any values.      The graph should exhibit interactivity similar to Figure 4f where the mouse is over the larger circle. Figure 4f: Line chart and bar chart demonstrating interactivity. Your chart may appear different, and can earn full credit if it meets all stated requirements. Q4 Deliverables:  The directory structure should be as follows:Q4/interactive.(html/js/css)     average-rating.csv Choropleth maps are a very common visualization in which different geographic areas are colored based on the value of a variable for each geographic area. You have most probably seen choropleth maps showing quantities like unemployment rates for each county in the US, or the number of confirmed COVID–19 cases per 10,000 peopleat the county level. We will use choropleth maps to examine the popularity of different board games across the world. We have provided two files in the Q5 folder, ratings-by-country.csv and world_countries.json.countries.   Use promises (part of the d3.v5.min.js file present in the lib directory; there is no need to download or install anything) to easily load data from multiple files into a function, and use topojson (present in the lib folder) to draw the map. Many countries have no ratings for some games—these should be colored gray. For those countries that do have ratings for the selected game, use a quantile scale to generate the color scheme based on the average rating by country. Color them along a gradient of exactly 4 gradations from a single hue, with darker colors corresponding to higher rating values and lighter colors correspond to lower values (see gradient examples at Color Brewer). About Scaling Colormaps: In order to create effective visualizations that highlight patterns of interest, it is important to carefully think about the relationship between the range and distribution of values being displayed (the domain) and the color scale the values are mapped to (the range). Many types of mapping functions are possible, e.g., we could use a linear mapping where the lowest game rating is mapped to the first value in the color scheme, the highest game rating is mapped to the highest value in the color scheme, and intermediate ratings are mapped to hues in the middle. This article illustrates the value of choosing appropriate endpoints for linear color maps, or log-scaling the domain so that large but relatively infrequent values do not cause differences between smaller values to be washed out. In our case, most board games have similar average ratings across countries, e.g. Catan has an average rating close to 9.3 in almost all countries, making it challenging to perceive relative differences in popularity. To address this, we can compute quantiles of the domain data—game rating values that divide the ordered list of average ratings per country into roughly equally-sized groups. Here, we will get 4 groups, a special case of quantiles called“quartiles” since the data are divided into quarters.  Note: You must create the tooltip by only using d3-tip.min.js in the lib folder. Figure 5a: Reference example for Choropleth Map showing average rating of Catan. Your chart may appear different and earn full credit as long as it meets all stated requirements.Figure 5b: Reference example for Choropleth Map showing tooltip. Your chart may appear different and earn full credit as long as it meets all stated requirements. Figure 5c: Reference example showing updated Choropleth and legend for Azul. Your chart may appear different and earn full credit as long as it meets all stated requirements. Q5 Deliverables:The directory structure should be organized as follows: Q5/choropleth.(html/js/css)     ratings-by-country.csv     world_countries.json  We understand that some of you may work on this assignment until just prior to the deadline, rushing to submit your work before the submission window closes.  Please take the time to validate that all files are present in your submission and that you have not forgotten to include any deliverables!  If a deliverable is not submitted, you will receive zero credit for the affected portion of the assignment — this is a very sad way to lose points, since you have already done the work!You are submitting a single zip file HW2-GTusername.zip (e.g., HW2-jdoe3.zip).The files included in each question’s folder have been clearly specified at the end of the question’s problem description.The zip file’s folder structure must exactly be (when unzipped): HW2-GTUsername/     lib/         d3.v5.min.js         d3-tip.min.jsd3-geo-projection.v2.min.js         d3-dsv.min.js         d3-legend.min.js         topojson.v2.min.js     Q1/         table.png          grouped_barchart.png         stacked_barchart_1.png         stacked_barchart_2.png     Q2/graph.(html / js / css)         board_games.csv     Q3/linecharts.(html / js / css)         linecharts.pdf         boardgame_ratings.csv         explanation.txt     Q4/interactive.(html / js / css)average-rating.csv     Q5/choropleth.(html / js / css)         ratings-by-country.csv         world_countries.json