Public
Edited
Feb 19
5 forks
1 star
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
cantonData = votesData.schweiz.vorlagen[0].kantone
Insert cell
Insert cell
geographicData= FileAttachment("swissBOUNDARIES3D_1_5_wgs84.geojson").json()
Insert cell
Insert cell
Insert cell
{
// 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();
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{// !! Création du container (spécifique à Observable). Normalement, vous créez directement dans votre index.html ou par Javascript
const container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` });
yield container;
// !!

// Initialisation de la carte
const carte = Leaflet.map(container);

const Stadia_map = Leaflet.tileLayer('https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}{r}.{ext}', {
minZoom: 0,
maxZoom: 20,
attribution: '&copy; <a href="https://www.stadiamaps.com/" target="_blank">Stadia Maps</a> &copy; <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
ext: 'png'
}).addTo(carte);




// Style pour les couches GeoJSON
const style = {
weight: 2,
color: 'white',
fillOpacity: 0.7
};

// On rajoute le geojson des cantons
const cantonLayer = Leaflet.geoJson(geographicData, {
style: style,
}).addTo(carte);


// Recentrons sur l'étendue des données géographiques
carte.fitBounds(cantonLayer.getBounds());
}

Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more