31:T7ba,## Ce que tu analyses **À toi** **Cinq objets.** Les trois premiers, tu les choisis. Les deux derniers sont imposés. ### Tu choisis — un de chaque régime Un seul de chaque, pas trois du même genre : c'est la distinction du CM1 qu'on fait travailler ici. | Régime | Où chercher | |---|---| | **Exploratoire** — l'utilisateur fouille | [Gapminder](https://www.gapminder.org/tools/) · [OECD Regional Well-Being](https://www.oecdregionalwellbeing.org/) · [DataWrapper River](https://www.datawrapper.de/river) | | **Explicatif** — l'auteur mène le récit | [The Pudding](https://pudding.cool/) · [NYT / The Upshot](https://www.nytimes.com/section/upshot) · [Reuters Graphics](https://www.reuters.com/graphics/) | | **Infographie** — un message éditorialisé | [Information is Beautiful](https://informationisbeautiful.net/) | ### Imposés **Objet 4 — la viz ratée.** La même pour toute la classe. On la démonte ensemble en fin de séance : viens avec ton avis écrit, pas avec une page blanche. **Objet 5 — la viz générée par IA.** Je te donne trois choses : **le graphique**, **le prompt** qui l'a produit, et **le fichier de données** d'origine. Le tout a pris dix secondes à fabriquer. > ⚠️ Consigne particulière pour l'objet 5 : **prends trois valeurs affichées sur > le graphique et retrouve-les dans le fichier.** Pas trois au hasard — trois qui > comptent : le maximum, le minimum, et celle sur laquelle repose le titre. > > Une visualisation d'IA est propre, plausible, bien composée. Rien de tout ça > ne dit quoi que ce soit de sa justesse.32:T60e,fiche1 = ({ titre: "Gapminder", auteur: "Gapminder", annee: "2025", lien: "https://www.gapminder.org/tools/#$chart-type=bubbles&url=v2", regime: "Exploratoire", // exploratoire · explicatif · infographie // D'où sort-elle, qui l'a produite, et qu'est-ce qui manque ? p1: `C'est Gapminder qui l'a produite avec des données de la Banque mondiale et de l'ONU, il manque l'incertitude et les sources `, // À quelle question ce graphique répond-il ? Est-elle écrite ? p2: `Comment l'espérance de vie évolue en fonction du niveau de revenu par habitant à l'échelle mondiale ? et non la question n'apparait pas `, // Quelle variable visuelle porte quoi — et en est-elle capable ? p3: `x porte le pib par habitant et y l'esperance de vie, la surface c'est la taille de la population, et la couleur c'est la provenance géographique, tout est bien lisible : si on veux choisir 1 seul pays on peut et quand on passe la souris sur les cercles on voit de quel pays il sagit `, // Qu'affirme le texte, et le dessin le porte-t-il ? p4: `le texte est absent, c'est a l'utilisateur d'explorer les données`, // Qu'est-ce qui a été tordu — volontairement ou non ? p5: `l'axe des abcisses, oui par-ce que sinon le shema aurait été trop grand on passe d'une echelle de 1000 a 128 000`, // Qu'est-ce que tu gardes, qu'est-ce que tu changes ? garder: `la forme car elle permet de montrer plusieurs filtre directement mais j'ajouterai bien un filtre d'opacité pour les petites nations caché derriere les grandes` })33:T607,fiche2 = ({ titre: "Comment l'effondrement d'un glacier a déclenché un glissement de terrain meurtrier et des inondations le long de la frontière entre le Népal et la Chine", auteur: "Google Earth", annee: "2026", lien: "https://www.reuters.com/graphics/NEPAL-FLOODS/MAP/byvrdywwlve/", regime: "explicatif", // exploratoire · explicatif · infographie // D'où sort-elle, qui l'a produite, et qu'est-ce qui manque ? p1: `elle a été faite par Reuters Graphics via la NASA et Google Earth, il y manque les données temporelles de vitesse et de volume de la coulée.`, // À quelle question ce graphique répond-il ? Est-elle écrite ? p2: `Quel a été le trajet et la perte d'altitude de la coulée sur cent kilomètres ? elle n'est pas écrite`, // Quelle variable visuelle porte quoi — et en est-elle capable ? p3: `en abscisse la distance parcourue et en ordonnée l'altitude`, // Qu'affirme le texte, et le dessin le porte-t-il ? p4: `Le texte montre un décrochage à plus de 5 000 m, ce que le tracé illustre bien par une chute brutale sur les premiers kilomètres.`, // Qu'est-ce qui a été tordu — volontairement ou non ? p5: `L échelle des hauteurs est très étirée par rapport aux distances horizontales pour rendre le relief visible, ce qui amplifie fortement la pente réelle.`, // Qu'est-ce que tu gardes, qu'est-ce que tu changes ? garder: `Je garde le lien visuel direct entre l altitude et la carte et je change l echelle de l ordonné pour pouvoir voir la chute complete` })34:T63d,fiche3 = ({ titre: "The Billion Dollar-o-Gram", auteur: "David McCandless", annee: "2026", lien: "https://informationisbeautiful.net/visualizations/the-billion-dollar-gram/", regime: "infographie", // exploratoire · explicatif · infographie // D'où sort-elle, qui l'a produite, et qu'est-ce qui manque ? p1: `Produite par David McCandless, il y manque une temporalité uniforme car les montants mélangent des flux annuels et des stocks cumulés sur plusieurs décennies.`, // À quelle question ce graphique répond-il ? Est-elle écrite ? p2: `Comment sont représenté concrètement les milliards de dollars que ca soit des dépenses publiques, des fortunes privées et des coûts de conflits ? non elle n'est pas écrite`, // Quelle variable visuelle porte quoi — et en est-elle capable ? p3: `L'aire des rectangles encode le montant financier et la couleur regroupe les thématiques`, // Qu'affirme le texte, et le dessin le porte-t-il ? p4: `le texte est absent, c'est a l'utilisateur d'explorer les données`, // Qu'est-ce qui a été tordu — volontairement ou non ? p5: `La comparaison met sur un même plan des données incomparables comme un chiffre d'affaires annuel, une fortune nette individuelle et le coût total cumulé de guerres menées sur plusieurs années .`, // Qu'est-ce que tu gardes, qu'est-ce que tu changes ? garder: `Je garde l'impact immédiat qui donne une échelle tangible aux grands nombres, mais je sépare les dépenses annuelles récurrentes des coûts historiques cumulés pour éviter les fausses équivalences.` })35:T6a5,fiche4 = ({ titre: "Gun deaths in Florida", auteur: "C. Chan", annee: "2014", lien: "https://www.reuters.com", regime: "explicatif", // exploratoire · explicatif · infographie // D'où sort-elle, qui l'a produite, et qu'est-ce qui manque ? p1: `Produite par Reuters à partir des données du Florida Department of Law Enforcement, il y manque le ratio par habitant pour corriger la forte croissance démographique de l'État sur la période.`, // À quelle question ce graphique répond-il ? Est-elle écrite ? p2: `quel impact la loi « Stand Your Ground » en 2005 sur les homicides par arme à feu a eu sur l'état de floride ?, sans formuler de question textuelle directe.`, // Quelle variable visuelle porte quoi — et en est-elle capable ? p3: `La position encode le temps en abscisse et le nombre d'homicides en ordonnée oui ca suffit pour nous montrer.`, // Qu'affirme le texte, et le dessin le porte-t-il ? p4: `L'annotation textuelle pointe l'adoption de la loi en 2005, mais la forme plongeante du tracé après cette date donne l'illusion fausse d'une chute des morts alors qu'elles explosent.`, // Qu'est-ce qui a été tordu — volontairement ou non ? p5: `L'origine zéro est placée tout en haut de l'axe vertical et la surface rouge remplit l'espace supérieur, inversant le sens visuel habituel d'une courbe d'évolution. je pense que c'est volontaire pour cacher la decouverte`, // Qu'est-ce que tu gardes, qu'est-ce que tu changes ? garder: `Je garde le choix de situer précisément la promulgation de la loi sur la série temporelle, mais je remets immédiatement le zéro en bas pour que la hausse des homicides se lise vers le haut.` })36:T56f,fiche5 = ({ titre: "Évolution des gains des vainqueurs de Grand Chelem", auteur: "IA générative", annee: "2023", lien: "mens_tennis_grand_slam_winner.csv", regime: "explicatif", // exploratoire · explicatif · infographie // D'où sort-elle, qui l'a produite, et qu'est-ce qui manque ? p1: `Générée par IA à partir d'un fichier CSV, il y manque l'ajustement à l'inflation`, // À quelle question ce graphique répond-il ? Est-elle écrite ? p2: `Quelle est l'évolution du gain moyen annuel empoché par les vainqueurs de tournois majeurs depuis 1968 ? elle n'est pas ecrite `, // Quelle variable visuelle porte quoi — et en est-elle capable ? p3: `on a l'année en abscisse et le gain moyen en dollars en ordonnée, un choix efficace pour dégager une tendance`, // Qu'affirme le texte, et le dessin le porte-t-il ? p4: `Le titre annonce une évolution globale des gains que le tracé confirme par une nette trajectoire ascendante, rompue par des creux brutaux vers 1999 et après 2019.`, // Qu'est-ce qui a été tordu — volontairement ou non ? p5: `l'abscisse a été tordu pour mieux nous montrer la pente ascendente.`, // Qu'est-ce que tu gardes, qu'est-ce que tu changes ? garder: `Je garde le principe de la courbe chronologique globale avec axe débutant à zéro et j aurai pris en compte l'inflation et le changement de devises ` })37:T43a,synthese = `La visualisation de Reuters sur le Népal est celle qui réussit le mieux : on comprend en un coup d'œil le trajet et la violence de la coulée grâce au lien entre le profil de pente et la carte. Mais ce résultat a un coût : elle sacrifie la réalité du relief, car la pente est très exagérée pour paraître bien plus raide qu'en vrai. Les cinq graphiques ont tous leur plus grande faiblesse sur la passe de l'honnêteté. Entre l'axe inversé en Floride ou le mélange de chiffres incomparables chez Information is Beautiful, on voit que le métier préfère souvent tordre un peu la réalité pour raconter une belle histoire qui marque les esprits. Le problème de la viz faite par l'IA se trouve directement dans la donnée, pas dans le dessin. Le tracé est très propre, mais l'IA a pris bêtement les chiffres du tableau sans penser à l'inflation ni au fait que les monnaies changent selon les pays et les époques. Un humain aurait d'abord nettoyé le fichier, converti toutes les devises et fait attention a l'inflation avant de créer le graphique.`38:T444,ficheAnalyse = () => Inputs.form({ titre: Inputs.text({ label: "Titre", width: "100%", placeholder: "Le titre de la visualisation" }), auteur: Inputs.text({ label: "Auteur · média", width: "100%", placeholder: "Qui l'a faite, et pour qui" }), annee: Inputs.text({ label: "Année", placeholder: "2019" }), lien: Inputs.text({ label: "Lien", width: "100%", placeholder: "https://…" }), regime: Inputs.radio(["exploratoire", "explicatif", "infographie"], { label: "Régime" }), // Les cinq passes, engendrées depuis PASSES ...Object.fromEntries( PASSES.map(([cle, nom, question], i) => [ cle, Inputs.textarea({ label: `${i + 1} · ${nom}`, placeholder: question, rows: 3, width: "100%" }) ]) ), garder: Inputs.textarea({ label: "Je garde / je change", placeholder: "Une phrase. Qu'est-ce que tu gardes, qu'est-ce que tu changes ?", rows: 2, width: "100%" }) })39:[{"id":"9a3db65a301d4dd6b7a91a3eaec02a5a62d81638e5ca1185202e62a0b85388a47b568ff810d0c3fc0a8220f766c67aba0ba67da1ffb83b446fcaf301baf67d26","href":"https://static.observableusercontent.com/files/9a3db65a301d4dd6b7a91a3eaec02a5a62d81638e5ca1185202e62a0b85388a47b568ff810d0c3fc0a8220f766c67aba0ba67da1ffb83b446fcaf301baf67d26","name":"guns-death.webp","type":"image/webp","lastModified":1786290420290.712,"size":25692},{"id":"216416811cf95995a709448d9efffe2dab30020948a745d368123b68781591a6cf33e5ac5e3e81e8fe9f70a27f7b4dc447a02eaa266637941e7591e9fb20b295","href":"https://static.observableusercontent.com/files/216416811cf95995a709448d9efffe2dab30020948a745d368123b68781591a6cf33e5ac5e3e81e8fe9f70a27f7b4dc447a02eaa266637941e7591e9fb20b295","name":"Mens_Tennis_Grand_Slam_Winner.csv","type":"text/csv","lastModified":1786291143654.124,"size":23545},{"id":"76bf2901d8b86b101dca354abc2da19cc06fbbf25b49187f6d37aea1ab0e990b3ad1382c5b7e9bc7ea837de9eed5d39b016c32fc706dacab73a60fc3ae4dc593","href":"https://static.observableusercontent.com/files/76bf2901d8b86b101dca354abc2da19cc06fbbf25b49187f6d37aea1ab0e990b3ad1382c5b7e9bc7ea837de9eed5d39b016c32fc706dacab73a60fc3ae4dc593","name":"Évolution des gains des vainqueurs de Grand Chelem.png","type":"image/png","lastModified":1786291107073.381,"size":98723}] 2f:{"title":"TP 1 — Lire et critiquer une dataviz","cells":[{"id":0,"value":"# TP 1 — Lire et critiquer une dataviz\n\n**Durée : 2 h**\n\n---\n\n## ⚠️ Avant toute chose : **forke ce notebook**\n\nBouton **Fork**, en haut à droite. Sinon rien n'est enregistré.\n**Ce notebook est ton rendu**, tu en déposeras le lien sur Moodle.\n\n⚠️ Dans les cellules de réponse, écris entre les **guillemets obliques** — pas\nentre ` ' ` ni ` \" `.\n\n---\n\nAujourd'hui on n'en fabrique pas, on en lit. C'est l'ordre normal : on apprend à\njuger avant d'apprendre à produire — sinon on produit ce qu'on a déjà vu, sans\nsavoir pourquoi.\n\nÀ la fin de la séance tu sais faire deux choses :\n- lire une visualisation avec une méthode, et pas seulement avec un avis ;\n- dire **pourquoi** quelque chose ne va pas, en des termes que l'auteur pourrait\n utiliser pour la corriger.\n\nLa grille que tu utilises aujourd'hui est celle qui servira à **évaluer tous tes\nrendus**, jusqu'à la SAÉ. Garde-la.","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"## La grille — cinq passes de lecture\n\nTu lis chaque visualisation **cinq fois**, dans cet ordre. Un axe à la fois.\n\n| | Passe | La question |\n|---|---|---|\n| 1 | **La donnée** | D'où sort-elle, qui l'a produite, et **qu'est-ce qui manque** ? |\n| 2 | **L'intention** | À quelle question ce graphique répond-il ? Est-elle écrite ? |\n| 3 | **L'encodage** | Quelle variable visuelle porte quoi — et en est-elle capable ? |\n| 4 | **La finition** | Qu'affirme le texte, et le dessin le porte-t-il ? |\n| 5 | **L'honnêteté** | Qu'est-ce qui a été tordu — volontairement ou non ? |\n\n**Une règle** : pour chaque passe, tu écris une phrase. Pas un mot, pas une note.\nUne phrase qu'un auteur pourrait lire sans se braquer et appliquer le lendemain.","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":119,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":139,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":141,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":186,"value":"gunsDeath = FileAttachment(\"guns-death.webp\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":196,"value":"### Les données de départ","pinned":false,"hidden":false,"mode":"md"},{"id":189,"value":"mens_tennis_grand_slam_winner = await FileAttachment(\"Mens_Tennis_Grand_Slam_Winner.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":198,"value":"### Le prompt\n\n*fais-moi un graphique de l'évolution des gains des vainqueurs de Grand Chelem*","pinned":false,"hidden":false,"mode":"md"},{"id":200,"value":"### Le résultat","pinned":false,"hidden":false,"mode":"md"},{"id":188,"value":"evolutionDesGainsDesVainqueursDeGrandChelem = FileAttachment(\"Évolution des gains des vainqueurs de Grand Chelem.png\").image()","pinned":true,"hidden":false,"mode":"ojs"},{"id":149,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"## Synthèse — 15 lignes\n\nPas un résumé des cinq fiches : une **prise de position**.\n\nTrois questions pour la structurer :\n\n1. Parmi les cinq, laquelle fait le mieux son travail — et à quel prix ?\n (Une visualisation réussie sacrifie toujours quelque chose : la nuance, la\n liberté du lecteur, l'exhaustivité. Nomme ce qui a été sacrifié.)\n2. Sur laquelle des cinq passes tes cinq objets sont-ils les plus faibles ?\n Ce n'est pas un hasard — qu'est-ce que ça dit du métier ?\n3. La viz d'IA : où exactement se situe le problème ? Dans la donnée, dans\n l'encodage, dans le texte ? Et qu'est-ce qu'un humain aurait fait autrement ?\n\n *Ta réponse, dans la cellule ci-dessous.*","pinned":false,"hidden":false,"mode":"md"},{"id":154,"value":"$37","pinned":true,"hidden":false,"mode":"ojs"},{"id":166,"value":"## Journal IA\n\nÀ remplir **même si tu n'as rien utilisé** — écris-le alors.\n\n1. Quels outils / quels prompts ?\n2. Qu'est-ce que ça t'a apporté ?\n3. Qu'est-ce que tu as dû corriger ?\n\n**Sans ce bloc, le rendu n'est pas évalué.**\n\n *Ta réponse, dans la cellule ci-dessous.*","pinned":false,"hidden":false,"mode":"md"},{"id":157,"value":"journalIA = `j ai utilisé gemini je lui ai demande de m'expliquer les graphique quand je les comprenais pas et m'aider sur des question auquelles je ne trouvais pas les reponses, ca m'a aidé a avancé sans etre bloquer sur certaines questions et de pouvoir approfondir le sujet.\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":210,"value":"# Vérification et rendu","pinned":false,"hidden":false,"mode":"md"},{"id":213,"value":"manques = {\n const vide = (s) => !(s ?? \"\").toString().trim();\n const gabarit = (s) => /--- .* ---/.test(s ?? \"\"); // consignes non remplacées\n\n const trous = [\n ...fiches.flatMap((f, i) => [\n ...PASSES.filter(([cle]) => vide(f[cle])).map(\n ([, nom]) => `objet ${i + 1} — ${nom}`\n ),\n ...(vide(f.titre) ? [`objet ${i + 1} — titre`] : []),\n ...(vide(f.garder) ? [`objet ${i + 1} — conclusion`] : [])\n ]),\n ...(vide(synthese) || gabarit(synthese) ? [\"la synthèse\"] : []),\n ...(vide(journalIA) || gabarit(journalIA) ? [\"le journal IA\"] : [])\n ];\n\n return trous.length\n ? md`⚠️ **${trous.length} élément(s) à compléter** : ${trous.join(\" · \")}`\n : md`✅ **Ton rendu est complet.** Dépose le lien de ce notebook.`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"Inputs.table(\n fiches.map((f, i) => ({\n \"N°\": i + 1,\n Titre: f.titre || \"—\",\n Régime: f.regime || \"—\",\n Passes: `${PASSES.filter(([c]) => (f[c] ?? \"\").trim()).length} / 5`,\n Conclusion: (f.garder ?? \"\").trim() ? \"✓\" : \"—\"\n })),\n { width: { \"N°\": 44, Passes: 70, Conclusion: 90 } }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":220,"value":"# Synthèse des réponses","pinned":false,"hidden":false,"mode":"md"},{"id":222,"value":"rendu = md`${[\n ...fiches.map((f, i) => ficheEnMarkdown(f, i + 1)),\n `## Synthèse\\n\\n${synthese}`,\n `## Journal IA\\n\\n${journalIA}`\n].join(\"\\n\\n---\\n\\n\")}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"PASSES = [\n [\n \"p1\",\n \"La donnée\",\n \"D'où sort-elle, qui l'a produite, et qu'est-ce qui manque ?\"\n ],\n [\n \"p2\",\n \"L'intention\",\n \"À quelle question ce graphique répond-il ? Est-elle écrite ?\"\n ],\n [\n \"p3\",\n \"L'encodage\",\n \"Quelle variable visuelle porte quoi — et en est-elle capable ?\"\n ],\n [\"p4\", \"La finition\", \"Qu'affirme le texte, et le dessin le porte-t-il ?\"],\n [\"p5\", \"L'honnêteté\", \"Qu'est-ce qui a été tordu — volontairement ou non ?\"]\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"ficheEnMarkdown = (f, n) => {\n const vide = \"_(à remplir)_\";\n const txt = (s) => (s ?? \"\").toString().trim();\n // dans une cellule de tableau : ni « | » ni retour à la ligne\n const cell = (s) =>\n txt(s)\n ? txt(s)\n .replace(/\\|/g, \"\\\\|\")\n .replace(/\\s*\\n\\s*/g, \" \")\n : vide;\n const par = (s) => txt(s) || vide;\n\n const identite = [f.titre, f.auteur, f.annee]\n .map(txt)\n .filter(Boolean)\n .join(\" · \");\n const lien = txt(f.lien);\n\n return [\n `## Fiche — objet n° ${n}`,\n ``,\n `| | |`,\n `|---|---|`,\n `| **Titre / auteur / année** | ${cell(identite)} |`,\n `| **Lien** | ${lien ? `<${cell(lien)}>` : vide} |`,\n `| **Régime** | ${cell(f.regime)} |`,\n ``,\n ...PASSES.flatMap(([cle, nom], i) => [\n `**${i + 1} · ${nom}** — ${par(f[cle])}`,\n ``\n ]),\n `**En une phrase : qu'est-ce que tu garderais, et qu'est-ce que tu changerais ?**`,\n ``,\n par(f.garder)\n ].join(\"\\n\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"afficheFiche = (f, n) => md`${ficheEnMarkdown(f, n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"fiches = [fiche1, fiche2, fiche3, fiche4, fiche5]","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W39","stdlib":"2","titling":"auto"}