27:null 28:["$","title",null,{"children":"Faire des cartes avec geoviz | Riate | Observable"}] 2d:[{"id":"bb6686ae8149fbe7b45123aef81eb6d9d3bd08d3106e741cf9a898667988952fd28c97e09e45b035f2c5a3abbec12325d2c63118a744f28dd16680b85348b8a8","href":"https://static.observableusercontent.com/files/bb6686ae8149fbe7b45123aef81eb6d9d3bd08d3106e741cf9a898667988952fd28c97e09e45b035f2c5a3abbec12325d2c63118a744f28dd16680b85348b8a8","name":"doc.png","type":"image/png","lastModified":1776422044093.637,"size":128455},{"id":"ac522440e8f0e34ead1dacec9655affedebe6ee8db0f5334c32d457e64cae81c5c1ed7932ae24f9159b69c2b19730e69b98ba862ccd533713524c2409d92a24a","href":"https://static.observableusercontent.com/files/ac522440e8f0e34ead1dacec9655affedebe6ee8db0f5334c32d457e64cae81c5c1ed7932ae24f9159b69c2b19730e69b98ba862ccd533713524c2409d92a24a","name":"world.json","type":"application/json","lastModified":1776422044093.637,"size":278391},{"id":"397254501d62d5b1a439018f1b705da854e33ad083bbc68ac68094da2bb96c273e8e4c4509d94bc2b973f75e28e11f59d8cd2d47497c809979d83d1aad851a34","href":"https://static.observableusercontent.com/files/397254501d62d5b1a439018f1b705da854e33ad083bbc68ac68094da2bb96c273e8e4c4509d94bc2b973f75e28e11f59d8cd2d47497c809979d83d1aad851a34","name":"geoviz.jpg","type":"image/jpeg","lastModified":1776422044093.637,"size":9875},{"id":"15c2d677432a08cc81fd5785919e70632ddb9d9b8a80bae4911b62716eda9fd9d827422bd4a1c3a9c70f9cf582bd0a25a2c928a09067eb11b56ab0d33fd6a68e","href":"https://static.observableusercontent.com/files/15c2d677432a08cc81fd5785919e70632ddb9d9b8a80bae4911b62716eda9fd9d827422bd4a1c3a9c70f9cf582bd0a25a2c928a09067eb11b56ab0d33fd6a68e","name":"Nosifer-Regular.ttf","type":"font/ttf","lastModified":1776422044093.637,"size":41496},{"id":"95c5a8a5870c682c944d47fe491378807136fa42d04476361e2c771af00ce31d1660fb82819be082937f2105306f02e4dac5d3171d5500fd3cc5fee7859e324f","href":"https://static.observableusercontent.com/files/95c5a8a5870c682c944d47fe491378807136fa42d04476361e2c771af00ce31d1660fb82819be082937f2105306f02e4dac5d3171d5500fd3cc5fee7859e324f","name":"paris.geojson","type":"application/geo+json","lastModified":1776422044093.637,"size":207686},{"id":"33aa5cc41a7432b7da8c2925150519799a8a0eae6c72f60f5336d9a9bf4adb59c12c2460ecec5ab4ce5b9b7b933c5f0d9fcbaee242919aeb86795da204f4c013","href":"https://static.observableusercontent.com/files/33aa5cc41a7432b7da8c2925150519799a8a0eae6c72f60f5336d9a9bf4adb59c12c2460ecec5ab4ce5b9b7b933c5f0d9fcbaee242919aeb86795da204f4c013","name":"AUS_ports.geojson","type":"application/geo+json","lastModified":1776422044093.637,"size":11914},{"id":"5b12cc0f96e2dea5cf070fc21577938205d71f50e90b8920fa95cf331257dac6d5b224fff67879f35c33ecd7ef17f4bda92a8ac3321dad36530c51094a286530","href":"https://static.observableusercontent.com/files/5b12cc0f96e2dea5cf070fc21577938205d71f50e90b8920fa95cf331257dac6d5b224fff67879f35c33ecd7ef17f4bda92a8ac3321dad36530c51094a286530","name":"AUS.geojson","type":"application/geo+json","lastModified":1776422044093.637,"size":623543},{"id":"3027661a34aa3a520920a70fb9b4379660404cb16506ece2af813ef0e68d364125e81570cf102f7977e5f6b07db5ee29f170de6b6cf5ff0b002dd836f3c08361","href":"https://static.observableusercontent.com/files/3027661a34aa3a520920a70fb9b4379660404cb16506ece2af813ef0e68d364125e81570cf102f7977e5f6b07db5ee29f170de6b6cf5ff0b002dd836f3c08361","name":"AUS_roads.geojson","type":"application/geo+json","lastModified":1776422044093.637,"size":933366}] 2b:{"id":"cd4ee7f536222e67","slug":null,"title":"Faire des cartes avec geoviz","thumbnail":"e1feb1f2bb59ba37e9c37c46d6151655a577adb5ab8866c6f5627240fecdaa1d","access_level":"public","create_time":"$D2026-04-17T10:34:04.093Z","update_time":"$D2026-09-17T11:08:35.269Z","view_time":null,"first_public_time":"$D2026-05-19T07:46:33.606Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"481f46f0ac5d20d8","login":"riate","name":"Riate","avatar_url":"https://avatars-next.observableusercontent.com/49c549201ca74c0c64940ab802ea6944ddd0469dd2143bc60e3d5f495b10e691","tier":"starter_2024"},"version":862,"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"},{"type":"team","id":"481f46f0ac5d20d8","login":"riate","name":"Riate","avatar_url":"https://avatars-next.observableusercontent.com/49c549201ca74c0c64940ab802ea6944ddd0469dd2143bc60e3d5f495b10e691","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"636c1a36b50a6050","slug":"ecole-doctorale","title":"Ecole doctorale","owner":{"id":"481f46f0ac5d20d8","login":"riate","name":"Riate"}},"type":"notebook","body":{"title":"Faire des cartes avec geoviz","cells":[{"id":0,"value":"# Faire des cartes avec `geoviz`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"geoviz = FileAttachment(\"geoviz.jpg\").image({ width: 300 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"**`geoviz`** est une bibliothèque JavaScript en développement basée sur d3 pour concevoir des cartes thématiques. La bibliothèque fournit un ensemble de fonctions compatibles avec [d3](https://github.com/d3/d3) que vous pouvez mélanger avec la syntaxe d3 habituelle. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":250,"value":"demo","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"

DOCUMENTATION ET EXEMPLES

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":433,"value":"Des **exemples live** sont disponibles ici : https://observablehq.com/collection/@neocartocnrs/geoviz","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":425,"value":"documentation","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":441,"value":"La **documentation complète** est disponible ici : https://riatelab.github.io/geoviz/","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":437,"value":"doc = FileAttachment(\"doc.png\").image({ width: 700 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"

CHARGER LA BIBLIOTHÈQUE

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":39,"value":"const viz = import(\"npm:geoviz@1\")","pinned":true,"hidden":true,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":647,"value":"Ou la version lite (plus légère)\n\n```js\nlet viz = import(\"npm:geoviz/lite\")\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":471,"value":"

VIEW

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":473,"value":"Bibliothèque très pratique pour visualiser un fond de carte","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":477,"value":"const paris = FileAttachment(\"paris.geojson\").json()","pinned":true,"hidden":true,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"viz.view(paris)","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"

UN EXEMPLE SIMPLE

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":32,"value":"la syntaxe minimmale est la suivante","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":232,"value":"viz.path({ data: world })","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"Mais le plus souvent, on utilisera un container.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":36,"value":"// On crée un container svg\nlet svg = viz.create({\n domain: world\n});\n// On ajoute une couche\nsvg.path({data: world, fill: \"#02886F\", tip: true});\n// On retourne et affiche le svg\ndisplay(svg.render());","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":482,"value":"Ou alors","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":484,"value":"viz.draw({layers: [{data: world, fill: \"#68a7bd\", tip: true}]})","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"

FACILE A COMBINER AVEC D3

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":150,"value":"const play = view(Inputs.button(\"Play\"))","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"// On crée un container svg\nlet svg = viz.create({domain: world});\n// On ajoute une couche\nsvg.path({data: world, fill: \"#68a7bd\", tip: true});\n// Code d3js\nlet moncercle = svg\n .append(\"circle\")\n .attr(\"cx\", 50)\n .attr(\"cy\", 200)\n .attr(\"r\", 25)\n .attr(\"fill\", \"#e04a28\")\n .attr(\"fill-opacity\", 0.7);\nif (play) {\n moncercle\n .transition()\n .duration(2000)\n .attr(\"cx\", 900)\n .attr(\"r\", 100)\n .transition()\n .delay(2000)\n .duration(3000)\n .attr(\"cx\", 50)\n .attr(\"r\", 10)\n .attr(\"fill\", \"blue\")\n .transition()\n .attr(\"r\", 25)\n .attr(\"fill\", \"#e04a28\");\n}\n\n// On retourne et affiche le svg\ndisplay(svg.render());","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":504,"value":"

LES TYPES DE COUCHES

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":508,"value":"let svg = viz.create({projection: \"Mercator\", domain: paris, margin: 30});\nsvg.path({data: paris, fill: \"#68a7bd\"});\nsvg.header({text: \"Paris est une fête\"});\nsvg.text({\n data: paris,\n text: \"l_aroff\",\n fill: \"white\",\n stroke: \"#68a7bd\",\n strokeWidth: 6\n});\nsvg.footer({text: \"Source : Nicolas Lambert\"});\nsvg.scalebar();\nsvg.north();\ndisplay(svg.render());","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":529,"value":"Ou avec la fonction draw","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":527,"value":"viz.draw({\n params: { projection: \"mercator\", margin: 30 },\n layers: [\n { data: paris, fill: \"#68a7bd\" },\n {\n type: \"text\",\n data: paris,\n text: \"l_aroff\",\n fill: \"white\",\n stroke: \"#68a7bd\",\n strokeWidth: 3\n },\n { type: \"header\", text: \"Paris est une fête\" },\n { type: \"footer\", text: \"Source : Nicolas Lambert\" },\n { type: \"scalebar\" },\n { type: \"north\" }\n ]\n})","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"

PERSONNALISER LA CARTE

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":72,"value":"On peut tout personnaliser : polices, dégradé, ombre, symboles, etc. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":566,"value":"let svg = viz.create({domain: aus, width: 600});\n\nsvg.path({\n datum: aus,\n fill: svg.effect.radialGradient({\n color1: \"#7db054\",\n color2: \"#38896f\",\n offset1: 50,\n offset2: 100,\n fx: 50,\n fy: 50\n }),\n filter: svg.effect.shadow({\n stdDeviation: 1.5,\n fill: \"black\",\n fillOpacity: 0.2,\n dx: 5,\n dy: 5\n })\n});\nsvg.path({\n data: aus_roads,\n stroke: \"white\",\n strokeDasharray: [1, 2],\n strokeWhidth: 1.5\n});\nsvg.symbol({\n symbol: \"boat\",\n data: aus_ports,\n dodge: true,\n fill: \"#19648a\",\n stroke: \"white\",\n strokeWhidth: 2.5\n});\nviz.tool.addfonts([\n {\n fontFamily: \"Nosifer\",\n url: await FileAttachment(\"Nosifer-Regular.ttf\").url()\n }\n]);\nsvg.header({\n text: \"Australie\",\n fontFamily: \"Nosifer\",\n fontSize: 55,\n fill: \"#02886F\",\n //fillOpacity: 0.5,\n rect_fillOpacity: 0\n});\ndisplay(svg.render());","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":612,"value":"

PROJECTIONS

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":616,"value":"Grace à d3js, on a accès dans la librairie à de nombreuses projections.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":614,"value":"- d3.geo https://d3js.org/d3-geo/projection\n- d3-geo-projection https://github.com/d3/d3-geo-projection\n- d3-geo-polygon https://github.com/d3/d3-geo-polygon","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":619,"value":"Voici quelques exemples","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":594,"value":"viewof proj = Inputs.select(\n [\n \"Dodecahedral\",\n \"Polar\",\n \"Gingery\",\n \"Spilhaus\",\n \"Polar\",\n \"PolyhedralWaterman\",\n \"Airocean\",\n \"Bertin1953\"\n ],\n {\n label: \"Select one\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"let svg = viz.create({projection: proj, width: 600});\nsvg.plot({type: \"outline\", fill: \"#38896F\"});\nsvg.plot({type: \"graticule\", step: 60, stroke: \"white\"});\nsvg.plot({type: \"path\", datum: world, fill: \"white\", fillOpacity: 0.3});\ndisplay(svg.render());","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"

LES CARTES SONT ZOOMABLES

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":89,"value":"let svg = viz.create({\n projection: d3.geoMercator(),\n zoomable: true\n});\n\nsvg.tile({\n zoomDelta: 1,\n increasetilesize: 1,\n url: (x, y, z) =>\n `https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/${z}/${y}/${x}.png`\n});\n\nsvg.path({data: world, fill: \"none\", stroke: \"white\"});\ndisplay(svg.render());","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"

VERSOR ZOOMING

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":160,"value":"Il existe deux types de pan/zoom","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":111,"value":"let z = view(Inputs.radio([\"Zooming\", \"Versor Zooming\"], { value: \"Zooming\" }))","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"let svg = viz.create({\n projection: d3.geoOrthographic().rotate([120, -30]),\n width: 700,\n zoomable: z == \"Zooming\" ? true : \"versor\"\n});\n// Outline\nsvg.outline();\n// Graticule\n\nsvg.graticule({stroke: \"white\"});\n// On ajoute une couche\nsvg.path({datum: world, fill: \"white\", fillOpacity: 0.5});\n\n// On retourne et affiche le svg\ndisplay(svg.render());","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"Ca va fonctionner de la même façon sur les autres types de projection 🤯\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":135,"value":"let z2 = view(Inputs.radio([\"Zooming\", \"Versor Zooming\"], { value: \"Zooming\" }))","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"let svg = viz.create({\n projection: d3.geoNaturalEarth1(),\n zoomable: z2 == \"Zooming\" ? true : \"versor\"\n});\n// Outline\nsvg.outline();\n// Graticule\nsvg.graticule({stroke: \"white\"});\n// On ajoute une couche\nsvg.path({datum: world, fill: \"white\", fillOpacity: 0.5});\n\n// On retourne et affiche le svg\ndisplay(svg.render());","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":495,"value":"

LA COUCHE EARTH

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":498,"value":"let svg = viz.create({\n projection: d3.geoNaturalEarth1(),\n zoomable: z2 == \"Zooming\" ? true : \"versor\"\n});\n// Outline\nawait svg.earth();\nsvg.graticule({stroke: \"white\", strokeWidth: 1, step: 40});\n// On retourne et affiche le svg\ndisplay(svg.render());","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"

CARTOGRAPHIE THEMATIQUE

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":287,"value":"Pour la cartographie thématique, on utilise les fonctions dédiées qui permettent de construire des couches avec leur légende associée. Voir les exemples ci-dessous.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":285,"value":"

CERCLES PROPORTIONNELS

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":169,"value":"viewof k = Inputs.range([0, 100], { label: \"k\", step: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"viz.prop({\n data: world,\n var: \"pop\",\n k,\n fill: \"red\",\n fillOpacity: 0.6\n})","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"

CARTE CHOROPLETH

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":308,"value":"viz.choro({\n data: world,\n var: \"gdppc\",\n leg_pos: [10, 100],\n //leg_type: \"horizontal\",\n tip: \"$NAMEen\"\n})","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":314,"value":"

TYPOLOGIE

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":316,"value":"viz.typo({\n data: world,\n var: \"region\",\n leg_pos: [10, 100]\n})","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"

COMBINAISONS

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":323,"value":"viz.propchoro({\n data: world,\n var1: \"pop\",\n var2: \"gdppc\"\n})","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":325,"value":"

TOUT EST COMPLÈTEMENT PARAMÉTRABLE

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":330,"value":" // On crée un container svg\n let svg = viz.create({\n projection: d3.geoNaturalEarth1(),\n zoomable: true\n });\n // Outline\n svg.outline();\n // Graticule\n svg.graticule({ stroke: \"white\", step: 40 });\n // Pays\n svg.path({ datum: world, fill: \"white\", fillOpacity: 0.5 });\n // On ajoute une couche\n svg.plot({\n type: \"propchoro\",\n symbol: \"square\",\n data: world,\n var1: \"pop\",\n var2: \"gdppc\",\n colors: \"YlOrRd\",\n leg1_pos: [20, 320],\n leg1_title: \"Population\",\n leg1_subtitle: \"(en millions)\",\n leg1_values_factor: 1 / 1000000,\n leg1_values_round: 0,\n leg2_title: \"PIB par habitant\",\n leg2_values_round: 0,\n leg2_type: \"horizontal\",\n missing: false\n });\n // On retourne et affiche le svg\n display(svg.render())","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":622,"value":"

LES GRILLES

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":627,"value":"let type = view(Inputs.select(\n [\"square\", \"diamond\", \"hexbin\", \"triangle\", \"arbitrary\"],\n { label: \"Type\" }\n))","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":629,"value":"let step = view(Inputs.range([20, 100], { label: \"step\", step: 1, value: 100 }))","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":624,"value":"let svg = viz.create({\n projection: \"EqualEarth\",\n domain: world\n });\n\n let grid = svg.grid({\n type: type,\n step: step,\n data: world,\n var: [\"gdp\", \"pop\"],\n ratio: true,\n ratio_factor: 1\n });\n\n svg.path({ data: world, fill: \"#CCC\" });\n svg.plot({\n type: \"choro\",\n coords: \"svg\", // Because the grid is in SVG coordinates\n data: grid,\n var: \"ratio\",\n fill: \"#38896F\",\n stroke: \"#38896F\",\n fillOpacity: 0.9,\n strokeWidth: 0.2,\n leg_title: \"GDP per capita\",\n tip: true\n });\n\n display(svg.render())","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":668,"value":"","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":634,"value":"let svg = viz.create({\n projection: \"Orthographic\",\n\n zoomable: \"versor\"\n });\n\n let grid = svg.grid({\n type: \"h3\",\n level: 0,\n data: world,\n var: [\"gdp\", \"pop\"],\n ratio: true,\n ratio_factor: 1\n });\n svg.outline();\n svg.graticule({ stroke: \"white\" });\n svg.path({ data: world, fill: \"#CCC\" });\n svg.plot({\n type: \"choro\",\n data: grid,\n var: \"ratio\",\n fill: \"#38896F\",\n stroke: \"#38896F\",\n fillOpacity: 0.9,\n strokeWidth: 0.2,\n leg_title: \"GDP per capita\",\n tip: true,\n colors: \"SunsetDark\",\n filter: svg.effect.shadow({\n stdDeviation: 2,\n fill: \"black\",\n fillOpacity: 0.7,\n dx: 5,\n dy: 5\n })\n });\n\n display(svg.render())\n","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":671,"value":"","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"

FONCTIONS PLUS BAS NIVEAU

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":357,"value":"Rien n'est fermé et on a également accès à des fonctions plus bas niveau.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":389,"value":"radius = viz.tool.radius(\n world.features.map((d) => d.properties.pop),\n { k: 50 }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":391,"value":"viz.legend.circles_nested(radius)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":"viz.legend.circles_nested({\n ...radius,\n nb: 6,\n gap: 25,\n title: \"Population in inh.\",\n circle_fill: \"#38896F\",\n circle_fillOpacity: 0.5,\n circle_stroke: \"white\",\n line_stroke: \"#38896F\",\n line_width: 50,\n line_length: 80,\n values_dy: -5,\n values_textAnchor: \"end\",\n values_fill: \"#38896F\",\n note: \"Made with Geoviz\",\n note_dy: -15\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"

EXEMPLES DE CARTES

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":278,"value":"gallery","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":248,"value":"import { map as demo } from \"observable:@neocarto/geoviz\"","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"import { documentation, gallery } from \"observable:@neocartocnrs/geoviz-appendix\"","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"let world = FileAttachment(\"world.json\").json()","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":562,"value":"let aus = FileAttachment(\"AUS.geojson\").json()","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":563,"value":"let aus_ports = FileAttachment(\"AUS_ports.geojson\").json()","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":564,"value":"let aus_roads = FileAttachment(\"AUS_roads.geojson\").json()","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2d","stdlib":"2","titling":"auto"}} 2c:"$2b:body"