30:T50d,**Interesting results:** The purpose of this chart is to show which team plays against which team, and out of those two, which one wins the most. As such, it is possible to observe rivalries between countries, or to see if a team usually plays against weaker or stronger opponents. It also show that smaller countries, or countries who have yet to make an impact on the world of football, tend to choose opponents based on geographic proximity rather than on their strength. A team like Brazil will face off against opponents around the world, while a team like Vietnam prefers playing against other countries near South East Asia. This can also explain earlier skews we talked about in our data, when we argued that the number of wins was not necessarily the best indicator : a team who plays against weaker teams will amass a lot of wins, but that does not necessarily mean it is one of the best teams in the world. Furthermore, by highlighting countries in different colors based on how often a team wins or loses against them, you can easily see the domination of certain teams during specific eras of football. Highlighting a country like Hungary while choosing the era representing its glory days will show most countries it matched up against in green, meaning it had a winning record.31:T45d,viewof select_object = form(html``)32:[] 2e:{"title":"Results of international football matches from 1872 to 2021","cells":[{"id":361,"value":"# Results of international football matches from 1872 to 2021","pinned":false,"hidden":false,"mode":"md"},{"id":352,"value":"## Project FOOT-INT - MOS 5.5 DataViz \n## École Centrale de Lyon","pinned":false,"hidden":false,"mode":"md"},{"id":26,"value":"## Akilhoussen ONALY & Antony PARODI","pinned":false,"hidden":false,"mode":"md"},{"id":156,"value":"title_start = {\n const svg = d3\n .select(DOM.svg(width, 80))\n .style(\"background-color\", \"#f7fbff\");\n\n let line1 = \"Summary & Project goal\";\n svg\n .append(\"text\")\n .attr(\"y\", 48)\n .attr(\"x\", width / 2)\n .attr(\"text-anchor\", \"middle\")\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"fill\", \"#0a4a90\")\n .style(\"font-size\", \"30px\")\n .text(line1);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":378,"value":"We have chosen to look at the evolution of **national soccer teams** over the years. We would like to try to understand through this project which teams have been the most **dominant** in the **history of soccer**, through broad statistics such as the rate of victory of a team, its number of goals scored or conceded over a period of time, etc..","pinned":false,"hidden":false,"mode":"md"},{"id":382,"value":"The dataset used contains all the international soccer matches from **1872** to the end of **2021** (a more detailed description can be found below).","pinned":false,"hidden":false,"mode":"md"},{"id":391,"value":"**Note :** While our project intends to be general enough to extract general insights on the history of teams, the knowledgeable reader may be able to see between the lines through the charts and understand it in light of how soccer has evolved since its creation. ","pinned":false,"hidden":false,"mode":"md"},{"id":31,"value":"title1 = {\n const svg = d3\n .select(DOM.svg(width, 80))\n .style(\"background-color\", \"#f7fbff\");\n\n let line1 = \"Who were the top 10 winners each year\";\n\n let line2 = \"since the first World Cup ?\";\n\n svg\n .append(\"text\")\n .attr(\"y\", 32)\n .attr(\"x\", width / 2)\n .attr(\"text-anchor\", \"middle\")\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"fill\", \"#0a4a90\")\n .style(\"font-size\", \"30px\")\n .text(line1);\n\n svg\n .append(\"text\")\n .attr(\"y\", 65)\n .attr(\"x\", width / 2)\n .attr(\"text-anchor\", \"middle\")\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"fill\", \"#0a4a90\")\n .style(\"font-size\", \"30px\")\n .text(line2);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"viewof selectedYear = Scrubber(years, {\n format: (y) => y + 1,\n delay: 3000,\n loop: false,\n autoplay: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"animated_bar_chart()","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"**Note**: the number between brackets is the number of wins","pinned":false,"hidden":false,"mode":"md"},{"id":418,"value":"**One can notice several eras of domination with this chart :**\n- **Italy** in the 30s (two consecutive World cups in 1934 and 1938)\n- **Hungary** between 1954 and 1956\n- **Brazil** between 1958 and 1962 (two consecutive World cups in 1958 and 1962)\n- **Germany** between 1966 and 1974 and in the whole 80s (Euro, WC, finalist of WC, top wins)\n- **Argentina** between 1978 and 1986\n- **South Korea** between 1967 and 1973 (no titles but almost undefeated)\n- **Brazil** in 1990 - 2000\n- **Spain** in 2008 - 2012\n- **France** in 1998 - 2006 and 2016-2018","pinned":false,"hidden":false,"mode":"md"},{"id":422,"value":"**Limits :** \nTo make this chart, we used the total number of wins within a year and many countries who have played a lot of friendly matches and won a lot of them may appear easily in the top 10. Other metrics could have been used, but this one was enough to show the teams that won titles or had well-known periods of domination.\n\nA good solution would be to weight the wins by the FIFA ranking of the teams but also to give more importance to the wins in official competitions compared to the friendly matches.","pinned":false,"hidden":false,"mode":"md"},{"id":87,"value":"title2 = {\n const svg = d3\n .select(DOM.svg(width, 80))\n .style(\"background-color\", \"#f7fbff\");\n\n let line1 = \"How many goals did each team score\";\n\n let line2 = \"and concede since the first World Cup ?\";\n\n svg\n .append(\"text\")\n .attr(\"y\", 32)\n .attr(\"x\", width / 2)\n .attr(\"text-anchor\", \"middle\")\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"fill\", \"#0a4a90\")\n .style(\"font-size\", \"30px\")\n .text(line1);\n\n svg\n .append(\"text\")\n .attr(\"y\", 65)\n .attr(\"x\", width / 2)\n .attr(\"text-anchor\", \"middle\")\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"fill\", \"#0a4a90\")\n .style(\"font-size\", \"30px\")\n .text(line2);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":497,"value":"**Help** : Select a year and click on a country on the (zoomable) map to highlight it on the scatterplot.","pinned":false,"hidden":false,"mode":"md"},{"id":107,"value":"viewof year_selected = Inputs.range([1930, 2021], {\n step: 1,\n value: 2018,\n label: \"Year\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"table = html`\n\n \n \n \n \n

${geo_map(\n 0.5 * width,\n 0.35 * width\n )}

${scatterplot(\n 0.5 * width,\n 0.35 * width\n )}

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":445,"value":"**A little explanation on this chart : **\n\nOn the left, we have a choropleth map that allows us to identify easily the teams that have scored the most goals (thanks to the color encoding). \nThe chart on the right is a scatterplot of goals conceded vs goals scored which helps to better understand the completeness of a team during a year and the balance between its attack and its defense (thanks to positional encoding). \nWe also added the line **y = x** in order to distinguish between \"weak teams\" (who conceded more goals than they scored) and \"strong teams\" (who scored more goals than they conceded).","pinned":false,"hidden":false,"mode":"md"},{"id":437,"value":"**Interesting results :**\n\nIn 2018, France won the World Cup but Belgium finished first in the FIFA rankings at the end of the year. This result seemed surprising to many people but this chart helps to better understand it.\nIn fact, in 2018, France scored 32 goals and conceded 18 goals but Belgium scored 41 and conceded 14 goals. So Belgium had better performances over the year in terms of attack and defense but France probably played better in the World Cup. \nWe can also see that Germany was not in shape that year whereas the year before it was among the best teams (i.e. scored many goals and conceded few).","pinned":false,"hidden":false,"mode":"md"},{"id":466,"value":"**Limits**:\n\nWhile total goals can already provide interesting insights (as seen in 2018), the limitation mentioned earlier still applies. Indeed, the results can be more accurate if more importance is given to goals scored against higher ranked teams (FIFA) and goals scored in major competitions.","pinned":false,"hidden":false,"mode":"md"},{"id":196,"value":"title3 = {\n const svg = d3\n .select(DOM.svg(width, 80))\n .style(\"background-color\", \"#f7fbff\");\n\n let line1 = \"Who has won the most in head-to-head\";\n\n let line2 = \"matches over a period ?\";\n\n svg\n .append(\"text\")\n .attr(\"y\", 32)\n .attr(\"x\", width / 2)\n .attr(\"text-anchor\", \"middle\")\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"fill\", \"#0a4a90\")\n .style(\"font-size\", \"30px\")\n .text(line1);\n\n svg\n .append(\"text\")\n .attr(\"y\", 65)\n .attr(\"x\", width / 2)\n .attr(\"text-anchor\", \"middle\")\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"fill\", \"#0a4a90\")\n .style(\"font-size\", \"30px\")\n .text(line2);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":332,"value":"**Help** : Enter a (valid) period and click on a country to see the results","pinned":false,"hidden":false,"mode":"md"},{"id":234,"value":"viewof year1 = Inputs.number([1872, 2021], {\n step: 1,\n label: \"Starting year :\",\n value: 1998,\n placeholder: \"Year between 1872 and 2021\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"value":"viewof year2 = Inputs.number([year1, 2021], {\n step: 1,\n label: \"Finish year :\",\n value: year2_calc(year1),\n placeholder: `Year between ${year1} and 2021`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"head_to_head_map(width, 0.7 * width, year1, year2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":470,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":476,"value":"**Limits:**\n\nSadly, it is hard to scale data properly for each team, when they all played a different number of matches against everyone, and also against each other. One of the first iterations of this chart was a true flow map, with links going from one country to another, but it ended up being too crowded, so in the end, we decided to remove it.","pinned":false,"hidden":false,"mode":"md"},{"id":205,"value":"title4 = {\n const svg = d3\n .select(DOM.svg(width, 80))\n .style(\"background-color\", \"#f7fbff\");\n\n let line1 = \"And finally, who is the best team of all time\";\n\n let line2 = \"based on some criteria?\";\n\n svg\n .append(\"text\")\n .attr(\"y\", 32)\n .attr(\"x\", width / 2)\n .attr(\"text-anchor\", \"middle\")\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"fill\", \"#0a4a90\")\n .style(\"font-size\", \"30px\")\n .text(line1);\n\n svg\n .append(\"text\")\n .attr(\"y\", 65)\n .attr(\"x\", width / 2)\n .attr(\"text-anchor\", \"middle\")\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"fill\", \"#0a4a90\")\n .style(\"font-size\", \"30px\")\n .text(line2);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":229,"value":"bar_chart(select_object[\"metric\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":480,"value":"**Interesting results:**\n\nThis chart allows up to sum up all of the top countries' results over their whole existence. It's a simple way to answer who the best teams are with easy to understand indicators.\nWith no surprise, Brazil is first when it comes to win ratio overall. It isn't the country of football for no reason. There might be some surprising results in this graph, such as Iran coming up fourth in terms of win ratio across all tournaments, but when checking its frequent opponents on the above map, we can see it tends to play against weaker opponents, and while choosing only matches from the World Cup, it leaves the top 10 and countries like France move up in the rankings.","pinned":false,"hidden":false,"mode":"md"},{"id":486,"value":"**Limits:**\n\nIt is a very simple bar chart with a few selectors, it only serves to sum up the data over more than a hundred years, and to confirm what was inferred through the previous graphs. As a standalone, it does not provide too much value. \nIt also only shows the top 10, and completely disregards the rest.","pinned":false,"hidden":false,"mode":"md"},{"id":259,"value":"title_data = {\n const svg = d3\n .select(DOM.svg(width, 80))\n .style(\"background-color\", \"#f7fbff\");\n\n let line1 = \"The data\";\n svg\n .append(\"text\")\n .attr(\"y\", 48)\n .attr(\"x\", width / 2)\n .attr(\"text-anchor\", \"middle\")\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"fill\", \"#0a4a90\")\n .style(\"font-size\", \"30px\")\n .text(line1);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"The original dataset was found on Kaggle from https://www.kaggle.com/martj42/international-football-results-from-1872-to-2017/data\n\nEach row in the dataset is a match with the date, the home team (home_team), the away team (away_team), the goals of the home team (home_score), the goals of the away team (away_score), the competition played (tournament), the city (city) and the country (country) in which the match was played. An additional column exists in the dataset to indicate if the match was played in neutral conditions (i, e. not in the country of one of the two teams) (neutral column).\n\nThis set was then cleaned and prepared using Python to ensure that the country names were consistent and to extract the indicators used in the charts.\n\nThe cleaning code can be found here : https://github.com/onaly/foot-int-dataviz/\nOther computations were done in the corresponding notebooks of each chart.","pinned":false,"hidden":false,"mode":"md"},{"id":271,"value":"title_inspirations = {\n const svg = d3\n .select(DOM.svg(width, 80))\n .style(\"background-color\", \"#f7fbff\");\n\n let line1 = \"Inspirations\";\n svg\n .append(\"text\")\n .attr(\"y\", 48)\n .attr(\"x\", width / 2)\n .attr(\"text-anchor\", \"middle\")\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"fill\", \"#0a4a90\")\n .style(\"font-size\", \"30px\")\n .text(line1);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":276,"value":"### Animated bar chart :","pinned":false,"hidden":false,"mode":"md"},{"id":301,"value":"https://www.youtube.com/watch?v=Yl63doSYOX0","pinned":false,"hidden":false,"mode":"md"},{"id":282,"value":"### Choropleth map of scored goals & Scatterplot of scored vs conceded goals :","pinned":false,"hidden":false,"mode":"md"},{"id":316,"value":"https://public.tableau.com/app/profile/ross/viz/WorldCup/WorldCupWinningPercentages\n(only the idea, the indicators are different)","pinned":false,"hidden":false,"mode":"md"},{"id":287,"value":"### Notebook organization :","pinned":false,"hidden":false,"mode":"md"},{"id":312,"value":"https://observablehq.com/@anasselhoud/data-visualization-wlsports","pinned":false,"hidden":false,"mode":"md"},{"id":295,"value":"### Other :","pinned":false,"hidden":false,"mode":"md"},{"id":305,"value":"https://www.kaggle.com/phjulien/a-journey-through-the-history-of-soccer","pinned":false,"hidden":false,"mode":"md"},{"id":399,"value":"title_ds = {\n const svg = d3\n .select(DOM.svg(width, 80))\n .style(\"background-color\", \"#f7fbff\");\n\n let line1 = \"Design sheet\";\n svg\n .append(\"text\")\n .attr(\"y\", 48)\n .attr(\"x\", width / 2)\n .attr(\"text-anchor\", \"middle\")\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"fill\", \"#0a4a90\")\n .style(\"font-size\", \"30px\")\n .text(line1);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":395,"value":"The design sheet can be found here :\n\nhttps://github.com/onaly/foot-int-dataviz/blob/master/data/jpg/design%20sheet.jpg","pinned":false,"hidden":false,"mode":"md"},{"id":45,"value":"title_end = {\n const svg = d3\n .select(DOM.svg(width, 80))\n .style(\"background-color\", \"#f7fbff\");\n\n let line1 = \"Code & Imports\";\n svg\n .append(\"text\")\n .attr(\"y\", 48)\n .attr(\"x\", width / 2)\n .attr(\"text-anchor\", \"middle\")\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"fill\", \"#0a4a90\")\n .style(\"font-size\", \"30px\")\n .text(line1);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"Check the relative notebooks for details on the code and implementation","pinned":false,"hidden":false,"mode":"md"},{"id":73,"value":"### Animated bar chart :","pinned":false,"hidden":false,"mode":"md"},{"id":61,"value":"import { animated_bar_chart } with { selectedYear as selectedYear } from \"@onaly/top10wins\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"years = Array.from({ length: 92 }, (_, i) => i + 1929)","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"### Choropleth map of scored goals","pinned":false,"hidden":false,"mode":"md"},{"id":111,"value":"import { geo_map } with { year_selected as selectedYear } from \"@onaly/foot-int-geomap\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"### Scatterplot of scored vs conceded goals","pinned":false,"hidden":false,"mode":"md"},{"id":120,"value":"import { scatterplot } with { year_selected as selectedYear } from \"@onaly/goals-scatterplot\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"### Results of head to head matches over a period :","pinned":false,"hidden":false,"mode":"md"},{"id":173,"value":"import { flow_map2 as head_to_head_map } from \"@pntony/flow-map\";","pinned":false,"hidden":false,"mode":"ojs"},{"id":506,"value":"year2_calc = function (year_start) {\n if (year_start <= 2006) {\n return 2006;\n } else if (year_start <= 2020) {\n return year_start + 1;\n } else {\n return year_start;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"### Best team chart","pinned":false,"hidden":false,"mode":"md"},{"id":215,"value":"import { form } from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":225,"value":"import { bar_chart } with { select_object as select_object } from \"@onaly/best-team-bar-chart\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}