CS计算机代考程序代写 SQL scheme python javascript Java js Excel algorithm 1 version 1

1 version 1

CSE 6242 / CX 4242: Data and Visual Analytics | Georgia Tech | Fall 2021

HW 2: Tableau, D3 Graphs and Visualization

Contents
Important Notes ……………………………………………………………………………………………………………………………. 1

Submission Instructions for Question 1 only …………………………………………………………………………………….. 1

Submission Instructions for Questions 2–5………………………………………………………………………………………. 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. ……………………………………………….. 3

Setting Up Tableau ……………………………………………………………………………………………………………………. 4

Important Points about Developing with D3 in Questions 2–5 ……………………………………………………… 7

Q2 [15 points] Force-directed graph layout………………………………………………………………………………………. 8

Q3 [15 points] Line Charts ……………………………………………………………………………………………………………. 10

Q4 [20 points] Interactive Visualization ………………………………………………………………………………………….. 14

Q5 [25 points] Choropleth Map of Board Game Ratings ………………………………………………………………….. 19

Important Notes

1. Submit your work by this assignment’s official 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. Submissions during the grace period will display as “late” and will not incur a penalty.

d. We will not accept any submissions after the grace period.

2. Always use the most up-to-date assignment (version number at bottom right of this document).

3. This advanced course expects students to submit code that runs and is free of syntax errors. Code
that does not run successfully will receive 0 credit.

4. You may discuss high-level 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.

5. 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.

6. Wherever you are asked for a written response, stay within the word limit or you may lose points.

Submission Instructions for Question 1 only

Submit a SINGLE zipped file via Canvas, called “HW2-GTusername.zip” that unzips to a folder called
“HW2-GTusername”, containing all the Question 1 files. Example: “HW2-jdoe3.zip” if GT account username
is “jdoe3”. Your GT username is the one with letters and numbers. Only .zip is allowed; no other format will
be accepted.

https://policylibrary.gatech.edu/student-affairs/academic-honor-code
http://osi.gatech.edu/
http://osi.gatech.edu/

2 version 1

a. Not following the specified folder structure will result in a deduction of 5 points.
b. You may re-submit your work before the grace period expires without penalty, but Canvas will mark

your submission as “late”.
c. Canvas automatically appends a “version number” to files that you re-submit. You do not need to worry

about these version numbers, and there is no need to delete old submissions. We will only grade
the most recent submission.

d. We will not accept deliverables via any other channels (e.g., Piazza).

Submission Instructions for Questions 2–5

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 via any other channels.
2. Submit all the required files, as specified at the beginning of each question. Any deviations from the

specified format (extra files, misnamed files, etc.) will cause your submission to not be graded.
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 the full 15% of the final course grade, and can receive more than 15% if additional
work is submitted. For example, if a student scores 100 points, that student will receive (100 / 90) * 15 =
16.67% course grade.

We will auto-grade questions Q2–5 using the Gradescope platform. Based on our experience, students
(you all!) benefit from using Gradescope to obtain feedback as they work on this assignment. Keep the
following important points in mind:

1. You can access Gradescope through Canvas.
2. You may upload your code periodically to Gradescope to obtain feedback for your code. This is

accomplished by having Gradescope auto-grade your submission using the same test cases that
we will use to grade your work. The test cases’ results may help inform you of potential errors and
ways to improve your code.

3. 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.

4. Gradescope cannot run code that contains syntax errors. If Gradescope is not running your
code, before seeking help, verify that:

a. Your code is free of syntax errors (by running it locally)
b. All methods have been implemented
c. You have submitted the correct file with the correct name

5. 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.

https://community.canvaslms.com/docs/DOC-10082
https://opensource.com/article/17/5/30-best-practices-software-development-and-testing

3 version 1

Download the HW2 Skeleton before you begin

Homework Overview

“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
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.

Q1 uses Tableau to connect to online data that feeds multiple visualizations including a table and bar
charts. Q2–Q5 uses D3 and includes graphs with different scales, network graphs, and a map.

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.

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 complete 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.

Q1 [25 points] Designing a good table. Visualizing data with Tableau.

Technology Tableau Desktop

Allowed Libraries NA

Max runtime NA

Deliverables Canvas: HW2-GTusername.zip containing Q1 files. The zip file’s folder structure must

