31:Ta79,box_plot = { const xDomain = [ d3.min(data, (d) => parseYear(d.YEAR)), d3.max(data, (d) => parseYear(d.YEAR + 1)) ]; const xRange = [margin.left, width - 5 * margin.right]; const xScale = d3.scaleUtc().domain(xDomain).range(xRange); const xAxis = d3 .axisBottom(xScale) .ticks(width / 40) .tickSizeOuter(0); const xBandwith = xScale(parseYear(2024 + 1)) - xScale(parseYear(2024)); const yDomain = Array.from(d3.group(data, (d) => d.DRIVER).keys()); const yRange = [margin.top, height - margin.bottom]; const yScale = d3.scaleBand().domain(yDomain).range(yRange); const yAxis = d3.axisLeft(yScale); const parent = d3.create("div"); const tooltip = parent.append("div").attr("id", "tooltip"); const nodeMouseOver = (event, d) => { tooltip .style("display", "block") .style("left", `${xScale(parseYear(d.YEAR)) + 1.5 * xBandwith}px`) .style("top", `${yScale(d.DRIVER)}px`).html(`${ d.DRIVER } ${flag_map.get(d.NATIONALITY)}
${team_map.get(d.CAR)}
${d.YEAR} : ${d.POS}`); console.log(tooltip); d3.select(event.target).style("cursor", "default"); d3.select(event.target).transition().attr("stroke", "black"); }; const nodeMouseOut = (event, d) => { tooltip.style("display", "none"); d3.select(event.target).style("cursor", "default"); d3.select(event.target).transition().attr("stroke", "none"); }; parent .append("svg") .attr("width", width) .attr("height", height) .style("display", "block") .call((svg) => svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(xAxis) ) .call((svg) => svg .append("g") .attr("transform", `translate(${margin.left},0)`) .call(yAxis) .call((svg) => svg .selectAll(".tick line") .clone() .attr("stroke-opacity", 0.1) .attr("x2", width - margin.right - margin.left) ) ) .call((svg) => svg .append("g") .selectAll("rect") .data(data) .join("rect") .attr("class", "driver") .attr("x", (d) => xScale(parseYear(d.YEAR))) .attr("y", (d) => yScale(d.DRIVER)) .attr("fill", (d) => team_color.get(team_map.get(d.CAR))) .attr( "width", (d) => xScale(parseYear(d.YEAR + 1)) - xScale(parseYear(d.YEAR)) ) .attr("height", (d) => yScale.bandwidth()) .on("mouseover", nodeMouseOver) .on("mouseout", nodeMouseOut) ); yield parent.node(); }32:Td4e,team_map = new Map([ ["Haas", "Haas"], ["Haas Ferrari", "Haas"], ["HAAS FERRARI", "Haas"], ["Kick Sauber", "Kick Sauber"], ["Kick Sauber Ferrari", "Kick Sauber"], ["Racing Bulls", "Racing Bulls"], ["RB Honda RBPT", "Racing Bulls"], ["Red Bull Racing", "Red Bull"], ["Red Bull Racing Honda RBPT", "Red Bull"], ["Red Bull Racing RBPT", "Red Bull"], ["RED BULL RACING HONDA", "Red Bull"], ["MERCEDES", "Mercedes"], ["Mercedes", "Mercedes"], ["FERRARI", "Ferrari"], ["Ferrari", "Ferrari"], ["McLaren", "McLaren"], ["MCLAREN MERCEDES", "McLaren"], ["McLaren Mercedes", "McLaren"], ["ALPHATAURI HONDA", "Alpha Tauri"], ["Alpine", "Alpine"], ["ALPINE RENAULT", "Alpine"], ["Alpine Renault", "Alpine"], ["Aston Martin", "Aston Martin"], ["Aston Martin Aramco Mercedes", "Aston Martin"], ["ASTON MARTIN MERCEDES", "Aston Martin"], ["Williams", "Williams"], ["WILLIAMS MERCEDES", "Williams"], ["Williams Mercedes", "Williams"], ["ALFA ROMEO RACING FERRARI", "Alfa Romeo"], ["Alfa Romeo Ferrari", "Alfa Romeo"], ["AlphaTauri Honda RBPT", "Alpha Tauri"], ["AlphaTauri RBPT", "Alpha Tauri"], ["HAAS FERRARI", "Haas"], ["Haas Ferrari", "Haas"], ["RACING POINT BWT MERCEDES", "Aston Martin"], ["RENAULT", "Alpine"], ["MCLAREN RENAULT", "McLaren"], ["SCUDERIA TORO ROSSO HONDA", "Alpha Tauri"], ["RED BULL RACING TAG HEUER", "Red Bull"], ["FORCE INDIA MERCEDES", "Aston Martin"], ["SAUBER FERRARI", "Alfa Romeo"], ["MCLAREN HONDA", "McLaren"], ["TORO ROSSO", "Alpha Tauri"], ["TORO ROSSO FERRARI", "Alpha Tauri"], ["MRT MERCEDES", "Marussia"], ["RED BULL RACING RENAULT", "Red Bull"], ["LOTUS MERCEDES", "Lotus"], ["STR RENAULT", "Alpha Tauri"], ["MARUSSIA FERRARI", "Marussia"], ["LOTUS RENAULT", "Lotus"], ["CATERHAM RENAULT", "Caterham"], ["STR FERRARI", "Alpha Tauri"], ["WILLIAMS RENAULT", "Williams"], ["MARUSSIA COSWORTH", "Marussia"], ["HRT COSWORTH", "HRT"], ["WILLIAMS COSWORTH", "Williams"], ["VIRGIN COSWORTH", "Marussia"], ["RBR RENAULT", "Red Bull"], ["LOTUS COSWORTH", "Caterham"], ["BRAWN MERCEDES", "Brawn"], ["WILLIAMS TOYOTA", "Williams"], ["TOYOTA", "Toyota"], ["SAUBER BMW", "Alfa Romeo"], ["RED BULL RENAULT", "Red Bull"], ["HONDA", "Honda"], ["FORCE INDIA FERRARI", "Aston Martin"], ["SUPER AGURI HONDA", "Super Aguri"], ["SPYKER FERRARI", "Aston Martin"], ["RBR FERRARI", "Red Bull"], ["STR COSWORTH", "Alpha Tauri"], ["MF1 TOYOTA", "Aston Martin"], ["BAR HONDA", "Honda"], ["WILLIAMS BMW", "Williams"], ["RBR COSWORTH", "Red Bull"], ["SAUBER PETRONAS", "Alfa Romeo"], ["JORDAN TOYOTA", "Jordan"], ["MINARDI COSWORTH", "Minardi"], ["JAGUAR COSWORTH", "Jaguar"], ["JORDAN FORD", "Jordan"], ["JORDAN HONDA", "Jordan"], ["MINARDI ASIATECH", "Minardi"], ["ARROWS COSWORTH", "Arrows"], ["BENETTON RENAULT", "Benetton"], ["PROST", "Prost"], ["ARROWS ASIATECH", "Arrows"], ["BENETTON PLAYLIFE", "Benetton"], ["JORDAN MUGEN HONDA", "Jordan"], ["ARROWS SUPERTEC", "Arrows"], ["MINARDI FONDMETAL", "Minardi"], ["PROST PEUGEOT", "Prost"], ["WILLIAMS SUPERTEC", "Williams"], ["STEWART FORD", "Jaguar"], ["ARROWS", "Arrows"], ["MINARDI FORD", "Minardi"], ["WILLIAMS MECACHROME", "Williams"], ["TYRRELL FORD", "Tyrrell"], ["JORDAN PEUGEOT", "Jordan"], ["PROST MUGEN HONDA", "Prost"], ["ARROWS YAMAHA", "Arrows"] ])33:[{"id":"4183dc89f1849457eff5a3ffff353a4c282d771fa5a0557c0a8b1dfb89a991ce14d61ca8ef9f161b05d8165e1422b4e91834bd998fa0971419bcb0980619eae8","href":"https://static.observableusercontent.com/files/4183dc89f1849457eff5a3ffff353a4c282d771fa5a0557c0a8b1dfb89a991ce14d61ca8ef9f161b05d8165e1422b4e91834bd998fa0971419bcb0980619eae8","name":"F1 Driver standings - Feuille 1.csv","type":"text/csv","lastModified":1709572367602.53,"size":28003},{"id":"540fe5a59417df9152fecefad55d020aeddfd87ca573eda59802d22f810b0155026b654f7a2d48da326e0f18d4b166ffb48724f6878da8ece9476a3fa2a7e59f","href":"https://static.observableusercontent.com/files/540fe5a59417df9152fecefad55d020aeddfd87ca573eda59802d22f810b0155026b654f7a2d48da326e0f18d4b166ffb48724f6878da8ece9476a3fa2a7e59f","name":"F1 Driver standings - Feuille 1@1.csv","type":"text/csv","lastModified":1756712428627.358,"size":29125},{"id":"33c907923e739ae8a18f3af58ad03742b3eecdee56ac8e87813a3ebc326a88f1261e20eb3f21c2d77ddfdee1804e00c4078a8a232be1434ea5ac1c96c2ad58cb","href":"https://static.observableusercontent.com/files/33c907923e739ae8a18f3af58ad03742b3eecdee56ac8e87813a3ebc326a88f1261e20eb3f21c2d77ddfdee1804e00c4078a8a232be1434ea5ac1c96c2ad58cb","name":"F1 Driver standings - Feuille 1@2.csv","type":"text/csv","lastModified":1756713090052.273,"size":29920},{"id":"1c3539ece5334bc28dbd0272dc47214a78fea84ae00da958430be7cbba7f86bcdc499ae703d9d9795bf4d5be215f96a7bea18664c163b7f962830d391126e64d","href":"https://static.observableusercontent.com/files/1c3539ece5334bc28dbd0272dc47214a78fea84ae00da958430be7cbba7f86bcdc499ae703d9d9795bf4d5be215f96a7bea18664c163b7f962830d391126e64d","name":"F1 Driver standings.csv","type":"text/csv","lastModified":1641581604252.089,"size":25899}] 2f:{"title":"F1 Drivers 1997 - 2025","cells":[{"id":4,"value":"# F1 Drivers 1997 - 2025\n\nUsing [Inputs.search](https://github.com/observablehq/inputs/blob/main/README.md#search) and [Inputs.table](https://github.com/observablehq/inputs/blob/main/README.md#table). Data from Formula 1.","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"data = FileAttachment(\"F1 Driver standings - Feuille 1@2.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"viewof search = Inputs.search(data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"Inputs.table(search, {\n format: {\n YEAR: d3.format(\"d\") // format as \"1960\" rather than \"1,960\"\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":159,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"team_color = new Map([\n ['Haas', '#ffffff'],\n ['Kick Sauber', '#00e700'],\n ['Racing Bulls', '#0b31ca'],\n ['Red Bull', '#000B8D'],\n ['Mercedes', '#949398'],\n ['Ferrari', '#F60000'],\n ['McLaren', '#FF9700'],\n ['Alpha Tauri', '#01112E'],\n ['Alpine', '#007EFF'],\n ['Aston Martin', '#007039'],\n ['Williams', '#01B5FF'],\n ['Alfa Romeo', '#960100'],\n ['Marussia', '#ed1b24'],\n ['Lotus', '#221e1f'],\n ['Caterham', '#003c22'],\n ['HRT', '#8b7350'],\n ['Brawn', '#e7eb00'],\n ['Toyota', '#d73d4a'],\n ['Honda', '#ef1133'],\n ['Super Aguri', '#e30008'],\n ['Jordan', '#ffff00'],\n ['Minardi', '#061e35'],\n ['Jaguar', '#143927'],\n ['Arrows', '#a77e46'],\n ['Benetton', '#00a64f'],\n ['Prost', '#21458b'],\n ['Tyrrell', '#2a2d93']\n]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":442,"value":"flag_map = new Map([\n [\"NED\", \"🇳🇱\"],\n [\"GBR\", \"🇬🇧\"],\n [\"FIN\", \"🇫🇮\"],\n [\"MEX\", \"🇲🇽\"],\n [\"ESP\", \"🇪🇸\"],\n [\"MON\", \"🇲🇨\"],\n [\"AUS\", \"🇦🇺\"],\n [\"FRA\", \"🇫🇷\"],\n [\"GER\", \"🇩🇪\"],\n [\"CAN\", \"🇨🇦\"],\n [\"JPN\", \"🇯🇵\"],\n [\"ITA\", \"🇮🇹\"],\n [\"POL\", \"🇵🇱\"],\n [\"RAF\", \"🏳️\"],\n [\"THA\", \"🇹🇭\"],\n [\"RUS\", \"🇷🇺\"],\n [\"DEN\", \"🇩🇰\"],\n [\"BRA\", \"🇧🇷\"],\n [\"BEL\", \"🇧🇪\"],\n [\"SWE\", \"🇸🇪\"],\n [\"NZL\", \"🇳🇿\"],\n [\"INA\", \"🇮🇩\"],\n [\"VEN\", \"🇻🇪\"],\n [\"USA\", \"🇺🇸\"],\n [\"IND\", \"🇮🇳\"],\n [\"SUI\", \"🇨🇭\"],\n [\"AUT\", \"🇨🇭\"],\n [\"AUT\", \"🇦🇹\"],\n [\"COL\", \"🇨🇴\"],\n [\"POR\", \"🇵🇹\"],\n [\"HUN\", \"🇭🇺\"],\n [\"IRL\", \"🇮🇪\"],\n [\"MAS\", \"🇲🇾\"],\n [\"ARG\", \"🇦🇷\"],\n [\"CHN\", \"🇨🇳\"]\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":327,"value":"parseYear = year => d3.utcParse(\"%Y\")(year)","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"## Paramètres de mise en forme","pinned":false,"hidden":false,"mode":"md"},{"id":505,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":542,"value":"### Bounding Box","pinned":false,"hidden":false,"mode":"md"},{"id":162,"value":"margin = ({top: 20, right: 20, bottom: 50, left: 120})","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"height = 1290","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}