31:T72f,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); var sorted_equipes = equipes.sort(compareRank); const x = d3.scaleBand() .domain(sorted_equipes) .range([margin.left, width - margin.right]) .padding(0.1); const y = d3.scaleLinear() .domain([0, d3.max(equipes, eq => data_points_cumules[eq].budget_par_points)]).nice() .range([height - margin.bottom, margin.top]); const xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).tickSizeOuter(0)); var title = "Millions d'euros de budget / points en Ligue 1 le " + dateLimit.toLocaleString("fr", {day: "numeric", month: "long", year:"numeric"}); const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y)) .call(g => g.selectAll(".tick line") .clone() .attr("stroke-opacity", 0.1) .attr("x2", width - margin.right - margin.left)) .call(g => g.select(".domain").remove()) .call(g => g.append("text") .attr("x", -margin.left) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .attr("font-weight", "bold") .text(title)); svg.append("g") //.attr("fill", "steelblue") .selectAll("rect") .data(sorted_equipes) .join("rect") .attr("fill", d => colorEquipe.get(d)) .attr("x", (d, i) => x(d)) .attr("y", d => y(data_points_cumules[d].budget_par_points)) .attr("height", d => y(0) - y(data_points_cumules[d].budget_par_points)) .attr("width", x.bandwidth()); svg.append("g") .call(xAxis) .selectAll("text") .style("text-anchor", "start") .attr("transform", "rotate(30)"); svg.append("g") .call(yAxis); return svg.node(); }32:Td88,chart_classement = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const x = d3.scaleTime() .domain([new Date("2020-08-21"), new Date("2021-05-23")]).nice() .range([margin.left, width - margin.right]) const xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).tickFormat(multiTimeFormat)); const y = d3.scaleLinear() .domain([0, d3.max(equipes.map(eq => datePointsArray[datePointsArray.length-1][1][eq].points))]).nice() .range([height - margin.bottom, margin.top]) const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(height / 40)) .call(g => g.selectAll(".tick line").clone().attr("stroke-opacity", 0.1).attr("x2", width - margin.left - margin.right)) .call(g => g.select(".domain").remove()) .call(g => g.select(".tick:last-of-type text").clone() .attr("x", 4) .attr("text-anchor", "start") .attr("font-weight", "bold") .text("Nombre de points")); const line = d3.line() .curve(d3.curveBasis) .x((d,i) => x(dates[i])) .y(d => y(d)); const path = svg.append("g") .attr("fill", "none") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .selectAll("path") .data(data_linechart) .join("path") .style("mix-blend-mode", "multiply") .attr("stroke", (d,i) => colorEquipe.get(d[0])) .attr("d", d => line(d[1])); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); // Fonction pour le survol, adapté de https://observablehq.com/@d3/multi-line-chart function hover(svg, path) { if ("ontouchstart" in document) svg .style("-webkit-tap-highlight-color", "transparent") .on("touchmove", moved) .on("touchstart", entered) .on("touchend", left) else svg .on("mousemove", moved) .on("mouseenter", entered) .on("mouseleave", left); const dot = svg.append("g") .attr("display", "none") .attr("fill", "none"); dot.append("circle") .attr("r", 2.5) .attr("fill", "#000"); dot.append("text") .attr("stroke", "#fff") .attr("stroke-width", "5") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("text-anchor", "middle") .attr("y", -8); dot.select("text") .clone() .attr("fill", "#000") .attr("stroke", "none"); function moved(event) { event.preventDefault(); const pointer = d3.pointer(event, this); const xm = x.invert(pointer[0]); const ym = y.invert(pointer[1]); const i = d3.bisectCenter(dates, xm); const s = d3.least(data_linechart, d => Math.abs(d[1][i] - ym)); const equipe = s[0]; path.attr("opacity", d => d === s ? 1 : 0.3).filter(d => d === s).raise(); dot.attr("transform", `translate(${x(dates[i])},${y(s[1][i])})`); dot.selectAll("text").text(equipe + " - Classement : " + rankDate(equipe, dates[i])); } function entered() { path.style("mix-blend-mode", null).attr("opacity", 0.3); dot.attr("display", null); } function left() { path.style("mix-blend-mode", "multiply").attr("opacity", 1); dot.attr("display", "none"); } } svg.call(hover, path); return svg.node(); }33:T5a1,function multiTimeFormat(date) { var locale = d3.timeFormatDefaultLocale({ "dateTime": "%A %e %B %Y à %X", "date": "%d/%m/%Y", "time": "%H:%M:%S", "periods": ["AM", "PM"], "days": ["dimanche", "lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi"], "shortDays": ["dim", "lun", "mar", "mer", "jeu", "ven", "sam"], "months": ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"], "shortMonths": ["janv", "févr", "mars", "avr", "mai", "juin", "juil", "août", "sept", "oct", "nov", "déc"] }); var formatMillisecond = locale.format(".%L"), formatSecond = locale.format(":%S"), formatMinute = locale.format("%I:%M"), formatHour = locale.format("%I %p"), formatDay = locale.format("%a %d"), formatWeek = locale.format("%b %d"), formatMonth = locale.format("%B"), formatYear = locale.format("%Y"); return (d3.timeSecond(date) < date ? formatMillisecond : d3.timeMinute(date) < date ? formatSecond : d3.timeHour(date) < date ? formatMinute : d3.timeDay(date) < date ? formatHour : d3.timeMonth(date) < date ? (d3.timeWeek(date) < date ? formatDay : formatWeek) : d3.timeYear(date) < date ? formatMonth : formatYear)(date); }34:[{"id":"a8f3f3e49b5497a07477149d2a7d74dc05fd0bacc389303094f697f230f6b0ff5170989b247fd909baaf18cb74b469f10e60b61f2c2dce11b7551cbce177971a","href":"https://static.observableusercontent.com/files/a8f3f3e49b5497a07477149d2a7d74dc05fd0bacc389303094f697f230f6b0ff5170989b247fd909baaf18cb74b469f10e60b61f2c2dce11b7551cbce177971a","name":"france-ligue-1-2020-2021@3.csv","type":"text/csv","lastModified":1616512439896.404,"size":41767},{"id":"87df422d02b937385e34decc1ea9322caecbfdeae52081e9c8eaf26ab70b5d163cb93c79b5be91be89272111c6b68ca3b9069abe550f9b4a0befe4778f46e5d7","href":"https://static.observableusercontent.com/files/87df422d02b937385e34decc1ea9322caecbfdeae52081e9c8eaf26ab70b5d163cb93c79b5be91be89272111c6b68ca3b9069abe550f9b4a0befe4778f46e5d7","name":"france-ligue-1-2020-2021(1).csv","type":"text/csv","lastModified":1615794479942.671,"size":40376},{"id":"e95f57e190b9b10d9c5c7f5d746acc323d6c955a24e41ae7e31ef23c1cc128b8890dbb893cf83aca19b33dc6c96188a449ec21fe4f855a60b52075bf6345742d","href":"https://static.observableusercontent.com/files/e95f57e190b9b10d9c5c7f5d746acc323d6c955a24e41ae7e31ef23c1cc128b8890dbb893cf83aca19b33dc6c96188a449ec21fe4f855a60b52075bf6345742d","name":"france-ligue-1-2020-2021(1)@1.csv","type":"text/csv","lastModified":1618764297168.14,"size":44065},{"id":"f25e1e0d81346b6f4f3c606dd2eef27a448bbb82ad9805457ea51d98f29937d615233a83dbd10319c6a61a9bb7e1dca30f2dbd25f53fc1a0df2c3a0795f18aa5","href":"https://static.observableusercontent.com/files/f25e1e0d81346b6f4f3c606dd2eef27a448bbb82ad9805457ea51d98f29937d615233a83dbd10319c6a61a9bb7e1dca30f2dbd25f53fc1a0df2c3a0795f18aa5","name":"france-ligue-1-2020-2021(2).csv","type":"text/csv","lastModified":1620726109390.31,"size":49079},{"id":"2b1dc2fe4adbc17721a5d7bba885de52e9e23ed463d69a99e6a33f497673837a9be533daa8037626ca2e5dedade9fa76b2716ebdd57694d476beef9ad0c6a38a","href":"https://static.observableusercontent.com/files/2b1dc2fe4adbc17721a5d7bba885de52e9e23ed463d69a99e6a33f497673837a9be533daa8037626ca2e5dedade9fa76b2716ebdd57694d476beef9ad0c6a38a","name":"france-ligue-1-2020-2021(3).csv","type":"text/csv","lastModified":1621979315855.679,"size":51784}] 2f:{"title":"Classement des budgets de Ligue 1 (2020-2021)","cells":[{"id":0,"value":"md`# Classement des budgets de Ligue 1 (2020-2021)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"viewof dateLimit = Scrubber(dates, {\n autoplay: true,\n loop: false,\n delay: 50,\n format: date => date.toLocaleString(\"fr\", {day: \"numeric\", month: \"long\", year: \"numeric\"})\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":426,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"md`## Fonctions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"getPoints = match_data => {\n var points_data = {\n Date: match_data.DATE\n };\n equipes.forEach(equipe => {\n points_data[equipe] = {};\n points_data[equipe][\"points\"] = 0;\n points_data[equipe][\"goals\"] = 0;\n });\n var home_team = match_data.HOME_TEAM;\n var away_team = match_data.AWAY_TEAM;\n var result = match_data.FTR;\n var goals_home_team = match_data.FTHG;\n var goals_away_team = match_data.FTAG;\n points_data[home_team][\"goals\"] = goals_home_team;\n points_data[away_team][\"goals\"] = goals_away_team;\n switch (result) {\n case \"H\":\n points_data[home_team][\"points\"] = 3;\n points_data[away_team][\"points\"] = 0;\n break;\n case \"D\":\n points_data[home_team][\"points\"] = 1;\n points_data[away_team][\"points\"] = 1;\n break;\n case \"A\":\n points_data[home_team][\"points\"] = 0;\n points_data[away_team][\"points\"] = 3;\n break;\n };\n return points_data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":457,"value":"getPointsObject = date => {\n var sum_points = {Date:date};\n equipes.forEach(equipe => sum_points[equipe] = {points:0, goals:0});\n const points_data_2021 = raw_data_2021.map(d => getPoints(d));\n var filtered_points = d3.filter(points_data_2021, d => d.Date < date);\n if (filtered_points.length > 0) {\n equipes.forEach(equipe => {\n var points_equipe = d3.sum(filtered_points, d => d[equipe].points);\n var goals_equipe = d3.sum(filtered_points, d => d[equipe].goals);\n sum_points[equipe].points = points_equipe;\n sum_points[equipe].goals = goals_equipe;\n sum_points[equipe][\"budget_par_points\"] = points_equipe === 0 ? 0 : budgetMap.get(equipe)/(points_equipe*1000000);\n });\n };\n return [date, sum_points];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":407,"value":"compareRank = (eq_a, eq_b) => {\n var points_a = data_points_cumules[eq_a].points;\n var points_b = data_points_cumules[eq_b].points;\n var goals_a = data_points_cumules[eq_a].goals;\n var goals_b = data_points_cumules[eq_b].goals;\n if (points_a !== points_b) {\n return points_a < points_b ? 1 : -1;\n } else {\n return goals_a < goals_b ? 1 : -1;\n }\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":577,"value":"rankDate = (equipe, date) => {\n var pointsAtDate = dataPointsMap.get(date);\n const compareRankDate = (eq_a, eq_b) => {\n var points_a = pointsAtDate[eq_a].points;\n var points_b = pointsAtDate[eq_b].points;\n var goals_a = pointsAtDate[eq_a].goals;\n var goals_b = pointsAtDate[eq_b].goals;\n if (points_a !== points_b) {\n return points_a < points_b ? 1 : -1;\n } else {\n return goals_a < goals_b ? 1 : -1;\n }\n }\n var sorted_points_data = equipes.sort(compareRankDate);\n return sorted_points_data.indexOf(equipe) +1;\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"md`## Paramètres de mise en forme`","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"margin = ({top: 30, right: 60, bottom: 70, left: 30})","pinned":false,"hidden":false,"mode":"ojs"},{"id":434,"value":"md`### Fonctions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":430,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":555,"value":"colorEquipe = new Map([\n [\"Lille\", \"#EE0000\"],\n [\"Olympique Lyonnais\", \"#274288\"],\n [\"Paris Saint Germain\", \"#005096\"],\n [\"Monaco\", \"#EE2722\"],\n [\"Lens\", \"#ECE600\"],\n [\"Metz\", \"#640006\"],\n [\"Rennes\", \"#CA0000\"], \n [\"Olympique Marseille\", \"#009CDC\"], \n [\"Montpellier\", \"#003399\"],\n [\"Angers SCO\", \"#000000\"], \n [\"Reims\", \"#EB0000\"], \n [\"Bordeaux\", \"#001B50\"], \n [\"Saint-Étienne\", \"#008E3D\"], \n [\"Brest\", \"#CC1111\"], \n [\"Strasbourg\", \"#00A0E1\"], \n [\"Nantes\", \"#FFDD02\"],\n [\"Nice\", \"#000000\"],\n [\"Lorient\", \"#F58113\"],\n [\"Nîmes\", \"#DD0000\"],\n [\"Dijon\", \"#CC0000\"]\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"md`## Données`","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"md`### Données saison 2020/2021 ([Source](https://www.betonjames.com/football-data-downloads/))`","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"raw_data_2021 = d3.csvParse(await FileAttachment(\"france-ligue-1-2020-2021(3).csv\").text(), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":229,"value":"data_points_cumules = dataPointsMap.get(dateLimit)\n/*data_points_cumules = {\n var sum_points = {};\n equipes.forEach(equipe => sum_points[equipe] = {points:0, goals:0});\n const points_data_2021 = raw_data_2021.map(d => getPoints(d));\n const filtered_points = d3.filter(points_data_2021, d => d.Date < dateLimit);\n if (filtered_points.length > 0) {\n equipes.forEach(equipe => {\n var points_equipe = d3.sum(filtered_points, d => d[equipe].points);\n var goals_equipe = d3.sum(filtered_points, d => d[equipe].goals);\n sum_points[equipe].points = points_equipe;\n sum_points[equipe].goals = goals_equipe;\n sum_points[equipe][\"budget_par_points\"] = points_equipe === 0 ? 0 : budgetMap.get(equipe)/(points_equipe*1000000);\n });\n }\n return sum_points;\n}*/","pinned":false,"hidden":false,"mode":"ojs"},{"id":477,"value":"datePointsArray = dates.map(date => getPointsObject(date))","pinned":false,"hidden":false,"mode":"ojs"},{"id":513,"value":"data_linechart = equipes.map(eq => [eq, dates.map((date,i) => datePointsArray[i][1][eq].points)])","pinned":false,"hidden":false,"mode":"ojs"},{"id":535,"value":"equipeMap = new Map(equipes.map(eq => [eq, dates.map((date,i) => datePointsArray[i][1][eq].points)]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":439,"value":"dataPointsMap = new Map(datePointsArray)","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"md`### Description des caractéristiques:\n- FTR = Full time result\n- FTHG = Full time home goals\n- FTAG = Full time away goals\n- HTR = Half time result\n- HTHG = Half time home goals\n- HTAG = Half time away goals\n- ETR = Extra time Result\n- ETHG = Extra time home goals\n- ETAG = Extra time away goals\n- PENR = Penalty shootout Result\n- PENHG = Penalty shootout home goals\n- PENAG = Penalty shootout away goals\n- H_ST = Home team shots total\n- H_SOG = Home team shots on goal\n- H_SFG = Home team shots off goal\n- H_PT = Home team possession time\n- H_COR = Home team corners\n- H_FL = Home team fouls\n- H_TC = Home team yellow cards\n- H_RC = Home team red cards\n- A_ST = Away team shots total\n- A_SOG = Away team shots on goal\n- A_SFG = Away team shots off goal\n- A_PT = Away team possession time\n- A_COR = Away team corners\n- A_FL = Away team fouls\n- A_TC = Away team yellow cards\n- A_RC = Away team red cards\n- N/A = Not applicable\n- SNV = Stat not available`","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"md`### Paramètres de la saison 2020/2021`","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"equipes = [\"Lille\", \"Olympique Lyonnais\", \"Paris Saint Germain\", \"Monaco\", \"Lens\", \"Metz\", \"Rennes\", \"Olympique Marseille\", \"Montpellier\", \"Angers SCO\", \"Reims\", \"Bordeaux\", \"Saint-Étienne\", \"Brest\", \"Strasbourg\", \"Nantes\", \"Nice\", \"Lorient\", \"Nîmes\", \"Dijon\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"dates = {\n var nb_jours_ligue_1 = Math.floor((new Date(2021, 4, 24) - new Date(2020, 7, 20))/(1000*60*60*24));\n var dates = Array.from({length: nb_jours_ligue_1}, (_, i) => {\n const date = new Date(2020, 7, 21);\n date.setDate(20 + i + 1);\n return date;\n })\n return dates;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":192,"value":"budgetMap = new Map([\n [\"Paris Saint Germain\", 540000000],\n [\"Olympique Lyonnais\", 300000000],\n [\"Olympique Marseille\", 250000000],\n [\"Monaco\", 215000000],\n [\"Lille\", 147000000],\n [\"Nice\", 130000000],\n [\"Rennes\", 100000000],\n [\"Saint-Étienne\", 95000000],\n [\"Bordeaux\", 75000000],\n [\"Nantes\", 75000000],\n [\"Reims\", 70000000],\n [\"Metz\", 60000000],\n [\"Montpellier\", 54500000],\n [\"Strasbourg\", 50000000],\n [\"Dijon\", 49000000],\n [\"Lens\", 46000000],\n [\"Angers SCO\", 45000000],\n [\"Brest\", 45000000],\n [\"Lorient\", 45000000],\n [\"Nîmes\", 40000000]\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"md`## Modules`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}