https://poloclub.github.io/cse6242-2021fall-online/hw2/yjJD50ngDa_hw2.zip
https://boardgamegeek.com/

4 version 1

exactly be (when unzipped):

HW2-GTUsername/

Q1/

table.png

grouped_barchart.png

stacked_barchart_1.png

stacked_barchart_2.png

● table.png: Image/screenshot of the table in Q1.a (png format only).
● 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

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 since your image should have a high resolution.)

Note: If there is no game under a particular group and category, think about how to visually represent missing
data in your table. For this exercise, you can replace Null/NA/Empty values with 0 in the 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 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,

please review slide 52 and onwards of the lecture slides.

Setting Up Tableau

Tableau 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

https://poloclub.github.io/cse6242-2021fall-campus/slides/CSE6242-510-VisFix.pdf
https://www.tableau.com/
https://www.tableau.com/
https://www.tableau.com/

5 version 1

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, 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

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 Data
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.)

1. You will need a data-world account (created using your preferred email) to access the data for Q1c.
2. Q1 will require connecting Tableau to multiple data sources. You can connect multiple data sources

within one workbook by following the directions here.
3. For data in Q1b: 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.
4. We recommend renaming the data connection since you will have multiple connections in this

workbook. Rename the connection to something that makes sense to you. (Clicking on the text lets
you edit it.)

5. For Q1b, 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!

6. For data for Q1c: Add a new data source by clicking on Data – New Data Source.
7. 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.
8. 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.

9. 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.)

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.

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
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. https://www.tableau.com/trial/tableau-online https://www.tableau.com/trial/tableau-online https://www.tableau.com/academic/students https://www.tableau.com/academic/students https://kb.tableau.com/articles/howto/connecting-multiple-data-sources-without-joining-or-blending https://www.thedataschool.co.uk/ellen-blackburn/connecting-to-data-extract-or-live/ https://tableau.data.world/?dataset_name=mjpetrey%2Fboardgamegeek&query=SELECT%20*%20FROM%20games_detailed_info_filtered&queryType=SQL https://data.world/mjpetrey/boardgamegeek https://data.world/mjpetrey/boardgamegeek https://www.thedataschool.co.uk/ellen-blackburn/connecting-to-data-extract-or-live/ 6 version 1 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 1a: Example of a grouped bar chart. Your chart may appear dif ferent, and can earn full credit if it meets all the stated requirements. Your submitted image should include your GT username in the bottom lef t. 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 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 https://kb.tableau.com/articles/howto/stacked-bar-chart-multiple-measures https://kb.tableau.com/articles/howto/stacked-bar-chart-multiple-measures https://www.youtube.com/watch?v=yXLFo6rfiqY https://www.smashingmagazine.com/2017/03/understanding-stacked-bar-charts/ https://www.smashingmagazine.com/2017/03/understanding-stacked-bar-charts/ 7 version 1 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 should 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. To save a dashboard image, go to Dashboard - Export Image. Do not submit screenshots. Figure 1b: Example of a stacked bar chart af ter selecting “4 Players” in Max.Players f ilter. Your chart may appear dif ferent, and can earn full credit if it meets all the stated requirements. Your submitted image should include your GT username in the bottom lef t. Note: Your Tableau workbooks will not be graded. Your images should be clear and of high resolution. Important Points about Developing with D3 in Questions 2–5 1. We highly recommend that you use the latest Chrome browser to complete this question. We will grade your work using Chrome v92 (or higher). 2. 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. https://kb.tableau.com/articles/howto/adding-filters-to-dashboards https://help.tableau.com/current/pro/desktop/en-us/filtering.htm#drag-dimensions-measures-and-date-fields-to-the-filters-shelf https://www.youtube.com/watch?v=yXLFo6rfiqY 8 version 1 3. 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. 4. 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). 5. All d3*.js files in the lib folder must be referenced using relative paths, e.g., “../lib/”
in your html files. For example, if the file “Q2/submission.html” uses d3, its header should contain:

It is incorrect to use an absolute path such as:

6. 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”.

7. 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

Technology D3 Version 5 (included in the lib folder)

Chrome v92.0 (or higher): the browser for grading your code

Python http server (for local testing)

Allowed Libraries D3 library is provided to you in the lib folder. You must NOT use any D3 libraries

