31:[{"id":"bb6686ae8149fbe7b45123aef81eb6d9d3bd08d3106e741cf9a898667988952fd28c97e09e45b035f2c5a3abbec12325d2c63118a744f28dd16680b85348b8a8","href":"https://static.observableusercontent.com/files/bb6686ae8149fbe7b45123aef81eb6d9d3bd08d3106e741cf9a898667988952fd28c97e09e45b035f2c5a3abbec12325d2c63118a744f28dd16680b85348b8a8","name":"doc.png","type":"image/png","lastModified":1731662714491.116,"size":128455},{"id":"ac522440e8f0e34ead1dacec9655affedebe6ee8db0f5334c32d457e64cae81c5c1ed7932ae24f9159b69c2b19730e69b98ba862ccd533713524c2409d92a24a","href":"https://static.observableusercontent.com/files/ac522440e8f0e34ead1dacec9655affedebe6ee8db0f5334c32d457e64cae81c5c1ed7932ae24f9159b69c2b19730e69b98ba862ccd533713524c2409d92a24a","name":"world.json","type":"application/json","lastModified":1698313045288.786,"size":278391},{"id":"397254501d62d5b1a439018f1b705da854e33ad083bbc68ac68094da2bb96c273e8e4c4509d94bc2b973f75e28e11f59d8cd2d47497c809979d83d1aad851a34","href":"https://static.observableusercontent.com/files/397254501d62d5b1a439018f1b705da854e33ad083bbc68ac68094da2bb96c273e8e4c4509d94bc2b973f75e28e11f59d8cd2d47497c809979d83d1aad851a34","name":"geoviz.jpg","type":"image/jpeg","lastModified":1698312772615.482,"size":9875},{"id":"15c2d677432a08cc81fd5785919e70632ddb9d9b8a80bae4911b62716eda9fd9d827422bd4a1c3a9c70f9cf582bd0a25a2c928a09067eb11b56ab0d33fd6a68e","href":"https://static.observableusercontent.com/files/15c2d677432a08cc81fd5785919e70632ddb9d9b8a80bae4911b62716eda9fd9d827422bd4a1c3a9c70f9cf582bd0a25a2c928a09067eb11b56ab0d33fd6a68e","name":"Nosifer-Regular.ttf","type":"font/ttf","lastModified":1698313815309.153,"size":41496},{"id":"95c5a8a5870c682c944d47fe491378807136fa42d04476361e2c771af00ce31d1660fb82819be082937f2105306f02e4dac5d3171d5500fd3cc5fee7859e324f","href":"https://static.observableusercontent.com/files/95c5a8a5870c682c944d47fe491378807136fa42d04476361e2c771af00ce31d1660fb82819be082937f2105306f02e4dac5d3171d5500fd3cc5fee7859e324f","name":"paris.geojson","type":"application/geo+json","lastModified":1764064460522.268,"size":207686},{"id":"95c5a8a5870c682c944d47fe491378807136fa42d04476361e2c771af00ce31d1660fb82819be082937f2105306f02e4dac5d3171d5500fd3cc5fee7859e324f","href":"https://static.observableusercontent.com/files/95c5a8a5870c682c944d47fe491378807136fa42d04476361e2c771af00ce31d1660fb82819be082937f2105306f02e4dac5d3171d5500fd3cc5fee7859e324f","name":"paris@1.geojson","type":"application/geo+json","lastModified":1764155601170.142,"size":207686},{"id":"33aa5cc41a7432b7da8c2925150519799a8a0eae6c72f60f5336d9a9bf4adb59c12c2460ecec5ab4ce5b9b7b933c5f0d9fcbaee242919aeb86795da204f4c013","href":"https://static.observableusercontent.com/files/33aa5cc41a7432b7da8c2925150519799a8a0eae6c72f60f5336d9a9bf4adb59c12c2460ecec5ab4ce5b9b7b933c5f0d9fcbaee242919aeb86795da204f4c013","name":"AUS_ports.geojson","type":"application/geo+json","lastModified":1764159734961.001,"size":11914},{"id":"5b12cc0f96e2dea5cf070fc21577938205d71f50e90b8920fa95cf331257dac6d5b224fff67879f35c33ecd7ef17f4bda92a8ac3321dad36530c51094a286530","href":"https://static.observableusercontent.com/files/5b12cc0f96e2dea5cf070fc21577938205d71f50e90b8920fa95cf331257dac6d5b224fff67879f35c33ecd7ef17f4bda92a8ac3321dad36530c51094a286530","name":"AUS.geojson","type":"application/geo+json","lastModified":1764159735237.269,"size":623543},{"id":"3027661a34aa3a520920a70fb9b4379660404cb16506ece2af813ef0e68d364125e81570cf102f7977e5f6b07db5ee29f170de6b6cf5ff0b002dd836f3c08361","href":"https://static.observableusercontent.com/files/3027661a34aa3a520920a70fb9b4379660404cb16506ece2af813ef0e68d364125e81570cf102f7977e5f6b07db5ee29f170de6b6cf5ff0b002dd836f3c08361","name":"AUS_roads.geojson","type":"application/geo+json","lastModified":1764159735278.354,"size":933366}] 2f:{"title":"Faire des cartes avec geoviz","cells":[{"id":0,"value":"# Faire des cartes avec `geoviz`","pinned":false,"hidden":false,"mode":"md"},{"id":13,"value":"geoviz = FileAttachment(\"geoviz.jpg\").image({ width: 300 })","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":250,"value":"demo","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"

DOCUMENTATION ET EXEMPLES

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

CHARGER LA BIBLIOTHÈQUE

","pinned":false,"hidden":false,"mode":"md"},{"id":39,"value":"viz = require(\"geoviz@0.10.4\")","pinned":false,"hidden":true,"mode":"ojs"},{"id":471,"value":"

VIEW

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

UN EXEMPLE SIMPLE

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

FACILE A COMBINER AVEC D3

","pinned":false,"hidden":false,"mode":"md"},{"id":150,"value":"viewof play = Inputs.button(\"Play\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"{\n // On crée un container svg\n let svg = viz.create({ domain: world });\n // On ajoute une couche\n svg.path({ data: world, fill: \"#68a7bd\", tip: true });\n // Code d3js\n let 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);\n if (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\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":504,"value":"

LES TYPES DE COUCHES

","pinned":false,"hidden":false,"mode":"md"},{"id":508,"value":"{\n let svg = viz.create({ projection: \"Mercator\", domain: paris, margin: 30 });\n svg.path({ data: paris, fill: \"#68a7bd\" });\n svg.header({ text: \"Paris est une fête\" });\n svg.text({\n data: paris,\n text: \"l_aroff\",\n fill: \"white\",\n stroke: \"#68a7bd\",\n strokeWidth: 6\n });\n svg.footer({ text: \"Source : Nicolas Lambert\" });\n svg.scalebar();\n svg.north();\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":529,"value":"Ou avec la fonction draw","pinned":false,"hidden":false,"mode":"md"},{"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":"ojs"},{"id":50,"value":"

PERSONNALISER LA CARTE

","pinned":false,"hidden":false,"mode":"md"},{"id":72,"value":"On peut tout personnaliser : polices, dégradé, ombre, symboles, etc. ","pinned":false,"hidden":false,"mode":"md"},{"id":566,"value":"{\n let svg = viz.create({ domain: aus, width: 600 });\n\n svg.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 });\n svg.path({\n data: aus_roads,\n stroke: \"white\",\n strokeDasharray: [1, 2],\n strokeWhidth: 1.5\n });\n svg.symbol({\n symbol: \"boat\",\n data: aus_ports,\n dodge: true,\n fill: \"#19648a\",\n stroke: \"white\",\n strokeWhidth: 2.5\n });\n viz.tool.addfonts([\n {\n fontFamily: \"Nosifer\",\n url: await FileAttachment(\"Nosifer-Regular.ttf\").url()\n }\n ]);\n svg.header({\n text: \"Australie\",\n fontFamily: \"Nosifer\",\n fontSize: 55,\n fill: \"#02886F\",\n //fillOpacity: 0.5,\n rect_fillOpacity: 0\n });\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":612,"value":"

PROJECTIONS

","pinned":false,"hidden":false,"mode":"md"},{"id":616,"value":"Grace à d3js, on a accès dans la librairie à de nombreuses projections.","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":619,"value":"Voici quelques exemples","pinned":false,"hidden":false,"mode":"md"},{"id":594,"value":"viewof proj = Inputs.select(\n [\n \"Dodecahedral\",\n \"Polar\",\n \"Gingery\",\n \"Spilhaus\",\n \"Polar\",\n \"PolyhedralWaterman\",\n \"Airocean\"\n ],\n {\n label: \"Select one\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"{\n let svg = viz.create({ projection: proj, width: 600 });\n svg.plot({ type: \"outline\", fill: \"#38896F\" });\n svg.plot({ type: \"graticule\", step: 60, stroke: \"white\" });\n svg.plot({ type: \"path\", datum: world, fill: \"white\", fillOpacity: 0.3 });\n return svg.render();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"

LES CARTES SONT ZOOMABLES

","pinned":false,"hidden":false,"mode":"md"},{"id":89,"value":"map = {\n let svg = viz.create({\n projection: d3.geoMercator(),\n zoomable: true\n });\n\n svg.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\n svg.path({ data: world, fill: \"none\", stroke: \"white\" });\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":94,"value":"

VERSOR ZOOMING

","pinned":false,"hidden":false,"mode":"md"},{"id":160,"value":"Il existe deux types de pan/zoom","pinned":false,"hidden":false,"mode":"md"},{"id":111,"value":"viewof z = Inputs.radio([\"Zooming\", \"Versor Zooming\"], { value: \"Zooming\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"{\n let svg = viz.create({\n projection: d3.geoOrthographic().rotate([120, -30]),\n width: 700,\n zoomable: z == \"Zooming\" ? true : \"versor\"\n });\n // Outline\n svg.outline();\n // Graticule\n\n svg.graticule({ stroke: \"white\" });\n // On ajoute une couche\n svg.path({ datum: world, fill: \"white\", fillOpacity: 0.5 });\n\n // On retourne et affiche le svg\n return svg.render();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":135,"value":"viewof z2 = Inputs.radio([\"Zooming\", \"Versor Zooming\"], { value: \"Zooming\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"{\n let svg = viz.create({\n projection: d3.geoNaturalEarth1(),\n zoomable: z2 == \"Zooming\" ? true : \"versor\"\n });\n // Outline\n svg.outline();\n // Graticule\n svg.graticule({ stroke: \"white\" });\n // On ajoute une couche\n svg.path({ datum: world, fill: \"white\", fillOpacity: 0.5 });\n\n // On retourne et affiche le svg\n return svg.render();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":495,"value":"

LA COUCHE EARTH

","pinned":false,"hidden":false,"mode":"md"},{"id":498,"value":"{\n let svg = viz.create({\n projection: d3.geoNaturalEarth1(),\n zoomable: z2 == \"Zooming\" ? true : \"versor\"\n });\n // Outline\n await svg.earth();\n svg.graticule({ stroke: \"white\", strokeWidth: 1, step: 40 });\n // On retourne et affiche le svg\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":291,"value":"

CARTOGRAPHIE THEMATIQUE

","pinned":false,"hidden":false,"mode":"md"},{"id":287,"value":"Pour la cartographie thématique, on utilise la fonction **`viz.plot()`** qui permet de construire des couches avec leur légende associée. Voir les exemples ci-dessous.","pinned":false,"hidden":false,"mode":"md"},{"id":285,"value":"

CERCLES PROPORTIONNELS

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

CARTE CHOROPLETH

","pinned":false,"hidden":false,"mode":"md"},{"id":308,"value":"viz.plot({\n type: \"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":"ojs"},{"id":314,"value":"

TYPOLOGIE

","pinned":false,"hidden":false,"mode":"md"},{"id":316,"value":"viz.plot({\n type: \"typo\",\n data: world,\n var: \"region\",\n leg_pos: [10, 100]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":319,"value":"

COMBINAISONS

","pinned":false,"hidden":false,"mode":"md"},{"id":323,"value":"viz.plot({\n type: \"propchoro\",\n data: world,\n var1: \"pop\",\n var2: \"gdppc\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":325,"value":"

TOUT EST COMPLÈTEMENT PARAMÉTRABLE

","pinned":false,"hidden":false,"mode":"md"},{"id":330,"value":"{\n // 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 return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":622,"value":"

LES GRILLES

","pinned":false,"hidden":false,"mode":"md"},{"id":627,"value":"viewof type = Inputs.select(\n [\"square\", \"diamond\", \"hexbin\", \"triangle\", \"arbitrary\"],\n { label: \"Type\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":629,"value":"viewof step = Inputs.range([20, 100], { label: \"step\", step: 1, value: 30 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":624,"value":"{\n 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 return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":634,"value":"{\n let svg = viz.create({\n projection: \"Orthographic\",\n\n zoomable: \"versor\"\n });\n\n let grid = svg.grid({\n type: \"h3\",\n level: 2,\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 return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":77,"value":"

FONCTIONS PLUS BAS NIVEAU

","pinned":false,"hidden":false,"mode":"md"},{"id":357,"value":"Rien n'est fermé et on a également accès à des fonctions plus bas niveau.","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":391,"value":"viz.legend.circles_nested(radius)","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":238,"value":"

EXEMPLES DE CARTES

","pinned":false,"hidden":false,"mode":"md"},{"id":278,"value":"gallery","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":248,"value":"import { demo } from \"@neocartocnrs/geoviz\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":242,"value":"import { documentation, gallery } from \"@neocartocnrs/geoviz-appendix\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"world = FileAttachment(\"world.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":562,"value":"aus = FileAttachment(\"AUS.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":563,"value":"aus_ports = FileAttachment(\"AUS_ports.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":564,"value":"aus_roads = FileAttachment(\"AUS_roads.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}