2f:[{"id":"929b6a0ff8e3b2655dcc50efb7386681d68604c9a489522a85a94e326faf564085bd6abb3195413d542f7c96c44ebcf77e5305fbfb0da8e0887a784da20e1729","href":"https://static.observableusercontent.com/files/929b6a0ff8e3b2655dcc50efb7386681d68604c9a489522a85a94e326faf564085bd6abb3195413d542f7c96c44ebcf77e5305fbfb0da8e0887a784da20e1729","name":"GLB@1.Ts+dSST.csv","type":"text/csv","lastModified":1754133907711.365,"size":12719}] 2d:{"title":"Illustrations du cours","cells":[{"id":0,"value":"# Illustrations du cours","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"donneesMeteo = [\n { ville: \"Paris\", temperature: \"15.5\", humidite: 65, date: \"2024-01-15\" },\n { ville: \"lyon\", temperature: \"12\", humidite: null, date: \"15/01/2024\" },\n { ville: \"MARSEILLE\", temperature: \"\", humidite: 58, date: \"2024-01-15\" },\n { ville: \"toulouse\", temperature: \"18.2\", humidite: 72, date: \"2024-01-15\" },\n { ville: \"\", temperature: \"10\", humidite: 45, date: \"2024-01-15\" }\n];","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"## Supprimer les lignes incomplètes avec .filter()","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"donneesCompletes = donneesMeteo.filter(d => {\n return d.ville && d.temperature && d.humidite;\n});","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"## Transformer les chaines en nombre avec .map()","pinned":false,"hidden":false,"mode":"md"},{"id":23,"value":"donneesNumeriques = donneesCompletes.map(d => {\n return {\n ...d, // spread syntax : copie toutes les propriétés\n temperature: parseFloat(d.temperature), // chaîne → nombre\n humidite: Number(d.humidite) // alternative à parseFloat\n };\n});","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"## Uniformiser les noms de villes","pinned":false,"hidden":false,"mode":"md"},{"id":27,"value":"donneesUniformes = donneesNumeriques.map(d => ({\n ...d,\n ville: d.ville.charAt(0).toUpperCase() + d.ville.slice(1).toLowerCase()\n}));","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"# Transformation de données","pinned":false,"hidden":false,"mode":"md"},{"id":32,"value":"ventes = [\n { produit: \"Ordinateur\", categorie: \"Tech\", prix: 800, quantite: 5 },\n { produit: \"Souris\", categorie: \"Tech\", prix: 25, quantite: 50 },\n { produit: \"Chaise\", categorie: \"Mobilier\", prix: 150, quantite: 8 },\n { produit: \"Bureau\", categorie: \"Mobilier\", prix: 300, quantite: 3 },\n { produit: \"Clavier\", categorie: \"Tech\", prix: 80, quantite: 20 }\n];","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"## Créer de nouvelles colonnes (chiffre d'affaires)","pinned":false,"hidden":false,"mode":"md"},{"id":36,"value":"ventesAvecCA = ventes.map(d => ({\n ...d,\n chiffreAffaires: d.prix * d.quantite,\n prixUnitaire: d.prix // renommage pour clarté\n}));","pinned":true,"hidden":false,"mode":"ojs"},{"id":40,"value":"## Trier les données avec .toSorted() (moderne)","pinned":false,"hidden":false,"mode":"md"},{"id":42,"value":"ventesTriees = ventesAvecCA.toSorted((a, b) => \n b.chiffreAffaires - a.chiffreAffaires\n);\n\n// ⚠️ ANCIENNE MÉTHODE : .sort() MODIFIE le tableau original\n// ventesTriees = ventesAvecCA.sort((a, b) => b.chiffreAffaires - a.chiffreAffaires);","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"## Regrouper par catégorie avec Object.groupBy()","pinned":false,"hidden":false,"mode":"md"},{"id":46,"value":"parCategorie = Object.groupBy(ventes, d => d.categorie);\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"// Convertir en tableau pour plus de flexibilité\ncategoriesArray = Object.entries(parCategorie).map(([categorie, produits]) => ({\n categorie,\n produits,\n nombreProduits: produits.length\n}));","pinned":true,"hidden":false,"mode":"ojs"},{"id":51,"value":"## Calculer des agrégations avec .reduce()","pinned":false,"hidden":false,"mode":"md"},{"id":53,"value":"// Chiffre d'affaires total\ncaTotal = ventes.reduce((total, d) => {\n return total + (d.prix * d.quantite);\n}, 0); // 0 = valeur initiale","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"// CA par catégorie (plus complexe)\ncaParCategorie = Object.entries(parCategorie).map(([categorie, produits]) => ({\n categorie,\n chiffreAffaires: produits.reduce((total, produit) => \n total + (produit.prix * produit.quantite), 0\n )\n}));","pinned":true,"hidden":false,"mode":"ojs"},{"id":59,"value":"## Sélectionner un sous-ensemble pertinent","pinned":false,"hidden":false,"mode":"md"},{"id":61,"value":"// Filtrer + transformer en une fois\nproduitsHautDeGamme = ventes\n .filter(vente => vente.prix > 100) // nouveau tableau\n .map(vente => ({ // nouveau tableau\n nom: vente.produit,\n prix: vente.prix,\n statut: vente.prix > 500 ? \"Premium\" : \"Standard\"\n }));","pinned":true,"hidden":false,"mode":"ojs"},{"id":63,"value":"data = [\n { name: \"Alice\", before: 60, after: 78 },\n { name: \"Bob\", before: 55, after: 68 },\n { name: \"Charlie\", before: 72, after: 75 },\n { name: \"Diane\", before: 48, after: 60 },\n { name: \"Eliott\", before: 66, after: 70 }\n];","pinned":true,"hidden":false,"mode":"ojs"},{"id":65,"value":"Plot.plot({\n x: { label: \"Score\", domain: [40, 80] },\n y: { label: \"Étudiants\", axis: \"left\" },\n marks: [\n Plot.ruleX(data, { x1: \"before\", x2: \"after\", y: \"name\", stroke: \"steelblue\" }),\n Plot.dot(data, { x: \"before\", y: \"name\", fill: \"red\", r: 4 }),\n Plot.dot(data, { x: \"after\", y: \"name\", fill: \"green\", r: 4 })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":67,"value":"companies = [\n { name: \"Alpha\", year: 2022, rank: 2 },\n { name: \"Beta\", year: 2022, rank: 1 },\n { name: \"Gamma\", year: 2022, rank: 4 },\n { name: \"Delta\", year: 2022, rank: 3 },\n { name: \"Epsilon\", year: 2022, rank: 5 },\n { name: \"Alpha\", year: 2025, rank: 1 },\n { name: \"Beta\", year: 2025, rank: 3 },\n { name: \"Gamma\", year: 2025, rank: 2 },\n { name: \"Delta\", year: 2025, rank: 5 },\n { name: \"Epsilon\", year: 2025, rank: 4 }\n];","pinned":true,"hidden":false,"mode":"ojs"},{"id":69,"value":"Plot.plot({\n x: { label: \"Année\", tickFormat: d => d },\n y: { label: \"Classement\", reverse: true },\n marks: [\n Plot.link(companies, {\n x: \"year\",\n y: \"rank\",\n stroke: \"name\",\n strokeWidth: 2,\n z: \"name\"\n }),\n Plot.dot(companies, {\n x: \"year\",\n y: \"rank\",\n fill: \"name\",\n r: 4\n }),\n Plot.text(companies.filter(d => d.year === 2022), {\n x: \"year\",\n y: \"rank\",\n text: \"name\",\n dx: -10,\n textAnchor: \"end\"\n }),\n Plot.text(companies.filter(d => d.year === 2025), {\n x: \"year\",\n y: \"rank\",\n text: \"name\",\n dx: 10,\n textAnchor: \"start\"\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":102,"value":"## Déviation","pinned":false,"hidden":false,"mode":"md"},{"id":82,"value":"glb1TsDsst = await FileAttachment(\"GLB@1.Ts+dSST.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":83,"value":"Plot.differenceY(glb1TsDsst, {\n x: \"Year\",\n y: \"diff\",\n positiveFill: \"red\",\n negativeFill: \"blue\",\n tip: true\n}).plot({y: {grid: true}})","pinned":true,"hidden":false,"mode":"ojs"},{"id":108,"value":"Plot.dot(penguins, {x: \"culmen_length_mm\", y: \"culmen_depth_mm\"}).plot()","pinned":true,"hidden":false,"mode":"ojs"},{"id":119,"value":"## Evolution dans le temps","pinned":false,"hidden":false,"mode":"md"},{"id":121,"value":"Plot.line(aapl, {x: \"Date\", y: \"Close\"}).plot({y: {grid: true}})","pinned":true,"hidden":false,"mode":"ojs"},{"id":111,"value":"Plot.areaY(aapl, {x: \"Date\", y: \"Close\"}).plot()\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":113,"value":"Plot.plot({\n y: {\n transform: (d) => d / 1000,\n label: \"Unemployed (thousands)\"\n },\n marks: [\n Plot.areaY(industries, {x: \"date\", y: \"unemployed\", fill: \"industry\"}),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":115,"value":"Plot.plot({\n y: {\n transform: (d) => d / 1000,\n label: \"Unemployed (thousands)\"\n },\n marks: [\n Plot.areaY(industries, {x: \"date\", y: \"unemployed\", fill: \"industry\", offset: \"wiggle\"}),\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":123,"value":"## Classement","pinned":false,"hidden":false,"mode":"md"},{"id":125,"value":"Plot.barY(alphabet, {x: \"letter\", y: \"frequency\"}).plot()","pinned":true,"hidden":false,"mode":"ojs"},{"id":127,"value":"Plot.plot({\n x: {label: null, tickPadding: 6, tickSize: 0},\n y: {percent: true},\n marks: [\n Plot.ruleX(alphabet, {x: \"letter\", y: \"frequency\", strokeWidth: 2}),\n Plot.dot(alphabet, {x: \"letter\", y: \"frequency\", fill: \"currentColor\", r: 4})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":132,"value":"## Distribution","pinned":false,"hidden":false,"mode":"md"},{"id":129,"value":"Plot.plot({\n marginLeft: 60,\n y: {\n grid: true,\n label: \"Price\"\n },\n x: {\n interval: 0.5,\n label: \"Carats\",\n labelAnchor: \"right\",\n tickFormat: (x) => x.toFixed(1)\n },\n marks: [\n Plot.ruleY([0]),\n Plot.boxY(diamonds, {x: (d) => Math.floor(d.carat * 2) / 2, y: \"price\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":134,"value":"## Partie d'un tout","pinned":false,"hidden":false,"mode":"md"},{"id":136,"value":"Plot.waffleY(olympians, Plot.groupZ({y: \"count\"}, {fill: \"sex\", sort: \"sex\", fx: \"weight\", unit: 10})).plot({fx: {interval: 10}, color: {legend: true}})","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W2f","stdlib":"1","titling":"auto"}