(d3*.js) other than the ones provided. On Gradescope, these libraries are provided

for you in the auto-grading environment.

Max runtime NA

Deliverables [Gradescope] submission.(html/js/css): The HTML, JavaScript, CSS to

render the graph. Do not include the D3 libraries or board_games.csv dataset.

You will experiment with many aspects of D3 for graph visualization. To help you get started, we have

provided the submission.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 was inspired by a reddit post about

visualizing boardgames as a network, where 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 the post. The provided submission.html file will display a graph

(network) in a web browser. The goal of this question is for you to experiment with the visual styling of this

graph. Here is a helpful resource (about graph layout) for this question.

Note: You are welcome to split submission.html into submission.html, submission.css, and submission.js.

a. [2 points] Adding node labels: Modify submission.html to show the node label (the node name, e.g., the

https://en.wikipedia.org/wiki/Document_Object_Model
https://poloclub.github.io/cse6242-2021fall-campus/slides/CSE6242-520-d3-stolper.pdf
https://medium.com/@ryanblunden/create-a-http-server-with-one-command-thanks-to-python-29fcfdcd240e
https://medium.com/@ryanblunden/create-a-http-server-with-one-command-thanks-to-python-29fcfdcd240e

https://www.oreilly.com/library/view/interactive-data-visualization/9781491921296/ch13.html

9 version 1

source) at the top right of each node in bold. If a node is dragged, its label must move with it.

b. [3 points] Styling edges: Style the edges based on the “value” field in the links array:

• If the value of the edge is equal to 0 (similar), the edge should be gray, thick, and solid (The dashed
line with zero gap is not considered as solid).

• If the value of the edge is equal to 1 (not similar), the edge should be green, thin, and dashed.

c. [3 points] Scaling nodes:

1. [1.5 points] Scale the radius of each node in the graph based on the degree of the node (you may try
linear or squared scale, but you are not limited to these choices).

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.

2. [1.5 points] The degree of each node should be represented by varying colors. Pick a meaningful
color scheme (hint: color gradients). There should be at least 3 color gradations and it must be visually
evident that the nodes with a higher degree use darker/deeper colors and the nodes with lower
degrees use lighter colors. You can find example color gradients at Color Brewer.

d. [6 points] Pinning nodes:

1. [2 points] Modify the code so that dragging a node will fix (i.e., “pin”) the node’s position such that it
will not be modified by the graph layout algorithm (Note: pinned nodes can be further dragged around
by the user. Additionally, pinning a node should not affect the free movement of the other nodes).
Node pinning is an effective interaction technique to help users spatially organize nodes during graph
exploration. The D3 API for pinning nodes have evolved over time. We recommend reading this post
when you work on this sub-question.

2. [1 points] Mark pinned nodes to visually distinguish them from unpinned nodes, i.e., show pinned

nodes in a different color.

3. [3 points] Double clicking a pinned node should unpin (unfreeze) its position and unmark it. When a
node is no longer pinned, it should move freely again.

e. [1 points] Add GT username: Add your Georgia Tech username (usually includes a mix of letters and
numbers, e.g., gburdell3) to the top right corner of the force-directed graph (see example image). The GT
username must be a element having the id: “credit”

https://stackoverflow.com/questions/43906686/d3-node-radius-depends-on-number-of-links-weight-property
http://colorbrewer2.org/
https://stackoverflow.com/questions/10392505/fix-node-position-in-d3-force-directed-layout

10 version 1

Figure 2a: Example of Visualization with pinned node (yellow). Your chart may appear dif ferent, and can earn full

credit if it meets all the stated requirements.

Q3 [15 points] Line Charts

Technology D3 Version 5 (included in the lib folder)

Chrome v92.0 (or higher): the browser for grading your code

Python http server (for local testing)

Allowed Libraries D3 library is provided to you in the lib folder. You must NOT use any D3 libraries

(d3*.js) other than the ones provided. On Gradescope, these libraries are provided

for you in the auto-grading environment.

Max runtime NA

Deliverables [Gradescope] linecharts.(html / js / css): The HTML, JavaScript, CSS to render the

line charts. Do not include the D3 libraries or boardgame_ratings.csv dataset.

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 or here.

