29:null 2a:["$","title",null,{"children":"A flow map with Plot geo | Éric Mauvière | Observable"}] 2f:T1345,map = { const map_width = Math.min(width, 800), map_height = 6/5 * Math.min(width, 800), legende_pn = [{lon: 4.52, lat: 45.72, label : "Parc national"}], labels_pn = [{lon:6.1, lat:44.92, label : "Écrins"}, {lon:6.76, lat:45.37, label : "Vanoise"}, {lon:7.10, lat:44.1, label : "Mercantour"}] const plot = Plot.plot({ inset: 10, width: map_width, height: map_height, projection: { type: () => proj4d3(2154), // EPSG:2154, Lambert Carto France métropolitaine domain: alpes_domain // définit le cadrage de zoom et de filtrage des données }, marks: [ Plot.geo(a_fra, { fill: "#f0f0f0", vectorEffect:"non-scaling-stroke" }), Plot.geo(l_epci,{ strokeOpacity: 0.25, stroke: "#aaa" }), flux_discr.slice(0,3).map(([level, flux]) => // première série de flèches, jaunes, sous la couche des parcs nationaux Plot.arrow(flux, { markerEnd: "arrow", bend: -17, insetEnd: 10, strokeLinecap: "none", strokeMiterlimit: "6", headLength: 4, x1: "x1", x2: "x2", y1: "y1", y2: "y2", strokeWidth: (d) => d.nombre_ugb_temps_plein < 50 ? 2 : d.nombre_ugb_temps_plein < 100 ? 3 : 5, stroke: (d) => "rgb(255, 255, 212)", }) ), Plot.geo(a_pn, { fill: "#6ec09399" }), // parcs nationaux Plot.geo(l_regions, { stroke: "grey", vectorEffect:"non-scaling-stroke" }), flux_discr.slice(3).map(([level, flux]) => // seconde série de flèches, de couleur et d'épaisseur variable Plot.arrow(flux, { markerEnd: "arrow", bend: -17, insetEnd: 10, strokeLinecap: "round", strokeLinejoin: "round", strokeMiterlimit: "6", headLength: 24 + 3 * level, x1: "x1", x2: "x2", y1: "y1", y2: "y2", strokeWidth: (d) => d.nombre_ugb_temps_plein < 400 ? 7 : 10, stroke: (d) => d.nombre_ugb_temps_plein < 400 ? "rgb(241, 124, 83)" : "rgb(204, 0, 0)" }) ), Plot.geo(villes_sud_est), Plot.text(villes_sud_est.features, Plot.centroid({ text: d => d.properties.libgeo.split('@').pop(), textAnchor: "start", dx: 10, stroke: "white", fill: "black", fontSize: width < 400 ? 10 : 16 })), Plot.dot(legende_pn, {x: "lon", y: "lat", fill: "#6ec09399", symbol: "square", r: width < 400 ? 10 : 20}), Plot.text(legende_pn, {x: "lon", y: "lat", fill: "#2d8057", text: "label", textAnchor: "start", dx: 22, fontSize: width < 400 ? 10 : 16}), Plot.text(labels_pn, {x: "lon", y: "lat", fill: "black", text: "label", textAnchor: "start", dx: (width < 400 ? 10 : 20) + 5, fontSize: width < 400 ? 10 : 14, fontVariant: "small-caps", fill: "#2d8057", textAnchor: "middle"}), // interactive opacity on the arrows () => svg`