2e:null 2f:["$","title",null,{"children":"Tennis Courts: What's Beneath the Surface? | Taylor Lallas | Observable"}] 34:T61a, Getting ready to play a tennis match? You'll need a few things first: a racquet, some shoes, tennis balls, a friendly foe, and of course, a court! Tennis courts are differentiated by their surface type, that is, the material used to construct the court. The three main types of surfaces found throughout the world and used in professional play are called clay, hard, and grass.

The surface a match is played on transforms the dynamics of the game by advantaging certain playing styles, skillsets, and strategies. Looking at data from professional tennis matches, we can unpack some of the differences between the surfaces and the players' results on them. In this article, we explore data provided by Ultimate Tennis Statistics & the ATP Tour, the official men's professional tennis association. We investigate how play quantitatively differs across surfaces, explore factors that impact a player's success on a given surface, and finally, see how players measure up with the all-time greats according to court type. But first, let's get more familiar with the distinguishing surface characteristics and begin to qualitatively hypothesize what styles of play might best fit each surface. 35:T9ef,

| Clay courts are considered a "slow" surface. Court speed refers to how fast the ball travels from one player to another. At impact with this dusty surface made out of finely crushed brick, the ball loses some of its initial speed and bounces high. So, the opposite player's experiences his opponents serves and other shots as though they were coming at a slower pace. The uneveness of the surface also means that there is more variability in how the ball can bounce; players have to be agile to deal with surprising and funky bounces. Players with tricky underspin slices in their repetoire can take advantage of clays funky bounce proclivities. As a result, we might expect a player who typically relies on hard, fast shots to overpower their opponents to struggle more on clay. Conversely, clay courts tend to advantage the grinder: a player who stands out in the physicality of their style, can outlast his opponents, leverages craftiness, and is rock-solid from the baseline.

Clay surfaces are most popular in South America and Europe, and very rare relative to other court types in the rest of the world. Clay is a cornerstone of the professional tour: over 20 ATP Men's Professional Tennis tournaments each year are played on clay courts. The premiere clay event of the year is the French Open, a Grand Slam tournament.

NOTE: In professional tennis, there are four "Grand Slam" tournaments a year: the Australian Open (hard surface), the French Open (clay surface), Wimbledon (grass surface), and the US Open (hard surface). The strongest field of players competes in these major championships, and winning one earns a player the highest level of esteem. We use success achieved at Grand Slams as a reference point in several parts of our analysis.

Clay Court, French Open (source)

36:T632,

Hard Court, US Open (source)

| Hard courts are considered a "medium-fast" and bouncy surface. With a concrete base and an acrylic top layer, these surfaces allow the ball to travel very quickly because there is less impact friction than there is on clay. Hard courts fall in between clay and grass on the speed spectrum, and seem to enable a range of playing styles to thrive. Though we might anticipate that the greater speeds may make big hitters and strong servers more well-positioned for success on hard courts, relative to clay.

Hard surfaces have a global presence, and are by far the most common surface in North America and Australia. Moreover, hard courts are the most widely used surface for ATP Men's Professional Tennis tournaments. Two of the four Grand Slam tournaments are played on hard courts: the US Open and the Australian Open.

37:T743,

| Grass courts are considered a "fast" surface. You guessed it-- the surface is made out of grass! Unlike clay courts and hard courts which keep balls bouncing high, grass courts make balls skid on impact. With lightening fast exchanges of low-to-the-ground balls, grass is the antithesis of clay. Great servers have a weapon that is even more effective on grass, as the sheer speed can make their serves harder to return. Similarly, the big hitter who opts for overpowering, unreachable winners, rather than stalwart consistency should have a leg up.

The greatest density of grass courts is in the United Kingdom, however, grass courts are relatively sparse globally. Consequently, the grass is the surface of choice for only a few professional tournaments each year. This limits our data in certain areas, as their have been fewer matches played on grass to glean information from. The most prestigious grass competition of the year is the Grand Slam event, Wimbledon.

Grass Court, Wimbledon (source)

38:T945,

Top Servers by Average Aces Per Match

