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:T1b3d,{ // 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(); }31:T12cc,render_data = (svg, team_stats) => { 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"); // 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:[{"id":"ddbaa37991dff172daa2bbac594611eb105f403d270210f71162e6945fd633a61f60504f0ce7123fc9637c2b0652587e05a99778eedaaddf04ce949a2c4ba6d7","href":"https://static.observableusercontent.com/files/ddbaa37991dff172daa2bbac594611eb105f403d270210f71162e6945fd633a61f60504f0ce7123fc9637c2b0652587e05a99778eedaaddf04ce949a2c4ba6d7","name":"season-1819_csv.csv","type":"text/csv","lastModified":1676228760682.169,"size":96144}] 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":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: 5,\n right: 25,\n top: 5,\n bottom: 25\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"size = {\n return {\n height: 400,\n width: 800\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\n\nxScale = d3.scaleLinear()\n .domain([0,d3.max(goals_for_Vals)])\n .range([0, size.width-60])\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 //['goals_for'];\n //console.log(goals_for_Vals)\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 //['goals_for'];\n //console.log(goals_for_Vals)\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([0,d3.max(goals_against_Vals)])\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":278,"value":"xAxis = d3.axisBottom()\n .scale(xScale);","pinned":true,"hidden":false,"mode":"ojs"},{"id":283,"value":"yAxis = d3.axisLeft()\n .scale(yScale);","pinned":true,"hidden":false,"mode":"ojs"},{"id":63,"value":"// Scale 3\n rScale = d3.scaleLinear()\n .domain([0,100])\n .range([0,11])","pinned":true,"hidden":false,"mode":"ojs"},{"id":65,"value":"// Scale n\n// scalen = ","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":75,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"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+30)\n .attr(\"width\", size.width+margins.right+margins.left)\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":724,"value":"render_data(svg1, teams_stats)","pinned":true,"hidden":false,"mode":"ojs"},{"id":101,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}