2f:T446,seasonSummary={ let returnObject={} data.forEach((row)=>{ if (row.HomeTeam in returnObject){ returnObject[row.HomeTeam]['goals_for']+=parseInt(row.FTHG) returnObject[row.HomeTeam]['goals_against']+=parseInt(row.FTAG) } else returnObject[row.HomeTeam]={'goals_for': parseInt(row.FTHG), 'goals_against': parseInt(row.FTAG), 'points': 0} if (row.AwayTeam in returnObject){ returnObject[row.AwayTeam]['goals_for']+=parseInt(row.FTAG) returnObject[row.AwayTeam]['goals_against']+=parseInt(row.FTHG) } else returnObject[row.AwayTeam]={'goals_for':parseInt(row.FTAG), 'goals_against': parseInt(row.FTHG), 'points':0} if (row.FTR=="H") returnObject[row.HomeTeam]['points']+=3 else if (row.FTR=="D"){ returnObject[row.HomeTeam]['points']+=1 returnObject[row.AwayTeam]['points']+=1 } else returnObject[row.AwayTeam]['points']+=3 }) let objArray=[] Object.keys(returnObject).forEach(key => objArray.push({ team: key, ...returnObject[key] })); return objArray }30:T17da,chart={ const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); let tooltip = d3.select("body").append("div") .attr("class", "svg-tooltip") .style("position", "absolute") //First Plot svg.append("g") .attr("transform", `translate(${0}, ${plot1Size+plot1Margin.top})`) .call(d3.axisBottom(plot1X)) svg.append("text") .attr("class", "axis-label") .attr("font-family", "sans-serif") .attr("font-size", 12) .attr("x", plot1Margin.left+ plot1Size/2) .attr("y", plot1Size+plot1Margin.top+30) .attr("text-anchor", "middle") .text("Goals Against"); svg.append("text") .attr("class", "axis-label") .attr("font-family", "sans-serif") .attr("font-size", 12) .attr("transform", `translate(${plot1Margin.left-30}, ${plot1Size/2}) rotate(-90)`) .attr("text-anchor", "middle") .text("Goals For"); svg.append("g") .attr("transform", `translate(${plot1Margin.left}, ${0})`) .call(d3.axisLeft(plot1Y)) svg.selectAll("circle1") .data(seasonSummary) .join("circle") .attr("cx", d => plot1X(d.goals_against)) .attr("cy", d => plot1Y(d.goals_for)) .attr("r", 4) .attr("id", d => "circle1"+String(d.team).replace(/ /g,'')) .attr("fill", "#377eb8") .attr("fill-opacity", 0.7) .attr("stroke", "#fff") .on("mouseover", function(event,d){ d3.select("#circle1"+String(d.team).replace(/ /g,'')).classed("highlighted",true).attr("r",6) d3.select("#circle2"+String(d.team).replace(/ /g,'')).classed("highlighted",true).attr("r",6) d3.select("#circle3"+String(d.team).replace(/ /g,'')).classed("highlighted",true).attr("r",6) tooltip.style("top", (event.pageY+20)+"px").style("left",(event.pageX+20)+"px"); tooltip.style("display", "block"); tooltip.html(`${d.team}
Goals For: ${d.goals_for}
Goals Against: ${d.goals_against}
Points: ${d.points}`) }) .on("mouseout", function(event,d){ d3.selectAll(".highlighted").attr("r",4).classed("highlighted",false) tooltip.style("display", "none"); }) //Second Plot svg.append("g") .attr("transform", `translate(${0}, ${plot2Size+plot2Margin.top})`) .call(d3.axisBottom(plot2X)) svg.append("text") .attr("class", "axis-label") .attr("font-family", "sans-serif") .attr("font-size", 12) .attr("x", plot2Margin.left+ plot2Size/2) .attr("y", plot2Size+plot2Margin.top+30) .attr("text-anchor", "middle") .text("Goals For"); svg.append("text") .attr("class", "axis-label") .attr("font-family", "sans-serif") .attr("font-size", 12) .attr("transform", `translate(${plot2Margin.left-30}, ${plot2Margin.top+plot2Size/2}) rotate(-90)`) .attr("text-anchor", "middle") .text("Points"); svg.append("g") .attr("transform", `translate(${plot2Margin.left}, ${0})`) .call(d3.axisLeft(plot2Y)) svg.selectAll("circle2") .data(seasonSummary) .join("circle") .attr("cx", d => plot2X(d.goals_for)) .attr("cy", d => plot2Y(d.points)) .attr("r", 4) .attr("id", d => "circle2"+String(d.team).replace(/ /g,'')) .attr("fill", "#377eb8") .attr("fill-opacity", 0.7) .attr("stroke", "#fff") .on("mouseover", function(event,d){ d3.select("#circle1"+String(d.team).replace(/ /g,'')).classed("highlighted",true).attr("r",6) d3.select("#circle2"+String(d.team).replace(/ /g,'')).classed("highlighted",true).attr("r",6) d3.select("#circle3"+String(d.team).replace(/ /g,'')).classed("highlighted",true).attr("r",6) tooltip.style("top", (event.pageY+20)+"px").style("left",(event.pageX+20)+"px"); tooltip.style("display", "block"); tooltip.html(`${d.team}
Goals For: ${d.goals_for}
Goals Against: ${d.goals_against}
Points: ${d.points}`) }) .on("mouseout", function(event,d){ d3.selectAll(".highlighted").attr("r",4).classed("highlighted",false) tooltip.style("display", "none"); }) //Third Plot svg.append("g") .attr("transform", `translate(${0}, ${plot3Size+plot3Margin.top})`) .call(d3.axisBottom(plot3X)) svg.append("text") .attr("class", "axis-label") .attr("font-family", "sans-serif") .attr("font-size", 12) .attr("x", plot3Margin.left+ plot3Size/2) .attr("y", plot3Size+plot3Margin.top+30) .attr("text-anchor", "middle") .text("Goals Agianst"); svg.append("g") .attr("transform", `translate(${plot3Margin.left}, ${0})`) .call(d3.axisLeft(plot3Y)) svg.append("text") .attr("class", "axis-label") .attr("font-family", "sans-serif") .attr("font-size", 12) .attr("transform", `translate(${plot3Margin.left-30}, ${plot3Margin.top+plot3Size/2}) rotate(-90)`) .attr("text-anchor", "middle") .text("Points"); svg.selectAll("circle3") .data(seasonSummary) .join("circle") .attr("cx", d => plot3X(d.goals_against)) .attr("cy", d => plot3Y(d.points)) .attr("r", 4) .attr("id", d => "circle3"+String(d.team).replace(/ /g,'')) .attr("fill", "#377eb8") .attr("fill-opacity", 0.7) .attr("stroke", "#fff") .on("mouseover", function(event,d){ d3.select("#circle1"+String(d.team).replace(/ /g,'')).classed("highlighted",true).attr("r",6) d3.select("#circle2"+String(d.team).replace(/ /g,'')).classed("highlighted",true).attr("r",6) d3.select("#circle3"+String(d.team).replace(/ /g,'')).classed("highlighted",true).attr("r",6) tooltip.style("top", (event.pageY+20)+"px").style("left",(event.pageX+20)+"px"); tooltip.style("display", "block"); tooltip.html(`${d.team}
Goals For: ${d.goals_for}
Goals Against: ${d.goals_against}
Points: ${d.points}`) }) .on("mouseout", function(event,d){ d3.selectAll(".highlighted").attr("r",4).classed("highlighted",false) tooltip.style("display", "none"); }) return svg.node(); }31:[{"id":"50ba6642b22ca132d6174b6beeeea7f0d41297587be360f3a364dc6510f120564c7484176e0e394d5ef9917a245b1571d7faf06e00570ed12802754979af80f4","href":"https://static.observableusercontent.com/files/50ba6642b22ca132d6174b6beeeea7f0d41297587be360f3a364dc6510f120564c7484176e0e394d5ef9917a245b1571d7faf06e00570ed12802754979af80f4","name":"VizSketch.png","type":"image/png","lastModified":1676566620347.715,"size":68011}] 2d:{"title":"Homework 1","cells":[{"id":0,"value":"# Homework 1","pinned":false,"hidden":false,"mode":"md"},{"id":450,"value":"## Sketch","pinned":false,"hidden":false,"mode":"md"},{"id":448,"value":"vizsketch = FileAttachment(\"VizSketch.png\").image()","pinned":true,"hidden":false,"mode":"ojs"},{"id":453,"value":"## Rationale\n\n- 3 Separate plots instead of 1 Single plot- Points could have been encoded in the radius/color itself in the first plot and there would not have been the need for the bottom two plots. However, that encoding would have made it harder to answer question 3 as well as making differentiating between teams with similar attributes very difficult. (Eg. Man City and Liverpool have similar points and goals. Encoding any of this information into Size/Color would have made it very difficult)\n\n- Tooltip and No Labels- The decision to not have labels for all the individual points was to avoid overcrowding - tooltip and linking between the 3 plots is a better solution\n\n- No Color Scale for Teams/Attributes - There are 20 teams and color is not efficient when a categorical variable has so many possible values. Additionally, because every necessary attribute has its own axis, there is no need to add additional complexity which may confuse a user ","pinned":false,"hidden":false,"mode":"md"},{"id":459,"value":"## Questions\n\n## 1) Is it possible to recognize groups of teams that scored many goals but also suffer a lot of goals during the season?\n\n Yes! The first scatter plot answers this question. Teams that are closer to the top right quadrant of the plot concede more but also score more\n\n\n\n \n \n## 2) Is it possible to recognize groups of teams that scored a few goals but also suffered only a few goals during the season?\n\n Yes! The first scatter plot answers this question. Teams that are closer to the bottom left quadrant of the plot concede less but also score less\n\n\n\n \n \n## 3) Is it more likely that teams who scored more points in the league will have a better attack or a better defense?\n\n The bottom two plots serve to answer this question. Due to the two plots having the same Y-axis(points) and Goals Scored and Conceded for the two X Axes, a user can visually compare the correlations and come to a conclusion with ease\n","pinned":false,"hidden":false,"mode":"md"},{"id":3,"value":"## Loading and Processing the Dataset\n\n- Download the [Premier League](https://datahub.io/sports-data/english-premier-league) dataset and load the data into observable.\n- Process the dataset following the format described in the homework description.","pinned":false,"hidden":false,"mode":"md"},{"id":8,"value":"data = d3.csv('https://datahub.io/sports-data/english-premier-league/r/season-1819.csv')","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":147,"value":"seasonSummary.sort((a,b) => b.points - a.points);","pinned":true,"hidden":false,"mode":"ojs"},{"id":149,"value":"maxGoals = d3.max(seasonSummary, d=> Math.max(d['goals_for'],d['goals_against']))","pinned":true,"hidden":false,"mode":"ojs"},{"id":349,"value":"maxPoints= d3.max(seasonSummary, d=> Math.max(d['goals_for'],d['goals_against'], d[\"points\"]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"## Define size of the SVG and Margins","pinned":false,"hidden":false,"mode":"md"},{"id":27,"value":"height = 1000","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"## Define Scales\nAccording to the homework description, you should encode three different attributes from the dataset to your visualization: goals_for, goals_against, and points. You should create one scale for each attribute you wanna encode in your visualization. You are allowed to encode more than three attributes in your visualization if you think it is necessary.","pinned":false,"hidden":false,"mode":"md"},{"id":259,"value":"plot1Size=400","pinned":true,"hidden":false,"mode":"ojs"},{"id":392,"value":"plot2Size=400","pinned":true,"hidden":false,"mode":"ojs"},{"id":396,"value":"plot3Size=400","pinned":true,"hidden":false,"mode":"ojs"},{"id":262,"value":"plot1Margin=({top: 5, right: 0, bottom: 10, left: width/2-plot1Size/2})","pinned":true,"hidden":false,"mode":"ojs"},{"id":357,"value":"plot2Margin=({top: plot1Margin.top+plot1Margin.bottom+ plot1Size+60, right: 0, bottom: 0, left: 100 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":388,"value":"plot3Margin=({top: plot1Margin.top+plot1Margin.bottom+ plot1Size+60, right: 0, bottom: 0, left: width-plot2Margin.left-plot3Size })","pinned":true,"hidden":false,"mode":"ojs"},{"id":58,"value":"plot1X = d3.scaleLinear()\n .domain([0,maxGoals+5]).nice()\n .range([plot1Margin.left, plot1Margin.left+plot1Size]);\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":59,"value":"plot1Y = d3.scaleLinear()\n .domain([0,maxGoals+5]).nice()\n .range([plot1Margin.top+plot1Size,plot1Margin.top]);\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":63,"value":"plot2X=d3.scaleLinear()\n .domain([0,maxGoals+5]).nice()\n .range([plot2Margin.left, plot2Margin.left+plot2Size]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":361,"value":"plot2Y=d3.scaleLinear()\n .domain([0,maxGoals+5]).nice()\n .range([plot2Margin.top+plot2Size,plot2Margin.top]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":403,"value":"plot3X=d3.scaleLinear()\n .domain([0,maxGoals+5]).nice()\n .range([plot3Margin.left, plot3Margin.left+plot3Size]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":408,"value":"plot3Y=d3.scaleLinear()\n .domain([0,maxGoals+5]).nice()\n .range([plot3Margin.top+plot3Size,plot3Margin.top]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"## Creating the Elements","pinned":false,"hidden":false,"mode":"md"},{"id":77,"value":"Hover over any point to highlight that team in all 3 graphs and display more information about the selected team!","pinned":false,"hidden":false,"mode":"md"},{"id":177,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":290,"value":"styles = html`\n `","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}