The 10yearASUOpenMatches.csv contains statistics from 10 years of Australian open professional men’s tennis matches. Each row shows the data for 1 match. Variables that end in “1” (player1, country1, etc.) denote statistics for the winner of the match, variables ending in “2” denote statistics for the losing player. You are not required to include all the variables in the dataset.
Service variables:firstServe: first serve inside the service box percentageace: the number of good serves not received by the opponentdouble: the number of double faults (on a service point, the player fails to serve inside the service box on both chances)fastServe: the fastest serve of the player in KPHavgFirstServe: the average first serve speed of the player in KPHavgSecServe: the average second serve speed in KPHMatch performance variables:firstPointWon: points won on the first serve percentagesecPointWon: points won on the second serve percentagebreak: break point conversion percentagereturn: percentage of return points wontotal: total points won in the gamewinner: points won that were not received by the opponenterror: the number of errors committed (hitting out of bounds, etc.)net: when approaching the net, the percentage of points wonD3 ChartsYou will create two D3 charts to show the dataset. These can be any visualization technique that you like, but must be D3 charts. Think about the lectures we’ve done so far when deciding how to encode the data: What channels make sense? What marks will be effective?
The first chart will function as an overview, showing some high-level view of the dataset (for one or more of the data attributes). The second chart will function as a detail view, showing a more fine-grained view of a subset of the data. The charts will be linked, which means that when you interact with the overview—such as selecting a single data point, selecting a subset of points, scrubbing a time filter, filtering the overview by some constraint, etc.—the detail visualization will update. Similar to the Tableau homework, the visualization techniques for the overview and detail must be different.
How fine grained does the detail need to be? It’s up to you! For example, you could click on a single point in the overview, and the detail visualizes information for a single match or player. Maybe you’ve aggregated data by year, and the detail shows matches for that year only.
The two D3 charts will be placed side-by-side at the top of your HTML page: overview on the left, detail on the right.
HTML PagePut all content on a single HTML page and name it index.html. At top, include a title, your name, a date, and the course title. The 2 D3 chars will go below this and the write-up will be below the D3 charts. The web page should not be wider than 1200px (make sure the D3 charts don’t go over this). Keep the web page design nice looking. You are allowed to use CSS or Javascript libraries for styling.