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:T9b7,fiche1 = ({ titre: "GDP per capita", auteur: "Bublles, le site", annee: "Inconnue", 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: `Il semble que se soit le site internet qui l'ai produit, puisque nous avons un message d'avertissement nous indiquant que les informations peuvent changer à cause de la difficulté de représenrer ce genre de données. Il nous renvoies également vers une page d'un blog parlant justement du sujet.`, // À quelle question ce graphique répond-il ? Est-elle écrite ? p2: `La question auquel semle répondre le graphique n'est pas écrite, il possède d'ailleurs pluseirus questions puisque l'utilisateurs peut changer le sujet en fonction d'une autre chose qu'il peut changer. Modifiant ainis le graphqiue. Mais pour celui sélectionné, la question semble être le lien entre le PIB et l'espérance de vies des habitants de poru tous les pays.`, // Quelle variable visuelle porte quoi — et en est-elle capable ? p3: `Chaque bulles représente la réponse pour son pays. Plus il est gros, plus c'est positif et inversement. Pour obtenir l'information, l'utilisateur doit survoler de sa souris l'endroit qu'il souhaite voir, une petite barre d'information apparait avec des pointillé de chaqeu côté pour, ainsi nous aider, à très bien nous repérer sur le graphique. On peut également changer l'année d'observation, voir l'évolution qu'il y a eu.`, // Qu'affirme le texte, et le dessin le porte-t-il ? p4: `Si nous faisons défiler les années, le grpahique nous affirme que l'éspérance de vies a augmenté par rapport au PIB, ce qui, lorsque nous l'observons semble vrai.`, // Qu'est-ce qui a été tordu — volontairement ou non ? p5: `Certaines données sont plutôt difficile d'accès, voir n'en on pas d'affiché lorsque nous les survolons. On peut donc dire que cela a été tordu.`, // Qu'est-ce que tu gardes, qu'est-ce que tu changes ? changer: `Certains point étant tellement petits et avoir une si grande plage de données ne semble pas aboutir à un résultat positif. Je pense que je réduirais certaines données, voir que je ferais plusieurs graphiques, l'un avec les plus gros pays, qui prennent donc pbeaucoup de place dans celui ci, et un autre afin de présenter des pays plus petits, qui n'ont que peu de visibilité ici.` })33:T796,fiche2 = ({ titre: "How the Words We Teach English Language Learners Changed, and What That Says About Us", auteur: "Jasmine Nackash", annee: "Revue en 2023 mais ayant pour base d'anciennes recherches de 1953, puis re en 2013.", lien: "https://pudding.cool/2026/07/essential-words/", regime: "Explicatif", // exploratoire · explicatif · infographie // D'où sort-elle, qui l'a produite, et qu'est-ce qui manque ? p1: `Il s'agit d'une développeuse et designeuse qui a réalisé ce graphique. Ces données sortes du UCREL Semantic Analysis System (USAS.`, // À quelle question ce graphique répond-il ? Est-elle écrite ? p2: `Elle répond à la question qui est le titre de son articles : How the Words We Teach English Language Learners Changed, and What That Says About Us. La question est donc écrite. `, // Quelle variable visuelle porte quoi — et en est-elle capable ? p3: `Les variables visuelles présente les changements de la manière de dire certains mots. On peut voir, grâce à un défilement, toutes les manières que les professeurs utilisent entre les deux années étudiées.`, // Qu'affirme le texte, et le dessin le porte-t-il ? p4: `Le dessin apporte un certains sens avec l'animation, elle montre le déroulé du temps en faisant défiler les mots. On peut également mettre en avant une catégorie de mot. Le texte est illustré par ce graphique, du texte apparaît d'ailleurs en scrollant.`, // Qu'est-ce qui a été tordu — volontairement ou non ? p5: `L'animation rend difficile la lecture de tous les éléments, la décoration n'aide d'ailleurs pas à cela. En voulant sortir du graphique nous avons plusieurs blocs de textes avant de pouvoir passer à la suite`, // Qu'est-ce que tu gardes, qu'est-ce que tu changes ? garder: `Je changerais la manière de présentation, faire une présentation plus simple afin de facilter la lecture de l'entièreté des données.` })34:T657,fiche3 = ({ titre: "The Billion Dollar 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: `Les données sont sourcées et sont réparties en catégories de couleurs.`, // À quelle question ce graphique répond-il ? Est-elle écrite ? p2: `La question n'est pas clairement écrite mais nous pouvons supposé que ce graphique peut répondre à la question : quelle est la répartition du dollar ? `, // Quelle variable visuelle porte quoi — et en est-elle capable ? p3: `Ce graphique est un peu compliqué à comprendre, nous n'avons pas vraiment de valeur à comparé, sauf peut être celle plus claire au sein des blocs.`, // Qu'affirme le texte, et le dessin le porte-t-il ? p4: `Les informations textuelles ne sont que présente, elle semble graduer les revenus des grandes personnalités publics, par rapport aux revenus du pays d'où ils viennent. Les couleurs, qui fait ici office de dessin, les classes en différentes catéégories.`, // Qu'est-ce qui a été tordu — volontairement ou non ? p5: `La mise en forme peut brouiller légèrement la compréhension. On a pas vraiment de valeur comparative.`, // Qu'est-ce que tu gardes, qu'est-ce que tu changes ? garder: `Je rajouterais une description afin d'expliquer le graphique mais, je ferais peut être également une présentation par barre qui peut, avec ce type de données, être plus intuitifs.` })35:T7ea,fiche4 = ({ titre: "Gun Death in Florida", auteur: "C.Chan", annee: "2014", lien: "N'existe pas", regime: "Infographie", // exploratoire · explicatif · infographie // D'où sort-elle, qui l'a produite, et qu'est-ce qui manque ? p1: `Elle sort du Florida Departement of Law Enforcement, on peut donc supposé que le départment a engagé la personne l'ayant crée. Le graphique manque de clareté de lectures. `, // À quelle question ce graphique répond-il ? Est-elle écrite ? p2: `La question n'est pas écrite mais elle répond très probablement aux avantages d'avoir mis en place cette lois, si elle servait véritabelement.`, // Quelle variable visuelle porte quoi — et en est-elle capable ? p3: `Les abscisses présentes les dates et les ordonnées le nomrs de personnes tuées. Cependant, le sens n'est pas le même. Les abscisses sont croissantes, alors que les ordonnées sont décroissantes. Cet effet perturbe le lecteur, qui met beaucoup plus de temps à comprendre le message. `, // Qu'affirme le texte, et le dessin le porte-t-il ? p4: `Le texte affirme qu'avec le passage de cette lois, le nombre de mort baisserais, du moins c'est à cela qu'on s'attend. Le dessin cependant est en forme décroissante pour son axe des ordées, donc il montre en quelques sortes l'inverses.`, // Qu'est-ce qui a été tordu — volontairement ou non ? p5: `La présentation des ordonnées en le faisant aller en décroissant. Le choix de la disposition des couleurs est également étonnant. Le fait de remplir une surface et pas l'autre brouille également l'esprit. Le fait qu'on n'arrive pas trop à savoir à quoi correspond les différents points.`, // Qu'est-ce que tu gardes, qu'est-ce que tu changes ? changer: `Je changerais la zone où il y a de la couleur pour la mettre en blanche, et inversement. La zone en blanche je la mettrais en rouge. Je mettrais également l'axe des ordonnées avec des valeurs croissante afin de rendre son véritable sens au schéma. ` })36:T8b3,fiche5 = ({ titre: "Evolution annules des gains des vainqueurs du grand chelem", auteur: "Chat gpt", annee: "Récemment", lien: "", regime: "Infographie", // exploratoire · explicatif · infographie // D'où sort-elle, qui l'a produite, et qu'est-ce qui manque ? p1: `Le graphique à été produit par un utilisateur lambda, probablement par le professeurs. Elle a été produite à la suite d'une demande de prompt avec une ia. Il manque des informations sur l'année de productions, sur la source des données que l'utilisateurs à fourni et l'auteur. mais également des informations visuelles. Il manque des informations sur le type de monnaie dont il s'agit. `, // À quelle question ce graphique répond-il ? Est-elle écrite ? p2: `La question est : Quelle est l'évolution du gains des vainqueurs de Grand Chelem ? Le graphique répond à une question clairement indiqué dans le titre mais également la demande au prompt. `, // Quelle variable visuelle porte quoi — et en est-elle capable ? p3: `Les variables n'aident que partiellement, un seul point indique véritablemeent une donnée, le reste est interprétatif. Dans le sens où, ce point apparait comme seul véritable repère. Nous n'avons pas l'impression de voir une étude de 292 valeurs pouvant indiquer cette production.`, // Qu'affirme le texte, et le dessin le porte-t-il ? p4: `Le texte affirme, que selon les données que l'utilisateur lui a fournit, il a pu générer correctement un graphique. Il affirme égaleemnt qu'entre 2013 et 2023, les champions auraietn eu un pic de récompense à 3,2m. Le gra^hique suit également cette idée, que la valeur des prix est changeante mais avce une volonté de s'aggrandir, malgrès quelques baisses.`, // Qu'est-ce qui a été tordu — volontairement ou non ? p5: `Les données ont été tordu par le logiciel d'ia qui a produit ce graphique. Elle a probalement effectué une moyenne de ces 292 données d'origines.`, // Qu'est-ce que tu gardes, qu'est-ce que tu changes ? garder: `Je garderais les valeurs ainsi que le titre, mais je rajouterais un peu plus d'aide visuellement au lecreur afin de lui facilter la compréhension de mon message par mon graphique.` })37: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%" }) })38:[{"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},{"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}] 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":223,"value":"FileAttachment(\"guns-death.webp\").image()","pinned":true,"hidden":false,"mode":"ts"},{"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":224,"value":"FileAttachment(\"Évolution des gains des vainqueurs de Grand Chelem.png\").image()","pinned":true,"hidden":false,"mode":"ts"},{"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":"synthese = `\n\n`","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 = `\n\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":"$37","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":"$W38","stdlib":"2","titling":"auto"}