2f:T550,teams_stats = { const resultset = []; raw.reduce(function(res, item){ var homeTeam = item['HomeTeam']; var awayTeam = item['AwayTeam']; if (!res[homeTeam]) { res[homeTeam] = {'team': homeTeam, 'goals_for': parseInt(item['FTHG']), 'goals_against':parseInt(item['FTAG']), 'points': 0}; res[homeTeam].points += item['FTR'] == 'H' ? 3 : item['FTR'] == 'D' ? 1: 0; resultset.push(res[homeTeam]); } else { res[homeTeam].goals_for += parseInt(item['FTHG']); res[homeTeam].goals_against += parseInt(item['FTAG']); res[homeTeam].points += item['FTR'] == 'H' ? 3 : item['FTR'] == 'D' ? 1: 0; } if (!res[awayTeam]) { res[awayTeam] = {'team': awayTeam, 'goals_for': parseInt(item['FTAG']), 'goals_against':parseInt(item['FTHG']), 'points':0}; res[awayTeam].points += item['FTR'] == 'A' ? 3 : item['FTR'] == 'D' ? 1: 0; resultset.push(res[awayTeam]); } else { res[awayTeam].goals_for += parseInt(item['FTAG']); res[awayTeam].goals_against += parseInt(item['FTHG']); res[awayTeam].points += item['FTR'] == 'A' ? 3 : item['FTR'] == 'D' ? 1: 0; } return res; }, {}) console.log(resultset); // TODO: Process the dataset and output the result in the resultset variable following the format shown in the homework description. return resultset; }30:Tb89,render_data = (svg_p, g_p, team_stats) => { var itr = 1; svg_p.selectAll("circle") .data(teams_stats) .join("circle") .attr("cx", d => xScale(d.goals_for)) .attr("cy", d => yScale(d.goals_against)) .style("fill","black") .attr("r", d => rScale(d.points)) svg_p.selectAll("text") .data(teams_stats) .enter() .append("text") .attr("x", d => xScale(d.goals_for)+rScale(d.points)+4) .attr("y", d => yScale(d.goals_against)+rScale(d.points)+2) .style("font", "10px times") .text( d => d.team) var xAxis = g_p => g_p.attr("transform", `translate(35, ${size.height+20})`) .call(d3.axisBottom(xScale)) .append("text") .attr("x", (size.width/2)+100) .attr("y", 25) .attr("dy", "1em") .attr("fill", "black") .attr("font-size", "13px") .text("Goals_for") var yAxis = g_l => g_l//.attr("transform", `translate(300, ${size.width}-550)`) .attr("transform", "translate(35, 20)") .call(d3.axisLeft(yScale)) .append("text") .attr("x", -230) .attr("y",-25) .attr("transform", "rotate(-90)") .attr("fill", "black") .attr("font-size", "13px") .text("Goals_against") svg_p.append("text") .attr("transform", "rotate(-90)") .attr("y", -margins.left+100) .attr("x",- (size.height / 2)+240) .attr("dy", "1em") .style("text-anchor", "middle") .attr("font-size", "10px") .text("High Goals_against"); svg_p.append("text") .attr("transform", "rotate(-90)") .attr("y", 45) .attr("x", -650) .attr("dy", "1em") .style("text-anchor", "middle") .attr("font-size", "10px") .text("Low Goals_against"); svg_p.append("text") .attr("font-size", "10px") .attr("x", 250) .attr("y", 50) .style("text-anchor", "middle") .text("Low Goals_for"); svg_p.append("text") .attr("font-size", "10px") .attr("x", 700) .attr("y", 50) .style("text-anchor", "middle") .text("High Goals_for"); var mean_goals_for = d3.mean(goals_for_Vals); var mean_goals_against = d3.mean(goals_against_Vals); console.log(mean_goals_against, mean_goals_for) svg_p.append('line') .style("stroke", "black") .style("stroke-width", 0.5) .attr("x1", function (d) { return xScale(mean_goals_for) + margins.left; }) .attr("y1",0) .attr("x2", function (d) { return xScale(mean_goals_for) + margins.left; }) .attr("y2", size.height+margins.top); svg_p.append('line') .style("stroke", "black") .style("stroke-width", 0.5) .attr("x1", 30) .attr("y1",function (d) { return yScale(mean_goals_against)+margins.bottom-margins.top; }) .attr("x2", size.width) .attr("y2", function (d) { return yScale(mean_goals_against)+margins.bottom-margins.top; }); g_p.append("g").call(xAxis); g_p.append("g").call(yAxis); return svg_p.node(); }31:T13f7,{ // svg_p.append("g") // .attr("transform", "translate(40, 10)") // .call(yAxis); // var xAxisTranslate = size.height +10; // svg_p.append("g") // .attr("transform", "translate(40, " + xAxisTranslate +")") // .call(xAxis) // svg.append("text") // .attr("x", 460) // .attr("y", size.height+60) // .style("text-anchor", "middle") // .text("Goals For"); // svg.append("text") // .attr("transform", "rotate(-90)") // .attr("y", -margins.left) // .attr("x",0 - (size.height / 2)) // .attr("dy", "1em") // .style("text-anchor", "middle") // .text("Goals against"); // svg.append("text") // .attr("transform", "rotate(-90)") // .attr("y", -margins.left+50) // .attr("x",- (size.height / 2)+100) // .attr("dy", "1em") // .style("text-anchor", "middle") // .attr("font-size", "10px") // .text("High Goals against"); // svg.append("text") // .attr("transform", "rotate(-90)") // .attr("y", 45) // .attr("x", -300) // .attr("dy", "1em") // .style("text-anchor", "middle") // .attr("font-size", "10px") // .text("Low Goals against"); // svg.append("text") // .attr("font-size", "10px") // .attr("x", 260) // .attr("y", 400) // .style("text-anchor", "middle") // .text("Low Goals For"); // // svg.append("text") // // .attr("font-size", "10px") // // .attr("x", 560) // // .attr("y", 400) // // .style("text-anchor", "middle") // // .text("High Goals For"); // render elements. Remember to use the Data Join // var color_mapping = []; // color_mapping.push({'color': 'pink', 'legend' : ' scored many goals but suffered a lot of goals'}); // color_mapping.push({'color': 'blue', 'legend' : 'scored a few goals but suffered a few goals'}) // color_mapping.push({'color': 'black', 'legend' : 'other teams'}) // var mean_goals_for = d3.mean(goals_for_Vals); // var mean_goals_against = d3.mean(goals_against_Vals); // var circle = svg.selectAll("dot") // .data(teams_stats) // .join("circle") // .attr("cx", function (d) { return xScale(d.goals_for); } ) // .attr("cy", function (d) { return yScale(d.goals_against); } ) // .attr("r", function (d) { return rScale(d.points)}) // .style("fill", function (d) { // var ratio; // if (d.goals_for >= Math.ceil(mean_goals_for)) { // if (d.goals_for < d.goals_against) { // ratio = d.goals_against/d.goals_for; // } else { // ratio = d.goals_for/d.goals_against; // } // return Math.round(ratio) == 1 ? " pink" : "black"; // } else if (d.goals_for < Math.ceil(mean_goals_for)) { // if (d.goals_for < d.goals_against) { // ratio = d.goals_against/d.goals_for; // } else { // ratio = d.goals_for/d.goals_against; // } // return ratio <= 1.2 ? " blue" : "black"; // } // }) // .attr("transform", "translate(" + 25 + "," + 25 + ")") // // svg.selectAll("text") // // .data(teams_stats) // // .enter() // // .append("text") // // .attr("x", function(d) {return xScale(d.goals_for)-425;}) // // .attr("y", 200) // // //.attr("x", d => xScale(d.goals_against)+rScale(d.points)+2) // // //.attr("y", d => yScale(d.goals_for)+rScale(d.points)+8) // // .style("font", "10px times") // // .text( d => d.team); // circle.append("text") // .attr("font-size", "10px") // .attr("fill", "black") // //.attr("transform", "translate(" + 25 + "," + 25 + ")") // .text(function(d) {return"hey";}) // //.attr("fill", "black") // //.attr("x", function(d) {return xScale(d.goals_for)-425;}) // .attr("x", 30) // .attr("y", 40) // //.attr("y", function(d) {return yScale(d.goals_against)+rScale(d.points)+7;}); // svg.selectAll("mydots") // .data(color_mapping) // .enter() // .append("circle") // .attr("cx", size.width-200) // .attr("cy", function(d,i){ return 10 + i*25}) // .attr("r", 7) // .style("fill", function(d){ return d.color}); // svg.selectAll("mylabels") // .data(color_mapping) // .enter() // .append("text") // .attr("x", size.width-180) // .attr("y", function(d,i){ return 10 + i*25}) // .style("fill", function(d){ return d.color}) // .text(function(d){ return d.legend}) // .attr("text-anchor", "left") // .attr("font-size", "10px") // .style("alignment-baseline", "middle") // console.log(xScale(Math.ceil(mean_goals_for))); // svg.append('line') // .style("stroke", "black") // .style("stroke-width", 0.5) // .attr("x1", 440) // .attr("y1",0) // .attr("x2", 440) // .attr("y2", size.height+10); // svg.append('line') // .style("stroke", "black") // .style("stroke-width", 0.5) // .attr("x1", margins.left+30) // .attr("y1",(size.height/2)-15) // .attr("x2", size.width) // .attr("y2", (size.height/2)-15); // return svg.node(); }32:T1d65,{ // Create SVG // console.log(teams_stats); // const svg = d3.create("svg") // .attr("height", size.height+margins.bottom+margins.top+30) // .attr("width", size.width+margins.right+margins.left) // svg.append("g") // .attr("transform", "translate(40, 10)") // .call(yAxis); // var xAxisTranslate = size.height +10; // svg.append("g") // .attr("transform", "translate(40, " + xAxisTranslate +")") // .call(xAxis) // svg.append("text") // .attr("x", 460) // .attr("y", size.height+60) // .style("text-anchor", "middle") // .text("Goals For"); // svg.append("text") // .attr("transform", "rotate(-90)") // .attr("y", -margins.left) // .attr("x",0 - (size.height / 2)) // .attr("dy", "1em") // .style("text-anchor", "middle") // .text("Goals against"); // svg.append("text") // .attr("transform", "rotate(-90)") // .attr("y", -margins.left+50) // .attr("x",- (size.height / 2)+100) // .attr("dy", "1em") // .style("text-anchor", "middle") // .attr("font-size", "10px") // .text("High Goals against"); // svg.append("text") // .attr("transform", "rotate(-90)") // .attr("y", 45) // .attr("x", -300) // .attr("dy", "1em") // .style("text-anchor", "middle") // .attr("font-size", "10px") // .text("Low Goals against"); // svg.append("text") // .attr("font-size", "10px") // .attr("x", 260) // .attr("y", 400) // .style("text-anchor", "middle") // .text("Low Goals For"); // svg.append("text") // .attr("font-size", "10px") // .attr("x", 560) // .attr("y", 400) // .style("text-anchor", "middle") // .text("High Goals For"); // var color_mapping = []; // color_mapping.push({'color': 'pink', 'legend' : ' scored many goals but suffered a lot of goals'}); // color_mapping.push({'color': 'blue', 'legend' : 'scored a few goals but suffered a few goals'}) // color_mapping.push({'color': 'black', 'legend' : 'other teams'}) // var mean_goals_for = d3.mean(goals_for_Vals); // var mean_goals_against = d3.mean(goals_against_Vals); // console.log("mean for", Math.ceil(mean_goals_for), " against", mean_goals_against); // var circle = svg.selectAll("dot") // .data(teams_stats) // .join("circle") // .attr("cx", function (d) { // //console.log("for", d.goals_for, xScale(d.goals_for)); // return xScale(d.goals_for); // } ) // .attr("cy", function (d) { // //console.log("ag", d.goals_against, yScale(d.goals_against)); // return yScale(d.goals_against); // } ) // .attr("r", function (d) { return rScale(d.points)}) // //.text("hey"); // //.attr("r", 2) // // .style("fill", function (d) { // // var ratio; // // if (d.goals_for >= Math.ceil(mean_goals_for)) { // // if (d.goals_for < d.goals_against) { // // ratio = d.goals_against/d.goals_for; // // } else { // // ratio = d.goals_for/d.goals_against; // // } // // return Math.round(ratio) == 1 ? " pink" : "black"; // // } else if (d.goals_for < Math.ceil(mean_goals_for)) { // // if (d.goals_for < d.goals_against) { // // ratio = d.goals_against/d.goals_for; // // } else { // // ratio = d.goals_for/d.goals_against; // // } // // return ratio <= 1.2 ? " blue" : "black"; // // } // // }) // // .attr("transform", "translate(" + 25 + "," + 25 + ")") // // svg.selectAll("circle") // // .data(teams_stats) // // .join("circle") // // .attr("cx", d => x_axis(d.goals_against)) // // .attr("cy", d => y_axis(d.goals_for)) // // .style("fill", d => myColor(d.color)) // // .attr("r", d => points(d.points)) // // var circle = svg.append('g') // // .selectAll("dot") // // .data(teams_stats) // // //.join("circle") // // //.append("g") // // .attr("transform", "translate(" + 25 + "," + 25 + ")") // // circle.append("circle") // // .attr("cx", function (d) { // // console.log("for", d.goals_for, xScale(d.goals_for)); // // return xScale(d.goals_for); // // } ) // // .attr("cy", function (d) { // // console.log("ag", d.goals_against, yScale(d.goals_against)); // // return yScale(d.goals_against); // // } ) // // .attr("r", function (d) { return rScale(d.points)}) // //.attr("r", 2) // // .style("fill", function (d) { // // var ratio; // // if (d.goals_for >= Math.ceil(mean_goals_for)) { // // if (d.goals_for < d.goals_against) { // // ratio = d.goals_against/d.goals_for; // // } else { // // ratio = d.goals_for/d.goals_against; // // } // // return Math.round(ratio) == 1 ? " pink" : "black"; // // } else if (d.goals_for < Math.ceil(mean_goals_for)) { // // if (d.goals_for < d.goals_against) { // // ratio = d.goals_against/d.goals_for; // // } else { // // ratio = d.goals_for/d.goals_against; // // } // // return ratio <= 1.2 ? " blue" : "black"; // // } // // }) // //circle.append("text") // svg.selectAll("text") // .data(teams_stats) // .attr("font-size", "10px") // .attr("fill", "black") // .text(function(d) {return d.team;}) // .attr("x", function(d) {console.log("x", xScale(d.goals_for)); return xScale(d.goals_for)+100;}) // //.attr("x", 80) // //.attr("y", 90) // .attr("y", function(d) {console.log("y", yScale(d.goals_against) -200); return yScale(d.goals_against)+rScale(d.points)-200;}); // svg.selectAll("mydots") // .data(color_mapping) // .enter() // .append("circle") // .attr("cx", size.width-200) // .attr("cy", function(d,i){ return 10 + i*25}) // 100 is where the first dot appears. 25 is the distance between dots // .attr("r", 7) // .style("fill", function(d){ return d.color}); // svg.selectAll("mylabels") // .data(color_mapping) // .enter() // .append("text") // .attr("x", size.width-180) // .attr("y", function(d,i){ return 10 + i*25}) // 100 is where the first dot appears. 25 is the distance between dots // .style("fill", function(d){ return d.color}) // .text(function(d){ return d.legend}) // .attr("text-anchor", "left") // .attr("font-size", "10px") // .style("alignment-baseline", "middle") // console.log(xScale(Math.ceil(mean_goals_for))); // svg.append('line') // .style("stroke", "black") // .style("stroke-width", 0.5) // .attr("x1", 440) // .attr("y1",0) // .attr("x2", 440) // .attr("y2", size.height+10); // svg.append('line') // .style("stroke", "black") // .style("stroke-width", 0.5) // .attr("x1", margins.left+30) // .attr("y1",(size.height/2)-15) // .attr("x2", size.width) // .attr("y2", (size.height/2)-15); // //.call(wrap, 30); // // Create axes groups and append axes // // svg.append("g")... // // svg.append("g")... // // render your visualization by calling render_data // //render_data(svg, teams_stats); // return svg.node(); }33:[{"id":"ddbaa37991dff172daa2bbac594611eb105f403d270210f71162e6945fd633a61f60504f0ce7123fc9637c2b0652587e05a99778eedaaddf04ce949a2c4ba6d7","href":"https://static.observableusercontent.com/files/ddbaa37991dff172daa2bbac594611eb105f403d270210f71162e6945fd633a61f60504f0ce7123fc9637c2b0652587e05a99778eedaaddf04ce949a2c4ba6d7","name":"season-1819_csv.csv","type":"text/csv","lastModified":1676335669423.674,"size":96144},{"id":"46e565541492e7936d95a5eb8e753cdf7041424216855fb499681f4aedd06b51bb12dfa9c082668d4b4bee7d10854dc7907fe4432f3054f95db834eb51bc81aa","href":"https://static.observableusercontent.com/files/46e565541492e7936d95a5eb8e753cdf7041424216855fb499681f4aedd06b51bb12dfa9c082668d4b4bee7d10854dc7907fe4432f3054f95db834eb51bc81aa","name":"visualization_assign1.jpg","type":"image/jpeg","lastModified":1676345492421.331,"size":207578}] 2d:{"title":"Homework 1","cells":[{"id":0,"value":"# Homework 1","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":1022,"value":"visualizationHw1 = FileAttachment(\"visualization_assign1.jpg\").image()","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"raw = {\n const scsv = d3.dsvFormat(\",\") // Important to define the separator of your CSV file\n return scsv.parse(await FileAttachment('season-1819_csv.csv').text())\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"## Define size of the SVG and Margins","pinned":false,"hidden":false,"mode":"md"},{"id":23,"value":"margins = {\n return {\n left: 50,\n right: 20,\n top: 20,\n bottom: 50\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"size = {\n return {\n height: 700,\n width: 1000\n }\n}","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":58,"value":"// Scale 1 \n\nxScale = d3.scaleLinear()\n .domain([15,100])\n .range([0, size.width-100])\n//xScale = d3.scaleLinear().domain([0, 100]).range([0, size.width])\n ","pinned":true,"hidden":false,"mode":"ojs"},{"id":553,"value":"goals_for_Vals = {\n var goals_for_Vals = []\n teams_stats.forEach(x => {\n console.log(x['goals_for']);\n goals_for_Vals.push(x['goals_for'])\n })\n \n return goals_for_Vals;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":565,"value":"goals_against_Vals = {\n var vals = []\n teams_stats.forEach(x => {\n console.log(x['goals_for']);\n vals.push(x['goals_for'])\n })\n \n return vals;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":299,"value":"xScale(22)","pinned":true,"hidden":false,"mode":"ojs"},{"id":59,"value":"// Scale 2\nyScale = d3.scaleLinear()\n .domain([15, 100])\n .range([size.height, 0])\n//yScale = d3.scaleLinear().domain([0, 200]).range([size.height, 0]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":345,"value":"yScale(76)","pinned":true,"hidden":false,"mode":"ojs"},{"id":63,"value":"// Scale 3\n rScale = d3.scaleLinear()\n .domain([0,100])\n .range([0,18])","pinned":true,"hidden":false,"mode":"ojs"},{"id":65,"value":"// Scale n\n// scalen = \n\n// colors = d3.scaleLinear()\n// .domain([1,20])\n// .range([\"Brown\"]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":976,"value":"c = d3.scaleOrdinal(d3.schemeAccent)","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"## Creating the Elements","pinned":false,"hidden":false,"mode":"md"},{"id":77,"value":"For this task you should create the necessary elements to your visualization and attach them to the **DOM**.\n\n*Tip: You should create [groups](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g) for the [axes](https://github.com/d3/d3-axis) of your visualization.*\n","pinned":false,"hidden":false,"mode":"md"},{"id":99,"value":"## Write the function to render the chart","pinned":false,"hidden":false,"mode":"md"},{"id":105,"value":"Here, the *render_data* function should render the elements using the D3 [Data Join](https://observablehq.com/@d3/selection-join).","pinned":false,"hidden":false,"mode":"md"},{"id":719,"value":" svg1 = d3.create(\"svg\")\n .attr(\"height\", size.height+margins.bottom+margins.top)\n .attr(\"width\", size.width+margins.right+margins.left)\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":826,"value":"g1 = svg1.append(\"g\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":101,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":1020,"value":"render_data(svg1, g1, teams_stats)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1035,"value":" \nMark here is circle.\n\nChannels are position of the entities and the shape of the entities.\n\nThe scales used are : One is goals_for along the x-axis, goals_against along the y-axis and points which is the size of the circle drawn for each team.","pinned":false,"hidden":false,"mode":"md"},{"id":994,"value":"\n1: Is it possible to recognize groups of teams that scored many goals but also suffer a lot of goals during the season?\n\nYes. I have used 2 different lines to segment the canvas into high goals_for, low goals_for, high goals_againt and low goals against (based on the mean of the goals_for and goals_against values). Using this we can see that teams that fall in the high goals_for and high goals_against answers this question. From the plots we see that Man United and Arsenal are the groups of teams","pinned":false,"hidden":false,"mode":"md"},{"id":1003,"value":"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\nYes, we can recognize this group too. This portion of the teams fall in the region of low goals_for and low goals_against. From the plots we can see Newcastle, Wolves, Leicester and Everton fall into this category.","pinned":false,"hidden":false,"mode":"md"},{"id":1005,"value":"3: Is it more likely that teams who scored more points in the league will have a better attack or a better defense?\n\nThe points attribute is shown as the radius of the circle and we can see that teams that scored more points have a better attack strategy as the goals_against value is very less compared to goals_for. Teams Chelsea, Tottenham, Liverpool and Mancity fall into this category.\n\n\nTeams that had a better defense strategy will have a low goals_against value. This include groups (low goals_for, low goals_against) and (low goals_against, high goals_for). Those teams are Newcastle, Wolves, Leicester, Everton,Chelsea, Tottenham, LiverPool and Man City.\n\nAnd we can clearly see that teams with higher points have both attack and defense strategy.\n","pinned":false,"hidden":false,"mode":"md"},{"id":784,"value":"// svg2 = d3.create('svg')\n// .attr('width', size.width + margins.left+10 + margins.right)\n// .attr('height', size.height + margins.top + margins.bottom)","pinned":true,"hidden":false,"mode":"ojs"},{"id":786,"value":"// g2 = svg2.append(\"g\")\n// .attr(\"transform\", `translate(${margins.left}, ${margins.top})`);","pinned":true,"hidden":false,"mode":"ojs"},{"id":952,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":955,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":960,"value":"//yAxis = d3.axisLeft() .scale(yScale);","pinned":true,"hidden":false,"mode":"ojs"},{"id":963,"value":"// xAxis = d3.axisBottom()\n// .scale(xScale);","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}