2b:null 2c:["$","title",null,{"children":"Projections cartographiques | ToulouseDataviz | Observable"}] 31:T7f7,carte = { const height = 500; const svg = d3 .select(DOM.svg(width, height)) .style("width", "100%") .style("height", "auto"); const background = svg .append("rect") .attr("width", width) .attr("height", height) .attr("fill", "none"); var graticule = d3.geoGraticule10(); const path = d3.geoPath().projection(projection); const zoomLevelDisplay = svg .append("text") .attr("x", 20) .attr("y", 30) .attr("font-size", 16) .attr("fill", "black"); // Zoom behavior const zoom = d3 .zoom() .scaleExtent([1, 80]) // Set zoom range .on("zoom", zoomed); // Container for map elements const mapContainer = svg.append("g"); // Apply initial zoom transformation (scale 1) const initialTransform = d3.zoomIdentity.scale(1).translate(0, -height / 4); mapContainer.attr("transform", initialTransform); svg.call(zoom.transform, initialTransform); // Apply initial zoom // Apply the zoom behavior to the SVG svg.call(zoom); // ------------------------ Tracé monde ----------------------- if (select_territoire == "Haute") { mapContainer .selectAll("path") .data(world_HD.features) .enter() .append("path") .attr("d", path) .style("fill", "lightblue"); } // ------------------------ Tracé des rues de Toulouse ---------------- if (select_territoire == "Basse") { mapContainer .selectAll("path") .data(world.features) .enter() .append("path") .attr("d", path) .attr("fill", "lightblue") .style("stroke", "#C5C5C5") .style("stroke-width", 0.1); } if (select_graticule == "Oui") { mapContainer .append("path") .datum(graticule) .attr("class", "graticule") .attr("d", path) .style("fill", "none") .style("stroke", "#35cbf9") .style("stroke-width", ".2px"); } // Zoom event handler function function zoomed(event) { mapContainer.attr("transform", event.transform); } return svg.node(); }32:T1892,projections = [ { name: "Airocean", value: d3.geoAirocean }, { name: "Airy’s minimum error", value: d3.geoAiry }, { name: "Aitoff", value: d3.geoAitoff }, { name: "American polyconic", value: d3.geoPolyconic }, { name: "armadillo", value: d3.geoArmadillo }, { name: "August", value: d3.geoAugust }, { name: "azimuthal equal-area", value: d3.geoAzimuthalEqualArea }, { name: "azimuthal equidistant", value: d3.geoAzimuthalEquidistant }, { name: "Baker dinomic", value: d3.geoBaker }, { name: "Berghaus’ star", value: d3.geoBerghaus }, { name: "Bertin’s 1953", value: d3.geoBertin1953 }, { name: "Boggs’ eumorphic", value: d3.geoBoggs }, { name: "Boggs’ eumorphic (interrupted)", value: d3.geoInterruptedBoggs }, { name: "Bonne", value: d3.geoBonne }, { name: "Bottomley", value: d3.geoBottomley }, { name: "Bromley", value: d3.geoBromley }, { name: "Butterfly (gnomonic)", value: d3.geoPolyhedralButterfly }, { name: "Butterfly (Collignon)", value: d3.geoPolyhedralCollignon }, { name: "Butterfly (Waterman)", value: d3.geoPolyhedralWaterman }, { name: "Cahill-Keyes", value: d3.geoCahillKeyes }, { name: "Collignon", value: d3.geoCollignon }, // {name: "conic conformal", value: d3.geoConicConformal}, // Not suitable for world maps. { name: "conic equal-area", value: d3.geoConicEqualArea }, { name: "conic equidistant", value: d3.geoConicEquidistant }, { name: "Craig retroazimuthal", value: d3.geoCraig }, { name: "Craster parabolic", value: d3.geoCraster }, { name: "Cox", value: d3.geoCox }, { name: "cubic", value: d3.geoCubic }, { name: "cylindrical equal-area", value: d3.geoCylindricalEqualArea }, { name: "cylindrical stereographic", value: d3.geoCylindricalStereographic }, { name: "dodecahedral", value: d3.geoDodecahedral }, { name: "Eckert I", value: d3.geoEckert1 }, { name: "Eckert II", value: d3.geoEckert2 }, { name: "Eckert III", value: d3.geoEckert3 }, { name: "Eckert IV", value: d3.geoEckert4 }, { name: "Eckert V", value: d3.geoEckert5 }, { name: "Eckert VI", value: d3.geoEckert6 }, { name: "Eisenlohr conformal", value: d3.geoEisenlohr }, { name: "Equal Earth", value: d3.geoEqualEarth }, { name: "Equirectangular (plate carrée)", value: d3.geoEquirectangular }, { name: "Fahey pseudocylindrical", value: d3.geoFahey }, { name: "flat-polar parabolic", value: d3.geoMtFlatPolarParabolic }, { name: "flat-polar quartic", value: d3.geoMtFlatPolarQuartic }, { name: "flat-polar sinusoidal", value: d3.geoMtFlatPolarSinusoidal }, { name: "Foucaut’s stereographic equivalent", value: d3.geoFoucaut }, { name: "Foucaut’s sinusoidal", value: d3.geoFoucautSinusoidal }, { name: "general perspective", value: d3.geoSatellite }, // {name: "Gilbert’s two-world", value: d3.geoGilbert}, // https://github.com/d3/d3-geo-projection/issues/165 { name: "Gingery", value: d3.geoGingery }, { name: "Ginzburg V", value: d3.geoGinzburg5 }, { name: "Ginzburg VI", value: d3.geoGinzburg6 }, { name: "Ginzburg VIII", value: d3.geoGinzburg8 }, { name: "Ginzburg IX", value: d3.geoGinzburg9 }, { name: "Goode’s homolosine", value: d3.geoHomolosine }, { name: "Goode’s homolosine (interrupted)", value: d3.geoInterruptedHomolosine }, { name: "gnomonic", value: d3.geoGnomonic }, { name: "Gringorten square", value: d3.geoGringorten }, { name: "Gringorten quincuncial", value: d3.geoGringortenQuincuncial }, { name: "Guyou square", value: d3.geoGuyou }, { name: "Hammer", value: d3.geoHammer }, { name: "Hammer retroazimuthal", value: d3.geoHammerRetroazimuthal }, { name: "HEALPix", value: d3.geoHealpix }, { name: "Hill eucyclic", value: d3.geoHill }, { name: "Hufnagel pseudocylindrical", value: d3.geoHufnagel }, { name: "icosahedral", value: d3.geoIcosahedral }, { name: "Imago", value: d3.geoImago }, { name: "Kavrayskiy VII", value: d3.geoKavrayskiy7 }, { name: "Lagrange conformal", value: d3.geoLagrange }, { name: "Larrivée", value: d3.geoLarrivee }, { name: "Laskowski tri-optimal", value: d3.geoLaskowski }, // {name: "Littrow retroazimuthal", value: d3.geoLittrow}, // Not suitable for world maps. { name: "Loximuthal", value: d3.geoLoximuthal }, { name: "Mercator", value: d3.geoMercator }, { name: "Miller cylindrical", value: d3.geoMiller }, { name: "Mollweide", value: d3.geoMollweide }, { name: "Mollweide (Goode’s interrupted)", value: d3.geoInterruptedMollweide }, { name: "Mollweide (interrupted hemispheres)", value: d3.geoInterruptedMollweideHemispheres }, { name: "Natural Earth", value: d3.geoNaturalEarth1 }, { name: "Natural Earth II", value: d3.geoNaturalEarth2 }, { name: "Nell–Hammer", value: d3.geoNellHammer }, { name: "Nicolosi globular", value: d3.geoNicolosi }, { name: "orthographic", value: d3.geoOrthographic }, { name: "Patterson cylindrical", value: d3.geoPatterson }, { name: "Peirce quincuncial", value: d3.geoPeirceQuincuncial }, { name: "rectangular polyconic", value: d3.geoRectangularPolyconic }, { name: "Robinson", value: d3.geoRobinson }, { name: "sinusoidal", value: d3.geoSinusoidal }, { name: "sinusoidal (interrupted)", value: d3.geoInterruptedSinusoidal }, { name: "sinu-Mollweide", value: d3.geoSinuMollweide }, { name: "sinu-Mollweide (interrupted)", value: d3.geoInterruptedSinuMollweide }, { name: "stereographic", value: d3.geoStereographic }, { name: "Lee’s tetrahedal", value: d3.geoTetrahedralLee }, { name: "Times", value: d3.geoTimes }, { name: "Tobler hyperelliptical", value: d3.geoHyperelliptical }, { name: "transverse Mercator", value: d3.geoTransverseMercator }, { name: "Van der Grinten", value: d3.geoVanDerGrinten }, { name: "Van der Grinten II", value: d3.geoVanDerGrinten2 }, { name: "Van der Grinten III", value: d3.geoVanDerGrinten3 }, { name: "Van der Grinten IV", value: d3.geoVanDerGrinten4 }, { name: "Wagner IV", value: d3.geoWagner4 }, { name: "Wagner VI", value: d3.geoWagner6 }, { name: "Wagner VII", value: d3.geoWagner7 }, { name: "Werner", value: d3.geoBonne ? () => d3.geoBonne().parallel(90) : null }, { name: "Wiechel", value: d3.geoWiechel }, { name: "Winkel tripel", value: d3.geoWinkel3 } ].filter(p => p.value)33:[{"id":"5102a88a528edcb19ebdd6ae3e09580f545e368bf13e7ed49e90a3393fa4943cd6b2a01993c3853bc31e72f457bce7ba26fcee83be776d17f6e1a3075b1dcb5e","href":"https://static.observableusercontent.com/files/5102a88a528edcb19ebdd6ae3e09580f545e368bf13e7ed49e90a3393fa4943cd6b2a01993c3853bc31e72f457bce7ba26fcee83be776d17f6e1a3075b1dcb5e","name":"world_4.geojson","type":"application/geo+json","lastModified":1739797960003.956,"size":9160681},{"id":"8bc4795f6a8b2d6bb77eefc08085b6600e149a48a4d1cc66f86fcc277e138c529ff8e40126b80ab8e09ca8a35bef71ae673507d0bccacffab2e036bb309ed6c9","href":"https://static.observableusercontent.com/files/8bc4795f6a8b2d6bb77eefc08085b6600e149a48a4d1cc66f86fcc277e138c529ff8e40126b80ab8e09ca8a35bef71ae673507d0bccacffab2e036bb309ed6c9","name":"world.json","type":"application/json","lastModified":1739801561561.035,"size":96220}] 2f:{"id":"04d92e94e4c4457f","slug":"projections-cartographiques","title":" Projections cartographiques ","thumbnail":"a5f9d6a09c5269015c89cebe956a48ca942347f998442fec2d8612aaf9ed3d20","access_level":"unlisted","create_time":"$D2025-02-17T13:12:40.003Z","update_time":"$D2025-02-17T15:21:55.942Z","view_time":null,"first_public_time":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"356546a635010146","login":"tdvz","name":"ToulouseDataviz","avatar_url":"https://avatars-next.observableusercontent.com/8cc8684f3b4b43d6bc2009295d66ea4d6c8dd1f1277afd34eb0f010ade242a05","tier":"starter_2024"},"version":2131,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"39f8227195038a1f","login":"aotten","name":"Alain Ottenheimer","avatar_url":"https://avatars-next.observableusercontent.com/c908270df8ca89015b1f236bb9cc9fb2d79a649dbedef18f6cf2290d288650c3","tier":null}],"members":[{"type":"individual","id":"39f8227195038a1f","login":"aotten","name":"Alain Ottenheimer","avatar_url":"https://avatars-next.observableusercontent.com/c908270df8ca89015b1f236bb9cc9fb2d79a649dbedef18f6cf2290d288650c3","tier":null,"role":"editor"},{"type":"team","id":"356546a635010146","login":"tdvz","name":"ToulouseDataviz","avatar_url":"https://avatars-next.observableusercontent.com/8cc8684f3b4b43d6bc2009295d66ea4d6c8dd1f1277afd34eb0f010ade242a05","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":" Projections cartographiques ","cells":[{"id":4,"value":"md`\n# Projections cartographiques \n## 102 projections cartographiques\n\n#### Source de données : [Cartes du monde](https://unpkg.com/browse/visionscarto-world-atlas@0.0.4/world/) \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1191,"value":"viewof projection = projectionInput({\n name: \"Choisissez une projection\",\n value:\n new URLSearchParams(html``.search).get(\"projection\") ||\n \"Equal Earth\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1928,"value":"viewof select_territoire = Inputs.radio([\"Basse\", \"Haute\"], {\n label: \"Résolution ?\",\n value: \"Basse\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2074,"value":"viewof select_graticule = Inputs.radio([\"Oui\", \"Non\"], {\n label: \"Graticule ?\",\n value: \"Non\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1909,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"graph_svg = DOM.download(await serialize(carte), \"carte.svg\", \"Download as svg\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"graph_png = DOM.download(await rasterize(carte), \"carte.png\", \"Download as PNG\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2085,"value":"#### Data cartes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1990,"value":"world = FileAttachment(\"world.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1432,"value":"world_HD = FileAttachment(\"world_4.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"#### Projections","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1189,"value":"function projectionInput({ name, value }) {\n const form = html`

${name}`;\n form.onchange = () => form.dispatchEvent(new CustomEvent(\"input\"));\n //form.oninput = () => (form.value = projections[form.i.selectedIndex].value());\n form.oninput = () =>\n (form.value = projections[form.i.selectedIndex].value()).center([0, 42]);\n //.scale(select_zoom);\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1184,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2096,"value":"#### Librairies","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1176,"value":"d3 = require(\"d3@7\", \"d3-geo@1\", \"d3-geo-projection@2\", \"d3-geo-polygon@1\", \"d3-geo-scale-bar@1.1.1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"import { rasterize, serialize } from \"@mbostock/saving-svg\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"