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:T5c4,fiche1 = ({ titre: "Who gets shipped and why", auteur: "Ashley Cai, Florina Sutanto, Jan Diehm, Caitlyn Ralph", annee: "2024", lien: "https://pudding.cool/2024/10/fanfic/", regime: "explicatif", // exploratoire · explicatif · infographie // D'où sort-elle, qui l'a produite, et qu'est-ce qui manque ? p1: `créée par The Pudding en octobre 2024 à partir de données d'AO3 (Archive of Our Own) il manque des précisions sur le volume exact d'histoires analysées et sur la période temporelle globale prise en compte.`, // À quelle question ce graphique répond-il ? Est-elle écrite ? p2: `Quelle est la répartition des fanfictions selon le type de relation représentée, elle est écrite`, // Quelle variable visuelle porte quoi — et en est-elle capable ? p3: `treemap l'aire des rectangles représente la proportion de chaque catégorie. La couleur distingue les catégories`, // Qu'affirme le texte, et le dessin le porte-t-il ? p4: `Le graphique affirme la suprématie de la catégorie M/M (52 %), suivie de loin par F/M (18 %) et Gen (14 %). Le dessin reflète exactement ces valeurs : la surface M/M occupe plus de la moitié de l'espace global`, // Qu'est-ce qui a été tordu — volontairement ou non ? p5: `le regroupement "Other" masque la diversité de certaines relations`, // Qu'est-ce que tu gardes, qu'est-ce que tu changes ? garder: `le treemap et je change la légende en expliquant mieux la catégorie other` })33:T4d2,fiche2 = ({ titre: "left vs right (us)", auteur: "Stephanie Posavec David Mccandless", annee: "2009", lien: "https://informationisbeautiful.net/visualizations/left-vs-right-us/", regime: "infographie", // exploratoire · explicatif · infographie // D'où sort-elle, qui l'a produite, et qu'est-ce qui manque ? p1: `ce shémas sort d'une encyclopédie britannique crée par stéphanie posavec et david mCcandless`, // À quelle question ce graphique répond-il ? Est-elle écrite ? p2: `Il répond à la question quelles sont les valeurs qui opposent la Gauche et la Droite au usa , elle n'est pas vraiment écrite mais on peut le déviner grace au titre`, // Quelle variable visuelle porte quoi — et en est-elle capable ? p3: `Le graphique utilise deux couleurs dinstincte pour la gauche et la droite `, // Qu'affirme le texte, et le dessin le porte-t-il ? p4: `le schémas affirme une équivalence entre les valeurs de la gauche et la droite `, // Qu'est-ce qui a été tordu — volontairement ou non ? p5: `tout à été simplifié et généralisé volontairement`, // Qu'est-ce que tu gardes, qu'est-ce que tu changes ? garder: `je garde les 2 couleurs et je reduis le nombre de symboles` })34:T71f,fiche3 = ({ titre: "Bubbles - Life expectancy vs GDP per capita", auteur: "Gapminder", annee: "2025", lien: "https://www.gapminder.org/tools/#$model$markers$bubble$encoding$trail$data$filter$markers$fra=2025;;;;;;;;&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: `Produite par la fondation Gapminder les données proviennent de banques de données internationales . Il manque une visibilité immédiate sur les incertitudes de mesure`, // À quelle question ce graphique répond-il ? Est-elle écrite ? p2: `Il répond à la question : "Quel est le lien entre la richesse d'un pays et l'espérance de vie de sa population ?". La question n'est pas écrite explicitement, mais on le comprend avec les deux axes`, // Quelle variable visuelle porte quoi — et en est-elle capable ? p3: `Axe X = PIB par habitant en échelle logarithmiqu. Axe Y = espérance de vie. Taille des bulles : population du pays. Couleur : continent/région du monde c'est un assemblage visuel très efficace pour croiser quatre dimensions de données en un seul coup d'œil`, // Qu'affirme le texte, et le dessin le porte-t-il ? p4: `Le graphique montre une corrélation positive plus le PIB par habitant est élevé, plus l'espérance de vie augmente, j'ai choisis la france et on voit bien que la bulle se situe bien en haut à droite`, // Qu'est-ce qui a été tordu — volontairement ou non ? p5: `la taille des bulles basée sur la population est démesurée pour les pays très peuplés comme la Chine par rapport à leur poids économique individuel`, // Qu'est-ce que tu gardes, qu'est-ce que tu changes ? garder: `je garde les couleurs pas région et je change la taille des bulles` })35:T5a8,fiche4 = ({ titre: "Gun deaths in florida", auteur: "Christine 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: `Créée par Christine Chan avec des données du Florida Department of Law Enforcement il manque un contexte démographique et la distinction entre homicides, légitime défense ou suicide`, // À quelle question ce graphique répond-il ? Est-elle écrite ? p2: `Quel est l'impact de l'adoption de la loi stand your ground en 2005 sur le nombre de meurtres par arme à feu en Floride.`, // Quelle variable visuelle porte quoi — et en est-elle capable ? p3: `Un graphique en aires. L'axe horizontal représente le temps et l'axe vertical représente le nombre de morts, La couleur rouge peut évoquer le sang.`, // Qu'affirme le texte, et le dessin le porte-t-il ? p4: `Le texte indique une hausse des morts après 2005 mais le dessin nous fait penser l'inverse car la courbe semble chuter vers le bas.`, // Qu'est-ce qui a été tordu — volontairement ou non ? p5: `L'axe vertical est inversé, La métaphore du sang est trompeuse car une montée de la courbe est en réalité à une diminution des morts.`, // Qu'est-ce que tu gardes, qu'est-ce que tu changes ? garder: `je garde la métaphore du sang et je change l'inversion trompeuse des deux axes` })36:T5fc,fiche5 = ({ titre: "Evolution des gains des vainqueurs de grand chelem", auteur: "IA", annee: "2024", lien: "", 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 de données. Il manque des précisions sur l'ajustement selon l'inflation, le détail par tournoi et la distinction entre le circuit masculin et féminin.`, // À quelle question ce graphique répond-il ? Est-elle écrite ? p2: `ça répond à la question du prompt : fais-moi un graphique de l’évolution des gains des vainqueurs de Grand Chelem, elle est écrite dans le titre à peu de choses près` , // Quelle variable visuelle porte quoi — et en est-elle capable ? p3: `Un graphique en ligne, l'axe horizontal représente le temps et l'axe vertical représente le gain moyen annuel, la variable visuelle optimale pour montrer une tendance et une évolution temporelle sauf que ici il manques des infos.`, // Qu'affirme le texte, et le dessin le porte-t-il ? p4: `le graphique affirme une hausse des gains des vainqueurs du grand chelem, le courbe montant vers le haut est explicite`, // Qu'est-ce qui a été tordu — volontairement ou non ? p5: `le manques di'nfos (unité d'argents, quels tournois, féminin ou masculins ce n'est pas volontaire c'est une erreur de l'ia`, // Qu'est-ce que tu gardes, qu'est-ce que tu changes ? garder: `je garde la courbe et j'ajoute les données manquantes` })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":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":"synthese = `c est la dataviz Gapminder qui fonctionne le mieux selon moi elle arrive à montrer plusieurs variable en meme temps, le PIB, la population, l espérance de vie, tout en restant très clair, le prix à payer est le manque de nuance l echelle masque les vrais écarts absolue de richesse entre les pays et la moyenne nationale cache les inégalités sociales à l intérieur d un même pays, c est sur la visualisation Left vs Right que les cinq passe de lecture sont les plus faible en particulier la passe 1 et la passe 5 comme ce n'est pas une représentation de chiffre mais une carte de concept subjectif, c'est difficile d'évaluer la source des données ou ce qui à été déformé. Pour la data viz par IA le proèbleme vient de la donnée et du manque de contexte, L'ia à pris des chiffres brut sans prendre en compte pleins de d'éléments comme la monnaie, le genre, le tournois ce qui donne une courbe faussée. un humain aurait ajusté tout ça et aurai donné plus de contexte à ce graphique. `\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 = `J'ai utilisé L'IA gemini je lui ai fournis des captures d'écran des dataviz avec les prompts suivants?\nprompt 1 : je dois analyser ce tableau , voici les questions ,j'ai deja répondu à tous sauf à la dernière questions aide moi [capture dataviz Fanfic]\nprompt 2: aide moi pour les questions 4 et 5 de ce graphique [capture formulaire code Observable]\nprompt 3 pareil pour cette dataviz et aussi corrige moi si jamais j'ai fais des erreurs (capture dataviz tennis)\nprompt 4 : pareil pour cette data viz il faut que tu m'aide pour la dernière question je ne trouve pas de chose a changer.\n\nL'ia m'a aider à corriger les questions ou je n'étais pas sure et aussi ça m'a aidé pour les questions que je n'arrivais pas\n\nJ'ai corrigé les questions ou je n'etais pas sure comme je l'ai dit précedemment.\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"}