{
const margin = { top : 10, right: 40, bottom: 30, left: 40 },
width = 1000 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
const colorScale = d3.scaleSequential([0,d3.max(cantonData,d => d.resultat.jaStimmenInProzent)], d3.interpolateHslLong("purple", "orange"))
const projection = d3.geoMercator()
.fitExtent([[0, 0], [width, height]], geographicData);
const path = d3.geoPath()
.projection(projection)
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 + ")");
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")
.data(geographicData.features)
.join(enter => enter.append('path')
.attr("d", path)
.attr("id", d => d.properties.name)
.attr("fill", d => {
const canton = cantonData.find(vote => vote.geoLevelname.match(d.properties.name));
if (canton) {
return colorScale(canton.resultat.jaStimmenInProzent);
} else {
return "white";
}
})
.attr("stroke", "white")
.attr("stroke-width", 1)
);
yield monSvg.node();
}