29:null 2a:["$","title",null,{"children":"TP 1 — Lire et critiquer une dataviz | Enzo Loddo | Observable"}] 2f: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.30: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%" }) })31:[{"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}] 2d:{"id":"a9cde01d4cabd7ab","slug":"tp-1-lire-et-critiquer-une-dataviz","title":"TP 1 — Lire et critiquer une dataviz","thumbnail":"f970bf4d693e7b80ac56581bb23e5908729ec33b581f98540feef62767c9f350","access_level":"public","create_time":"$D2026-09-02T15:19:59.973Z","update_time":"$D2026-09-04T18:05:32.472Z","view_time":null,"first_public_time":"$D2026-09-02T15:20:07.082Z","has_unpublished_edits":null,"fork":{"id":"f02e24c75f712566","slug":"tp-1-lire-et-critiquer-une-dataviz","title":"TP 1 — Lire et critiquer une dataviz","owner":{"id":"29853dc62ffa3714","login":"mmi-montbeliard","name":"MMI Montbéliard"}},"stars":0,"starred":false,"owner":{"type":"team","id":"ba3cc9cf47925f31","login":"3nzo","name":"Enzo Loddo","avatar_url":"https://avatars-next.observableusercontent.com/df89a60cce9c5035843f598e4cefa7bbefcd033c4221028cac64fb37f24fea3b","tier":"starter_2024"},"version":242,"publish_version":242,"role":null,"authored":false,"authors":[{"type":"individual","id":"217988139cfa2f6e","login":"3nzo","name":"Enzo Loddo","avatar_url":"https://avatars-next.observableusercontent.com/df89a60cce9c5035843f598e4cefa7bbefcd033c4221028cac64fb37f24fea3b","tier":null}],"members":[{"type":"team","id":"ba3cc9cf47925f31","login":"3nzo","name":"Enzo Loddo","avatar_url":"https://avatars-next.observableusercontent.com/df89a60cce9c5035843f598e4cefa7bbefcd033c4221028cac64fb37f24fea3b","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"$2f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":119,"value":"fiche1 = ({\n titre: \"\",\n auteur: \"\",\n annee: \"\",\n lien: \"\",\n regime: \"\", // exploratoire · explicatif · infographie\n\n // D'où sort-elle, qui l'a produite, et qu'est-ce qui manque ?\n p1: ``,\n // À quelle question ce graphique répond-il ? Est-elle écrite ?\n p2: ``,\n // Quelle variable visuelle porte quoi — et en est-elle capable ?\n p3: ``,\n // Qu'affirme le texte, et le dessin le porte-t-il ?\n p4: ``,\n // Qu'est-ce qui a été tordu — volontairement ou non ?\n p5: ``,\n\n // Qu'est-ce que tu gardes, qu'est-ce que tu changes ?\n garder: ``\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"fiche2 = ({\n titre: \"\",\n auteur: \"\",\n annee: \"\",\n lien: \"\",\n regime: \"\", // exploratoire · explicatif · infographie\n\n // D'où sort-elle, qui l'a produite, et qu'est-ce qui manque ?\n p1: ``,\n // À quelle question ce graphique répond-il ? Est-elle écrite ?\n p2: ``,\n // Quelle variable visuelle porte quoi — et en est-elle capable ?\n p3: ``,\n // Qu'affirme le texte, et le dessin le porte-t-il ?\n p4: ``,\n // Qu'est-ce qui a été tordu — volontairement ou non ?\n p5: ``,\n\n // Qu'est-ce que tu gardes, qu'est-ce que tu changes ?\n garder: ``\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"fiche3 = ({\n titre: \"\",\n auteur: \"\",\n annee: \"\",\n lien: \"\",\n regime: \"\", // exploratoire · explicatif · infographie\n\n // D'où sort-elle, qui l'a produite, et qu'est-ce qui manque ?\n p1: ``,\n // À quelle question ce graphique répond-il ? Est-elle écrite ?\n p2: ``,\n // Quelle variable visuelle porte quoi — et en est-elle capable ?\n p3: ``,\n // Qu'affirme le texte, et le dessin le porte-t-il ?\n p4: ``,\n // Qu'est-ce qui a été tordu — volontairement ou non ?\n p5: ``,\n\n // Qu'est-ce que tu gardes, qu'est-ce que tu changes ?\n garder: ``\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"gunsDeath = FileAttachment(\"guns-death.webp\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"fiche4 = ({\n titre: \"\",\n auteur: \"\",\n annee: \"\",\n lien: \"\",\n regime: \"\", // exploratoire · explicatif · infographie\n\n // D'où sort-elle, qui l'a produite, et qu'est-ce qui manque ?\n p1: ``,\n // À quelle question ce graphique répond-il ? Est-elle écrite ?\n p2: ``,\n // Quelle variable visuelle porte quoi — et en est-elle capable ?\n p3: ``,\n // Qu'affirme le texte, et le dessin le porte-t-il ?\n p4: ``,\n // Qu'est-ce qui a été tordu — volontairement ou non ?\n p5: ``,\n\n // Qu'est-ce que tu gardes, qu'est-ce que tu changes ?\n garder: ``\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"### Les données de départ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"mens_tennis_grand_slam_winner","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":200,"value":"### Le résultat","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":188,"value":"evolutionDesGainsDesVainqueursDeGrandChelem = FileAttachment(\"Évolution des gains des vainqueurs de Grand Chelem.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"fiche5 = ({\n titre: \"\",\n auteur: \"\",\n annee: \"\",\n lien: \"\",\n regime: \"\", // exploratoire · explicatif · infographie\n\n // D'où sort-elle, qui l'a produite, et qu'est-ce qui manque ?\n p1: ``,\n // À quelle question ce graphique répond-il ? Est-elle écrite ?\n p2: ``,\n // Quelle variable visuelle porte quoi — et en est-elle capable ?\n p3: ``,\n // Qu'affirme le texte, et le dessin le porte-t-il ?\n p4: ``,\n // Qu'est-ce qui a été tordu — volontairement ou non ?\n p5: ``,\n\n // Qu'est-ce que tu gardes, qu'est-ce que tu changes ?\n garder: ``\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":154,"value":"synthese = `\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":157,"value":"journalIA = `\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"# Vérification et rendu","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"# Synthèse des réponses","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"afficheFiche = (f, n) => md`${ficheEnMarkdown(f, n)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"fiches = [fiche1, fiche2, fiche3, fiche4, fiche5]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"2","titling":"auto"}} 2e:"$2d:body"