29:null 2a:["$","title",null,{"children":"Faire des graphiques avec plot (mais pas que) | Nicolas Lambert | Observable"}] 2f:[{"id":"b96fbe14f21a2c1179fbb0ce7a91ec54516fae6f8cb6451e9f6c8640ec98bcce6415d0cfa274b70903a6b8712c25ab02b9dd9c63b6817c287a7e477273cfaa05","href":"https://static.observableusercontent.com/files/b96fbe14f21a2c1179fbb0ce7a91ec54516fae6f8cb6451e9f6c8640ec98bcce6415d0cfa274b70903a6b8712c25ab02b9dd9c63b6817c287a7e477273cfaa05","name":"maddison.csv","type":"text/csv","lastModified":1696246422926.863,"size":562020},{"id":"c67952fd5ccce42edcde2308ae868da716a8b9d378a5e1b97bb662f377b26fbc17add489d46c7c98e42766b369b93b6d01a713ef7b23106b747e65c5526b7dca","href":"https://static.observableusercontent.com/files/c67952fd5ccce42edcde2308ae868da716a8b9d378a5e1b97bb662f377b26fbc17add489d46c7c98e42766b369b93b6d01a713ef7b23106b747e65c5526b7dca","name":"world.json","type":"application/json","lastModified":1699630547159.722,"size":276863},{"id":"a93890ef1c2553b6a9f5b817a5ceb7c664a55f21d22ef5d0b4742a36535a0462305980c9c27eb669b2cd960473ffd49aba681458e5eedc23b02876bf30bbbcd2","href":"https://static.observableusercontent.com/files/a93890ef1c2553b6a9f5b817a5ceb7c664a55f21d22ef5d0b4742a36535a0462305980c9c27eb669b2cd960473ffd49aba681458e5eedc23b02876bf30bbbcd2","name":"pl.jpg","type":"image/jpeg","lastModified":1696246144895.64,"size":17512},{"id":"f5cb85cbb9bb7e71e0bfacaca03accea1157ab21920fd452f7df1b41d1d38f6477ada37e93a5dd0e4aed47f71e2aacb446b62a488d0b782cf4ae3627195bb9b2","href":"https://static.observableusercontent.com/files/f5cb85cbb9bb7e71e0bfacaca03accea1157ab21920fd452f7df1b41d1d38f6477ada37e93a5dd0e4aed47f71e2aacb446b62a488d0b782cf4ae3627195bb9b2","name":"data.csv","type":"text/csv","lastModified":1696246295036.359,"size":11101},{"id":"e4d6044ba2c18741e70375be1a308cab93cfdb093ceb301215f901f6c01d9a1d9ee28df5cf7c5d0da103bf95c92c0148f7f11e95f0071e3ba83bdb7b7d1b76d2","href":"https://static.observableusercontent.com/files/e4d6044ba2c18741e70375be1a308cab93cfdb093ceb301215f901f6c01d9a1d9ee28df5cf7c5d0da103bf95c92c0148f7f11e95f0071e3ba83bdb7b7d1b76d2","name":"sipri.csv","type":"text/csv","lastModified":1698055167002.585,"size":161}] 2d:{"id":"c1862c2c89cc9fa4","slug":"faire-des-graphiques-avec-plot-mais-pas-que","title":"Faire des graphiques avec plot (mais pas que)","thumbnail":"c026700cb62dc923568a61f4aff1d0777f0b0edcfaad31640f357edb5d8e34a6","access_level":"public","create_time":"$D2023-09-28T15:45:14.825Z","update_time":"$D2026-09-21T09:37:03.594Z","view_time":null,"first_public_time":"$D2023-11-10T10:31:59.109Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"6457aadd156df119","login":"neocarto","name":"Nicolas Lambert","avatar_url":"https://avatars-next.observableusercontent.com/c01b6664b447a3bb88f88dbfa170e3ef1d61f3a5b13c2fc613c8da5ef8bccb41","tier":"starter_2024"},"version":317,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"01f8081399df8778","login":"neocarto","name":"Nicolas Lambert","avatar_url":"https://avatars-next.observableusercontent.com/c01b6664b447a3bb88f88dbfa170e3ef1d61f3a5b13c2fc613c8da5ef8bccb41","tier":null}],"members":[{"type":"individual","id":"01f8081399df8778","login":"neocarto","name":"Nicolas Lambert","avatar_url":"https://avatars-next.observableusercontent.com/c01b6664b447a3bb88f88dbfa170e3ef1d61f3a5b13c2fc613c8da5ef8bccb41","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"021e4058de70d966","slug":"observable-cest-quoi","title":"Observable pour les geographes","owner":{"id":"6457aadd156df119","login":"neocarto","name":"Nicolas Lambert"}},"type":"notebook","body":{"title":"Faire des graphiques avec plot (mais pas que)","cells":[{"id":0,"value":"# Faire des graphiques avec `plot` (mais pas que)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"pl = FileAttachment(\"pl.jpg\").image({ width: 300 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"Observable Plot est une bibliothèque JavaScript gratuite et open-source qui permet de visualiser rapidement des données tabulaires. Elle dispose d'une API concise et (c'est l'objectif) mémorable pour favoriser la fluidité. C'est la bibliothèque portée par Observable. Elle est développée par Mike Bostock et Philippe Rivière. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":199,"value":"C'est la bibliothèque de référence pour faire des graphiques en JavaScript.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":22,"value":"- **Documentation** : https://observablehq.com/plot\n- **Code source** : https://github.com/observablehq/plot\n- **Exemples** : https://observablehq.com/@observablehq/plot-gallery","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":25,"value":"Pas besoin de charger la bibliothèque, elle est disponible par défait dans Observable.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":27,"value":"Voici un tableau de données","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":29,"value":"const data = FileAttachment(\"data.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"Inputs.table(data)","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"

MARKS

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":36,"value":"Il n'y a pas de graphique type dans Plot. Il y a des marks (des formes géométriques telles que des barres, des points et des lignes)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":38,"value":"Plot.plot({\n marks: [Plot.tickX(data, { x: \"gdppc\" })]\n})","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"Plot.plot({\n marks: [Plot.boxX(data, { x: \"gdppc\" })]\n})","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"Plot.plot({\n marks: [Plot.dotX(data, { x: \"gdppc\", fill: \"black\" })]\n})","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"

TRANSFORMATIONS

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":46,"value":"Plot.plot({\n marks: [Plot.dotX(data, Plot.dodgeY({ x: \"gdppc\", fill: \"black\" }))],\n height: 250\n})","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"

FACETTES

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":50,"value":"Plot.plot({\n grid: true,\n marginLeft: 50,\n facet: {\n data: data,\n y: \"region\"\n },\n marks: [Plot.boxX(data, { x: \"gdppc\" })]\n})","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"

REPRENONS LE GRAPHIQUE AVEC DES DONNÉES DU SIPRI

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":128,"value":"const sipri = FileAttachment(\"sipri.csv\").csv()","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"Plot.plot({\n width: 928,\n height: 500,\n marginTop: 30,\n marginRight: 0,\n marginBottom: 30,\n marginLeft: 70,\n y: {\n label: \"↑ TIV of arms exports (2020-2022)\"\n },\n x: {\n label: null\n },\n marks: [\n Plot.barY(sipri, { x: \"Supplier\", y: \"TIV20202024\", fill: \"#55a37c\" }),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"

\"GAPMINDER\" EN QUELQUES LIGNES

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":61,"value":"const maddison = FileAttachment(\"maddison.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"Inputs.table(maddison)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"import { Scrubber } from \"observable:@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"let year = view(Scrubber(Array.from(new Set(maddison.map((d) => d.year))), {\n autoplay: false\n}))","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"let logx = view(Inputs.toggle({ label: \"Log (x)\", value: false }))","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"let logy = view(Inputs.toggle({ label: \"Log (y)\", value: false }))","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"# ${year}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":77,"value":"Plot.plot({\n color: {\n scheme: \"turbo\",\n type: \"symlog\"\n },\n grid: true,\n x: {\n type: logx ? \"log\" : undefined\n },\n y: {\n type: logy ? \"log\" : undefined\n },\n\n marks: [\n Plot.circle(maddison, {\n r: \"pop\",\n fill: \"gdppc\",\n stroke: \"white\",\n strokeWidth: 0.3,\n x: \"gdp\",\n y: \"pop\",\n filter: (d) => d.year == year\n }),\n\n Plot.text(maddison, {\n r: \"pop\",\n text: \"countrycode\",\n fill: \"white\",\n x: \"gdp\",\n y: \"pop\",\n filter: (d) => d.year == year\n })\n ]\n})","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"

FAIRE DES CARTES AVEC PLOT

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":169,"value":"const world = FileAttachment(\"world.json\").json()","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"Grace à `Plot.geo()`, la bibliothèque `Plot` peut gerer les objets spatiaux.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":161,"value":"Plot.plot({\n projection: { type: d3.geoEqualEarth, domain: { type: \"Sphere\" } },\n marks: [\n Plot.geo({ type: \"Sphere\" }, { fill: \"#add8f7\", stroke: \"none\" }),\n Plot.geo(d3.geoGraticule()(), { stroke: \"white\", strokeWidth: 0.4 }),\n Plot.geo(world, { fill: \"white\", fillOpacity: 0.5 })\n ]\n})","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":193,"value":"Une typologie","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":195,"value":"Plot.plot({\n color: {\n scheme: \"category10\",\n legend: true\n },\n projection: { type: d3.geoEqualEarth, domain: { type: \"Sphere\" } },\n marks: [\n Plot.geo({ type: \"Sphere\" }, { fill: \"#add8f7\", stroke: \"none\" }),\n Plot.geo(d3.geoGraticule()(), { stroke: \"white\", strokeWidth: 0.4 }),\n Plot.geo(world, {\n fill: (d) => d.properties.region\n })\n ]\n})","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"Une carte choroplèthe","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":204,"value":"let breaks = view(Inputs.range([3, 10], {\n label: \"Number of breaks\",\n value: 5,\n step: 1\n}))","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"Plot.plot({\n color: {\n type: \"quantile\",\n n: breaks,\n scheme: \"Greens\"\n },\n projection: { type: d3.geoEqualEarth, domain: { type: \"Sphere\" } },\n marks: [\n Plot.geo({ type: \"Sphere\" }, { fill: \"#add8f7\", stroke: \"none\" }),\n Plot.geo(d3.geoGraticule()(), { stroke: \"white\", strokeWidth: 0.4 }),\n Plot.geo(world, {\n fill: (d) => d.properties.gdppc\n })\n ]\n})","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"

VOIR AUSSI

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":225,"value":"md`${previews([\n {\n path: \"@neocartocnrs/display-and-project-a-geotiff-with-plot\",\n thumbnail:\n \"41fc4974a3f614e1be0b363889ee928743ad81ba53e188333d484ff631b91535\"\n },\n {\n path: \"@neocartocnrs/some-quick-geo-experiments-with-plot\",\n thumbnail:\n \"738b0165d3a3f66f8dbb2e1198279e7244920d82600619356c0368752eb0bd14\"\n }\n])} \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"- https://observablehq.com/@sd-progwebdataviz/bibliotheque-plot?collection=@sd-progwebdataviz/guide-et-exemples\n- https://observablehq.com/@sd-progwebdataviz/bibliotheque-plot-2-interactions?collection=@sd-progwebdataviz/guide-et-exemples","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":241,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"## *Appendix*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":227,"value":"import { previews } from \"@d3/gallery\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W2f","stdlib":"2","titling":"auto"}} 2e:"$2d:body"