27:null 28:["$","title",null,{"children":"TP 4 [Correction] — Réalisation de cartes | Xavier SENENTE | Observable"}] 2d:[{"id":"7fd416c9a9000d36ae5f1f249384737092f455ba58a2e39b4d218afac309bf20ab439b7631274268ffa125054044344e14d6f2d727b52ce7d61858d1b256db79","href":"https://static.observableusercontent.com/files/7fd416c9a9000d36ae5f1f249384737092f455ba58a2e39b4d218afac309bf20ab439b7631274268ffa125054044344e14d6f2d727b52ce7d61858d1b256db79","name":"departements.geojson","type":"application/geo+json","lastModified":1759147335552.911,"size":3427910},{"id":"f38a65e54e57fb2ef37b2c11fe310b6b08aa249366a2ba1c1a61e765618e5dd8eb6eacf4a8517a2cba9ce4a093643c7e5a522b80562fe289d0557d91d8b26b86","href":"https://static.observableusercontent.com/files/f38a65e54e57fb2ef37b2c11fe310b6b08aa249366a2ba1c1a61e765618e5dd8eb6eacf4a8517a2cba9ce4a093643c7e5a522b80562fe289d0557d91d8b26b86","name":"DS_RP_POPULATION_dep2.csv","type":"text/csv","lastModified":1759147335552.911,"size":7807},{"id":"0bc602383222f347c78dc2515ab79cf1d8058db3e9d1d918bbfb4e563db25ceefe086bbd947937e21ea0f732f2d965c10d2efe126186a7eb599cedefcb7e4a46","href":"https://static.observableusercontent.com/files/0bc602383222f347c78dc2515ab79cf1d8058db3e9d1d918bbfb4e563db25ceefe086bbd947937e21ea0f732f2d965c10d2efe126186a7eb599cedefcb7e4a46","name":"fr-esr-implantations_etablissements_d_enseignement_superieur_publics.json","type":"application/json","lastModified":1759147335552.911,"size":3727925},{"id":"650c22c65f0a31d87ef9df7f4f7ebf781bcfb203fee413efea9ac690e8a47310e9a53ee44e51550d9c11cc6fc7c573e91e6ea4994aadeeb2d12c8835bb5807e8","href":"https://static.observableusercontent.com/files/650c22c65f0a31d87ef9df7f4f7ebf781bcfb203fee413efea9ac690e8a47310e9a53ee44e51550d9c11cc6fc7c573e91e6ea4994aadeeb2d12c8835bb5807e8","name":"DS_RP_POPULATION_PRINC-1.csv","type":"text/csv","lastModified":1759147954908.017,"size":406216}] 2b:{"id":"32a41a24ee59b218","slug":null,"title":"TP 4 [Correction] — Réalisation de cartes","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2025-09-29T12:02:15.552Z","update_time":"$D2025-09-29T12:28:51.825Z","view_time":null,"first_public_time":"$D2025-09-29T12:02:15.552Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"976b5ceccc348d41","login":"xaviersenente","name":"Xavier SENENTE","avatar_url":"https://avatars-next.observableusercontent.com/00724f3264dc62ce6303793b946b15214af84cf98487a4cdaa88dbdfea37786a","tier":"starter_2024"},"version":795,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"9e994ecabe6cd753","login":"xaviersenente","name":"Xavier SENENTE","avatar_url":"https://avatars-next.observableusercontent.com/00724f3264dc62ce6303793b946b15214af84cf98487a4cdaa88dbdfea37786a","tier":null}],"members":[{"type":"team","id":"976b5ceccc348d41","login":"xaviersenente","name":"Xavier SENENTE","avatar_url":"https://avatars-next.observableusercontent.com/00724f3264dc62ce6303793b946b15214af84cf98487a4cdaa88dbdfea37786a","tier":"starter_2024","role":"editor"},{"type":"individual","id":"9e994ecabe6cd753","login":"xaviersenente","name":"Xavier SENENTE","avatar_url":"https://avatars-next.observableusercontent.com/00724f3264dc62ce6303793b946b15214af84cf98487a4cdaa88dbdfea37786a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"TP 4 [Correction] — Réalisation de cartes","cells":[{"id":369,"value":"# TP 4 [Correction] — Réalisation de cartes\n\nRessources :\n\n- https://observablehq.com/plot/marks/geo\n- https://observablehq.com/plot/features/projections\n- https://observablehq.com/collection/@observablehq/county-maps","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":653,"value":"\nDans un premier temps, récupérer les tracés des entités géographiques et administratives françaises suivantes au format GeoJSON (https://github.com/gregoiredavid/france-geojson) :\n- Régions\n- Départements\n- Cantons\n- Arrondissements\n- Communes\n\nPuis importer le fichier dans votre notebook.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":271,"value":"departementsGeoJSON = FileAttachment(\"departements.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"## Création automatique d'une carte Plot.geo","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":414,"value":"Plot.plot({ \n projection: {\n type: \"mercator\", // Utiliser une projection adaptée\n domain: departementsGeoJSON // Domain pour centrer la carte sur la France\n }, \n marks: [\n Plot.geo(departementsGeoJSON)\n ] \n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":418,"value":"## Création automatique d'une carte Leaflet","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":415,"value":"{\n const container = yield htl.html`

`;\n const map = L.map(container);\n const layer = L.geoJSON(departementsGeoJSON).addTo(map);\n map.fitBounds(layer.getBounds(), {maxZoom: 9});\n L.tileLayer(\"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\", {\n attribution: \"© OpenStreetMap contributors\"\n }).addTo(map);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"## Carte chorophlète de la population","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":570,"value":"population = await FileAttachment(\"DS_RP_POPULATION_dep2.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"population","database":"$undefined"},{"id":730,"value":"departementsData = departementsGeoJSON.features.map((d) => ({\n ...d,\n properties: {\n ...d.properties,\n population:\n population.find((p) => p.Géographie === d.properties.nom)?.Valeur ?? null\n }\n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"// Créer la carte\nPlot.plot({\n projection: {\n type: \"mercator\", // Utiliser une projection Mercator\n domain: departementsGeoJSON // Centrer la carte sur la France\n },\n color: {\n type: \"quantile\",\n n: 8,\n scheme: \"blues\"\n },\n marks: [\n // Remplir chaque département en fonction de sa population\n Plot.geo(departementsData, {\n fill: \"population\",\n stroke: \"#999\" // Bordure entre les départements\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":667,"value":"departementsGeoJSON.features.map(d => d.properties.nom)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":642,"value":"formatNumber = d3.format(\",\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":412,"value":"Plot.plot({\n width: 900,\n projection: {\n type: \"mercator\", // Utiliser une projection adaptée\n domain: departementsGeoJSON // Domain pour centrer la carte sur la France\n },\n color: {\n type: \"quantile\",\n n: 8,\n scheme: \"blues\",\n label: \"Population en centaine de milliers\",\n legend: true,\n transform: (d) => Math.round(d / 100000)\n },\n marks: [\n Plot.geo(departementsData, {\n fill: \"population\",\n stroke: \"#999\",\n title: (d) => {\n return `${d.properties.nom}\\nPopulation : ${formatNumber(\n d.properties.population\n )}`;\n },\n tip: true\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":428,"value":"dataES = FileAttachment(\"fr-esr-implantations_etablissements_d_enseignement_superieur_publics.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":434,"value":"// Filtrer les établissements en France métropolitaine\nmetropolitanEstablishments = dataES\n .filter(d => d.coordonnees && d.coordonnees.lon && d.coordonnees.lat)\n .map(d => ({\n name: d.implantation_lib || d.siege_lib || \"Établissement inconnu\",\n lon: d.coordonnees.lon,\n lat: d.coordonnees.lat\n }));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"// Créer la carte avec zoom centré sur la France métropolitaine\nPlot.plot({\n projection: {\n type: \"mercator\", // Utiliser la projection Mercator\n domain: departementsGeoJSON\n },\n height: 900, // Taille de la carte\n width: 950, // Largeur de la carte\n marks: [\n Plot.geo(departementsGeoJSON, {\n fill: \"#EEE\",\n stroke: \"#999\" // Bordures blanches entre les départements\n }),\n Plot.dot(metropolitanEstablishments, {\n // Points représentant les établissements filtrés en métropole\n x: \"lon\",\n y: \"lat\",\n r: 3, // Taille des points\n fill: \"red\",\n opacity: 0.3,\n title: (d) => d.name, // Infobulle avec le nom de l'établissement\n tip: true\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":542,"value":"viewof map = {\n const container = DOM.element('div', {style: 'width: 100%; height: 600px'}); // Taille de la carte\n const map = L.map(container).setView([46.603354, 1.888334], 6); // Centrer sur la France métropolitaine\n\n // Ajouter une couche de tuiles OpenStreetMap\n L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {\n attribution: '© OpenStreetMap contributors'\n }).addTo(map);\n\n // Ajouter les points des établissements sur la carte\n metropolitanEstablishments.forEach(est => {\n const marker = L.marker([est.lat, est.lon]).addTo(map);\n marker.bindPopup(`${est.name}`); // Ajout d'une popup avec le nom de l'établissement\n });\n\n return container;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":552,"value":"viewof map1 = {\n const container = DOM.element('div', {style: 'width: 100%; height: 600px'}); // Taille de la carte\n const map = L.map(container).setView([46.603354, 1.888334], 6); // Centrer sur la France métropolitaine\n\n // Ajouter une couche de tuiles OpenStreetMap\n L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {\n attribution: '© OpenStreetMap contributors © CARTO'\n }).addTo(map);\n\n // Ajouter les points des établissements sur la carte\n metropolitanEstablishments.forEach(est => {\n const circle = L.circleMarker([est.lat, est.lon], {\n color: 'red',\n radius: 2, // Taille du point\n fillColor: 'red',\n opacity: 0.25 // Opacité du remplissage\n }).addTo(map);\n circle.bindPopup(`${est.name}`); // Ajouter une popup avec le nom de l'établissement\n });\n\n return container;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":773,"value":"detail_population = await FileAttachment(\"DS_RP_POPULATION_PRINC-1.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"detail_population","database":"$undefined"},{"id":777,"value":"viewof selectedYear = Inputs.radio(new Set(detail_population.map(d => d.Période)), {label: \"Année\", value: 2021 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":793,"value":"viewof selectedSexe = Inputs.radio(new Set(detail_population.map(d => d.Sexe)), {label: \"Sexe\", value: \"Total\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":786,"value":"viewof selectedAge = Inputs.select(new Set(detail_population.map(d => d.Âge)), {label: \"Age\", value: \"Total\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":775,"value":"Plot.plot({\n width: 900,\n projection: {\n type: \"mercator\", // Utiliser une projection adaptée\n domain: departementsGeoJSON // Domain pour centrer la carte sur la France\n },\n color: {\n type: \"quantile\",\n n: 8,\n scheme: \"blues\",\n label: \"Population en centaine de milliers\",\n legend: true,\n transform: (d) => Math.round(d / 100000)\n },\n marks: [\n Plot.geo(departementsGeoJSON, {\n fill: d => {\n const deptName = d.properties.nom;\n const popData = detail_population.find(\n p => p.Géographie === deptName && \n p.Période === selectedYear &&\n p.Âge === selectedAge &&\n p.Sexe === selectedSexe);\n return popData.Valeur;\n },\n stroke: \"#999\",\n title: (d) => {\n return `${d.properties.nom}\\nPopulation : ${formatNumber(\n d.properties.population\n )}`;\n },\n tip: true\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2d","stdlib":"1","titling":"auto"}} 2c:"$2b:body"