${Scatterplot(aces, rank_range, { x: d => d.rank_hard, y: d => d.value_hard, x_c: d => d.rank_clay, y_c: d => d.value_clay, x_g: d => d.rank_grass, y_g: d => d.value_grass, active: d => d.active, // title: d => d.name, xLabel: "Ranking on Statistics Leaderboard", yLabel: "Avg. Aces per Match", stroke: "blue", width: 600, height: 400 })}

${selected_player.name}'s avg. aces per match on grass is ${getComparison(selected_player.name)}x his average on clay

${PlayerChart(get_player_court_data(selected_player.name), { x: d => d.value, y: d => d.surface, xLabel: "Avg. Aces per Match", yLabel: "Surface", })}

In tennis, an ace, aka a "service winner", means that the server player started the point off by hitting an untouchable (and therefore, unreturnable) serve to his opponent, immediately winning the point. In a grueling professional tennis match, these free points with low exertion give players a substantial advantage.

The graph of "Top Servers by Average Aces per Match" plots the Ultimate Tennis Statistics leaderboard of the players with the highest number of average aces per match. The leftmost point for each surface type indicates the highest ranked player on the leaderboard. Whether you view the top 25, 50, or 100 severs by aces per match, a distinct pattern holds: the top servers hit far more aces per match on the faster surfaces, grass and hard, than they do on clay courts. Their serving weapons probably do much less damage on the slower surface of clay, because the ball loses some of its pace on impact which gives opponents more time to react.

Hover and click on points of the graph to view the multiple of aces that a server hits on grass relative to clay courts.

39:T6e5,

One sure-fire way to tell whether the game of tennis is unfolding differently across surface types is to hold the player constant, and look at his average point duration on each of the surfaces. If the length of points played by the SAME PLAYER on different surfaces took about the SAME TIME, we'd expect the graph of point duration across two surfaces to look something like this:

Players' Average Point Duration Across Surfaces

(in an alternate world where surface doesn't impact play)

${ScatterplotPoints(clayVgrass, "grass_only", { x: d => d.value_grass, y: d => d.value_grass, active: d => d.active, // title: d => d.name, xLabel: "Average Point Duration on SURFACE X", yLabel: "Average Point Duration on SURFACE Y", stroke: "gray", width: 400, height: 400 })}

For example, if each of the players had points that lasted on average the same amount of time on Grass anad Clay, we'd see all the points fall along the 45 degree line where the average point duration in seconds match across the surfaces. Or, we'd see a roughly even clustering of points around both sides of the dividing line.

The reality is much different.

3a:T774,

Average Point Duration Is Longest on Clay Courts

${getPointScatter()}

${getLeg()}

The plot on the left shows average point duration across surfaces, given by Ultimate Tennis Statistics. Tennis matches are composed of individual points. Players need to win at least four points to win one game, six games to win a set, and two-three sets to win a match (depending on the tournament).

Players' whose point duration is longer on clay are plotted in pink while players with longer lasting grass points are plotted in blue. This allows us to see that all but three players on the graph have longer points on average on clay than they do on grass. This means that virtually all players need to be ready for more physically demanding points on clay than on the faster surfaces.

Hover over the player with the longest average point duration on clay, and you will find that it is none other than the best clay court player in history (by wins and titles): Rafael Nadal. Even Nadal's competitive rivals refer to him as the "king of clay" court tennis. If Nadal's numbers are any indication, success on clay requires patience and grit to outlast opponents. Limit the selection to focus on champions and finalists of the French Open, the only clay court Grand Slam, to see how more of the best players on clay adjust their playing style to optimize for the surface.

3b:Tcb1,

In the tennis world, there are strong geographic associations with surface type. Europe and South America are the clay court capitals. North America and Australia, on the other hand, are synonymous with hard court tennis. We might expect players who grew up and learned the game in a certain region to have developed a style of play that is strongest on their home country's primary surface.

One angle to understand whether a given player particularly favors or excels on a surface is to track their upsets scored on that surface. An "upset" is a match that a player was not supposed to win. In our data, an upset is a match where a player defeated a tournament seed with a higher ranking than his own (with #1 being the highest possible). Outsized upsets on a given surface suggest that a player may have an extra expertise on that surface that makes them dominant enough to frequently beat "stronger" opponents.

In the following sequence of graphs, we put together upsets scored and country of origin to show that there is a strong link between where a surface type is more common and the propensity of players from that country to "upset" their opponents. Again, we leverage the leaderboard style statistics from Ultimate Tennis Statistics. In this case, players are ranked by the number of upsets they have scored on a given surface. The analysis here is limited to players in the Top 100 most upsets scored, as we think the outsized skill hypothesis is most compelling for those who have won a disproportionate number of matches that they "should not have".

The maps on the left plot each country, with its shade according to the number of players from that country to land in the top 100 for upsets scored on the given surface. Hover over a country to see the number of players that made the list. If you select a country by clicking on it, you can see where its players fall in the top 100 leaderboard for each surface. For example, Spain is currently selected. Spain has a paucity of upsets scored on hard and grass courts compared to its dominance on clay. This aligns with the fact that most players from Spain grew up and learned the game by playing on clay courts, so may have sharpened their skillsets in clay-speific ways. Note, that the player with the most upsets scored on hard & grass courts from Spain, Feliciano Lopez, is ALSO one of the top servers represented in the graph of big servers above! So, while you will see clear trends by country in some cases, the rules are not necessarily deterministic; a player's style still can differ from the trending styles in his country of origin.

Next, try the United States, Argentina, and Australia. You'll see that the patterns for Argentina and Spain match, and the patterns for the US and Australia match. But the pairs are almost inverses! These visualization pairings enable us to see that it is not the case that some countries simply produce more players who upset opponents across the board. Rather, whether the density of surface superperformers seems to depend on how similar the surface is to the primary surface in the player's country-of-origin.

3c:Tab2,

Number of Players in the Top 100 Most Upsets Scored on Hard Courts

${hardMap()}

Presence of Players from ${selected_countryA.country} on Upsets Scored Leaderboard (Hard Courts)

${plotUpsetPlayers(players100hard.filter((n) => {return n.country_name == selected_countryA.country}), "hard", { x: d => d.rank, y: d => d.value, active: d => d.active, xLabel: "Rank on Upset Leaderboard", yLabel: "# Upsets Scored", stroke: "gray", width: 600, height: 300 })}

Number of Players in the Top 100 Most Upsets Scored on Grass Courts

${grassMap()}

Presence of Players from ${selected_countryA.country} on Upsets Scored Leaderboard (Grass Courts)

${plotUpsetPlayers(players100grass.filter((n) => {return n.country_name == selected_countryA.country}), "grass", { x: d => d.rank, y: d => d.value, active: d => d.active, xLabel: "Rank on Upset Leaderboard", yLabel: "# Upsets Scored", stroke: "gray", width: 600, height: 300 })}

Number of Players in the Top 100 Most Upsets Scored on Clay Courts

${clayMap()}

Presence of Players from ${selected_countryA.country} on Upsets Scored Leaderboard (Clay Courts)

${plotUpsetPlayers(players100clay.filter((n) => {return n.country_name == selected_countryA.country}), "clay", { x: d => d.rank, y: d => d.value, active: d => d.active, xLabel: "Rank on Upset Leaderboard", yLabel: "# Upsets Scored", stroke: "gray", width: 600, height: 300 })}

3d:T751,

In the "Favorite Surface by Country" map, a country's overall most preferred court type is calculated by taking each of the players from that country, identifying his "favorite" surface according to the one with the greatest winning percentage, aggregating "favorite" surfaces across all the players from the country, and identifying the most widely loved surface. Country's favorite surfaces are encoded according to the representative surface colors and are textually visible upon hover.

Since it logically follows that percentages of matches won might translate into tournaments won, selecting a country in the "Favorite Surface" map will show the spread of titles won by players from that country in the righthand treemap . Toggle between tournament levels to see how the distribution of titles won across surfaces varies depending on the type of competition!

A strong country-based trend that we saw with upsets emerges once again: North America, Australia, & the UK perform best on the faster surfaces, while Europe and South America largely shine brightest Clay. Note that there are far fewer professional grass tournaments each year than clay and hard court ones, so comparing countries based on Grand Slam Titles may be better for that surface (as one of the four Grand Slams each year is on grass). For instance, if you select the United States it is easy to see under "All Professional Titles" that most tournaments won by Americans have been on hard courts. However, the structurally small number of grass tournaments makes it hard to appreciate just how skilled Americans are on the grass. Switching to the "Grand Slams" view illustrates that, at least at the highest level, Americans have a history of grass performance that is much stronger than their big stage clay showings.

3e:T7b4,

The accompanying visualization allows you to highlihgt players of your choice to compare against the historical wins/loss data across surfaces and "Opponent Competitiveness" levels. By breaking overall win-loss information down by surface, we can get a better idea of what surfaces the all-time greats particularly excel on. Here, "Opponent Competitiveness" is based on the the professional ranking of an opponent at the time of the match. You can view a player's overall record across all opponents and surfaces by selecting "All" for "Opponent Competitiveness", or filter the data to zoom-in on only the player's history against Top 20 ranked opponents, for example.

As the different surfaces have varying levels of match play data due to prevalence of tournaments, the axes change from graph to graph in order to best fit the points. However, for comparability, each chart includes a dashed line indicating the 50/50 win/loss ratio: points located above the line indicate that a player has won more than he has lost against opponents of a given competitiveness level on a given surface. While the vast majority of professional players cluster around or below the 50/50 line (especially when you increase "Opponent Competitiveness"), a handful of the all-time greats stand out from the pack on each surface. Hover over the points on each graph to see which player they represent and view the win/loss information. You will see that a handful of points on each graph are larger than the others. The larger points on each graph represent the players with the Top 5 winning percentages on that surface (or overall, in the "All Surfaces" case). In several cases, you can see that those with the highest winning percentage are different from those with the greatest number of wins. The points' opacity is also correlated with the match winning percentage for the given surface/competitiveness level selected.

3f:T475,

For example, below we have currently highlighted the records for Roger Federer and Rafael Nadal against Top 10 Opponents. Upon frist glance at the chart that shows the "All Surface" win/loss data, it is easy to tell that Federer and Nadal are both massive standouts relative to other players who faced Top 10 opponents. What you cannot tell just from this initial "All Surfaces" graph alone is where those wins came from and how they were distributed across the surfaces. Queue the accompanying surface-views of win-loss records against Top 10 opponents. These graphs enable us to see that success on clay drives Nadal's overall performance against top 10 opponents, while he has below 50/50 victory on hard against that level of play. The story is almost perfectly mirrored for Federer, though he hovers just above the 50/50 line on clay. Federer and Nadal's numbers on their less preferred surfaces still indicate standout performance from the rest of the data on the respective graphs. However, on their favored surfaces, they are in a league almost of their own.

40:T49b,

${viewof playerSearch}

${viewof rows}

${viewof playerSearch2}

${viewof rows2}

${viewof competitiveSelection}

${generateSurfaceBars(rows, "yellow")}

${generateSurfaceBars(rows2, "rgb(193, 148, 255)")}

${chart1()}

${chart2()}

${chart3()}

${chart4()}

41:T85c,function generateSurfaceBars(search, color) { const container = d3.create('div'); var oneValidData = false; var data = [ {surface: "Hard", won: -1, lost: -1, wonLostPct: -1}, {surface: "Clay", won: -1, lost: -1, wonLostPct: -1}, {surface: "Grass", won: -1, lost: -1, wonLostPct: -1}, ]; if (search != null) { data = returnPlayerSurfaceData(search.name); oneValidData = true; } console.log(data); let xscale = getBarXScale(); var y = d3.scaleBand() .range([ 100, 0 ]) .domain(data.map(function(d) { return d.surface; })) .padding(.3); container.append('g') .text(function() { if (oneValidData) { return search.name + "'s match winning %s on"; } else { return "Select a player to view their individual surface stats." } }) .style("font-family", "Calibri") .style("font-size", "16px") .style("text-decoration", "underline") .style("text-decoration-color", color) .style("text-decoration-style", "double") container.selectAll('div') .data(data) .join('div') .style('background', function(d) { if (d.surface == "Grass") { return 'rgba(95, 152, 78, 1)' } else if (d.surface == "Hard") { return 'rgba(181, 201, 251, 1)' } else if (d.surface == "Clay") { return 'rgba(241, 156, 146,1)' } else { return 'rgba(240, 187, 103, 1)' } }) .style('border', '1px solid white') .style('font-size', 'small') .style('color', 'white') .style('text-align', 'right') .style('padding', '3px') .style('height', y(0)) .style('width', function (d) { if (d.wonLostPct > 0) { return `${xscale(d.wonLostPct)}px` } else if (d.wonLostPct == 0) { return `${xscale(0)}px` } else { return `${xscale(5)}px` } }) .text(function(d) { if (d.wonLostPct > 0) { return d.surface + ": " + d.wonLostPct + "%"; } else if (d.wonLostPct == 0) { return ""; } else { return "N/A"; } }); return container.node(); }42:T403,function chart1(){ let wholeChartContainer = createWholeChartContainer(bigPlotVars); let plotContainer = wholeChartContainer.select('#plotContainer'); let data = retrieveDataFile("All"); let max = 1400; let maxX = 600; let endPoint = maxX; if (competitiveSelection == "Top 5") { max = 120; maxX = 100; endPoint = maxX; } else if (competitiveSelection == "Top 10") { max = 260; maxX = 175; endPoint = maxX; } else if (competitiveSelection == "Top 20") { max = 400; maxX = 220; endPoint = maxX; } let xScale = returnXScale(maxX, bigPlotVars); let yScale = returnYScale(max, bigPlotVars); createAxes(plotContainer, "All", xScale, yScale, bigPlotVars); let top5 = getTop5(data); var orange = d3.color("rgba(255,165,0,1)"); var yellow = d3.color("rgba(255,255,0,1)"); var black = d3.color("rgba(0,0,0,1)"); drawScatterPlot(data, plotContainer, top5, xScale, yScale, orange, orange, yellow, bigPlotVars, endPoint); return wholeChartContainer.node() }43:T62b,function returnPlayerSurfaceData(player) { if (competitiveSelection == "Top 5") { let clayData = top5_clay.filter(function(d){ return d.name == player }); let hardData = top5_all.filter(function(d){ return d.name == player }); let grassData = top5_grass.filter(function(d){ return d.name == player }); let player_court_data = returnFixedData(clayData, grassData, hardData); return player_court_data; } else if (competitiveSelection == "Top 10") { let clayData = top10_clay.filter(function(d){ return d.name == player }); let hardData = top10_all.filter(function(d){ return d.name == player }); let grassData = top10_grass.filter(function(d){ return d.name == player }); let player_court_data = returnFixedData(clayData, grassData, hardData); return player_court_data; } else if (competitiveSelection == "Top 20") { let clayData = top20_clay.filter(function(d){ return d.name == player }); let hardData = top20_all.filter(function(d){ return d.name == player }); let grassData = top20_grass.filter(function(d){ return d.name == player }); let player_court_data = returnFixedData(clayData, grassData, hardData); return player_court_data; } else { // all let clayData = overall_clay.filter(function(d){ return d.name == player }); let hardData = overall_all.filter(function(d){ return d.name == player }); let grassData = overall_grass.filter(function(d){ return d.name == player }); let player_court_data = returnFixedData(clayData, grassData, hardData); return player_court_data; } }44:T428,function returnFixedData(clayData, grassData, hardData) { let grassPct = -1; let grassWon = -1; let grassLost = -1; if (grassData.length > 0) { grassPct = grassData[0].wonLostPct; grassPct = grassPct.replace('%',''); grassWon = grassData[0].won; grassLost = grassData[0].lost; } let hardPct = -1; let hardWon = -1; let hardLost = -1; if (hardData.length > 0) { hardPct = hardData[0].wonLostPct; hardPct = hardPct.replace('%',''); hardWon = hardData[0].won; hardLost = hardData[0].lost; } let clayPct = -1; let clayWon = -1; let clayLost = -1; if (clayData.length > 0) { clayPct = clayData[0].wonLostPct; clayPct = clayPct.replace('%',''); clayWon = clayData[0].won; clayLost = clayData[0].lost; } let player_court_data = [ {surface: "Hard", won: hardWon, lost: hardLost, wonLostPct: hardPct}, {surface: "Clay", won: clayWon, lost: clayLost, wonLostPct: clayPct}, {surface: "Grass", won: grassWon, lost: grassLost, wonLostPct: grassPct} ]; return player_court_data; }45:T27e4,function drawScatterPlot(data, plotContainer, top5, xScale, yScale, mainColor, highlightColor, searchColor, vars, endPoint) { var currRadius = vars.plotCircleRadius; var currStroke = mainColor; var player1Name = ""; var player2Name = ""; var player1X = 0; var player1Y = 0; var player2X = 0; var player2Y = 0; plotContainer.append("line") .attr("x1", xScale(0)) .attr("y1", yScale(0)) .attr("x2", xScale(endPoint)) .attr("y2", yScale(endPoint)) .attr("stroke-width", 2) .attr("stroke", "gray") .attr("stroke-dasharray", "5,5"); plotContainer.selectAll('circle') //select all of the SVG 'circle' elements in the plotContainer .data(data, d => d.id) //bind the data, using d.id as the key .join( enter => enter.append('circle'), //append an svg 'circle' element for each entering data item update => update,//do nothing with data items that match existing items exit => exit.remove() //remove svg 'circle' elements whose data is now gone. ) .attr('r', function(d) { if (top5.includes(d)) { if (rows != null && rows2 != null) { if (d.name == rows.name || d.name == rows2.name) { console.log(rows) return vars.plotCircleRadius * 3; } else { return vars.plotCircleRadius * 3; } } else if (rows != null) { player1Name = rows.name; player1X = d.lost; player1Y = d.won; if (d.name == rows.name) { return vars.plotCircleRadius * 3; } else { return vars.plotCircleRadius * 3; } } else if (rows2 != null) { player2Name = rows2.name; player2X = d.lost; player2Y = d.won; if (d.name == rows2.name) { return vars.plotCircleRadius * 3; } else { return vars.plotCircleRadius * 3; } } return vars.plotCircleRadius * 3; } else { if (rows != null && rows2 != null) { if (d.name == rows.name || d.name == rows2.name) { return vars.plotCircleRadius * 3; } else { return vars.plotCircleRadius; } return vars.plotCircleRadius; } else if (rows != null) { player1Name = rows.name; player1X = d.lost; player1Y = d.won; if (d.name == rows.name) { return vars.plotCircleRadius * 3; } else { return vars.plotCircleRadius; } return vars.plotCircleRadius; } else if (rows2 != null) { player2Name = rows2.name; player2X = d.lost; player2Y = d.won; if (d.name == rows2.name) { return vars.plotCircleRadius * 3; } else { return vars.plotCircleRadius; } } else { return vars.plotCircleRadius; } } }) //use plotVars.plotCircleRadiu .attr('cx', d => xScale(d.lost)) //base on d.weight, xpos .attr('cy', d => yScale(d.won)) .style("opacity", function(d) { let pct = d.wonLostPct; pct = pct.replace('%',''); return pct/100.0; }) .attr('fill', function(d) { if (top5.includes(d)) { if (rows != null && rows2 != null) { if (d.name == rows.name || d.name == rows2.name) { if (d.name == rows.name) { var col = d3.color("yellow"); col.opacity = d.wonLostPct/100; return col; } else if (d.name == rows2.name) { var col = d3.color('rgb(193, 148, 255)'); col.opacity = d.wonLostPct/100; return col; } } else { var col = d3.rgb(highlightColor); col.opacity = d.wonLostPct/100; return col; } } else if (rows != null) { if (d.name == rows.name) { var col = d3.rgb('yellow'); col.opacity = d.wonLostPct/100; return col; // change if in top 5 and selected player, have fill be orange and stroke be green } else { var col = d3.rgb(highlightColor); col.opacity = d.wonLostPct/100; return col; } } else if (rows2 != null) { if (d.name == rows2.name) { var col = d3.rgb('rgb(193, 148, 255)'); col.opacity = d.wonLostPct/100; return col; // change if in top 5 and selected player, have fill be orange and stroke be green } else { var col = d3.rgb(highlightColor); col.opacity = d.wonLostPct/100; return col; } } var col = d3.rgb(highlightColor); col.opacity = d.wonLostPct/100; return col; } else { if (rows != null && rows2 != null) { if (d.name == rows.name || d.name == rows2.name) { if (d.name == rows.name) { var col = d3.color("yellow"); col.opacity = d.wonLostPct/100; return col; } else if (d.name == rows2.name) { var col = d3.color('rgb(193, 148, 255)'); col.opacity = d.wonLostPct/100; return col; } } else { var col = d3.rgb(mainColor); col.opacity = d.wonLostPct/100; return col; } var col = d3.rgb(mainColor); col.opacity = d.wonLostPct/100; return col; } else if (rows != null) { if (d.name == rows.name) { var col = d3.rgb('yellow'); col.opacity = d.wonLostPct/100; return col; } else { var col = d3.rgb(mainColor); col.opacity = d.wonLostPct/100; return col; } var col = d3.rgb(mainColor); col.opacity = d.wonLostPct/100; return col; } else if (rows2 != null) { if (d.name == rows2.name) { var col = d3.rgb('rgb(193, 148, 255)'); col.opacity = d.wonLostPct/100; return col; } else { var col = d3.rgb(mainColor); col.opacity = d.wonLostPct/100; return col; } var col = d3.rgb(mainColor); col.opacity = d.wonLostPct/100; return col; } else { var col = d3.rgb(mainColor); col.opacity = d.wonLostPct/100; return col; } } }) .attr('stroke', function(d) { if (top5.includes(d)) { if (rows != null && rows2 != null) { if (d.name == rows.name || d.name == rows2.name) { var col = d3.color('black'); return col; // change if in top 5 and selected player, have fill be orange and stroke be green } else { var col = d3.rgb(highlightColor); return col; } } else if (rows != null) { if (d.name == rows.name) { var col = d3.rgb('black'); return col; // change if in top 5 and selected player, have fill be orange and stroke be green } else { var col = d3.rgb(highlightColor); return col; } } else if (rows2 != null) { if (d.name == rows2.name) { var col = d3.rgb('black'); return col; // change if in top 5 and selected player, have fill be orange and stroke be green } else { var col = d3.rgb(highlightColor); return col; } } var col = d3.rgb(highlightColor); return col; } else { if (rows != null && rows2 != null) { if (d.name == rows.name || d.name == rows2.name) { var col = d3.rgb('black'); return col; } else { var col = d3.rgb(mainColor); return col; } var col = d3.rgb(mainColor); return col; } else if (rows != null) { if (d.name == rows.name) { var col = d3.rgb('black'); return col; } else { var col = d3.rgb(mainColor); return col; } var col = d3.rgb(mainColor); return col; } else if (rows2 != null) { if (d.name == rows2.name) { var col = d3.rgb('black'); return col; } else { var col = d3.rgb(mainColor); return col; } var col = d3.rgb(mainColor); return col; } else { var col = d3.rgb(mainColor); return col; } } }) .on('mouseover', function (event, d) { //Handle 'mouseover' events let currPoint = d3.select(this); currStroke = d3.select(this).attr('stroke'); currRadius = d3.select(this).attr('r') d3.select(this).attr('stroke', 'black').attr('r', vars.plotCircleRadius*3), plotContainer.append('text') //Append SVG 'text' element. .attr('class', 'ptLabel') .attr('x', xScale(d.lost) - 20) .attr('y', yScale(d.won) - 10) .text(d.name) .style("font-size", "12px") .style("font-family", "Calibri") plotContainer.append('text') .attr('class', 'scores') .attr("x", (vars.plotWidth / 2)) .attr("y", -15) .style("text-anchor", "middle") .style("font-size", vars.subtitleSize) .style("font-family", "Calibri") .style("font-style", "italic") .text("WON: " + d.won + ", LOST: " + d.lost) }) .on('mouseout', function(event, d) { d3.select(this).attr('stroke', currStroke).attr('r', currRadius) currRadius = vars.plotCircleRadius; plotContainer.selectAll('.ptLabel').remove() // Remove all ptLabels plotContainer.selectAll('.scores').remove() }) }46:T75b,function createAxes(plotContainer, surfaceSelection, xScale, yScale, vars) { let xAxisGenerator = d3.axisBottom(xScale) xAxisGenerator.ticks(5) const xAxis = plotContainer.append('g') //create SVG elt for x-axis .attr('transform', `translate(0,${vars.plotHeight})`) //translate to bottom of plot .call(xAxisGenerator); //use axisBottom to form ticks below let yAxisGenerator = d3.axisLeft(yScale) yAxisGenerator.ticks(8) const yAxis = plotContainer.append('g') //create SVG elt for y-axis .call(yAxisGenerator); //use axisLeft to form ticks to the left const xAxisLabel = plotContainer.append("text") .attr("transform", `translate(${vars.plotWidth/2}, ${vars.plotHeight + 35})`) .style("text-anchor", "middle") .style("font-size", "11px") .style("font-family", "Calibri") .text("Losses"); const yAxisLabel = plotContainer.append("text") .attr("transform", "rotate(-90)") .attr("y", 0 - vars.plotMargin*0.8) .attr("x",0 - (vars.plotHeight / 2)) .attr("dy", "1em") .style("text-anchor", "middle") .style("font-size", "11px") .style("font-family", "Calibri") .text("Wins"); const title = plotContainer.append("text") .attr("x", (vars.plotWidth / 2)) .attr("y", 0 - (vars.plotMargin*0.75)) .attr("text-anchor", "middle") .style("font-size", vars.titleSize) .style("text-decoration", "bold") .style("font-family", "Calibri") .text(function() { if (surfaceSelection == "All") { return "Wins vs. Losses On " + surfaceSelection + " Surfaces vs. " + competitiveSelection + " Opponents" } else { return "Wins vs. Losses On " + surfaceSelection + " vs. " + competitiveSelection + " Opponents" } }) }47:T675,function retrieveDataFile(surfaceSelection) { if (surfaceSelection == "All" && competitiveSelection == "All") { return overall_all; } else if (surfaceSelection == "All" && competitiveSelection == "Top 5") { return top5_all; } else if (surfaceSelection == "All" && competitiveSelection == "Top 10") { return top10_all; } else if (surfaceSelection == "All" && competitiveSelection == "Top 20") { return top20_all; } else if (surfaceSelection == "Grass" && competitiveSelection == "All") { return overall_grass; } else if (surfaceSelection == "Grass" && competitiveSelection == "Top 5") { return top5_grass; } else if (surfaceSelection == "Grass" && competitiveSelection == "Top 10") { return top10_grass } else if (surfaceSelection == "Grass" && competitiveSelection == "Top 20") { return top20_grass } else if (surfaceSelection == "Clay" && competitiveSelection == "All") { return overall_clay } else if (surfaceSelection == "Clay" && competitiveSelection == "Top 5") { return top5_clay } else if (surfaceSelection == "Clay" && competitiveSelection == "Top 10") { return top10_clay } else if (surfaceSelection == "Clay" && competitiveSelection == "Top 20") { return top20_clay } else if (surfaceSelection == "Hard" && competitiveSelection == "All") { return overall_hard } else if (surfaceSelection == "Hard" && competitiveSelection == "Top 5") { return top5_hard } else if (surfaceSelection == "Hard" && competitiveSelection == "Top 10") { return top10_hard } else if (surfaceSelection == "Hard" && competitiveSelection == "Top 20") { return top20_hard } }48:T5ac,function updateTree(){ // var gs = document.getElementById("level-radio").firstChild.nextSibling.firstChild.nextSibling.nextSibling.firstChild.nextSibling.firstChild.checked; var gs = 0; console.log("in update tree"); if (radios == "Grand Slams") { gs = 1; } if (gs) {d3.select("#titles-won-title").text("Grand Slam Titles Won By Male Players from " + selected_country.country); } else { console.log(d3.select("#titles-won-title")); d3.select("#titles-won-title").text("All Professional Titles Won By Male Players from " + selected_country.country); } var num = -1; for (var i = 0; i < gsCountryTitles.length; i++) { if (gsCountryTitles[i].country_id === selected_country.id) {num = i;} } if (num >= 0 || !gs) { var elem = document.getElementById("tree-map"); elem.remove(); var parent = document.getElementById("tree-map-holder"); var new_chart_holder = document.createElement("div"); new_chart_holder.id = "tree-map"; var chart = tree(selected_country.id); new_chart_holder.appendChild(chart); parent.appendChild(new_chart_holder); } else { var elem = document.getElementById("tree-map"); elem.remove(); var parent = document.getElementById("tree-map-holder"); var new_chart_holder = document.createElement("div"); new_chart_holder.id = "tree-map"; var chart = emptyTree(); new_chart_holder.appendChild(chart); parent.appendChild(new_chart_holder); } }49:T10b4,function PlayerChart(data, { x = d => d, // given d in data, returns the (quantitative) x-value y = (d, i) => i, // given d in data, returns the (ordinal) y-value title, // given d in data, returns the title text marginTop = 60, // the top margin, in pixels marginRight = 50, // the right margin, in pixels marginBottom = 10, // the bottom margin, in pixels marginLeft = 70, // the left margin, in pixels width = 740, // the outer width of the chart, in pixels height, // outer height, in pixels xType = d3.scaleLinear, // type of x-scale xDomain = [0, 25], // [xmin, xmax] xRange = [marginLeft, width - marginRight], // [left, right] xFormat, // a format specifier string for the x-axis xLabel, // a label for the x-axis yPadding = 0.2, // amount of y-range to reserve to separate bars yDomain, // an array of (ordinal) y-values yRange, // [top, bottom] color = "currentColor", // bar fill color titleColor = "white", // title fill color when atop bar titleAltColor = "currentColor", // title fill color when atop background } = {}) { // Compute values. console.log("in player chart"); console.log(data); const X = d3.map(data, x); const Y = d3.map(data, y); // Compute default domains, and unique the y-domain. if (xDomain === undefined) xDomain = [0, d3.max(X)]; if (yDomain === undefined) yDomain = Y; yDomain = new d3.InternSet(yDomain); // Omit any data not present in the y-domain. const I = d3.range(X.length).filter(i => yDomain.has(Y[i])); // Compute the default height. if (height === undefined) height = Math.ceil((yDomain.size + yPadding) * 25) + marginTop + marginBottom; if (yRange === undefined) yRange = [marginTop, height - marginBottom]; // Construct scales and axes. const xScale = xType(xDomain, xRange); const yScale = d3.scaleBand(yDomain, yRange).padding(yPadding); const xAxis = d3.axisTop(xScale).ticks(width / 80, xFormat); const yAxis = d3.axisLeft(yScale).tickSizeOuter(0); // Compute titles. if (title === undefined) { const formatValue = xScale.tickFormat(200, xFormat); title = i => `${formatValue(X[i])}`; } else { const O = d3.map(data, d => d); const T = title; title = i => T(O[i], i, data); } const svg3 = d3.create("svg").attr("id", "svg3") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); svg3.append("g") .attr("transform", `translate(0,${marginTop})`) .call(xAxis) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").clone() .attr("y2", height - marginTop - marginBottom) .attr("stroke-opacity", 0.1)) .call(g => g.append("text") .attr("x", width - marginRight) .attr("y", -22) .attr("fill", "black") .attr("text-anchor", "end").attr("font-size", 16) .text(xLabel)); svg3.append("g") .selectAll("rect") .data(I) .join( enter => enter.append('rect'), exit => exit.remove() ).attr("fill", function(i) { if (Y[i] === "Clay") return "#ff968f"; if (Y[i] === "Hard") return "#b0caff"; if (Y[i] === "Grass") return "green"; }) .attr("x", xScale(0)) .attr("y", i => yScale(Y[i])) .attr("width", i => xScale(X[i]) - xScale(0)) .attr("height", yScale.bandwidth()); svg3.append("g") .attr("fill", "white") .attr("text-anchor", "end") .attr("font-family", "sans-serif") .attr("font-size", 16) .selectAll("text") .data(I) .join("text") .attr("x", i => xScale(X[i] )) .attr("y", i => yScale(Y[i]) + yScale.bandwidth() / 2) .attr("dy", "0.35em") .attr("dx", -4) .text(title) .call(text => text.filter(i => xScale(X[i]) - xScale(0) < 20) // short bars .attr("dx", +4) .attr("fill", "white") .attr("text-anchor", "start")).attr("font-size", 16).attr("font-weight", "bold"); svg3.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(yAxis); //add lines for hard record, clay record, grass record return svg3.node(); }4a:Tea0,function clayMap() { let width = 600 let height = 300 const svg_map_container = d3.create("svg").attr("width", width).attr("height", height) // Map and projection var path = d3.geoPath(); const projection = d3.geoNaturalEarth1() .scale(width / 2 / Math.PI) .translate([width / 2, height / 2]) var path = d3.geoPath().projection(projection); var colorScheme = d3Chrome.schemeGreys[6]; var colorScale = d3.scaleThreshold().domain([6, 11, 16, 21, 31]).range(colorScheme); var g = svg_map_container.append("g").attr("class", "legend") .attr("transform", "translate(20,20)"); var labels = ['1-5', '6-10', '11-15', '16-20', '21 - 30', '30+']; var legend = leg.legendColor() .labels(function (d) { return labels[d.i]; }) .shapePadding(20) .scale(colorScale).labelOffset(18).labelAlign("middle");; svg_map_container.select(".legend").call(legend); // Load external data and boot d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson").then( function(data) { data.features = data.features.filter(function(d){return d.properties.name!="Antarctica"}) //no players from antarctica (use this to control on click behavior => on click of country show list of players and their upsets, include reset button) var upsetsById = {}; clay_upsets.forEach(function(d) { upsetsById[d.id] = +d.num_players_clay; }); data.features.forEach(function(d) { d.upsets = upsetsById[d.id] }); // Draw the map var countries_grp = svg_map_container.append("g") .selectAll("path") .data(data.features) .join("path") .attr("d", d3.geoPath().projection(projection)) .attr("id", function(d, i) { return "country" + d.id; }) .attr("fill", function (d) { //sum total for the country let country = clay_upsets.filter(c => c.country_id == d.id); let total = 0; if (country.length > 0) { total = country[0].num_players_clay; } else {return "white";} return colorScale(total); }) .style("stroke", "red").style('stroke-width', 0.1) .on('mouseover',function(d, i){ d3.select(this) .style("opacity", 1) .style("stroke","red") .style("stroke-width",4); var country = clay_upsets.filter(c => c.country_id == i.id); let total = 0; if (country.length > 0) { total = country[0].num_players_clay; } svg_map_container.append('text') .attr('class', 'ptLabel') .style('background-color', 'white')//Set class to 'ptLabel' so can remove easily later .attr('x', d.layerX + 1) .attr('y', d.layerY - 10) // .attr('x', 250) // .attr('y', 250) .attr('fill', "red") .text(i.id + ": " + total + " player(s)") }) .on('mouseout', function(d){ svg_map_container.selectAll('.ptLabel').remove() d3.select(this) .style("opacity", 0.8) .style("stroke","red") .style("stroke-width",0.1); }).on('click',function(d, i){ var country = players100clay.filter(c => c.country_id == i.id); if (country.length > 0) { selected_countryA.id = country[0].country_id; selected_countryA.country = country[0].country_name; update100Players(); } //console.log(selected_countryA); }); }) return svg_map_container.node() }4b:Td43,function hardMap() { let width = 600 let height = 300 const svg_map_container = d3.create("svg").attr("width", width).attr("height", height).attr("id", "hardViz") // Map and projection var path = d3.geoPath(); const projection = d3.geoNaturalEarth1() .scale(width / 2 / Math.PI) .translate([width / 2, height / 2]) var path = d3.geoPath().projection(projection); var colorScheme = d3Chrome.schemeGreys[6]; var colorScale = d3.scaleThreshold().domain([ 6, 11, 16, 21, 31]).range(colorScheme); var g = svg_map_container.append("g").attr("class", "legend") .attr("transform", "translate(20,20)"); var labels = [ '1-5', '6-10', '11-15', '16-20', '21-30', '30+']; var legend = leg.legendColor() .labels(function (d) { return labels[d.i]; }) .shapePadding(20) .scale(colorScale).labelOffset(18).labelAlign("middle"); svg_map_container.select(".legend").call(legend); // Load external data and boot d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson").then( function(data) { data.features = data.features.filter(function(d){return d.properties.name!="Antarctica"}) //no players from antarctica (use this to control on click behavior => on click of country show list of players and their upsets, include reset button) // Draw the map svg_map_container.append("g") .selectAll("path") .data(data.features) .join("path") .attr("fill", function (d) { //sum total for the country let country = hard_upsets.filter(c => c.country_id == d.id); let total = 0; if (country.length > 0) { total = country[0].num_players_hard; } else {return "white";} return colorScale(total); }) .attr("d", d3.geoPath().projection(projection)) .style("stroke", "blue").style("stroke-width",0.1).on('mouseover',function(d, i){ d3.select(this) .style("opacity", 1) .style("stroke","blue") .style("stroke-width",4); var country = hard_upsets.filter(c => c.country_id == i.id); let total = 0; if (country.length > 0) { total = country[0].num_players_hard; } svg_map_container.append('text') .attr('class', 'ptLabel') .style('background-color', 'white')//Set class to 'ptLabel' so can remove easily later .attr('x', d.layerX + 1) .attr('y', d.layerY - 10) .attr('fill', "blue") .text(i.id + ": " + total + " player(s)") }) .on('mouseout', function(d){ svg_map_container.selectAll('.ptLabel').remove() d3.select(this) .style("opacity", 0.8) .style("stroke","blue") .style("stroke-width",0.1); }).on('click',function(d, i){ var country = players100hard.filter(c => c.country_id == i.id); if (country.length > 0) { selected_countryA.id = country[0].country_id; selected_countryA.country = country[0].country_name; update100Players(); } }); }) return svg_map_container.node() }4c:Td20,function grassMap() { let width = 600 let height = 300 const svg_map_container = d3.create("svg").attr("width", width).attr("height", height) // Map and projection var path = d3.geoPath(); const projection = d3.geoNaturalEarth1() .scale(width / 2 / Math.PI) .translate([width / 2, height / 2]) var path = d3.geoPath().projection(projection); var colorScheme = d3Chrome.schemeGreys[6]; var colorScale = d3.scaleThreshold().domain([ 6, 11, 16, 21, 31]).range(colorScheme); var g = svg_map_container.append("g").attr("class", "legend") .attr("transform", "translate(20,20)"); var labels = ['1-5', '6-10', '11-15', '16-20', '21-30', '30+']; var legend = leg.legendColor() .labels(function (d) { return labels[d.i]; }) .shapePadding(20) .scale(colorScale).labelOffset(18).labelAlign("middle");; svg_map_container.select(".legend").call(legend); // Load external data and boot d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson").then( function(data) { data.features = data.features.filter(function(d){return d.properties.name!="Antarctica"}) //no players from antarctica (use this to control on click behavior => on click of country show list of players and their upsets, include reset button) // Draw the map svg_map_container.append("g") .selectAll("path") .data(data.features) .join("path") .attr("fill", function (d) { //sum total for the country let country = grass_upsets.filter(c => c.country_id == d.id); let total = 0; if (country.length > 0) { total = country[0].num_players_grass; } else {return "white";} return colorScale(total); }) .attr("d", d3.geoPath().projection(projection)) .style("stroke", "green").style("stroke-width",0.1).on('mouseover',function(d, i){ d3.select(this) .style("opacity", 1) .style("stroke","green") .style("stroke-width",4); var country = grass_upsets.filter(c => c.country_id == i.id); let total = 0; if (country.length > 0) { total = country[0].num_players_grass; } svg_map_container.append('text') .attr('class', 'ptLabel') .style('background-color', 'white')//Set class to 'ptLabel' so can remove easily later .attr('x', d.layerX + 1) .attr('y', d.layerY - 10) .attr('fill', "green") .text(i.id + ": " + total + " player(s)") }) .on('mouseout', function(d){ svg_map_container.selectAll('.ptLabel').remove() d3.select(this) .style("opacity", 0.8) .style("stroke","green") .style("stroke-width",0.1); }).on('click',function(d, i){ var country = players100grass.filter(c => c.country_id == i.id); if (country.length > 0) { selected_countryA.id = country[0].country_id; selected_countryA.country = country[0].country_name; update100Players(); } }); }) return svg_map_container.node() }4d:T13a3,function tree(id){ // set the dimensions and margins of the graph const margin = {top: 10, right: 10, bottom: 10, left: 10}, width = 425 - margin.left - margin.right, height = 350 - margin.top - margin.bottom; // append the svg object to the body of the page const svg = d3.create("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom).attr("id", "tree-map") // .append("g") // .attr("transform", // `translate(${margin.left}, ${margin.top})`); console.log(radios); var gs = 0; if (radios == "Grand Slams") { gs = 1; } console.log(gs) if (gs) {d3.select("#titles-won-title").text("Grand Slam Titles Won By Male Players from " + selected_country.country); } else { console.log("in. here"); console.log(d3.select("#titles-won-title")); d3.select("#titles-won-title").text("All Professional Titles Won By Male Players from " + selected_country.country); } //var gs = document.getElementById("level-radio").firstChild.nextSibling.firstChild.nextSibling.nextSibling.firstChild.nextSibling.firstChild.checked; var adjusted = []; if (gs) { var num = -1; for (var i = 0; i < gsCountryTitles.length; i++) { if (gsCountryTitles[i].country_id === id) {num = i;} } var raw_data; if (num >= 0) { raw_data = gsCountryTitles[num]; adjusted = [{name: "Origin", parent: "", value: ""}, {name: "clay", parent: "Origin", value: raw_data.sum_clay_slams},{name: "hard", parent: "Origin", value: raw_data.sum_hard_slams},{name: "grass", parent: "Origin", value: raw_data.sum_grass_slams},]; } else { return (emptyTree()); adjusted = [{name: "Origin", parent: "", value: ""}, {name: "clay", parent: "Origin", value: 0},{name: "hard", parent: "Origin", value: 0},{name: "grass", parent: "Origin", value: 0},]; } // Read data } else { var num = -1; for (var i = 0; i < titles.length; i++) { if (titles[i].country_id === id) {num = i;} } if (num >= 0) { var raw_data = titles[num]; // Read data adjusted = [{name: "Origin", parent: "", value: ""}, {name: "clay", parent: "Origin", value: raw_data.clay_titles},{name: "hard", parent: "Origin", value: raw_data.hard_titles},{name: "grass", parent: "Origin", value: raw_data.grass_titles},]; } else { var raw_data = titles[num]; // Read data return (emptyTree()); adjusted = [{name: "Origin", parent: "", value: ""}, {name: "clay", parent: "Origin", value: 0},{name: "hard", parent: "Origin", value: 0},{name: "grass", parent: "Origin", value: 0},]; } } adjusted = adjusted.filter((n) => {return n.value > 0 || n.name === "Origin"}); // stratify the data: reformatting for d3.js const root = d3.stratify() .id(function(d) { return d.name; }) // Name of the entity (column name is name in csv) .parentId(function(d) { return d.parent; }) // Name of the parent (column name is parent in csv) (adjusted); root.sum(function(d) { return +d.value }) // Compute the numeric value for each entity // Then d3.treemap computes the position of each element of the hierarchy // The coordinates are added to the root object above d3.treemap() .size([width, height]) .padding(4) (root) // use this information to add rectangles: svg .selectAll("rect") .data(root.leaves()) .join("rect") .attr('x', function (d) { return d.x0; }) .attr('y', function (d) { return d.y0; }) .attr('width', function (d) { return d.x1 - d.x0; }) .attr('height', function (d) { return d.y1 - d.y0; }) .style("stroke", "black") .style("fill", function (d) { if (d.data.name === "clay") return "#ff968f"; if (d.data.name === "hard") return "#b0caff"; if (d.data.name === "grass") return "green"; }).on('mouseover',function(d, i){ var added = ""; if (gs) added = " grand slam"; d3.select(this) .style("opacity", .8); svg.append('text') .attr('class', 'ptLabel') .style('background-color', 'white')//Set class to 'ptLabel' so can remove easily later .attr('x', 0) .attr('y', 343) .attr('fill', "black") .text(selected_country.id + ": " + i.value + added + " title(s) won by male players on " + i.id ); }) .on('mouseout', function(d){ svg.selectAll('.ptLabel').remove() d3.select(this) .style("opacity", 1) }); // and to add the text labels svg .selectAll("text") .data(root.leaves()) .join("text") .attr("x", function(d){ return d.x0+10}) // +10 to adjust position (more right) .attr("y", function(d){ return d.y0+20}) // +20 to adjust position (lower) .text(function(d){ return (d.data.name + ": " + d.data.value) }) .attr("font-size", "15px") .attr("fill", "white") return svg.node() }4e:T117f,function overall() { let width = 600 let height = 300 const svg_map_container = d3.create("svg").attr("width", width).attr("height", height).attr("id", "container"); // Map and projection var path = d3.geoPath(); const projection = d3.geoNaturalEarth1() .scale(width / 2 / Math.PI) .translate([width / 2, height / 2]) var path = d3.geoPath().projection(projection); // Load external data and boot d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson").then( function(data) { data.features = data.features.filter(function(d){return d.properties.name!="Antarctica"}) //no players from antarctica (use this to control on click behavior => on click of country show list of players and their upsets, include reset button) const Tooltip = svg_map_container.append("div") .attr("class", "tooltip") .style("opacity", 1) .style("background-color", "white") .style("border", "solid") .style("border-width", "2px") .style("border-radius", "5px") .style("padding", "5px") // Draw the map svg_map_container.append("g") .selectAll("path") .data(data.features) .join("path") .attr("fill", function (d) { //sum total for the country let country = fave_surfaces.filter(c => c.country_id == d.id); let favored = ""; if (country.length > 0) { favored = country[0].favorite_surface; } else {return "white";} if (favored === "clay") return "#ff968f"; if (favored === "hard") return "#b0caff"; if (favored === "grass") return "green"; return "white"; }) .attr("d", d3.geoPath().projection(projection)) .style("stroke", "black").style("stroke-width",0.1).on('mouseover',function(d, i){ Tooltip.style("opacity", 1) d3.select(this) .style("opacity", 1) .style("stroke","yellow") .style("stroke-width",4); var country = fave_surfaces.filter(c => c.country_id == i.id); let favored = "Not enough data."; if (country.length > 0) { favored = country[0].favorite_surface; svg_map_container.append('text') .attr('class', 'ptLabel') .style('background-color', 'white')//Set class to 'ptLabel' so can remove easily later .attr('x', d.layerX + 1) .attr('y', d.layerY - 10) .attr('fill', "black") .text(country[0].country_id + ": " + favored); } else { svg_map_container.append('text') .attr('class', 'ptLabel') .style('background-color', 'white')//Set class to 'ptLabel' so can remove easily later .attr('x', d.layerX + 1) .attr('y', d.layerY - 10) .attr('fill', "black") .text(i.id + ": " + favored); } }) .on('mouseout', function(d){ svg_map_container.selectAll('.ptLabel').remove() d3.select(this) .style("opacity", 0.8) .style("stroke","black") .style("stroke-width",0.1); }).on('click',function(d, i){ var country = fave_surfaces.filter(c => c.country_id == i.id); if (country.length > 0) { selected_country.id = country[0].country_id; var country = ""; for (var i = 0; i < titles.length; i++) { if (titles[i].country_id == selected_country.id) {selected_country.country = titles[i].country_name;} } updateTree(); } }); }) var g = svg_map_container.append("g").attr("class", "legend") .attr("transform", "translate(20,20)"); var ordinal = d3.scaleOrdinal() .domain(["Hard", "Grass", "Clay"]) .range([ "#b0caff", "green", "#ff968f"]); svg_map_container.append("g") .attr("class", "legendOrdinal") .attr("transform", "translate(20,20)"); var legendOrdinal = leg.legendColor() .shape("path", d3.symbol().size(300)()) .shapePadding(40).labelOffset(15) .scale(ordinal); svg_map_container.select(".legendOrdinal") .call(legendOrdinal); return svg_map_container.node() }4f:Ta62,function update100Players() { var elem = document.getElementById("players100hard"); elem.remove(); var parent = document.getElementById("p-h"); var new_chart_holder = document.createElement("div"); new_chart_holder.id = "players100hard"; var chart = plotUpsetPlayers(players100hard.filter((n) => {return n.country_name == selected_countryA.country}), "hard", { x: d => d.rank, y: d => d.value, active: d => d.active, // title: d => d.name, xLabel: "Rank on Upset Leaderboard", yLabel: "# Upsets Scored", stroke: "gray", width: 600, height: 300 }); new_chart_holder.appendChild(chart); parent.appendChild(new_chart_holder); var elem2 = document.getElementById("players100grass"); elem2.remove(); var parent2 = document.getElementById("p-g"); var new_chart_holder2 = document.createElement("div"); new_chart_holder2.id = "players100grass"; var chart2 = plotUpsetPlayers(players100grass.filter((n) => {return n.country_name == selected_countryA.country}), "grass", { x: d => d.rank, y: d => d.value, active: d => d.active, // title: d => d.name, xLabel: "Rank on Upset Leaderboard", yLabel: "# Upsets Scored", stroke: "gray", width: 600, height: 300 }); new_chart_holder2.appendChild(chart2); parent2.appendChild(new_chart_holder2); var elem3 = document.getElementById("players100clay"); elem3.remove(); var parent3 = document.getElementById("p-c"); var new_chart_holder3 = document.createElement("div"); new_chart_holder3.id = "players100clay"; var chart3 = plotUpsetPlayers(players100clay.filter((n) => {return n.country_name == selected_countryA.country}), "clay", { x: d => d.rank, y: d => d.value, active: d => d.active, // title: d => d.name, xLabel: "Rank on Upset Leaderboard", yLabel: "# Upsets Scored", stroke: "gray", width: 600, height: 300 }); new_chart_holder3.appendChild(chart3); parent3.appendChild(new_chart_holder3); d3.select('#title1').text("Presence of Players from ").append("span").style("font-weight", "bold").text(selected_countryA.country).append("span").style("font-weight", "normal").text(" on Upsets Scored Leaderboard " + `(Hard)`); d3.select('#title2').text("Presence of Players from ").append("span").style("font-weight", "bold").text(selected_countryA.country).append("span").style("font-weight", "normal").text(" on Upsets Scored Leaderboard " + `(Grass)`); d3.select('#title3').text("Presence of Players from ").append("span").style("font-weight", "bold").text(selected_countryA.country).append("span").style("font-weight", "normal").text(" on Upsets Scored Leaderboard " + `(Clay)`); }50:T1bca,function plotUpsetPlayers(data, surface2, { x = ([x]) => x, // given d in data, returns the (quantitative) x-value y = ([, y]) => y, // given d in data, returns the (quantitative) y-value active, r = 5, // (fixed) radius of dots, in pixels title, // given d in data, returns the title marginTop = 20, // top margin, in pixels marginRight = 30, // right margin, in pixels marginBottom = 30, // bottom margin, in pixels marginLeft = 40, // left margin, in pixels inset = r * 2, // inset the default range, in pixels insetTop = inset, // inset the default y-range insetRight = inset, // inset the default x-range insetBottom = inset, // inset the default y-range insetLeft = inset, // inset the default x-range width = 600, // outer width, in pixels height = 600, // outer height, in pixels xType = d3.scaleLinear, // type of x-scale xDomain = [0, 100], // [xmin, xmax] xRange = [marginLeft + insetLeft, width - marginRight - insetRight], // [left, right] yType = d3.scaleLinear, // type of y-scale yDomain = [0, 100], // [ymin, ymax] yRange = [height - marginBottom - insetBottom, marginTop + insetTop], // [bottom, top] xLabel, // a label for the x-axis yLabel, // a label for the y-axis xFormat, // a format specifier string for the x-axis yFormat, // a format specifier string for the y-axis fill = "blue", // fill color for dots stroke = "currentColor", // stroke color for the dots strokeWidth = 1.5, // stroke width for dots } = {}) { // Compute values. // var only_ret = false; // var only_active = false; // if (activity_status == "Currently Active") only_active = true; // if (activity_status == "Retired") only_ret = true; // const A_active = d3.map(data, active); //HARD COURT VALUES const X = d3.map(data, x); const Y = d3.map(data, y); console.log(data); // Default domains based on hardcourt if (xDomain === undefined) xDomain = d3.extent(X); if (yDomain === undefined) yDomain = d3.extent(Y); // Construct scales and axes based on hard court const xScale = xType(xDomain, xRange); const yScale = yType(yDomain, yRange); const xAxis = d3.axisBottom(xScale).ticks(width / 30, xFormat); const yAxis = d3.axisLeft(yScale).ticks(height / 60, yFormat); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("id", "players100" + surface2) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(xAxis) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").clone() .attr("y2", marginTop + marginBottom - height) .attr("stroke-opacity", 0)) .call(g => g.append("text") .attr("x", width) .attr("y", marginBottom) .attr("fill", "currentColor") .attr("text-anchor", "end") .text(xLabel).style("font-size","14px").style("margin-top", "10px")); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(yAxis) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").clone() .attr("x2", width - marginLeft - marginRight) .attr("stroke-opacity", 0.1)) .call(g => g.append("text") .attr("x", -marginLeft) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text(yLabel).style("font-size","14px").style("margin-bottom", "10px")); var circles = svg.selectAll("circle") .data(data) .join("circle"); // initial characterization of circles circles.attr("class", "mycirc") .attr("cx", function(d){return xScale(d.rank);}) .attr("cy", function(d) {if (surface2 === "clay") { return yScale(d.value); } else return yScale(d.value);}) .attr("fill", function() { if (surface2 === "grass") return "green"; if (surface2 === "clay") return "#ff968f"; if (surface2 === "hard") return "#b0caff"; }) .attr("r", .1).on('mouseover', function (event, d) { d3.select(this).attr('r', 10) svg.append('text') .attr('class', 'ptLabel') .attr('id', d.name) .style('background-color', 'white')//Set class to 'ptLabel' so can remove easily later .attr('x', function(){ if (d.rank >= 50) {return xScale(d.rank - 25)} else { return (xScale(d.rank) - 5)}}) .attr('y', function() { if (surface2 === "clay") { return(yScale(d.value) - 25); } else { return(yScale(d.value) - 25); }}) .text(function() { var str = d.name + ": " + d.value + " upsets scored on " + surface2; return (str) }); }) .on('mouseout', function(event, d) { svg.selectAll('.ptLabel').remove() d3.select(this).attr('fill', function() { if (surface2 === "grass") return "green"; if (surface2 === "clay") return "#ff968f"; if (surface2 === "hard") return "#b0caff"; }).attr('r', 5) }); // svg.selectAll("mylabels") // .data(data) // .enter() // .append("text") // .attr('x', function(d) {return xScale(d.rank) - 5}) // .attr('y', function(d) {return yScale(d.value) - 15}).text(function(d) {return d.name}); svg.selectAll("myline") .data(data) .enter() .append("line") .attr("x1", function(d) { return xScale(d.rank); }) .attr("x2", function(d) { return xScale(d.rank); }) .attr("y1", function(d) { return yScale(d.value - 2); }) .attr("y2", yScale(0)) .attr("stroke", function(){if (surface2 === "grass") return "green"; if (surface2 === "clay") return "#ff968f"; if (surface2 === "hard") return "#b0caff";}).attr("stroke-width", 0.1) var lines = svg.selectAll("line"); // transition entrance of cicles circles.sort(function(a, b) { if (surface2 === "clay") { return d3.descending(+a.value, +b.value); } else { return d3.descending(+a.value, +b.value); } }) .transition() .delay(function(d, i) { return i * 10; }) .duration(2000) .attr("r", r).attr("stroke", "black"); lines.sort(function(a, b) { if (surface2 === "clay") { return d3.descending(+a.rank, +b.rank); } else { return d3.descending(+a.rank, +b.rank); } }) .transition() .delay(function(d, i) { return i * 10; }) .duration(2000).attr("stroke-width", 1); return svg.node(); }51:T1d17,function ScatterplotPoints(data, surface2, { x = ([x]) => x, // given d in data, returns the (quantitative) x-value y = ([, y]) => y, // given d in data, returns the (quantitative) y-value active, r = 5, // (fixed) radius of dots, in pixels title, // given d in data, returns the title marginTop = 20, // top margin, in pixels marginRight = 30, // right margin, in pixels marginBottom = 30, // bottom margin, in pixels marginLeft = 40, // left margin, in pixels inset = r * 2, // inset the default range, in pixels insetTop = inset, // inset the default y-range insetRight = inset, // inset the default x-range insetBottom = inset, // inset the default y-range insetLeft = inset, // inset the default x-range width = 600, // outer width, in pixels height = 600, // outer height, in pixels xType = d3.scaleLinear, // type of x-scale xDomain = [15, 50], // [xmin, xmax] xRange = [marginLeft + insetLeft, width - marginRight - insetRight], // [left, right] yType = d3.scaleLinear, // type of y-scale yDomain = [15, 50], // [ymin, ymax] yRange = [height - marginBottom - insetBottom, marginTop + insetTop], // [bottom, top] xLabel, // a label for the x-axis yLabel, // a label for the y-axis xFormat, // a format specifier string for the x-axis yFormat, // a format specifier string for the y-axis fill = "blue", // fill color for dots stroke = "currentColor", // stroke color for the dots strokeWidth = 1.5, // stroke width for dots } = {}) { // Compute values. // var only_ret = false; // var only_active = false; // if (activity_status == "Currently Active") only_active = true; // if (activity_status == "Retired") only_ret = true; // const A_active = d3.map(data, active); //HARD COURT VALUES const X = d3.map(data, x); const Y = d3.map(data, y); // Default domains based on hardcourt if (xDomain === undefined) xDomain = d3.extent(X); if (yDomain === undefined) yDomain = d3.extent(Y); // Construct scales and axes based on hard court const xScale = xType(xDomain, xRange); const yScale = yType(yDomain, yRange); const xAxis = d3.axisBottom(xScale).ticks(width / 60, xFormat); const yAxis = d3.axisLeft(yScale).ticks(height / 60, yFormat); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(xAxis) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").clone() .attr("y2", marginTop + marginBottom - height) .attr("stroke-opacity", 0.1)) .call(g => g.append("text") .attr("x", width) .attr("y", marginBottom) .attr("fill", "currentColor") .attr("text-anchor", "end") .text(xLabel).style("font-size","14px").style("margin-top", "10px")); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(yAxis) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").clone() .attr("x2", width - marginLeft - marginRight) .attr("stroke-opacity", 0.1)) .call(g => g.append("text") .attr("x", -marginLeft) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text(yLabel).style("font-size","14px").style("margin-top", "10px")); svg.append("line") .attr("x1", xScale(15)) .attr("y1", yScale(15)) .attr("x2", xScale(52)) .attr("y2", yScale(52)) .attr("stroke-width", 2) .attr("stroke", "grey") .attr("stroke-dasharray", "5,5") //style of svg-line ; var circles = svg.selectAll("circle") .data(data) .join("circle"); // === "Clay") return "#ff968f"; // === "Hard") return "#b0caff"; // === "Grass") return "green"; // initial characterization of circles circles.attr("class", "mycirc") .attr("cx", function(d){return xScale(d.value_grass);}) .attr("cy", function(d) {if (surface2 === "clay") { return yScale(d.value_clay); } else if (surface2 === "grass_only") { return yScale(d.value_grass);} else {return yScale(d.value);}}) .attr("fill", function(d) { if (surface2 === "clay") { if (d.value_clay > d.value_grass) { return "#ff968f"; } else { return "green"; } } else if (surface2 === "hard") { if (d.value > d.value_grass) { return "#b0caff"; } else { return "green"; } } }).attr("fill-opacity", function(d) { if (getOpacityHigh(d)) return 1; return .2; }).attr("stroke-opacity", function(d) {if (getOpacityHigh(d)) return 1; return 0;}) .attr("r", .1).on('mouseover', function (event, d) { if (surface2 === "clay" || surface2 === "hard") { d3.select(this).attr('fill', 'yellow').attr('r', 10) svg.append('text') .attr('class', 'ptLabel') .style('background-color', 'white')//Set class to 'ptLabel' so can remove easily later .attr('x', xScale(d.value_grass - 7)) .attr('y', function() { if (surface2 === "clay") { return(yScale(d.value_clay) - 15); } else { return(yScale(d.value) - 15); }}) .text(function() { console.log(d); if (surface2 === "clay") { var str = d.name + " Clay: " + d.value_clay + "s Grass: " + d.value_grass + "s"; return (str) } else { return (d.name + " Hard: " + d.value + "s Grass: " + d.value_grass + "s") } }); } }) .on('mouseout', function(event, d) { if (surface2 === "clay" || surface2 === "hard") { svg.selectAll('.ptLabel').remove() d3.select(this).attr('fill', function(d) { if (surface2 === "clay") { if (d.value_clay > d.value_grass) { return "#ff968f"; } else { return "green"; } }else if (surface2 === "hard") { if (d.value > d.value_grass) { return "#b0caff"; } else { return "green"; } } }).attr('r', 5) } }); // transition entrance of cicles circles.sort(function(a, b) { return d3.descending(+a.value_grass, +b.value_grass); // } else { // return d3.descending(+a.value, +b.value); // } }) .transition() .delay(function(d, i) { return i * 5; }) .duration(1000) .attr("r", r).attr("stroke", "black"); return svg.node(); }52:T3828,//CODE BASED ON MIKE BOSTOCK's SCATTERPLOT FRAMEWORK: https://observablehq.com/@d3/scatterplot function Scatterplot(data, rank_range, { x = ([x]) => x, // given d in data, returns the (quantitative) x-value x_c = ([x_c]) => x_c, x_g = ([x_g]) => x_g, y = ([, y]) => y, // given d in data, returns the (quantitative) y-value y_c = ([, y_c]) => y_c, y_g = ([, y_g]) => y_g, active, r = 5, // (fixed) radius of dots, in pixels title, // given d in data, returns the title marginTop = 20, // top margin, in pixels marginRight = 30, // right margin, in pixels marginBottom = 30, // bottom margin, in pixels marginLeft = 40, // left margin, in pixels inset = r * 2, // inset the default range, in pixels insetTop = inset, // inset the default y-range insetRight = inset, // inset the default x-range insetBottom = inset, // inset the default y-range insetLeft = inset, // inset the default x-range width = 640, // outer width, in pixels height = 400, // outer height, in pixels xType = d3.scaleLinear, // type of x-scale xDomain = [1, rank_range], // [xmin, xmax] xRange = [marginLeft + insetLeft, width - marginRight - insetRight], // [left, right] yType = d3.scaleLinear, // type of y-scale yDomain = [0, 26], // [ymin, ymax] yRange = [height - marginBottom - insetBottom, marginTop + insetTop], // [bottom, top] xLabel, // a label for the x-axis yLabel, // a label for the y-axis xFormat, // a format specifier string for the x-axis yFormat, // a format specifier string for the y-axis fill = "blue", // fill color for dots stroke = "currentColor", // stroke color for the dots strokeWidth = 1.5, // stroke width for dots } = {}) { // Compute values. var only_ret = false; var only_active = false; if (activity_status == "Currently Active") only_active = true; if (activity_status == "Retired") only_ret = true; const A_active = d3.map(data, active); //HARD COURT VALUES const X_hard = d3.map(data, x); const Y_hard = d3.map(data, y); //CLAY COURT VALUES const X_clay = d3.map(data, x_c); const Y_clay = d3.map(data, y_c); //GRASS COURT VALUES const X_grass = d3.map(data, x_g); const Y_grass = d3.map(data, y_g); var I_hard; var I_clay; var I_grass; if (only_active) { I_hard = d3.range(X_hard.length).filter(i => !isNaN(X_hard[i]) && !isNaN(Y_hard[i]) && X_hard[i] <= rank_range && X_hard[i] > 0 && A_active[i] == 'true'); I_clay = d3.range(X_clay.length).filter(i => !isNaN(X_clay[i]) && !isNaN(Y_clay[i]) && X_clay[i] <= rank_range && X_clay[i] > 0 && A_active[i] == 'true'); I_grass = d3.range(X_grass.length).filter(i => !isNaN(X_grass[i]) && !isNaN(Y_grass[i]) && X_grass[i] <= rank_range && X_grass[i] > 0 && A_active[i] == 'true'); } else if (only_ret) { I_hard = d3.range(X_hard.length).filter(i => !isNaN(X_hard[i]) && !isNaN(Y_hard[i]) && X_hard[i] <= rank_range && X_hard[i] > 0 && A_active[i] == 'false'); I_clay = d3.range(X_clay.length).filter(i => !isNaN(X_clay[i]) && !isNaN(Y_clay[i]) && X_clay[i] <= rank_range && X_clay[i] > 0 && A_active[i] == 'false'); I_grass = d3.range(X_grass.length).filter(i => !isNaN(X_grass[i]) && !isNaN(Y_grass[i]) && X_grass[i] <= rank_range && X_grass[i] > 0 && A_active[i] == 'false'); } else { I_hard = d3.range(X_hard.length).filter(i => !isNaN(X_hard[i]) && !isNaN(Y_hard[i]) && X_hard[i] <= rank_range && X_hard[i] > 0); I_clay = d3.range(X_clay.length).filter(i => !isNaN(X_clay[i]) && !isNaN(Y_clay[i]) && X_clay[i] <= rank_range && X_clay[i] > 0); I_grass = d3.range(X_grass.length).filter(i => !isNaN(X_grass[i]) && !isNaN(Y_grass[i]) && X_grass[i] <= rank_range && X_grass[i] > 0); }//make sure only data we want gets put in var includes_hard = false; var includes_clay = false; var includes_grass = false; for (const s of surface) { if (s == "Hard") includes_hard = true; if (s == "Clay") includes_clay = true; if (s == "Grass") includes_grass = true; } // Default domains based on hardcourt if (xDomain === undefined) xDomain = d3.extent(X_hard); if (yDomain === undefined) yDomain = d3.extent(Y_hard); // Construct scales and axes based on hard court const xScale = xType(xDomain, xRange); const yScale = yType(yDomain, yRange); const xAxis = d3.axisBottom(xScale).ticks(width / 80, xFormat); const yAxis = d3.axisLeft(yScale).ticks(height / 50, yFormat); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;").on('click', function(event, d) { var comparison = getComparison(selected_player.name); console.log(comparison); if (comparison == "0") { //no grass data if (get_player_court_data(name)[0].value != 0 && get_player_court_data(name)[1].value != 0) { d3.select('#player_info').text(selected_player.name + "'s average aces per match on hard is " + getComparisonHardtoClay(selected_player.name) + "x his average on clay."); } else { d3.select('#player_info').text("Ace per match data for " + selected_player.name + " is limited."); } } else if (comparison == 'In' || comparison == 'Na') { //no clay if (get_player_court_data(name)[0].value != 0 && get_player_court_data(name)[2].value != 0) { d3.select('#player_info').text(selected_player.name + "'s average aces per match on grass is " + getComparisonGrasstoHard(selected_player.name) + "x his average on hard."); } else { d3.select('#player_info').text("Ace per match data for " + selected_player.name + " is limited."); } } else { d3.select('#player_info').text(selected_player.name + "'s average aces per match on grass is " + getComparison(selected_player.name) + "x his average on clay."); } var elem = document.getElementById("player_chart"); elem.remove(); var parent = document.getElementById("player_chart_parent"); var new_chart_holder = document.createElement("div"); new_chart_holder.id = "player_chart"; var chart = PlayerChart(get_player_court_data(selected_player.name), { x: d => d.value, y: d => d.surface, xLabel: "Avg. Aces per Match", yLabel: "Surface", color: "blue" }); new_chart_holder.appendChild(chart); parent.appendChild(new_chart_holder); }); svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(xAxis) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").clone() .attr("y2", marginTop + marginBottom - height) .attr("stroke-opacity", 0.1)) .call(g => g.append("text") .attr("x", width) .attr("y", marginBottom) .attr("fill", "currentColor") .attr("text-anchor", "end") .text(xLabel).style("font-size","14px")); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(yAxis) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").clone() .attr("x2", width - marginLeft - marginRight) .attr("stroke-opacity", 0.1)) .call(g => g.append("text") .attr("x", -marginLeft) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text(yLabel).style("font-size","14px").style("margin-top", "10px")); if (includes_hard) { svg.append("g") .attr("fill", "#b0caff") .attr("stroke", "#b0caff") .attr("stroke-width", strokeWidth) .selectAll("circle") .data(I_hard) .join("circle") .attr("cx", i => xScale(X_hard[i])) .attr("cy", i => yScale(Y_hard[i])) .attr('fill', function(d) { // if (data[d].name == playerSearch1) { // return 'orange'; // } else { // return 'blue'; // } }) .attr("r", r).on('mouseover', function (event, d) { playerFunction(get_player_court_data(data[d].name)); //refresh(data[d].name); // selected_player.name = data[d] selected_player.name = data[d].name; d3.select(this).attr('fill', 'yellow').attr('r', 10) svg.append('text') .attr('class', 'ptLabel') .style('background-color', 'white')//Set class to 'ptLabel' so can remove easily later .attr('x', xScale(data[d].rank_hard) - 5) .attr('y', yScale(data[d].value_hard) - 5) .text(data[d].rank_hard + ". " + data[d].name + ", " + data[d].country_name); if (includes_clay && data[d].rank_clay > 0) { //d3.select(this).attr('fill', 'yellow') svg.append('text') .attr('class', 'ptLabel') //Set class to 'ptLabel' so can remove easily later .attr('x', xScale(data[d].rank_clay) - 5) .attr('y', yScale(data[d].value_clay) - 5) .text(data[d].rank_clay+ ". " + data[d].name + ", " + data[d].country_name ); } if (includes_grass && data[d].rank_grass > 0) { //d3.select(this).attr('fill', 'yellow') svg.append('text') .attr('class', 'ptLabel') //Set class to 'ptLabel' so can remove easily later .attr('x', xScale(data[d].rank_grass) - 5) .attr('y', yScale(data[d].value_grass) - 5) .text(data[d].rank_grass + ". " + data[d].name + ", " + data[d].country_name); } }) .on('mouseout', function(event, d) { svg.selectAll('.ptLabel').remove() d3.select(this).attr('fill', '#b0caff').attr('r', 5) }); } if (includes_clay) { svg.append("g") .attr("fill", "#ff968f") .attr("stroke", "#ff968f") .attr("stroke-width", strokeWidth) .selectAll("circle") .data(I_clay) .join("circle") .attr("cx", i => xScale(X_clay[i])) .attr("cy", i => yScale(Y_clay[i])) .attr("r", r) .on('mouseover', function (event, d) { d3.select(this).attr('fill', 'yellow').attr('r', 10) playerFunction(d); selected_player.name = data[d].name; if (includes_hard && data[d].rank_hard > 0) { //d3.select(this).attr('fill', 'yellow') svg.append('text') .attr('class', 'ptLabel') //Set class to 'ptLabel' so can remove easily later .attr('x', xScale(data[d].rank_hard) - 5) .attr('y', yScale(data[d].value_hard) - 5) .text(data[d].rank_hard + ". " + data[d].name + ", " + data[d].country_name ); } if (includes_grass && data[d].rank_grass > 0) { //d3.select(this).attr('fill', 'yellow') svg.append('text') .attr('class', 'ptLabel') //Set class to 'ptLabel' so can remove easily later .attr('x', xScale(data[d].rank_grass) - 5) .attr('y', yScale(data[d].value_grass) - 5) .text(data[d].rank_grass + ". " + data[d].name + ", " + data[d].country_name ); } svg.append('text') .attr('class', 'ptLabel') //Set class to 'ptLabel' so can remove easily later .attr('x', xScale(data[d].rank_clay) - 5) .attr('y', yScale(data[d].value_clay) - 5) .text(data[d].rank_clay + ". " + data[d].name + ", " + data[d].country_name ); }) .on('mouseout', function(event, d) { svg.selectAll('.ptLabel').remove() d3.select(this).attr('fill', '#ff968f').attr('r', 5) }); } if (includes_grass) { svg.append("g") .attr("fill", "green") .attr("stroke", "green") .attr("stroke-width", strokeWidth) .selectAll("circle") .data(I_grass) .join("circle") .attr("cx", i => xScale(X_grass[i])) .attr("cy", i => yScale(Y_grass[i])) .attr("r", r) .on('mouseover', function (event, d) { selected_player.name = data[d].name; playerFunction(d); d3.select(this).attr('fill', 'yellow').attr('r', 10) svg.append('text') .attr('class', 'ptLabel') //Set class to 'ptLabel' so can remove easily later .attr('x', xScale(data[d].rank_grass) - 5) .attr('y', yScale(data[d].value_grass) - 5) .text(data[d].rank_grass + ". " + data[d].name + ", " + data[d].country_name ); if (includes_hard && data[d].rank_hard > 0) { //d3.select(this).attr('fill', 'yellow') svg.append('text') .attr('class', 'ptLabel') //Set class to 'ptLabel' so can remove easily later .attr('x', xScale(data[d].rank_hard) - 5) .attr('y', yScale(data[d].value_hard) - 5) .text(data[d].rank_hard + ". " + data[d].name + ", " + data[d].country_name ); } if (includes_clay && data[d].rank_clay > 0) { //d3.select(this).attr('fill', 'yellow') svg.append('text') .attr('class', 'ptLabel') //Set class to 'ptLabel' so can remove easily later .attr('x', xScale(data[d].rank_clay) - 5) .attr('y', yScale(data[d].value_clay) - 5) .text(data[d].rank_clay+ ". " + data[d].name + ", " + data[d].country_name ); } }) .on('mouseout', function(event, d) { svg.selectAll('.ptLabel').remove() d3.select(this).attr('fill', 'green').attr('r', 5) }); } return svg.node(); }53:[{"id":"4fec4c0c633e62fb1b25a23f1b1df9a43a6eec0263f3beb6ee1b5ce5f87318ad236eadcd1869d17e1ca9fd701b47fa598ef9f172c628601505ca1a28e2c4a670","href":"https://static.observableusercontent.com/files/4fec4c0c633e62fb1b25a23f1b1df9a43a6eec0263f3beb6ee1b5ce5f87318ad236eadcd1869d17e1ca9fd701b47fa598ef9f172c628601505ca1a28e2c4a670","name":"GOATList.csv","type":"text/csv","lastModified":1639183630393.27,"size":95815},{"id":"27e9a8d74c6eef30b2b15566e082e75d3b14198d7b5bf3aebf14be08c8e51bad1b29c2320b6128fd1a77f3645317d5b137e0a67a5bd8e6a48db94d323ba39b83","href":"https://static.observableusercontent.com/files/27e9a8d74c6eef30b2b15566e082e75d3b14198d7b5bf3aebf14be08c8e51bad1b29c2320b6128fd1a77f3645317d5b137e0a67a5bd8e6a48db94d323ba39b83","name":"upsets_collapsed.csv","type":"text/csv","lastModified":1639183630393.27,"size":1480},{"id":"fd831ed849b1e73c0ea3d273b1faf55f57b9f23155ad2a94a787faa478c35b638610a9e1803ea9ad35b0f3cf4d913ae6ef5c50d5a83dfb32a58929659158568b","href":"https://static.observableusercontent.com/files/fd831ed849b1e73c0ea3d273b1faf55f57b9f23155ad2a94a787faa478c35b638610a9e1803ea9ad35b0f3cf4d913ae6ef5c50d5a83dfb32a58929659158568b","name":"upsets_scored_w_total.csv","type":"text/csv","lastModified":1639183630393.27,"size":54928},{"id":"a37d7962493c194bffbbb37588f715aa0ab04f681084cba0694c6151833512e95f9d946b197f7994e233e903cf57b068f21cce537b34552a96a45be0d1413430","href":"https://static.observableusercontent.com/files/a37d7962493c194bffbbb37588f715aa0ab04f681084cba0694c6151833512e95f9d946b197f7994e233e903cf57b068f21cce537b34552a96a45be0d1413430","name":"matches_won_lost_pct_vsTop20_hard.csv","type":"text/csv","lastModified":1639183630393.27,"size":20312},{"id":"339bedb3909652e57affa8a9f57cc9909efc3c19a5e9586e4583bccf388bb8d3f7aefca0585b5d825800b4bd0df9b6b5394d4660af4c0ae868509836b4a932f8","href":"https://static.observableusercontent.com/files/339bedb3909652e57affa8a9f57cc9909efc3c19a5e9586e4583bccf388bb8d3f7aefca0585b5d825800b4bd0df9b6b5394d4660af4c0ae868509836b4a932f8","name":"Matches_won_lost_pct_vsTop10_allsurfaces.csv","type":"text/csv","lastModified":1639183630393.27,"size":28366},{"id":"cd25448936a56e5e07e2b1e6c983e10a618d946eb2321a817b7bbb702f06c37b0ec874fa71f837d94a09e120ca7ca51fa80bd3956cfb67be118c0dd3885889ba","href":"https://static.observableusercontent.com/files/cd25448936a56e5e07e2b1e6c983e10a618d946eb2321a817b7bbb702f06c37b0ec874fa71f837d94a09e120ca7ca51fa80bd3956cfb67be118c0dd3885889ba","name":"matches_won_lost_pct_hard.csv","type":"text/csv","lastModified":1639183630393.27,"size":26332},{"id":"98f5abef22b3b7f547ceaa8b212dfe163107c490881d89a073812f985ed520b415f1e7bad27cb1c182964b7c16aad4b93802391d9a5dbfaf70f8eb4707142b35","href":"https://static.observableusercontent.com/files/98f5abef22b3b7f547ceaa8b212dfe163107c490881d89a073812f985ed520b415f1e7bad27cb1c182964b7c16aad4b93802391d9a5dbfaf70f8eb4707142b35","name":"matches_won_lost_pct_vsTop5_grass.csv","type":"text/csv","lastModified":1639183630393.27,"size":7786},{"id":"ba94ba5a7f323f486c4218cd73c859e939b8da9afa10e7f55fbea8ec697496846be7d163e644e7d3be15627437b739e6fe79b70b3edf113a16576ca8ac040d8b","href":"https://static.observableusercontent.com/files/ba94ba5a7f323f486c4218cd73c859e939b8da9afa10e7f55fbea8ec697496846be7d163e644e7d3be15627437b739e6fe79b70b3edf113a16576ca8ac040d8b","name":"clay@1.png","type":"image/png","lastModified":1639183630393.27,"size":5229},{"id":"cf0c9d5ef396a94e3126f4fe951000b6f35f1190e5ab8fceac886526700d5817c86af31324be6c6d741827ad064e8b167a754d05b1f07929b277b562ff51f7d9","href":"https://static.observableusercontent.com/files/cf0c9d5ef396a94e3126f4fe951000b6f35f1190e5ab8fceac886526700d5817c86af31324be6c6d741827ad064e8b167a754d05b1f07929b277b562ff51f7d9","name":"grass@1.png","type":"image/png","lastModified":1639183630393.27,"size":5231},{"id":"05a69c342fb86cbabe66ca1a3284ae4fc1c34cd339afe6e854b064e0d56290fd8e7f529ad0e098a0d4610ca102329d34370f92afdfaefced00d8977f171f1d07","href":"https://static.observableusercontent.com/files/05a69c342fb86cbabe66ca1a3284ae4fc1c34cd339afe6e854b064e0d56290fd8e7f529ad0e098a0d4610ca102329d34370f92afdfaefced00d8977f171f1d07","name":"hard.png","type":"image/png","lastModified":1639183630393.27,"size":5181},{"id":"785e5347211d54ad9f737bf57d9f384bc30ec287c87fc09b7c73b5040154821db45106d871028011ac2a695ffac67d1cf17ce4f354f4e17fa42cbe6b733c9455","href":"https://static.observableusercontent.com/files/785e5347211d54ad9f737bf57d9f384bc30ec287c87fc09b7c73b5040154821db45106d871028011ac2a695ffac67d1cf17ce4f354f4e17fa42cbe6b733c9455","name":"leg1.png","type":"image/png","lastModified":1639183630393.27,"size":5768},{"id":"99b7497403fd563d048f5540234276aa9c9990a04938a98daee23d4437f868ca7c0245d3d9bf42ff71816f5ca76f04110786221b5796cc951dee4e696ee44f45","href":"https://static.observableusercontent.com/files/99b7497403fd563d048f5540234276aa9c9990a04938a98daee23d4437f868ca7c0245d3d9bf42ff71816f5ca76f04110786221b5796cc951dee4e696ee44f45","name":"french.csv","type":"text/csv","lastModified":1639183630393.27,"size":11027},{"id":"98864e673d0ed2ad1b86f9ed518101733ebdabf60b84241ff14f4708eda6d57c0b8593fc39386721491882c6b14836eb679f85c81fb59e406feb0efd9c96d886","href":"https://static.observableusercontent.com/files/98864e673d0ed2ad1b86f9ed518101733ebdabf60b84241ff14f4708eda6d57c0b8593fc39386721491882c6b14836eb679f85c81fb59e406feb0efd9c96d886","name":"aceATPdata.csv","type":"text/csv","lastModified":1639183630393.27,"size":47609},{"id":"99ec4b0e5268c5a9131553e51af431523084bd00d9e83246719e99276ba82a96f68b7ce0c7ac61cd671b4a6db65c12335d670acc0efffc327028e0f50dae5c05","href":"https://static.observableusercontent.com/files/99ec4b0e5268c5a9131553e51af431523084bd00d9e83246719e99276ba82a96f68b7ce0c7ac61cd671b4a6db65c12335d670acc0efffc327028e0f50dae5c05","name":"upsets100clay_players.csv","type":"text/csv","lastModified":1639183630393.27,"size":5149},{"id":"838f54571bf217c9a187a7e7de1d3ad3b0c54939b4740609e92762a748c2fbe4616677059304e3c57782d89d30b123be210be85c002bdaf07c7614081d047f67","href":"https://static.observableusercontent.com/files/838f54571bf217c9a187a7e7de1d3ad3b0c54939b4740609e92762a748c2fbe4616677059304e3c57782d89d30b123be210be85c002bdaf07c7614081d047f67","name":"upsets100hard_players.csv","type":"text/csv","lastModified":1639183630393.27,"size":5582},{"id":"def3603345aba2146e3e57beb38641ad75f06394b775f3341c6c4e050db4effb4210c9678b7ff1b15ca8da445d5789b13a84acade2a1b8d0d180b4be1740b9fe","href":"https://static.observableusercontent.com/files/def3603345aba2146e3e57beb38641ad75f06394b775f3341c6c4e050db4effb4210c9678b7ff1b15ca8da445d5789b13a84acade2a1b8d0d180b4be1740b9fe","name":"upsets100grass_players.csv","type":"text/csv","lastModified":1639183630393.27,"size":5407},{"id":"280c7a2ae8d5846b5b1821f63505328abf6ecf44a5db6c0e9c05475ae4ef50b4e320acecd04827e43e5df69c0403e1781cd6e757d512ff2867be934e9fc0b517","href":"https://static.observableusercontent.com/files/280c7a2ae8d5846b5b1821f63505328abf6ecf44a5db6c0e9c05475ae4ef50b4e320acecd04827e43e5df69c0403e1781cd6e757d512ff2867be934e9fc0b517","name":"grandslamsbycountry.csv","type":"text/csv","lastModified":1639183630393.27,"size":654},{"id":"15eff9ff73d2a8e799a126548acf6e2690b01b26020b72c033de97d8aabe3a7898223de430f3e55ff9fed283e5abbd78eae5bdacf9a6ab36b9c323fe6c9abfb5","href":"https://static.observableusercontent.com/files/15eff9ff73d2a8e799a126548acf6e2690b01b26020b72c033de97d8aabe3a7898223de430f3e55ff9fed283e5abbd78eae5bdacf9a6ab36b9c323fe6c9abfb5","name":"alltitlesbycountry.csv","type":"text/csv","lastModified":1639183630393.27,"size":2017},{"id":"0e86f5285bdffbcef98d52446671b2f0af4cfd929e9e877e70ed3f2140be8f1860a529cf121228510598adb7a7c905d448fee7a28d063d394ee72154ec9a2b5b","href":"https://static.observableusercontent.com/files/0e86f5285bdffbcef98d52446671b2f0af4cfd929e9e877e70ed3f2140be8f1860a529cf121228510598adb7a7c905d448fee7a28d063d394ee72154ec9a2b5b","name":"fave_surfaces.csv","type":"text/csv","lastModified":1639183630393.27,"size":1890},{"id":"4ca03c04f54974bd32fe67d7e5575671f07cb4208afdc3ab533ea2ee8e607bcb5c293078c800897b0ce3249349c62565a6ed0ac1a5e0c856100575f8ab243fb4","href":"https://static.observableusercontent.com/files/4ca03c04f54974bd32fe67d7e5575671f07cb4208afdc3ab533ea2ee8e607bcb5c293078c800897b0ce3249349c62565a6ed0ac1a5e0c856100575f8ab243fb4","name":"top100upsetshard.csv","type":"text/csv","lastModified":1639183630393.27,"size":813},{"id":"23d2ca2c58fb775155a1abb248225f4379691228eb113200844bb18e1471885ddf7272a29e50da648c0d306fc9048ea33ca30bc1e5db437060d4b3e6a2225c17","href":"https://static.observableusercontent.com/files/23d2ca2c58fb775155a1abb248225f4379691228eb113200844bb18e1471885ddf7272a29e50da648c0d306fc9048ea33ca30bc1e5db437060d4b3e6a2225c17","name":"top100upsetsgrass.csv","type":"text/csv","lastModified":1639183630393.27,"size":604},{"id":"091a8bdd23df1f14602cb4d3e857b221f19ed01a513fd00c3a31c1116470592cdb8e01114ad5c867f2bb6c4c27574f8a4f1808d087691d5210c425ce13337687","href":"https://static.observableusercontent.com/files/091a8bdd23df1f14602cb4d3e857b221f19ed01a513fd00c3a31c1116470592cdb8e01114ad5c867f2bb6c4c27574f8a4f1808d087691d5210c425ce13337687","name":"top100upsets.csv","type":"text/csv","lastModified":1639183630393.27,"size":572},{"id":"904017a244e9f09c472231862328d7cd8f2522ec2baaf918f4ad74e7fc7cf90771a4cb71d89b637f728b408c3daa993014a25da79613f8c1411d42d6f348461c","href":"https://static.observableusercontent.com/files/904017a244e9f09c472231862328d7cd8f2522ec2baaf918f4ad74e7fc7cf90771a4cb71d89b637f728b408c3daa993014a25da79613f8c1411d42d6f348461c","name":"hardVgrass.csv","type":"text/csv","lastModified":1639183630393.27,"size":25565},{"id":"164a46f5e88cc54cbe97d529388f8779077f4505d3c3080b798691cabfedd210655adedc5e47ae05d69cbdf4ba67a64803c5338f4f365411be752e29e999caa9","href":"https://static.observableusercontent.com/files/164a46f5e88cc54cbe97d529388f8779077f4505d3c3080b798691cabfedd210655adedc5e47ae05d69cbdf4ba67a64803c5338f4f365411be752e29e999caa9","name":"clayVgrass.csv","type":"text/csv","lastModified":1639183630393.27,"size":19393},{"id":"1a512666f0e255acfbab97f672eb48094490f4133bf73c49a99e03cdb61051b498234e4077dcbbf7a5ea9f21555c4f83dcbae6c4ab85cc67c5d57cb8a533eecf","href":"https://static.observableusercontent.com/files/1a512666f0e255acfbab97f672eb48094490f4133bf73c49a99e03cdb61051b498234e4077dcbbf7a5ea9f21555c4f83dcbae6c4ab85cc67c5d57cb8a533eecf","name":"matches_won_lost_pct_vsTop5_allsurfaces.csv","type":"text/csv","lastModified":1639183630393.27,"size":16720},{"id":"54c05a6413b7f180422366b0e6c1097d3c4b0b751c55997c791f083876955bf64c0bf1dc283d422dbd094560365d59765d12ae4bf7332bfa44178bf9928e1031","href":"https://static.observableusercontent.com/files/54c05a6413b7f180422366b0e6c1097d3c4b0b751c55997c791f083876955bf64c0bf1dc283d422dbd094560365d59765d12ae4bf7332bfa44178bf9928e1031","name":"matches_won_lost_pct_vsTop5_hard.csv","type":"text/csv","lastModified":1639183630393.27,"size":14654},{"id":"a127f469ec175d2a6f90f177ee369d82dd373fc007bbd3f83df3dd3cfdd44a8660241524e208be2c616d9e09c7cd900333638b96814c448be71e86f3f3e49f51","href":"https://static.observableusercontent.com/files/a127f469ec175d2a6f90f177ee369d82dd373fc007bbd3f83df3dd3cfdd44a8660241524e208be2c616d9e09c7cd900333638b96814c448be71e86f3f3e49f51","name":"matches_won_lost_pct_vsTop10_clay.csv","type":"text/csv","lastModified":1639183630393.27,"size":18774},{"id":"9678f53fe5ecbe2d6a75c7281a59f13702db1a551f13f242a1719fa873ec2e24f250227b43a8c082fd748303089ea08e596933202a9a776a6573f619d3812d70","href":"https://static.observableusercontent.com/files/9678f53fe5ecbe2d6a75c7281a59f13702db1a551f13f242a1719fa873ec2e24f250227b43a8c082fd748303089ea08e596933202a9a776a6573f619d3812d70","name":"matches_won_lost_pct_vsTop5_clay.csv","type":"text/csv","lastModified":1639183630393.27,"size":9653},{"id":"5ff0b936b3a453ba385c33d6bb8a16177c1404db64e6071930ee12023166de7e9d73eebe3daae6e8a090053902db9d034a637f72f171854011da7566a56e5025","href":"https://static.observableusercontent.com/files/5ff0b936b3a453ba385c33d6bb8a16177c1404db64e6071930ee12023166de7e9d73eebe3daae6e8a090053902db9d034a637f72f171854011da7566a56e5025","name":"matches_won_lost_pct_vsTop20_allsurfaces.csv","type":"text/csv","lastModified":1639183630393.27,"size":24369},{"id":"be2318c21300e92f7797e17352ee7b41fce99d5a1fd7e1c596754870e2fec23943e24f7e437de5a2df9207b42429f94303c1f15496c0bcbbfc177c1451f5e60b","href":"https://static.observableusercontent.com/files/be2318c21300e92f7797e17352ee7b41fce99d5a1fd7e1c596754870e2fec23943e24f7e437de5a2df9207b42429f94303c1f15496c0bcbbfc177c1451f5e60b","name":"matches_won_lost_pct_vsTop20_clay.csv","type":"text/csv","lastModified":1639183630393.27,"size":15574},{"id":"af8b75be223430f684740703286522bc1b00dd15684435c2e80ed0aa3bd872efb3269efe48e50eaffd4f96e84a534842431a3291063605c7343e7a5402f0d870","href":"https://static.observableusercontent.com/files/af8b75be223430f684740703286522bc1b00dd15684435c2e80ed0aa3bd872efb3269efe48e50eaffd4f96e84a534842431a3291063605c7343e7a5402f0d870","name":"matches_won_lost_pct_overall_allsurfaces.csv","type":"text/csv","lastModified":1639183630393.27,"size":32873},{"id":"1ba09b853bfca05e47b9bed02120d5afecabe1d8d4ea31f5929b1cb79a2c9b7cbd88f2421714c71461bc793f503ed9851e9e734a89c3e223eede8d3dae4952e4","href":"https://static.observableusercontent.com/files/1ba09b853bfca05e47b9bed02120d5afecabe1d8d4ea31f5929b1cb79a2c9b7cbd88f2421714c71461bc793f503ed9851e9e734a89c3e223eede8d3dae4952e4","name":"matches_won_lost_pct_vsTop10_grass.csv","type":"text/csv","lastModified":1639183630393.27,"size":14485},{"id":"69a0a585158998a944ae1d7c54dcc82e5eefb37c0d0b683840d041b3b825aa5dea63de65d4c0edcf550326cd44f92f2f8070bb83a58f5f66f53825ca09578d5b","href":"https://static.observableusercontent.com/files/69a0a585158998a944ae1d7c54dcc82e5eefb37c0d0b683840d041b3b825aa5dea63de65d4c0edcf550326cd44f92f2f8070bb83a58f5f66f53825ca09578d5b","name":"matches_won_lost_pct_vsTop20_grass.csv","type":"text/csv","lastModified":1639183630393.27,"size":9779},{"id":"d0250c1bc65d4e20bd03e9fc6b4afe7d3d4044f4d80c5387d249b7e4740571919daac934db57ac3024f76ec4cd304730e9d33fbeede8a4bc3c65b3f47f755f9d","href":"https://static.observableusercontent.com/files/d0250c1bc65d4e20bd03e9fc6b4afe7d3d4044f4d80c5387d249b7e4740571919daac934db57ac3024f76ec4cd304730e9d33fbeede8a4bc3c65b3f47f755f9d","name":"matches_won_lost_pct_grass.csv","type":"text/csv","lastModified":1639183630393.27,"size":14274},{"id":"5aaa876271533f6ecf8bd0906f62474818255e8e51eb727c625511d30b6653a4fcf1eae563b443f6d9a0cf176bda9bad3972b277a59ca5071a54dde861c72f35","href":"https://static.observableusercontent.com/files/5aaa876271533f6ecf8bd0906f62474818255e8e51eb727c625511d30b6653a4fcf1eae563b443f6d9a0cf176bda9bad3972b277a59ca5071a54dde861c72f35","name":"matches_won_lost_pct_vsTop10_hard.csv","type":"text/csv","lastModified":1639183630393.27,"size":24724},{"id":"9e3d24b977c67f7ed0f0dd254b85f3b218c1bb4707f65cdca55c138bb1f48e55730db7a16af4b4507f4523a2b8b01fb8a94ea908aaf7823f985bc456c79a1040","href":"https://static.observableusercontent.com/files/9e3d24b977c67f7ed0f0dd254b85f3b218c1bb4707f65cdca55c138bb1f48e55730db7a16af4b4507f4523a2b8b01fb8a94ea908aaf7823f985bc456c79a1040","name":"matches_won_lost_pct_clay.csv","type":"text/csv","lastModified":1639183630393.27,"size":22591},{"id":"470114a9b068a2dc43b29997e5f121aca213479388bdb71605f533a56a12e3b96dbbaa5407cbeedbbf7c033381cf3413138ad3821dc47bd8027f3e8e43505fd7","href":"https://static.observableusercontent.com/files/470114a9b068a2dc43b29997e5f121aca213479388bdb71605f533a56a12e3b96dbbaa5407cbeedbbf7c033381cf3413138ad3821dc47bd8027f3e8e43505fd7","name":"aces_match_hard.csv","type":"text/csv","lastModified":1639183630393.27,"size":13120},{"id":"5b7bb44872469fc6f9f4256d902fba909728666ad0d5263654ce95f4470ec90527fdc39a1d1b70490f457d65c31795d651a4afc0745f72351916e715fddc7352","href":"https://static.observableusercontent.com/files/5b7bb44872469fc6f9f4256d902fba909728666ad0d5263654ce95f4470ec90527fdc39a1d1b70490f457d65c31795d651a4afc0745f72351916e715fddc7352","name":"map.json","type":"application/json","lastModified":1639183630393.27,"size":107761}] 32:{"id":"3c3e50bac7f030c8","slug":"tennis-courts-whats-beneath-the-surface","title":"Tennis Courts: What's Beneath the Surface?","thumbnail":"fd6ea7059aea65ee033d05f8d4471e9b73e28d4367c80a966a6b30717433c5b3","access_level":"public","create_time":"$D2021-12-11T00:47:10.393Z","update_time":"$D2021-12-11T06:20:07.985Z","view_time":null,"first_public_time":"$D2021-12-11T04:18:54.425Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"f9218e553d0fd01d","login":"a7abebda308e48bf","name":"Taylor Lallas","avatar_url":"https://avatars-next.observableusercontent.com/1e31c1bc899b2b3859a2da96a51d9e301a924b8cb0d48c5cb663349949a643e6","tier":"starter_2024"},"version":5298,"publish_version":5298,"role":null,"authored":false,"authors":[{"type":"individual","id":"a7abebda308e48bf","login":"a7abebda308e48bf","name":"Taylor Lallas","avatar_url":"https://avatars-next.observableusercontent.com/1e31c1bc899b2b3859a2da96a51d9e301a924b8cb0d48c5cb663349949a643e6","tier":null}],"members":[{"type":"individual","id":"a7abebda308e48bf","login":"a7abebda308e48bf","name":"Taylor Lallas","avatar_url":"https://avatars-next.observableusercontent.com/1e31c1bc899b2b3859a2da96a51d9e301a924b8cb0d48c5cb663349949a643e6","tier":null,"role":"editor"},{"type":"individual","id":"eb0f8bc62ef8f4ea","login":"eb0f8bc62ef8f4ea","name":"Jessica Yeung","avatar_url":"https://avatars-next.observableusercontent.com/ef16a450f9c3006e484c114bd737b3d6fce46cbfa4cf32427d2d20f468db8267","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Tennis Courts: What's Beneath the Surface?","cells":[{"id":5253,"value":"# Tennis Courts: What's Beneath the Surface?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4107,"value":"

By Taylor Lallas & Jessica Yeung

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4125,"value":"$34","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4227,"value":"$35","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4468,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4258,"value":"$36","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4401,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4385,"value":"$37","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4520,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4149,"value":"

Now that we have a grip on the surface types, we can look to the data to see our qualitative hypotheses play out in concrete ways! Like the beginning of any tennis point, we'll start with the serve.

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4540,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4539,"value":"\n

Bigger, Better, Faster: Great Servers are Most Advantaged by Fast Surfaces like Grass & Hard

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":279,"value":"viewof rank_range = Inputs.select([25, 50, 100], {value: 25, label: html `Top ___ servers by average # aces per match`}) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":444,"value":"viewof activity_status = Inputs.radio([\"All-time\", \"Currently Active\", \"Retired\"], {value: \"All-time\", label: html `Include only players from:`})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"viewof surface = Inputs.checkbox([\"Hard\", \"Clay\", \"Grass\"], {value: [\"Clay\", \"Grass\", \"Hard\"], label: html `Surface(s):`, format: x => html`${x}`})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1708,"value":"$38","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4806,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4834,"value":"

If the best servers aren't at an advantage on clay courts, then what types of players are? Looking at data on the length of points across surfaces suggests that clay courts require extra-long points relative to the other surfaces. This supports the clay court grinder hypothesis that the best players on clay are those who are built to outlast opponents with grit, consistency, and physicality.

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1501,"value":"$39","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5233,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3973,"value":" Instead, We see that a player's average point on a ${radiosPointDuration} court lasts significantly longer than on grass, across the board. ","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3929,"value":"viewof radiosPointDuration = Inputs.radio([\"clay\", \"hard\"], {value: \"clay\", label:html `Compare avg. grass point duration to:`})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4016,"value":"viewof FocusOn = Inputs.checkbox([\"French Open (Clay)\"], {label: \"Focus on champs and finalists of...\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3962,"value":"$3a","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5100,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4930,"value":"

Knowing that how the game is played and points are won varies by court type, we might wonder what determines whether a player favors a given surface? Country-of-origin provides a compelling explanation.

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4937,"value":"$3b","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":119,"value":" Unpacking Upset Leaders by Country of Origin & Surface: Americans, Aussies & Brits see outsized success on Hard & Grass , Spaniards & South Americans crush it on Clay ","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1519,"value":"$3c","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5030,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5106,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4963,"value":"

We can also get at the relationship between country-of-origin and surface preference by looking at which surface most players have the greatest match winning percentage on and by aggregating tournament titles won across surfaces by country.

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4992,"value":"$3d","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5054,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5036,"value":" Match & Tournament Wins Widely Correspond to Country-Of-Origin Surface Speed Popularity","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2318,"value":"

Favorite Surface by Country, surface where most players have greatest match winning %

${overall()} \n

${radios} Won By Male Players from ${selected_country.country}

\n ${tree(selected_country.id)}\n

${viewof radios}

\n \n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5025,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":132,"value":"

Time to put what we've learned into context. First, we saw that different courts call for different optimal skillsets: big servers are set up for success on fast courts where they can more easily ace opponents, while winning on clay requires battling out longer points. Then, we explored one potential determinant of the differing skillsets and surface success amongst players: country-of-origin. We observed the strong relationship between the surface a player grew up on, and their positive performance boost on that surface. Now, let's see how different players stack up against the all-time-greats across court types.

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4627,"value":"$3e","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4660,"value":"$3f","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4679,"value":"

Explore different competitiveness levels and players of your choice to see how your favorite players measure up to the greats across surfaces!

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4655,"value":"

Excellence in Context: A small number of legends stand above the rest across surfaces

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4704,"value":"

Select player(s) to highlight:

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2755,"value":"$40","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4603,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4247,"value":"\n

Some concluding thoughts: This article just begins to scratch the surface (pun intended!) of the differences in play styles and propensities for success across court types. If there were better publicly available aggregate data on other factors of tennis matches like winners, unforced errors, points won at net, etc. we could more comprehensively model the different dynamics at play based on the surface. Finally, due to limited publicly available data, the analysis here was confined to men's professional tennis. However, undergoing a similar exploration on the women's side is necessary to see whether there are any differences in play-style-success and country-of-origin advantages.

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4730,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4162,"value":"

A lot went into the making of this article! Below are all of the utility functions used to make the visualizations dynamic.

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5083,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1970,"value":"$41","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":980,"value":"viewof competitiveSelection = Inputs.select([\"All\", \"Top 5\", \"Top 10\", \"Top 20\"], {label: \"Opponent Competitiveness: \"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1332,"value":"viewof playerSearch = Inputs.search(GOATPlayers, {label: html `Player 1`, columns: [\"name\"], query: \"Roger Federer\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3520,"value":"viewof playerSearch2 = Inputs.search(GOATPlayers, {label: html `Player 2`, columns: [\"name\"], query: \"Rafael Nadal\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1346,"value":"viewof rows = Inputs.table(playerSearch, {label: \"Players\", rows: 4, multiple: false, width: 400, id: \"search1\", value: [defaultData1]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3535,"value":"viewof rows2 = Inputs.table(playerSearch2, {label: \"Players\", rows: 4, multiple: false, width: 400, value: [defaultData2]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4785,"value":"defaultData1 = GOATPlayers.filter(function(d){ return d.name == \"Roger Federer\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4788,"value":"defaultData2 = GOATPlayers.filter(function(d){ return d.name == \"Rafael Nadal\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":912,"value":"$42","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2529,"value":"function chart2() {\n let wholeChartContainer = createWholeChartContainer(plotVars);\n let plotContainer = wholeChartContainer.select('#plotContainer');\n let data_all = retrieveDataFile(\"All\");\n let data_clay = retrieveDataFile(\"Clay\");\n let data = retrieveDataFile(\"Grass\");\n let data_hard = retrieveDataFile(\"Hard\");\n let max = 220;\n let maxX = 120;\n if (competitiveSelection == \"Top 5\") {\n max = 20;\n maxX = 15;\n } else if (competitiveSelection == \"Top 10\") {\n max = 30;\n maxX = 20;\n } else if (competitiveSelection == \"Top 20\") {\n max = 50;\n maxX = 40;\n }\n let endPoint = maxX;\n \n let xScale = returnXScale(maxX, plotVars);\n let yScale = returnYScale(max, plotVars);\n createAxes(plotContainer, \"Grass\", xScale, yScale, plotVars);\n let top5 = getTop5(data);\n drawScatterPlot(data, plotContainer, top5, xScale, yScale, 'green', 'green', 'yellow', plotVars, endPoint);\n return wholeChartContainer.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2533,"value":"function chart3() {\n let wholeChartContainer = createWholeChartContainer(plotVars);\n let plotContainer = wholeChartContainer.select('#plotContainer');\n let data = retrieveDataFile(\"Clay\");\n // let max = getMaxWinsLosses(data);\n let max = 700;\n let maxX = 250;\n if (competitiveSelection == \"Top 5\") {\n max = 60;\n maxX = 40;\n } else if (competitiveSelection == \"Top 10\") {\n max = 120;\n maxX = 65;\n } else if (competitiveSelection == \"Top 20\") {\n max = 180;\n maxX = 90;\n }\n let endPoint = maxX;\n let xScale = returnXScale(maxX, plotVars);\n let yScale = returnYScale(max, plotVars);\n createAxes(plotContainer, \"Clay\", xScale, yScale, plotVars);\n let top5 = getTop5(data);\n drawScatterPlot(data, plotContainer, top5, xScale, yScale, 'red', 'red', 'yellow', plotVars, endPoint);\n return wholeChartContainer.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2537,"value":"function chart4() {\n let wholeChartContainer = createWholeChartContainer(plotVars);\n let plotContainer = wholeChartContainer.select('#plotContainer');\n let data = retrieveDataFile(\"Hard\");\n\n let max = 800;\n let maxX = 300;\n if (competitiveSelection == \"Top 5\") {\n max = 100;\n maxX = 60;\n } else if (competitiveSelection == \"Top 10\") {\n max = 200;\n maxX = 90;\n } else if (competitiveSelection == \"Top 20\") {\n max = 300;\n maxX = 120;\n }\n let endPoint = maxX;\n let xScale = returnXScale(maxX, plotVars);\n let yScale = returnYScale(max, plotVars);\n createAxes(plotContainer, \"Hard\", xScale, yScale, plotVars);\n let top5 = getTop5(data);\n drawScatterPlot(data, plotContainer, top5, xScale, yScale, 'blue', 'blue', 'yellow', plotVars, endPoint);\n return wholeChartContainer.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1911,"value":"function getBarXScale() {\n let xBarscale = d3.scaleLinear()\n .domain([0, 100])\n .range([0, plotVars.plotWidth*1.5]) \n return xBarscale;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1917,"value":"$43","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2151,"value":"$44","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1323,"value":"players = returnAllPlayers(GOATPlayers);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1313,"value":"function returnAllPlayers(GOATPlayers) {\n var names = GOATPlayers.map(function(d) { return d.name });\n return names;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3352,"value":"bigPlotVars = (\n {plotWidth: 300, //Width of plot region\n plotHeight: 300, //Height of plot region\n plotMargin: 50, //Margin space for axes and their labels\n plotCircleRadius: 1, //Radius in pixels of circles in the plot\n titleSize: \"16px\",\n subtitleSize: \"14px\",\n ratio: 0.7\n }\n);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":901,"value":"plotVars = (\n {plotWidth: 260, //Width of plot region\n plotHeight: 260, //Height of plot region\n plotMargin: 50, //Margin space for axes and their labels\n plotCircleRadius: 0.75, //Radius in pixels of circles in the plot\n titleSize: '14px',\n subtitleSize: '12px',\n ratio: 0.7\n }\n);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":903,"value":"function returnXScale(max, vars) {\n let test = 1000;\n let xScale = d3.scaleLinear()\n .domain([0, max])\n .range([0, vars.plotWidth]);\n return xScale;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":904,"value":"function returnYScale(max, vars) {\n let yScale = d3.scaleLinear()\n .domain([0, max])\n .range([vars.plotHeight, 0]); \n return yScale;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":930,"value":"function getTop5(data) {\n var top5Data = data.sort(function(a) {\n return d3.descending(a.wonLostPct);\n }).slice(0, 5);\n return top5Data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":939,"value":"function getMaxWinsLosses(data) {\n let maxWins = d3.max(data, function(d) { return +d.won; });\n let maxLosses = d3.max(data, function(d) { return +d.lost; });\n let max = d3.max(maxWins, maxLosses);\n return [maxWins, maxLosses];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":906,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":910,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":899,"value":"function createWholeChartContainer(vars) {\n const outerWidth = vars.plotWidth + 2 * vars.plotMargin; // extend plotWidth by twice plotMargin\n const outerHeight = vars.plotHeight + 2.5 * vars.plotMargin; // extend plotHeight by twice plotMargin\n \n var wholeChartContainer = d3.create('svg')\n .attr('width', outerWidth)\n .attr('height',outerHeight)\n .style('background-color', 'whitesmoke') \n \n wholeChartContainer.append('g')\n // Translate g element by plotMargin, plotMargin to place inner plotting region.\n .attr('transform', `translate(${vars.plotMargin},${1.25*vars.plotMargin})`) \n .attr('id', 'plotContainer'); //Give the plot container an id so we can access it later.\n \n return wholeChartContainer;\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":970,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1316,"value":"GOATPlayers = FileAttachment(\"GOATList.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1013,"value":"overall_all = FileAttachment(\"matches_won_lost_pct_overall_allsurfaces.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1050,"value":"overall_clay = FileAttachment(\"matches_won_lost_pct_clay.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1053,"value":"overall_grass = FileAttachment(\"matches_won_lost_pct_grass.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1058,"value":"overall_hard = FileAttachment(\"matches_won_lost_pct_hard.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1014,"value":"top5_all = FileAttachment(\"matches_won_lost_pct_vsTop5_allsurfaces.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1015,"value":"top5_clay = FileAttachment(\"matches_won_lost_pct_vsTop5_clay.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1016,"value":"top5_grass = FileAttachment(\"matches_won_lost_pct_vsTop5_grass.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1017,"value":"top5_hard = FileAttachment(\"matches_won_lost_pct_vsTop5_hard.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1037,"value":"top10_all = FileAttachment(\"Matches_won_lost_pct_vsTop10_allsurfaces.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1018,"value":"top10_clay = FileAttachment(\"matches_won_lost_pct_vsTop10_clay.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1019,"value":"top10_grass = FileAttachment(\"matches_won_lost_pct_vsTop10_grass.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1020,"value":"top10_hard = FileAttachment(\"matches_won_lost_pct_vsTop10_hard.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1021,"value":"top20_all = FileAttachment(\"matches_won_lost_pct_vsTop20_allsurfaces.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1022,"value":"top20_clay = FileAttachment(\"matches_won_lost_pct_vsTop20_clay.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1023,"value":"top20_grass = FileAttachment(\"matches_won_lost_pct_vsTop20_grass.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1024,"value":"top20_hard = FileAttachment(\"matches_won_lost_pct_vsTop20_hard.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":502,"value":"player_d = (aces[0]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"function court_color(x) {\n if (x == \"Hard\") return \"#b0caff;\";\n if (x == \"Clay\") return \"red\";\n if (x == \"Grass\") return \"green\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1141,"value":"leg = require(\"d3-svg-legend\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1223,"value":"d3Chrome = require(\"d3-scale-chromatic\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"map_json = FileAttachment(\"map.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1158,"value":"upsets = FileAttachment(\"upsets_scored_w_total.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1192,"value":"upsets_collapsed = FileAttachment(\"upsets_collapsed.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1387,"value":"clayVgrass = FileAttachment(\"clayVgrass.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"ace_hard = FileAttachment(\"aces_match_hard.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":382,"value":"aces = FileAttachment(\"aceATPdata.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1466,"value":"hardVgrass = FileAttachment(\"hardVgrass.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1549,"value":"clay_upsets = FileAttachment(\"top100upsets.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1564,"value":"hard_upsets = FileAttachment(\"top100upsetshard.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1555,"value":"grass_upsets = FileAttachment(\"top100upsetsgrass.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2302,"value":"fave_surfaces = FileAttachment(\"fave_surfaces.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1657,"value":"highlight_countries = ({id_hard: \"USA\", id_clay: \"ESP\", id_grass: \"USA\"});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2383,"value":"titles = FileAttachment(\"alltitlesbycountry.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2664,"value":"gsCountryTitles = FileAttachment(\"grandslamsbycountry.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2414,"value":"selected_country = ({id: \"ESP\", country: \"Spain\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3108,"value":"selected_countryA = ({id: \"ESP\", country: \"Spain\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2644,"value":"viewof r = Inputs.radio([\"Grand Slams\", \"All Professional Tournaments\"], {label: \"Tournament Level\", value: \"Grand Slams\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2687,"value":"$48","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3058,"value":"players100clay = FileAttachment(\"upsets100clay_players.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3120,"value":"players100hard = FileAttachment(\"upsets100hard_players.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3121,"value":"players100grass = FileAttachment(\"upsets100grass_players.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":709,"value":"function refresh(selected_update) {\n selected_player.name = selected_update;\n d3.select('#player_info').text(selected_player.name + \"'s average aces per match on grass is \" + getComparison(selected_player.name) + \"x his average on clay.\"); \n\n\n \n\n \n\n // html(PlayerChart(get_player_court_data(selected_player.name), {x: d => d.value, y: d => d.surface, xLabel: \"Avg. Aces per Match\", yLabel: \"Surface\", color: \"blue\"}))\n\n console.log();//.filter((d => parseInt(d.Score) >= parseInt(scoreBound)))\n\n \n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":689,"value":"selected_player = ({\"name\" : \"Feliciano Lopez\"});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4006,"value":"frenchSuccess = FileAttachment(\"french.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4204,"value":"viewof radios = Inputs.radio([\"Grand Slams\", \"All Professional Tournaments\"], {id: \"gsVat\", label: \"Tournament Level\", value: \"Grand Slams\"})\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4078,"value":"leg1 = FileAttachment(\"leg1.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3816,"value":"function getComparisonGrasstoHard(name) {\n var raw_comp = 1 + (get_player_court_data(name)[2].value - get_player_court_data(name)[0].value) / get_player_court_data(name)[0].value;\n var rawStr = raw_comp.toString(); \nrawStr = rawStr.slice(0, (rawStr.indexOf(\".\"))+3); //With 3 exposing the hundredths place\nreturn rawStr; //If you need it back as a Number\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":738,"value":"function getComparison (name) {\n var raw_comp = 1 + (get_player_court_data(name)[2].value - get_player_court_data(name)[1].value) / get_player_court_data(name)[1].value;\n var rawStr = raw_comp.toString(); \nrawStr = rawStr.slice(0, (rawStr.indexOf(\".\"))+3); //With 3 exposing the hundredths place\nreturn rawStr; //If you need it back as a Number\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":679,"value":"function get_player_court_data(name) {\nlet p = aces.filter((d) => d.name == name)[0];\n var player_court_data = [\n {surface: \"Hard\", value: p.value_hard, rank: p.rank_hard, img: \"https://i.ibb.co/Wv3ggqc/hard.png\"},\n {surface: \"Clay\", value: p.value_clay, rank: p.rank_clay, img: \"https://i.ibb.co/FghgFY6/clay.png\"},\n {surface: \"Grass\", value: p.value_grass, rank: p.rank_grass, img: \"https://i.ibb.co/0KkjbP6/grass.png\"},\n ];\n console.log(player_court_data);\n return player_court_data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":797,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4742,"value":"## COUNTRY ANALYSIS SECTION","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":162,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1284,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1289,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2390,"value":"$4d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2298,"value":"$4e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2708,"value":"function emptyTree() {\n const margin = {top: 10, right: 10, bottom: 10, left: 10},\n width = 425 - margin.left - margin.right,\n height = 350 - margin.top - margin.bottom;\n\n// append the svg object to the body of the page\nconst svg = d3.create(\"svg\")\n .attr(\"width\", width + margin.left + margin.right)\n .attr(\"height\", height + margin.top + margin.bottom).attr(\"id\", \"tree-map\")\n\n svg\n .append(\"text\")\n .attr(\"x\", 0) // +10 to adjust position (more right)\n .attr(\"y\", height/2) // +20 to adjust position (lower)\n .text(\"None won yet by male tennis players from \" + selected_country.country)\n .attr(\"font-size\", \"15px\")\n .attr(\"fill\", \"black\")\nreturn svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3156,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3795,"value":"function getComparisonHardtoClay (name) {\n var raw_comp = 1 + (get_player_court_data(name)[0].value - get_player_court_data(name)[1].value) / get_player_court_data(name)[1].value;\n var rawStr = raw_comp.toString(); \nrawStr = rawStr.slice(0, (rawStr.indexOf(\".\"))+3); //With 3 exposing the hundredths place\nreturn rawStr; //If you need it back as a Number\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3071,"value":"$50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2730,"value":"MUST RUN THESE TWO FUNCTIONS BELOW FOR ON-CLICK TO WORK","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2435,"value":"document.getElementById(\"fave-surface-map\").onclick = function(){\n updateTree()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2696,"value":"document.getElementById(\"level-radio\").onclick = function() {\n updateTree()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3981,"value":"function getPointScatter() {\n if (radiosPointDuration === \"clay\") {\n\n \n return (ScatterplotPoints(clayVgrass, \"clay\", {\n x: d => d.value_grass,\n y: d => d.value_clay,\n active: d => d.active,\n // title: d => d.name,\n xLabel: \"Average Point Duration on Grass (in Seconds)\",\n yLabel: \"Average Point Duration on Clay (in Seconds)\",\n stroke: \"gray\",\n width: 500,\n height: 500\n}));\n\n } else {\n return ScatterplotPoints(hardVgrass, \"hard\", {\n x: d => d.value_grass,\n y: d => d.value,\n active: d => d.active,\n // title: d => d.name,\n xLabel: \"Average Point Duration on Grass (in Seconds)\",\n yLabel: \"Avgerage Point Duration on Hard (in Seconds)\",\n stroke: \"gray\",\n width: 500,\n height: 500\n});\n\n\n }\n\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1381,"value":"$51","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4035,"value":"function getOpacityHigh(d) {\n if (FocusOn.filter((n) => {return n == \"French Open (Clay)\"}).length > 0) {\n var frenchChamps = frenchSuccess.filter((n) => {\n return n.winner_name === d.name || n.runnerUp_name === d.name;\n });\n if (frenchChamps.length > 0) {\n return true;\n } else {\n return false;\n }\n } else {\n return true;\n\n }\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"$52","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"function playerFunction(player_court_data) {\n\n // var player_court_data = [\n // {surface: \"Hard\", value: player.value_hard, rank: player.rank_hard, img: \"https://i.ibb.co/Wv3ggqc/hard.png\"},\n // {surface: \"Clay\", value: player.value_clay, rank: player.rank_clay, img: \"https://i.ibb.co/FghgFY6/clay.png\"},\n // {surface: \"Grass\", value: player.value_grass, rank: player.rank_grass, img: \"https://i.ibb.co/0KkjbP6/grass.png\"},\n // ]\n \n //return player_court_data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":541,"value":"court_images = [ \n { name:\"Hard\", img: `${await FileAttachment(\"hard.png\").image()}` },\n { name:\"Clay\", img: `${await FileAttachment(\"clay@1.png\").image()}`}, \n { name:\"Grass\", img: `${await FileAttachment(\"grass@1.png\").image()}`},\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5194,"value":"function getLeg() {\n if (radiosPointDuration == \"clay\") {\nvar svg = d3.create(\"svg\").attr(\"width\", 600).attr(\"height\", 100);\n var g = svg.append(\"g\").attr(\"class\", \"legend\")\n .attr(\"transform\", \"translate(20,20)\");\n\n \n var ordinal = d3.scaleOrdinal()\n .domain([ \"Player has Longer Pts. on Grass\", \"Player has Longer Pts. on Clay\"])\n .range([ \"green\", \"#ff968f\"]);\n \n \n \n svg.append(\"g\")\n .attr(\"class\", \"legendOrdinal\")\n .attr(\"transform\", \"translate(20,20)\");\n \n var legendOrdinal = leg.legendColor().shape('circle').shapePadding(290)\n .orient('horizontal').scale(ordinal).labelAlign(\"start\");\n \n svg.select(\".legendOrdinal\")\n .call(legendOrdinal);\n\n return svg.node(); } else {\n\n\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W53","stdlib":"1","titling":"auto"}} 33:"$32:body"