2f:T7dd,{ // Marges et translations const margin = { top : 10, right: 40, bottom: 30, left: 40 }, width = 1000 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; // Sequential scale pour l'échelle chromatique const colorScale = d3.scaleSequential([0,d3.max(cantonData,d => d.resultat.jaStimmenInProzent)], d3.interpolateHslLong("purple", "orange")) // Projection const projection = d3.geoMercator() .fitExtent([[0, 0], [width, height]], geographicData); const path = d3.geoPath() .projection(projection) // Ajouter le svg const monSvg = d3.create("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom); const carte = monSvg .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // Créer un groupe pour le tooltip const tooltip = d3.select("body") .append("div") .style("position", "absolute") .style("visibility", "hidden") .style("background-color", "white") .style("border", "1px solid black") .style("padding", "5px"); carte.selectAll("path") // Chargement des données ( !! data.features ) .data(geographicData.features) .join(enter => enter.append('path') .attr("d", path) .attr("id", d => d.properties.name) .attr("fill", d => { // Trouver le canton correspondant dans les données des votations (d.geoLevelname) const canton = cantonData.find(vote => vote.geoLevelname.match(d.properties.name)); if (canton) { // Si trouvé, retourne la couleur correspondante au pourcentage de oui return colorScale(canton.resultat.jaStimmenInProzent); } else { // Autrement, couleur en blanc return "white"; } }) .attr("stroke", "white") .attr("stroke-width", 1) ); // Spécifique à Observable yield monSvg.node(); }30:T79b,{ // !! Création du container (spécifique à Observable) const container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` }); yield container; // !! // Import dynamique de MapLibre GL JS const maplibregl = await require('maplibre-gl@4'); // Injection du CSS MapLibre (nécessaire dans Observable) if (!document.getElementById('maplibre-css')) { const link = document.createElement('link'); link.id = 'maplibre-css'; link.rel = 'stylesheet'; link.href = 'https://unpkg.com/maplibre-gl@4/dist/maplibre-gl.css'; document.head.appendChild(link); } // Initialisation de la carte const carte = new maplibregl.Map({ container: container, style: 'https://tiles.openfreemap.org/styles/liberty', center: [0, 0], zoom: 2 }); // On attend que la carte soit chargée avant d'ajouter les données await new Promise(resolve => carte.on('load', resolve)); // Calcul du bbox à partir du GeoJSON pour centrer la vue const bounds = new maplibregl.LngLatBounds(); geographicData.features.forEach(feature => { const coords = feature.geometry.coordinates; const flat = feature.geometry.type === 'Polygon' ? [coords[0]] : coords.map(p => p[0]); flat[0].forEach(([lng, lat]) => bounds.extend([lng, lat])); }); // Ajout de la source GeoJSON carte.addSource('cantons', { type: 'geojson', data: geographicData }); // Ajout de la couche de remplissage (polygones) carte.addLayer({ id: 'cantons-fill', type: 'fill', source: 'cantons', paint: { 'fill-color': 'white', 'fill-opacity': 0.7 } }); // Ajout de la couche de contour carte.addLayer({ id: 'cantons-outline', type: 'line', source: 'cantons', paint: { 'line-color': 'white', 'line-width': 2 } }); // Recentrage sur l'étendue des données carte.fitBounds(bounds, { padding: 20, animate: false }); } 31:[{"id":"c34388444951443f70105294dceb82fca4128c14b36a3034e6506422fbe78ed5f3cecc7064c285d83c97f2ae50944a0cf97b5aafa04fcc7517e672fb7c3f91d4","href":"https://static.observableusercontent.com/files/c34388444951443f70105294dceb82fca4128c14b36a3034e6506422fbe78ed5f3cecc7064c285d83c97f2ae50944a0cf97b5aafa04fcc7517e672fb7c3f91d4","name":"sd-t-17-02-20240303-eidgAbstimmung.json","type":"application/json","lastModified":1710275460928.412,"size":2075215},{"id":"d6c79b931dec0458e07cc9e61ade29755fe1a294a0fe08994c341fa0ceabacb6751b66ef9305dbadb075c60035e004457c6b9fd1b9824affb9528c2e9b84871b","href":"https://static.observableusercontent.com/files/d6c79b931dec0458e07cc9e61ade29755fe1a294a0fe08994c341fa0ceabacb6751b66ef9305dbadb075c60035e004457c6b9fd1b9824affb9528c2e9b84871b","name":"swissBOUNDARIES3D_1_5_wgs84.geojson","type":"application/geo+json","lastModified":1710277634823.664,"size":10526768}] 2d:{"title":"Cartographie web","cells":[{"id":0,"value":"# Cartographie web","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"\nAujourd'hui, nous allons apprendre à cartographier dans le web avec d3-geo et Maplibre GL JS. Voici également quelques autres bibliothèques open source que vous pourriez explorer :\n\n

OpenLayers.js - Une bibliothèque JavaScript pour créer des cartes interactives avec des fonctionnalités avancées.
Deck.gl - Une bibliothèque pour la visualisation avancée de données géospatiales, intégrant React et Mapbox.
Kepler.gl - Une bibliothèque open source dédiée à la géospatialisation et à l'analyse de données, élaborée en utilisant MapLibre GL JS et Deck.gl, et développée par Uber.

\n","pinned":false,"hidden":false,"mode":"html"},{"id":26,"value":"## Données","pinned":false,"hidden":false,"mode":"md"},{"id":39,"value":"Nous allons exploiter les données les plus récentes des votations fédérales concernant l' initiative populaire «Mieux vivre à la retraite (initiative pour une 13e rente AVS) fournies par l' Office Fédéral de la Statistique (OFS).","pinned":false,"hidden":false,"mode":"html"},{"id":88,"value":"votesData = FileAttachment(\"sd-t-17-02-20240303-eidgAbstimmung.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":401,"value":"Nous allons également filtrer les données au niveau cantonal: ","pinned":false,"hidden":false,"mode":"html"},{"id":148,"value":"cantonData = votesData.schweiz.vorlagen[0].kantone","pinned":true,"hidden":false,"mode":"ojs"},{"id":61,"value":"Pour avoir les contours (path) des cantons, nous devons également charger les données des limites géographiques de chaque canton fournies par swisstopo.","pinned":false,"hidden":false,"mode":"html"},{"id":129,"value":"geographicData= FileAttachment(\"swissBOUNDARIES3D_1_5_wgs84.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":203,"value":"# Carte","pinned":false,"hidden":false,"mode":"md"},{"id":216,"value":"## d3-geo","pinned":false,"hidden":false,"mode":"md"},{"id":92,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":324,"value":"heading(\"❓ Est-ce que l'échelle chromatique est adaptée pour la visualisation de cette carte choroplète ? Choisissez une échelle chromatique qui selon vous est plus adaptée. \",'', '', \"green\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":270,"value":"heading(\"❓ Rajoutez une info-bulle si on survole avec la souris. L'info-bulle doit contenir le nom du canton et le pourcentage. Exemple: Putting d3 on the map\",'', '', \"green\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":220,"value":"## Maplibre GL JS","pinned":false,"hidden":false,"mode":"md"},{"id":229,"value":"Nous allons reproduire la même carte ci-dessus, mais cette fois-ci en utilisant Maplibre GL JS.","pinned":false,"hidden":false,"mode":"html"},{"id":285,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":528,"value":"heading(\"❓ Créez la même carte choroplète construite avec d3.\",'', '', \"green\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":532,"value":"heading(\"❓ Rajoutez une légénde avec la palette de couleurs utilisée pour la carte choroplète\",'', '', \"green\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":460,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":520,"value":"import {heading} from '@ee2dev/formatting-in-observable'","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}