https://bl.ocks.org/gordlea/27370d1eea8464b04538e6d8ced39e89
https://datawanderings.com/2019/11/01/tutorial-making-an-interactive-line-chart-in-d3-js-v-5/

11 version 1

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; however, the submission must follow the DOM structure specified at the end of this question.

a. [5 points] Creating line chart. Create a line chart (Figure 3a) that visualizes the number of board game
ratings from November 2016 to August 2020 (inclusively), for the eight board games: [‘Catan’, ‘Dominion’,
‘Codenames’, ‘Terraforming Mars’, ‘Gloomhaven’, ‘Magic: The Gathering’, ‘Dixit’, ‘Monopoly’]. Use
d3.schemeCategory10 to differentiate these board games. Add each board game’s name next to its
corresponding line. For the x-axis, show a tick label for every three months. Use D3 axis.tickFormat() and
d3.timeFormat() to format the ticks to display abbreviated months and years. For example, Jan 17, Apr 17,
Jul 17. (See Figure 3a and its x-axis ticks).

● Chart title: Number of Ratings 2016-2020
● Horizontal axis label: Month. Use D3.scaleTime().
● Vertical axis label: Num of Ratings. Use a linear scale (for this part a).

b. [5 points] Adding board game rankings. Create a line chart (Figure 3b) for this part (append to the same
HTML page) whose design is a variant of what you have created in part a. Start with your chart from part a.
Modify the code to visualize how the rankings of [‘Catan’, ‘Codenames’, ‘Terraforming Mars’, ‘Gloomhaven’]
change over time by adding a symbol with the ranking text on their corresponding lines. Show the symbol for
every three months, similar to the x-axis ticks in part a. (See Figure 3b). Add a legend to explain what this
symbol represents next to your chart (See the Figure 3b bottom right).

● Chart title: Number of Ratings 2016-2020 with Rankings

c. [5 points] Axis scales in D3. Create two line charts (Figure 3c-1,2) for this part (append to the same
HTML page) to try out two axis scales in D3. Start with your chart from part b. Then modify the vertical axis
scale for each chart: the first chart uses the square root scale for its vertical axis (only), and the second chart
uses the log scale for its vertical axis (only). Keep the symbols and the symbol legend you implemented in
part b. At the bottom right of the last chart, add your GT username (e.g., gburdell3, see Figure 3c-2 for
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.

■ First chart (Figure 3c-1)
○ Chart title: Number of Ratings 2016-2020 (Square root Scale)
○ This chart uses the square root scale for its vertical axis (only)
○ Other features should be the same as part b.

■ Second chart (Figure 3c-2)

○ Chart title: Number of Ratings 2016-2020 (Log Scale)
○ This chart uses the log scale for its vertical axis (only)
○ Other features should be the same as part b.

https://bl.ocks.org/ericd9799/d7534b92d9c30edf4726aadd49cffabe
https://github.com/d3/d3-scale#tickFormat
https://github.com/d3/d3-time-format
https://github.com/d3/d3-scale#scaleTime

12 version 1

Figure 3a: Example line chart. Your chart may appear dif ferent, and can earn full credit if it meets all stated

requirements.

Figure 3b: Example of a line chart with rankings. Your chart may appear dif ferent, and can earn full credit if it meets all
stated requirements.

13 version 1

Figure 3c-1: Example of a line chart using square root scale. Your chart may appear dif ferent, 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 dif ferent, and can earn full credit if it
meets all stated requirements.

Note: Your D3 visualization MUST produce the following DOM structure.

|

+– chart title

|

+– containing Q3.a plot elements

|

+– containing plot lines, line labels

|

+– x-axis

| |

| +– (x-axis elements)

| |

| +– x-axis label

|

https://en.wikipedia.org/wiki/Document_Object_Model

14 version 1

+– y-axis

|

+– (y-axis elements)

|

+– y-axis label

|

+– chart title

|

+– containing Q3.b plot elements

| |

| +– containing plot lines, line labels

| |

| +– for x-axis

| | |

| | +– (x-axis elements)

| | |

| | +– x-axis label

| |

| +– for y-axis

| | |

| | +– (y-axis elements)

| | |

| | +– for y-axis label

| |

| +– containing plotted symbols, symbol labels

|

+– containing legend symbol and legend text element(s)

(e.g., id=”svg-c-1″, etc.)

(e.g., id=”svg-c-2″, etc.)