2f:[{"id":"216416811cf95995a709448d9efffe2dab30020948a745d368123b68781591a6cf33e5ac5e3e81e8fe9f70a27f7b4dc447a02eaa266637941e7591e9fb20b295","href":"https://static.observableusercontent.com/files/216416811cf95995a709448d9efffe2dab30020948a745d368123b68781591a6cf33e5ac5e3e81e8fe9f70a27f7b4dc447a02eaa266637941e7591e9fb20b295","name":"Mens_Tennis_Grand_Slam_Winner.csv","type":"text/csv","lastModified":1757427087709.321,"size":23545}] 2d:{"title":"TP 2 — Introduction à l'exploration de données et l'analyse en javascript","cells":[{"id":0,"value":"# TP 2 — Introduction à l'exploration de données et l'analyse en javascript\n---","pinned":false,"hidden":false,"mode":"md"},{"id":929,"value":"## Activité n°1 : les tableaux","pinned":false,"hidden":false,"mode":"md"},{"id":881,"value":"Voici un tableau (`federer`) contenant 4 valeurs de type différent :","pinned":false,"hidden":false,"mode":"md"},{"id":883,"value":"\nfederer = [\"suisse\", 1981, 185, false]","pinned":false,"hidden":false,"mode":"ojs"},{"id":885,"value":"// afficher le troisième élément du tableau\nfederer[2]","pinned":true,"hidden":false,"mode":"ojs"},{"id":898,"value":"// Afficher la longueur du tableau federer\nfederer.length","pinned":true,"hidden":false,"mode":"ojs"},{"id":905,"value":"// Trouver l'index (position) de la valeur 1981 dans le tableau federer\nfederer.indexOf(1981)","pinned":true,"hidden":false,"mode":"ojs"},{"id":961,"value":"// Afficher les 3 premières lignes du tableau\nfederer.slice(0,3)","pinned":true,"hidden":false,"mode":"ojs"},{"id":935,"value":"---\n## Activité n°2 : les objets\nLe tableau ci-dessous contient 4 objets (un pour chaque grand chelem) avec les valeurs name, surface, town, order","pinned":false,"hidden":false,"mode":"md"},{"id":940,"value":"tournoisGrandChelem = [\n { name: \"Open d'Australie\", surface: \"dur\", town: \"Melbourne\", order: 1 },\n { name: \"Rolland Garros\", surface: \"terre battue\", town: \"Paris\", order: 2 },\n { name: \"Wimbledon\", surface: \"gazon\", town: \"Londres\", order: 3 },\n { name: \"US Open\", surface: \"dur\", town: \"New York\", order: 4 }\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":977,"value":"Dans les cellules ci-dessous, explorez les valeurs du tableau `tournoisGrandChelem` :","pinned":false,"hidden":false,"mode":"md"},{"id":942,"value":"// Afficher la longueur du tableau tournoisGrandChelem\ntournoisGrandChelem.length","pinned":true,"hidden":false,"mode":"ojs"},{"id":950,"value":"// Trouvez la valeur de la clé \"surface\" du troisième élément du tableau\ntournoisGrandChelem[2].surface","pinned":true,"hidden":false,"mode":"ojs"},{"id":969,"value":"// Trouvez les clés du premier élément du tableau tournoisGrandChelem\nObject.keys(tournoisGrandChelem[0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":983,"value":"---\n## Activité n°3 : import de données et transformations\n\nLe tableau importé ci-dessous contient les informations sur les vainqueurs des tournois du Grand Chelem depuis les années 50.","pinned":false,"hidden":false,"mode":"md"},{"id":2425,"value":"dataGSW = FileAttachment(\"Mens_Tennis_Grand_Slam_Winner.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":2430,"value":"Inputs.table(dataGSW)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2142,"value":"note(\n md`Pour en savoir plus sur l'[importation des données dans Observable](https://observablehq.com/@observablehq/introduction-to-data?collection=@observablehq/getting-data-in-and-out)`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1676,"value":"### Méthode `map()`\nCrée un nouveau tableau avec les résultats de l'application d'une fonction sur chaque élément.","pinned":false,"hidden":false,"mode":"md"},{"id":2162,"value":"note(\n md`Pour en savoir plus sur la [méthode map()](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/map)`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1648,"value":"// Convertir la colonne WINNER_PRIZE en Euros (1 dollar = 0,89 €)\nWINNER_PRIZE_EUROS = dataGSW.map(d => ({\n ...d,\n \"WINNER_PRIZE_EUROS\": d.WINNER_PRIZE * 0.89\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1744,"value":"// Conserver le tableau existant et lui ajouter une colonne WINNER_PRIZE en Euros\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":2068,"value":"// Conserver uniquement les colonnes YEAR, TOURNAMENT et WINNER_PRIZE\nnewDataGSW = dataGSW.map(d => ({\n \"Année\": d.YEAR,\n \"Tournois\": d.TOURNAMENT,\n \"Gains (€)\": d.WINNER_PRIZE * 0.89\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1678,"value":"### Méthode `filter()`\nCrée un nouveau tableau avec les éléments qui remplissent une condition.","pinned":false,"hidden":false,"mode":"md"},{"id":2169,"value":"note(\n md`Pour en savoir plus sur la [méthode filter()](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1659,"value":"// Filtrer les données concernant uniquement le tournois de Wimbledon\nWIMBLEDON = dataGSW.filter(d => d.TOURNAMENT === \"Wimbledon\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":2098,"value":"### Méthode `sort()`\nTrie le tableau sur place.","pinned":false,"hidden":false,"mode":"md"},{"id":2174,"value":"note(\n md`Pour en savoir plus sur la [méthode sort()](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2101,"value":"// Trier le tableau par année\ndataGSW.sort((a, b) => a.YEAR - b.YEAR)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2103,"value":"### Méthode `toSorted()`\nRetourne une copie triée du tableau (sans modifier l'original).","pinned":false,"hidden":false,"mode":"md"},{"id":2179,"value":"note(\n md`Pour en savoir plus sur la [méthode toSorted()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/toSorted)`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2106,"value":"// On ne retient que les lignes qui ont une valeur pour WINNER_PRIZE\ndataGSWwithWinnerPrize = dataGSW.filter(d => d.WINNER_PRIZE)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2457,"value":"// On trie sur la colonne WINNER_PRIZE\ndataGSWwithWinnerPrize.toSorted((a, b) => b.WINNER_PRIZE - a.WINNER_PRIZE)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2112,"value":"### Méthode `find()`\nRetourne le premier élément qui satisfait une condition.","pinned":false,"hidden":false,"mode":"md"},{"id":2185,"value":"note(\n md`Pour en savoir plus sur la [méthode find()](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/find)`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2115,"value":"// Trouver le premier joueur serbe du tableau\ndataGSW.find(d => d.WINNER_NATIONALITY === \"Serbian\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1669,"value":"---\n## Activité n°4 : interface wysiwyg","pinned":false,"hidden":false,"mode":"md"},{"id":1691,"value":"Ci-dessus, le tableau prend en entrée le tableau `data` et renvoie en sortie un nouveau tableau `newData`.","pinned":false,"hidden":false,"mode":"md"},{"id":2467,"value":"newData = await FileAttachment(\"Mens_Tennis_Grand_Slam_Winner.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1697,"value":"Modifiez les transformations `Filter`, `Columns`, `Sort` et `Slice` et observez l'impact sur le tableau de sortie `newData`","pinned":false,"hidden":false,"mode":"md"},{"id":1701,"value":"viewof table = Inputs.table(newData)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1735,"value":"Dans la colonne `WINNER_PRIZE`, cliquez sur les trois points et sélectionnez *derive column*. Modifiez ensuite la formule pour convertir cette colonne en Euros.","pinned":false,"hidden":false,"mode":"md"},{"id":1751,"value":"---\n## Activité n°5 : profilage et nettoyage des données","pinned":false,"hidden":false,"mode":"md"},{"id":2210,"value":"Analysez le jeu de données ci-dessus en utilisant les fonctions vues précédemment. \n\nTraitez, filtrez le jeu de données en fonctions de vos observations.","pinned":false,"hidden":false,"mode":"md"},{"id":2480,"value":"dataNationality = dataGSW\n .filter(d => d.WINNER_NATIONALITY)\n .map(d => ({\"Nationalité du vainqueur\": d.WINNER_NATIONALITY}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":2494,"value":"Plot.plot({\n title: \"\\\"top 10\\\" des nationalités les plus représentés parmi les vainqueurs des tournois du Grand Chelem\",\n marginLeft: 110,\n x: {\n grid: true\n },\n marks: [\n Plot.auto(dataNationality, {y: \"Nationalité du vainqueur\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2637,"value":"Plot.plot({\n title:\n '\"top 10\" des nationalités les plus représentés parmi les vainqueurs des tournois du Grand Chelem',\n x: { grid: true },\n marginLeft: 110,\n marks: [\n Plot.barX(\n dataNationality,\n Plot.groupY({ x: \"count\" }, { y: \"Nationalité du vainqueur\", tip: true, sort: {y: \"x\", reverse: true, limit: 10} })\n ),\n Plot.ruleX([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2191,"value":"---\n## Activité n°6 : première dataviz","pinned":false,"hidden":false,"mode":"md"},{"id":2067,"value":"// Créer un barchart \"top 10\" des nationalités les plus représentés parmi les vainqueurs des tournois du Grand Chelem :\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":2489,"value":"Plot.plot({\n marginLeft: 110,\n marks: [\n Plot.barX(dataNationality, Plot.groupY({x: \"count\"}, {y: \"Nationalité du vainqueur\", sort: {y: \"x\", reverse: true, limit: 10}})),\n Plot.ruleX([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2144,"value":"import { note } from \"@observablehq/callout-boxes\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W2f","stdlib":"1","titling":"auto"}