30:T45d,viewof select_object = form(html``)31:T52d,filter_data = function (select_object) { let tournament_data; let continent_data; var value = 0.6; if (select_object["tournament"] == "all") { tournament_data = dataset2.slice(); } else { tournament_data = dataset1.filter(function (d) { return d.tournament == select_object["tournament"]; }); } if (select_object["continent"] == "all") { continent_data = tournament_data.slice(); } else { continent_data = tournament_data.filter(function (d) { return d.continent == select_object["continent"]; }); } if (select_object["continent"] == "Africa") { value = 0.1; } else if (select_object["continent"] == "Oceania") { value = 0; } else if (select_object["continent"] == "Asia") { value = 0.1; } else if (select_object["tournament"] == "UEFA Euro") { value = 0.1; } else if (select_object["continent"] == "America") { value = 0.1; } //This line helps to remove teams that have not played a lot of matches // they are outliers in some sense // to do so, we rely on the comparison // with a quantile of number of matches played var matches_quantile = d3.quantile(continent_data, value, (d) => d.matches); var filtered_data = continent_data.filter(function (d) { return d.matches >= matches_quantile; }); return filtered_data; }32:Td43,bar_chart = function (metric) { //Width and height var w = 500; var h = 250; const best_n_data = data .sort(function (a, b) { return d3.descending(a[metric], b[metric]); }) .slice(0, 10); var xScale = d3 .scaleBand() .domain(d3.range(10)) .rangeRound([0, w]) .paddingInner(0.1); let ymax = d3.max(best_n_data, (d) => d[metric]); let ymin = d3.min(best_n_data, (d) => d[metric]); let ymean = d3.mean(best_n_data, (d) => d[metric]); var yScale = d3.scaleLinear().domain([ymin, ymax]).range([50, h]); const tip = d3tip() .attr("class", "d3-tip") .style("border", "solid 3px black") .style("background-color", "white") .style("border-radius", "7px") .style("float", "left") .style("font-size", "12px") .style("font-family", "sans-serif") .html(function (event, d) { let metric_str; let rounded_metric_value = Math.round(d[metric] * 100) / 100; if (metric == "gd_avg") { metric_str = "Goal difference average"; } else { metric_str = "Win ratio"; } let base_str = `

${d.team}
${metric_str} : ${rounded_metric_value}
Matches : ${d.matches}

`; d3.select(this).attr("fill", "orange"); return base_str; }); tip.offset(function (event, d) { let result; // Tooltip for first values : if (metric == "gd_avg" && d[metric] >= ymean) { result = [0, 55]; } else if (metric == "win_ratio" && d[metric] >= ymean) { result = [0, 25]; // Tooltip for the rest : } else { result = [0, 0]; } return result; }); //Create SVG element var svg = d3 .create("svg") .attr("width", w) .attr("height", 1.01 * h); //Create bars svg .selectAll("rect") .data(best_n_data) .enter() .append("rect") .on("mouseover", tip.show) .on("mouseout", function (d) { tip.hide(d); d3.select(this).attr("fill", "#0a4a90"); }) .attr("y", h) .attr("x", function (d, i) { return xScale(i); }) .transition(1000) .delay(function (d, i) { return i * 50; }) .attr("y", function (d) { return h - yScale(d[metric]); }) .attr("id", function (d) { return `rect-${flag_data[d.team]}`; }) .attr("width", xScale.bandwidth()) .attr("height", function (d) { return yScale(d[metric]); }) .attr("fill", "#0a4a90") .attr("opacity", 0.4); svg .selectAll("image") .data(best_n_data) .enter() .append("image") .attr("y", h) .attr("x", function (d, i) { return xScale(i) + xScale.bandwidth() / 6; }) .transition(1000) .delay(function (d, i) { return i * 50; }) .attr("xlink:href", function (d) { //We use API from Flagpedia to add the flags (https://flagpedia.net/download/api) return `https://flagcdn.com/w40/${flag_data[d.team]}.webp`; }) .attr("id", function (d) { return `bar-flag-${flag_data[d.team]}`; }) .attr("y", function (d) { return h - yScale(d[metric]) + 0.01 * h; }) .attr("width", (2 * xScale.bandwidth()) / 3); svg.call(tip); return svg.node(); }33:[{"id":"d396f509b266d130005670c35d1a20934063a17c1c343ab5a4c1fc30f972ff60b23e716ecfd9930ebce20ef831465e8757413574693afa2e1b6bdb2cc3da756d","href":"https://static.observableusercontent.com/files/d396f509b266d130005670c35d1a20934063a17c1c343ab5a4c1fc30f972ff60b23e716ecfd9930ebce20ef831465e8757413574693afa2e1b6bdb2cc3da756d","name":"all_tournaments_goal_difference@5.csv","type":"text/csv","lastModified":1646255251803.179,"size":16160},{"id":"b368a0a439e892f5835321992d487eb4ade9dea7d2bb425a1c004db5d62ba4ec2c8ced57d4c07040b8bbe2d33510feb0df92e09e0398ab1bff0ec47572aed5f2","href":"https://static.observableusercontent.com/files/b368a0a439e892f5835321992d487eb4ade9dea7d2bb425a1c004db5d62ba4ec2c8ced57d4c07040b8bbe2d33510feb0df92e09e0398ab1bff0ec47572aed5f2","name":"goal_difference_by_tournament_and_team@2.csv","type":"text/csv","lastModified":1646255266636.752,"size":47237},{"id":"0d249ca68a15fc4d1fbb1f774c57f45df6e8e54dcb3a8daa4068a71a7d348ca9bc127142496c3a4a9d96dddba8ca7f04776bf9352737e2040582ea94c56809fb","href":"https://static.observableusercontent.com/files/0d249ca68a15fc4d1fbb1f774c57f45df6e8e54dcb3a8daa4068a71a7d348ca9bc127142496c3a4a9d96dddba8ca7f04776bf9352737e2040582ea94c56809fb","name":"flags_dataset_flagcdn.csv","type":"text/csv","lastModified":1646174932603.597,"size":4354}] 2e:{"title":"Best teams bar chart","cells":[{"id":0,"value":"# Best teams bar chart","pinned":false,"hidden":false,"mode":"md"},{"id":20,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"bar_chart(select_object[\"metric\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":292,"value":"select_object","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":53,"value":"data = filter_data(select_object)","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"import { form } from \"@mbostock/form-input\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":3,"value":"rowConverter1 = function (d) {\n return {\n team: d.team,\n tournament: d.tournament,\n continent: d.continent,\n gd_avg: parseFloat(d.goal_difference_average), //Convert to float\n win_ratio: parseFloat(d.win_ratio),\n matches: parseInt(d.matches) //Convert to int\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":100,"value":"rowConverter2 = function (d) {\n return {\n team: d.team,\n continent: d.continent,\n gd_avg: parseFloat(d.goal_difference_average), //Convert to float\n win_ratio: parseFloat(d.win_ratio),\n matches: parseInt(d.matches) //Convert to int\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"dataset1 = d3.csv(\n await FileAttachment(\"goal_difference_by_tournament_and_team@2.csv\").url(),\n rowConverter1\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":98,"value":"dataset2 = d3.csv(\n await FileAttachment(\"all_tournaments_goal_difference@5.csv\").url(),\n rowConverter2\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":183,"value":"flag_array = FileAttachment(\"flags_dataset_flagcdn.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":186,"value":"flag_data = flag_array[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":242,"value":"d3tip = require(\"d3-tip\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}