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:T6a2,fiche1 = ({ titre: "Population by age", auteur: "Gapminder", annee: "Non indiquée", lien: "https://www.gapminder.org/tools/#$model$markers$pyramid$encoding$frame$value=2026;;;;;&chart-type=popbyage&url=v2", regime: "exploratoire", // exploratoire · explicatif · infographie // D'où sort-elle, qui l'a produite, et qu'est-ce qui manque ? p1: `Les données présentent la population par âge et par région du monde, mais leur source exacte n'est pas visible sur le graphique.`, // À quelle question ce graphique répond-il ? Est-elle écrite ? p2: `Le graphique permet de comparer la répartition des âges entre les différentes régions du monde a differentes années.Toutes les informations sont lisible.`, // Quelle variable visuelle porte quoi — et en est-elle capable ? p3: `L'âge est représenté verticalement et le pourcentage de population horizontalement, avec une couleur différente pour chaque région.`, // Qu'affirme le texte, et le dessin le porte-t-il ? p4: `Le graphique permet bien de comparer les régions, mais certaines informations sont difficiles à comprendre au premier regard. Neanmoins une fois la sourie passer sur les couleurs on peut obtenir l'age d'une personne et le pourcentage quel represente dans la population entiere de cette region.`, // Qu'est-ce qui a été tordu — volontairement ou non ? p5: `Le graphique ne semble pas trompeur, mais l'absence de valeurs précises directement affichées rend la comparaison moins évidente.`, // Qu'est-ce que tu gardes, qu'est-ce que tu changes ? garder: `Je garderais les couleurs et la comparaison entre les régions, mais j'ajouterais la provenance des informations.` })33:T695,fiche2 = ({ titre: "Can Data Die?", auteur: "Jennifer Ding, avec Jan Diehm et Michelle Pera-McGhee", annee: "2021", lien: "https://pudding.cool/2021/10/lenna/", regime: "explicatif", // exploratoire · explicatif · infographie // D'où sort-elle, qui l'a produite, et qu'est-ce qui manque ? p1: `Les données viennent de recherches sur Google et Google Scholar, mais elles ne représentent pas l’ensemble d’Internet.`, // À quelle question ce graphique répond-il ? Est-elle écrite ? p2: `Le graphique cherche à montrer comment l’image Lenna s’est diffusée sur différents types de sites au fil du temps on accede a l'information sous forme de texte dans les carrés mais aussi sous la forme du graphiques en arriere plan.`, // Quelle variable visuelle porte quoi — et en est-elle capable ? p3: `Les années sont placées horizontalement, le nombre de résultats verticalement et les couleurs représentent les différents domaines (.org, .edu, .com et autres).`, // Qu'affirme le texte, et le dessin le porte-t-il ? p4: `Le texte explique la diffusion de l’image et le graphique permet de voir clairement son évolution et les types de sites concernés.`, // Qu'est-ce qui a été tordu — volontairement ou non ? p5: `Le graphique peut donner l’impression de montrer toute la diffusion de l’image, alors qu’il montre seulement les résultats retrouvés par les moteurs de recherche. Ce qui fausse les données`, // Qu'est-ce que tu gardes, qu'est-ce que tu changes ? garder: `Je garderais les couleurs et les barres, mais j’indiquerais plus clairement que les résultats ne représentent qu’une partie d’Internet.` })34:T664,fiche3 = ({ titre: "The problem with plastics", auteur: "David McCandless", annee: "Z017", lien: "https://informationisbeautiful.net/visualizations/plastic-crisis-pollution-recycling-microplastics-bioplastics/#types", regime: "explicatif", // exploratoire · explicatif · infographie // D'où sort-elle, qui l'a produite, et qu'est-ce qui manque ? p1: `Les données viennent de plusieurs sources, notamment Geyer et al., The Economist, The Guardian, Our World in Data, NPR et National Geographic.`, // À quelle question ce graphique répond-il ? Est-elle écrite ? p2: `Le graphique cherche à montrer l’ampleur de la pollution plastique, les limites du recyclage et les solutions possibles.`, // Quelle variable visuelle porte quoi — et en est-elle capable ? p3: `Les couleurs différencient les types de plastique, tandis que la taille des formes représente leur importance. Cela permet de comparer rapidement les différentes catégories.`, // Qu'affirme le texte, et le dessin le porte-t-il ? p4: `Le texte insiste sur l’ampleur de la crise du plastique, et les nombreux graphiques et illustrations permettent de bien appuyer ce message.`, // Qu'est-ce qui a été tordu — volontairement ou non ? p5: `Le graphique regroupe des données venant de sources et d’années inconnu, ce qui peut donner l’impression qu’elles sont toutes directement comparables.`, // Qu'est-ce que tu gardes, qu'est-ce que tu changes ? garder: `Je garderais les couleurs et les illustrations, mais je simplifierais certaines parties pour rendre les informations principales plus faciles à repérer.` })35:T5c6,fiche4 = ({ titre: "Gun deaths in florida", auteur: "C. Chan / Reuters", annee: "2014", lien: "guns-death.webp", regime: "infographie", // exploratoire · explicatif · infographie // D'où sort-elle, qui l'a produite, et qu'est-ce qui manque ? p1: `Les données viennent du Florida Department of Law Enforcement, mais la période exacte n'est pas clairement indiquée.`, // À quelle question ce graphique répond-il ? Est-elle écrite ? p2: `Le graphique montre l'évolution du nombre de meurtres par arme à feu en Floride, la raison est la loie de 2005.`, // Quelle variable visuelle porte quoi — et en est-elle capable ? p3: `La courbe montre l'évolution dans le temps, mais l'axe vertical inversé rend la lecture trompeuse.`, // Qu'affirme le texte, et le dessin le porte-t-il ? p4: `Le graphique met en avant la loi de 2005, mais il ne prouve pas qu'elle est responsable de l'évolution des meurtres.`, // Qu'est-ce qui a été tordu — volontairement ou non ? p5: `L’axe vertical est inversé : une hausse du nombre de morts apparaît comme une baisse. Ce choix graphique peut rappeler l’idée du sang qui coule, mais rend la lecture trompeuse.`, // Qu'est-ce que tu gardes, qu'est-ce que tu changes ? garder: `Je garderais les données et la courbe, mais je remettrais l’axe vertical dans le sens normal. Je rendrais aussi les années plus visibles et je distinguerais mieux la période avant et après la loi de 2005.` })36:T6d7,fiche5 = ({ titre: "Évolution des gains des vainqueurs de Grand Chelem", auteur: "IA générative", annee: "Non indiquée", lien: "", regime: "infographie", // exploratoire · explicatif · infographie // D'où sort-elle, qui l'a produite, et qu'est-ce qui manque ? p1: `Les données ont été fournies à une IA à partir d’un fichier. Il manque les valeurs précises des points sur la courbe et le graphique manque de lisibilité.`, // À quelle question ce graphique répond-il ? Est-elle écrite ? p2: `Le graphique cherche à montrer l'évolution des gains des vainqueurs de Grand Chelem au fil des années,cette données n'est pas très lisible on voit l'argent mais pas les gain des participant par leurs année exact.`, // Quelle variable visuelle porte quoi — et en est-elle capable ? p3: `Les années sont placées sur l'axe horizontal et les gains sur l'axe vertical ; la courbe est adaptée pour montrer une évolution dans le temps.Neanmoins ceci ne sert pas a grand chose car il faut faire en fonction des vainqueurs decider tout les 5 ans donc ceci est faux et inutile.`, // Qu'affirme le texte, et le dessin le porte-t-il ? p4: `Le titre parle des gains des vainqueurs, mais le graphique montre en réalité une moyenne annuelle, ce qui n'est pas correct.`, // Qu'est-ce qui a été tordu — volontairement ou non ? p5: `Le graphique peut être trompeur car il regroupe plusieurs tournois dans une moyenne et ne précise pas clairement les unités ni les choix de calcul.`, // Qu'est-ce que tu gardes, qu'est-ce que tu changes ? garder: `Je garderais les données, mais je remplacerais la courbe par des barres représentant les gains tous les 5 ans pour rendre l’évolution plus claire.` })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":"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},{"id":"9a3db65a301d4dd6b7a91a3eaec02a5a62d81638e5ca1185202e62a0b85388a47b568ff810d0c3fc0a8220f766c67aba0ba67da1ffb83b446fcaf301baf67d26","href":"https://static.observableusercontent.com/files/9a3db65a301d4dd6b7a91a3eaec02a5a62d81638e5ca1185202e62a0b85388a47b568ff810d0c3fc0a8220f766c67aba0ba67da1ffb83b446fcaf301baf67d26","name":"guns-death.webp","type":"image/webp","lastModified":1786290420290.712,"size":25692}] 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 = ` 1 : Ma visualisation préférée est « Can Data Die? », car elle montre clairement comment l’image de Lenna s’est diffusée au fil du temps. Son principal sacrifice est l’exhaustivité : elle ne prend en compte que les résultats trouvés sur certains sites et moteurs de recherche, et non l’ensemble d’Internet. 2 : Mes cinq objets sont surtout faibles sur la donnée, car les sources et les limites des données ne sont pas toujours clairement indiquées. Cela montre qu’en datavisualisation, la qualité du graphique dépend d’abord de la qualité et de la transparence des données utilisées. 3:Le problème se trouve surtout dans le traitement des données : l’IA mélange les gains des différents tournois et leurs monnaies. Un humain aurait vérifié les données avant de les représenter et aurait séparé les tournois ou précisé les différentes monnaies.\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 = `Je me suis servie de l’IA à des fins de réécriture de mes paroles et pour avoir un avis sur de potentiels oublis d’informations, avec ce prompt : \" Peux-tu reformuler mes réponses simplement et me dire si j’ai oublié un message important dans le graphique \" J’ai utilisé ChatGPT, ceci m’a permis de ne pas faire de fautes. Cependant, concernant les réponses, il n’a pas donné plus de points de vue, il a surtout confirmé mes points de vue. De plus, il s’est trompé concernant certaines sources ou années de parution de certains graphiques.\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"}