CSE 6242 / CX 4242: Data and Visual Analytics | Georgia Tech | Fall 2022 HW 2: Tableau, D3 Graphs and Visualization
Important Notes ………………………………………………………………………………………………………………………..2 Submission Instructions……………………………………………………………………………………………………………..2 Grading and Feedback ………………………………………………………………………………………………………………2 Download the HW2 Skeleton before you begin ………………………………………………………………………….3 Homework Overview………………………………………………………………………………………………………………….3 Q1 [25 points] Designing a good table. Visualizing data with Tableau………………………………………………..4
Setting Up Tableau ………………………………………………………………………………………………………………..4 Connecting to Data ………………………………………………………………………………………………………………..4 Table and Chart Design ………………………………………………………………………………………………………….5
Important Points about Developing with D3 in Questions 2–5…………………………………………………….8 Q2 [15 points] Force-directed graph layout ……………………………………………………………………………………9 Q3 [15 points] Line Charts ………………………………………………………………………………………………………..11 Q4 [20 points] Interactive Visualization ……………………………………………………………………………………….16 Q5 [25 points] Choropleth Map of Board Game Ratings ………………………………………………………………..21
Copyright By PowCoder代写 加微信 powcoder
Important Notes
1. Submit your work by the due date on the course schedule.
a. Every assignment has a 48-hour grace period. You may use it without asking us.
b. Before the grace period expires, you may resubmit as many times as you need to.
c. The grace period is a lenient buffer for resolving last minute issues. We do not recommend
starting new work or modifying existing work during the grace period.
d. TA assistance is not guaranteed during the grace period.
e. Submissions during the grace period will display as “late” and will not incur a penalty.
f. We will not accept any submissions after the grace period.
2. Always use the most up-to-date assignment (version number at the bottom right of this document).
3. You may discuss ideas with other students at the “whiteboard” level (e.g., how cross-validation works, use HashMap instead of array) and review any relevant materials online. However, each student
must write up and submit the student’s own answers.
4. All incidents of suspected dishonesty, plagiarism, or violations of the Georgia Tech Honor Code will
be subject to the institute’s Academic Integrity procedures, directly handled by the Office of Student Integrity (OSI). Consequences can be severe, e.g., academic probation or dismissal, a 0 grade for assignments concerned, and prohibition from withdrawing from the class.
Submission Instructions
Carefully read and follow the high-level instructions below, and the detailed instructions in each question.
1. Submit ALL deliverables via Gradescope. We will not accept submissions anywhere else.
2. Submit all required files, as specified at the beginning of each question. We will not grade any
submissions that deviate from the specified format (extra files, misnamed files, etc.).
3. Each submission and its score will be recorded and saved by Gradescope. By default, Gradescope uses your last submission for grading. To use a different submission, you MUST “activate” it
(click “Submission History” button at bottom toolbar, then “Activate”).
Grading and Feedback
The maximum possible score for this homework is 100 points. Students can choose to complete any 90 points worth of work to receive 100% for this assignment, and can receive more than 100% if additional work is submitted. For example, if a student scores 100 points, that student will receive 111% for the assignment.
We will grade all questions using the Gradescope platform. Question 1 will be manually graded. Questions 2-5 are auto-graded. Keep the following in mind:
You can access Gradescope through Canvas.
You may upload your code periodically to Gradescope to obtain feedback on your code. Gradescope will auto-grade your submission using the same test cases that we use to grade your work.
You must not use Gradescope as the primary way to test your code’s correctness, since it provides only a few test cases, and error messages may not be as informative as local debuggers. Iteratively develop and test your code locally, write more test cases, and follow good coding practices. Use Gradescope mainly as a “final” check.
Gradescope cannot run code that contains syntax errors. If Gradescope is not running, verify:
a. Your code is free of syntax errors (by running locally)
b. All methods have been implemented
c. You have submitted the correct file with the correct name
Do not share links to your Gradescope submissions in public posts
When many students use Gradescope simultaneously, it may slow down or fail to communicate with the tester. It can become even slower as the submission deadline approaches. You are responsible for submitting your work on time.
Download the HW2 Skeleton before you begin Homework Overview
“Visualization gives you answers to questions you didn’t know you have” –
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 questions use data on the same topic to highlight the uses and strengths of different types of visualizations. The data comes from BoardGameGeek and includes games’ ratings, popularity, and metadata.
Below are some terms you will often see in the questions:
Rating – a value from 0 to 10 given to each game. BoardGameGeek calculates a game’s overall rating in different ways including Average and Bayes, so make sure you are using the correct rating called for in a question. A higher rating is better than a lower rating.
Rank – the overall rank of a boardgame from 1 to n, with ranks closer to 1 being better and n being the total number of games. The rank may be for all games or for a subgroup of games such as abstract games or family games.
Q1 [25 points] Designing a good table. Visualizing data with Tableau.
Goal Design a table, a grouped bar chart, and a stacked bar chart with filters in Tableau. Technology Tableau Desktop (Don’t use Tableau Prep)
: After selecting HW2 – Q1, click Submit Images. You will be taken to a list of questions for your assignment. Click Select images and submit the following four PNG images under the corresponding questions:
● table.png: Image/screenshot of the table in Q1.a
● grouped_barchart.png: Image of the chart in Q1.b
● stacked_barchart_1.png: Image of the chart in Q1.c after filtering data for
Max.Players = 2
● stacked_barchart_2.png: Image of the chart in Q1.c after filtering data for
Max.Players = 4
Setting Up Tableau
Install and activate Tableau Desktop by following “HW2 Instructions” on Canvas. The product activation 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, use the 14-day trial version of Tableau Online: 1. Visit https://www.tableau.com/trial/tableau-online
2. Enter your information (name, email, GT details, etc.)
3. You will then receive an email to access your Tableau Online site
4. Go to your site and create a workbook
If neither of the above methods work, use 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.
Connecting to Data
It is optional to use Tableau for Q1a. Complete all parts of Q1b-c 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.).
Q1 will require connecting Tableau to multiple data sources. You can connect to multiple data sources within one workbook by following the directions here.
a. Open Tableau, and when prompted to connect to a data source, choose To a File – Text file. Select the data file (popular_board_game.csv) from the skeleton.
b. We recommend renaming the data connection to something that makes sense to you, since you will have multiple connections in this workbook. (Clicking on the text lets you edit it.)
c. You can use either a live connection or data extract. (You can read a comparison of Tableau’s data connection options here.) Click the small square with a graph on the bottom bar next to “Data Source” to create a new worksheet. You now have the data needed for Q1b!
a. You will need a data-world account (created using your preferred email) to access the data
for Q1c. Add a new data source by clicking on Data – Source.
b. When prompted to connect to a data source choose To a Server – Web Data Connector. You may need to select “More…” to see Web Data Connector as an option.
c. Enter this URL (with SQL query embedded) to connect to part of the data.world data set on board games. You may be prompted to log in to data-world and authorize Tableau. Do not edit the provided SQL query.
d. Click the small square with the graph on the bottom bar again to create another new worksheet, and Tableau will then automatically create a data extract. You now have the data needed for Q1c! (Live data connections are not an option when connecting to data-world. You can read a comparison of Tableau’s data connection options here.)
4. 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.
Table and Chart Design
a. [5 points] Good table design. You want to help a board game design company analyze the current popular board game data from the website BoardGameGeek. Create a single well-designed table to visualize the data contained in popular_board_game.csv. You can use any tool (e.g., Excel, HTML, Pandas, Tableau) to create the table. If you choose to use a tool other than Tableau to make the table, you will still need to load the same data into Tableau for use in Q1b.
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 (Solo supported, Solo Not Supported), show:
1. Total number of games in each category (fighting, economic, …)
2. The most representative game (game with the highest number of ratings) in each category. If more
than one game has the same rating, pick the game that you prefer.
3. Average rating of games in each category (use simple average), rounded to 2 decimal places
4. Average playtime of games in each category, rounded to 2 decimal places
5. In the bottom left corner below your table, include your GT username. (If you decide to use Tableau,
this can be done by including a caption when exporting an image of a worksheet or by adding a text
box to a dashboard. Refer to the tutorial here.)
6. Save the table as table.png. (If you decide to use Tableau, to save a worksheet image, go to
Worksheet → Export → Image. And to save a dashboard image, go to Dashboard → Export → Image. Do not simply take a screenshot in Tableau since your image should have a high resolution.) However, you can take a screenshot If you decide to use HTML, Pandas, etc.
You may decide on the most meaningful column names to use, the number of columns, and the column order. Keep suggestions from the lecture in mind when designing your table. You are not limited to using only the techniques described in the 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 students, review lecture slides 43 and 44.
b. [10 points] Grouped bar chart. You want to help this board game design company better understand the relationship between game playtime and game category among popular board games. Visualize
5 version 0
popular_board_game.csv as a grouped bar chart. Your chart should display game category (e.g., fighting, economic) along the horizontal axis and game count along the vertical axis. Also show game playtime (e.g., <=30, (30, 60]) for each game category. Note: Do not differentiate between 'support solo' and 'non-support solo' for this question.
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. 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:
1. Design a vertical grouped bar chart. For each game category, show the game count for each game playtime.
2. Include clearly labeled axes, a clear chart title, and a legend.
3. In the bottom left corner of your image, include your GT username. In Tableau, this can be done by
including a caption when exporting an image of a worksheet or by adding a text box to a dashboard.
Refer to the tutorial here. Note: The default Tableau caption can be deleted or rewritten.
4. Save the chart as grouped_barchart.png
5. To save a worksheet image, go to Worksheet → Export → Image. To save a dashboard image, go to
Dashboard→Export Image. Screenshots are not acceptable.
Figure 1b: Example of a grouped bar chart. 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.
c. [10 points] Stacked bar chart. After understanding the relationship between game category and their playtime, the game company now wants to know the count of games in different category, and if there is any relationship between game categories and how they are played (their playing mechanics). They also want to know how player size changes this information.
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
6 version 0
bar charts is often debated—sometimes, they can be confusing, difficult to understand, and may make data series comparisons challenging.)
Instructions:
1. Create a 'Worksheet' with a stacked bar chart that shows game count for each game's playing mechanics (sub-bars) for each game category
2. This data contains duplicate rows because each row represents a distinct game. Do not remove duplicate rows from the data when creating your chart.
3. Display game counts along the vertical axis and category along the horizontal axis
4. Include clear axes labels, a clear chart title, and a legend
5. Create a dashboard using the sheet you created in the step 1
6. Add a filter for number of 'Max.Players' allowed in each game. Then update the chart using this filter
to generate the following chart images (Refer to the tutorial here on how to add filter in a dashboard.
Make sure to add 'Max.Players' in the filter shelf in the Worksheet first, like this.):
a. Select "2 Players" only in the filter. Save the resulting chart as 'stacked_barchart_1.png'
b. Select "4 Players" only in the filter. Save the resulting chart as 'stacked_barchart_2.png'
c. Both images must include your GT username in the bottom left. This can be added using a
text box. Refer to the tutorial here. Note: Text boxes can only be added to a dashboard in
Tableau, not a worksheet.
d. In each image, the filter must be visible. If you are using Tableau Online, you may need to
add your worksheet containing the chart to a dashboard and then download an image of the dashboard that contains both the filter and the chart.
Note: To save a dashboard image, go to Dashboard - Export Image. Do not submit screenshots. Note: Your Tableau workbooks will not be graded. Your images should be clear and of high resolution.
Figure 1c: 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.
7 version 0
Important Points about Developing with D3 in Questions 2–5
We highly recommend that you use the latest Chrome browser to complete this question. We will grade your work using Chrome v92 (or higher).
You will work with version 5 of D3 in this homework. You must NOT use any D3 libraries (d3*.js) other than the ones provided in the lib folder.
For Q3–5, your D3 visualization MUST produce a DOM structure as specified at the end of each question. Not only does the structure help guide your D3 code design, but it also enables your code to be auto-graded (the auto-grader identifies and evaluates relevant elements in the rendered HTML). We highly recommend you review the specified DOM structure before starting to code.
You need to setup a local HTTP server in the root (hw2-skeleton) folder to run your D3 visualizations, as discussed in the D3 lecture (OMS students: the video "Week 5 - Data Visualization for the Web (D3) - Prerequisites: JavaScript and SVG". Campus students: see lecture PDF.). The easiest way is to use http.server for Python 3.x. (for more details, see link).
All d3*.js files in the lib folder must be referenced using relative paths, e.g., "../lib/
It is incorrect to use an absolute path such as:
For questions that require reading from a dataset, use a relative path to read in the dataset file. For example, suppose a question reads data from earthquake.csv, the path should simply be “earthquake.csv” and NOT an absolute path such as “C:/Users/polo/hw2-skeleton/Q/earthquake.csv”.
You can and are encouraged to decouple the style, functionality and markup in the code for each question. That is, you can use separate files for CSS, JavaScript and html.
Q2 [15 points] Force-directed graph layout
Goal Create a network graph shows relationships between games in D3. Use interactive features like pinning nodes to
程序代写 CS代考 加微信: powcoder QQ: 1823890830 Email: powcoder@163.com