viewof map = { // 1. Échelles et formateurs const circle_scale = d3.scaleLinear().domain([1, 1600]).range([0.5, 25]); const dotFormat = (n) => d3.format(",d")(n).replace(/,/g, "\u00a0"); // 2. Préparation des données logPOP const mapData = { ...resElection, features: resElection.features.map((f) => ({ ...f, properties: { ...f.properties, logPOP: circle_scale(Math.sqrt(+f.properties.POP || 0)) } })) }; // 3. Conteneur de la carte var container = html`

`; // 4. Template HTML avec Style intégré et structure de la Console var content = html`

${container}

`; yield content; // 5. Configuration Mapbox let map = new mapboxgl.Map({ container, maxZoom: 12, minZoom: 4.7, center: [IHM.long, IHM.lat], zoom: IHM.zoomValue, style: blankStyle }); // Fonction de création de calques function layer(y) { return { id: y.toString(), type: "circle", source: { type: "geojson", data: mapData }, paint: { "circle-color": { property: "L" + y.toString().slice(2, 4), type: "categorical", stops: color }, "circle-radius": [ "interpolate", ["linear"], ["zoom"], 4.7, ["*", 1, ["get", "logPOP"]], 12, ["*", 15, ["get", "logPOP"]] ], "circle-opacity": 0 } }; } var xlabel = d3 .scaleOrdinal() .domain([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]) .range([ "E99", "P02", "E04", "P07", "E09", "P12", "E14", "P17", "E19", "P22", "E24" ]); map.on("load", () => { container.value = map; container.dispatchEvent(new CustomEvent("input")); years.forEach((y) => map.addLayer(layer(y))); map.setPaintProperty(IHM.year.toString(), "circle-opacity", 0.9); map.loadImage( "https://raw.githubusercontent.com/ToulouseDataViz/toulousedataviz.github.io/master/center_marker.png", (error, image) => { if (!error) map.addImage("cross", image); } ); // 6. Interaction MouseMove map.on("mousemove", function (e) { const features = map.queryRenderedFeatures(e.point, { layers: years }); const d = features.length ? features[0].properties : undefined; const yearSuffix = IHM.year.toString().slice(2, 4); d3.select("#tooltip-nom").html( `• Commune : ${ d ? d.NOM + " (" + d.INSEE.slice(0, 2) + ")" : "" }` ); d3.select("#tooltip-liste").text( `• Candidat / Liste : ${d ? d["L" + yearSuffix] : ""}` ); d3.select("#tooltip-voix").text( `• Voix : ${d ? d["VE" + yearSuffix] + "%" : ""}` ); d3.select("#tooltip-pop").text( `• Population : ${d ? dotFormat(d.POP) : ""}` ); d3.select("#tooltip-exprimes").text( `• Votes exprimés : ${d ? dotFormat(d["E" + yearSuffix]) : ""}` ); const svgBar = d3.select("#tooltip-bar"); svgBar.selectAll("*").remove(); if (d) { years.forEach((y, i) => { const suffix = y.slice(2, 4); const score = +d["VE" + suffix] || 0; const xPos = 10 + i * 20; svgBar .append("rect") .attr("x", xPos) .attr("y", 85 - score) .attr("width", 15) .attr("height", score) .style("fill", colorListe(d["L" + suffix])) .style("stroke", suffix === yearSuffix ? "#fff" : "none") .style("stroke-width", "1.5px"); svgBar .append("text") .attr("x", xPos + 7.5) .attr("y", 100) .attr("text-anchor", "middle") .style("font-size", "7px") .style("font-weight", suffix === yearSuffix ? "bold" : "normal") .text(xlabel(i)); }); } }); // 7. Gestion du dispatch var active_layer = ""; dispatch.on("input", () => { const y = IHM.year.toString(); years.forEach((yearId) => map.setPaintProperty(yearId, "circle-opacity", 0) ); map.setPaintProperty(y, "circle-opacity", 0.9); if (active_layer !== "" && map.getLayer(active_layer)) { map.removeLayer(active_layer); map.removeSource(active_layer); } active_layer = "selection-" + Math.floor(Math.random() * 1000); if (IHM.as !== "") { map.addLayer({ id: active_layer, type: "symbol", source: { type: "geojson", data: { type: "Feature", geometry: { type: "Point", coordinates: [IHM.long, IHM.lat] } } }, layout: { "icon-image": "cross", "icon-size": 0.25 } }); } if (IHM.fly === 1 || IHM.reset === 1) { map.flyTo({ center: [IHM.long, IHM.lat], zoom: IHM.zoomValue, speed: 0.5 }); IHM.reset = 0; } }); }); }