Municipales : à combien de voix s’est jouée l’élection dans votre commune ?

Les élections municipales se sont parfois jouées à peu de choses. Dans plus de 900 communes, l’élection du futur maire s’est décidée à moins de dix voix près. C’est-à-dire que cinq électeurs auraient pu faire basculer l’élection s’ils avaient décidé de voter pour la liste arrivée deuxième. Dans d’autres cas, deux listes se sont même retrouvées à égalité parfaite, contraintes de se départager au moyen de la moyenne d’âge de leurs candidats (les plus âgés étant déclarés vainqueurs).

Dans la plupart des villes, la mobilisation des abstentionnistes aurait aussi pu modifier largement la donne, dans un scrutin marqué par une participation historiquement basse – si l’on met de côté les élections de 2020, organisées dans des conditions particulières à cause de la pandémie de Covid-19.

Et dans votre commune, à combien de voix s’est jouée l’élection ? Découvrez-le grâce à notre moteur de recherche.

Cela veut aussi dire que ${analysedCityData.voix_abstentionnistes_pres.toLocaleString()} abstentionniste${plur(analysedCityData.voix_abstentionnistes_pres)} – soit ${abstention_percentage_formatted} des personnes qui ne sont pas rendues aux urnes – auraient permis de faire basculer le vote.

`;
}
clone.querySelector(« .voix-pres .description »).innerHTML = mdm_html(description_html);

clone.querySelector(« .svg_container > p »).innerHTML = `Résultats du ${tour_str} tour`;
d3.select(clone).select(« .svg_resultats g »).remove();

container.appendChild(clone);

let data;

if (analysedCityData.type !== « une-seule-liste ») {
data = [
{ value: +analysedCityData.maire.voix, value_change: 0, color: analysedCityData.maireColor, name: await listeToName(analysedCityData.maire, false) },
{
value: +analysedCityData.principal_adversaire.voix,
value_change: 0,
color: analysedCityData.principal_adversaireColor,
name: await listeToName(analysedCityData.principal_adversaire, false),
},
{ value: +cityData.mentions.abstentions, value_change: 0, color: « #a7a6a6 », name: « Abstentionnistes » },
];
} else {
data = [
{ value: +analysedCityData.maire.voix, value_change: 0, color: analysedCityData.maireColor, name: await listeToName(analysedCityData.maire, false) },
{ value: +cityData.mentions.abstentions, value_change: 0, color: « #a7a6a6 », name: « Abstentionnistes » },
];
}
const width_svg = d3.select(clone).select(« .description »).node().clientWidth;
const height_svg = isMobile ? width_svg * 0.4 : width_svg * 0.25;
const margin = { top: 0, right: 40, bottom: 0, left: d3.max(data, computeSvgWidth) + 20 };
const width_svg_inner = width_svg – margin.left – margin.right;
const height_svg_inner = height_svg – margin.top – margin.bottom;

const svg_resultats = d3
.select(clone)
.select(« svg.svg_resultats »)
.attr(« viewBox », `0 0 ${width_svg} ${height_svg}`)
.style(« width », width_svg)
.style(« height », height_svg)
.append(« g »)
.attr(« transform », `translate(${margin.left}, ${margin.top})`);

const svg_changement_de_vote = d3
.select(clone)
.select(« svg.svg_changement_de_vote »)
.attr(« viewBox », `0 0 ${width_svg} ${height_svg}`)
.style(« width », width_svg)
.style(« height », height_svg)
.append(« g »)
.attr(« transform », `translate(${margin.left}, ${margin.top})`);

const svg_abstentionnistes = d3
.select(clone)
.select(« svg.svg_abstentionnistes »)
.attr(« viewBox », `0 0 ${width_svg} ${height_svg}`)
.style(« width », width_svg)
.style(« height », height_svg)
.append(« g »)
.attr(« transform », `translate(${margin.left}, ${margin.top})`);

let sorted_data = data.toSorted((a, b) => b.value + b.value_change – (a.value + a.value_change));

const scaleY = d3
.scaleBand()
.range([0, height_svg_inner])
.domain(sorted_data.map((d) => d.name))
.padding(0.4);
const scaleX = d3
.scaleLinear()
.range([0, width_svg_inner])
.domain([0, d3.max(data, (d) => d.value)]);

function update_svg(type_update, svg_to_update) {
if (data.length === 2) {
data[0].value_change = 0;
data[1].value_change = 0;
} else {
if (type_update === « abstention ») {
data[0].value_change = 0;
data[1].value_change = analysedCityData.voix_abstentionnistes_pres;
data[2].value_change = -analysedCityData.voix_abstentionnistes_pres;
} else if (type_update === « voix-pres ») {
data[0].value_change = -analysedCityData.voix_pres;
data[1].value_change = analysedCityData.voix_pres;
data[2].value_change = 0;
} else if (type_update === « reset ») {
data[0].value_change = 0;
data[1].value_change = 0;
data[2].value_change = 0;
}
}

sorted_data = data.toSorted((a, b) => b.value + b.value_change – (a.value + a.value_change));
scaleY.domain(sorted_data.map((d) => d.name));

// Transition Rect
svg_to_update
.selectAll(« rect.bar »)
.data(sorted_data)
.enter()
.append(« rect »)
.classed(« bar », true)
.attr(« x », 0)
.attr(« y », (d) => scaleY(d.name))
.attr(« width », (d) => {
return scaleX(d.value);
})
.attr(« height », scaleY.bandwidth())
.attr(« fill », (d) => d.color)
.attr(« fill-opacity », 0.8);

svg_to_update
.selectAll(« rect.bar-change »)
.data(sorted_data)
.enter()
.append(« rect »)
.classed(« bar-change », true)
.attr(« x », (d) => scaleX(d.value))
.attr(« y », (d) => scaleY(d.name))
.style(« fill », « none »)
.attr(« width », 0)
.attr(« height », scaleY.bandwidth());

svg_to_update
.selectAll(« text.bar-value »)
.data(sorted_data)
.enter()
.append(« text »)
.classed(« bar-value », true)
.attr(« x », (d) => scaleX(d.value) / 2)
.attr(« y », (d) => scaleY(d.name) + scaleY.bandwidth() / 2)
.text((d) => d.value.toLocaleString())
.attr(« text-anchor », « middle »)
.attr(« fill », « white »);

svg_to_update
.selectAll(« text.bar-value-change »)
.data(sorted_data)
.enter()
.append(« text »)
.classed(« bar-value-change », true)
.style(« display », « none »)
.attr(« x », (d) => scaleX(d.value))
.attr(« y », (d) => scaleY(d.name) + scaleY.bandwidth() / 2);

const yAxis = d3.axisLeft(scaleY).tickSizeOuter(0);
const yAxisGroup = svg_to_update
.append(« g »)
// .attr(« transform », `translate(${margin.left}, 0)`)
.call(yAxis);

// Transition Bar Value Change
svg_to_update
.selectAll(« rect.bar-change »)
.transition()
.duration(1000)
.attr(« x », (d) => {
return d.value_change >= 0 ? scaleX(d.value) : scaleX(d.value + d.value_change);
})
.attr(« width », (d) => scaleX(Math.abs(d.value_change)))
.attr(« stroke », (d) => (d.value_change >= 0 ? « green » : « red »))
.attr(« fill-opacity », 0.8)
.attr(« y », (d) => scaleY(d.name));

// Transition Texts
svg_to_update
.selectAll(« text.bar-value »)
.transition()
.duration(1000)
.attr(« x », (d) => scaleX(d.value + d.value_change) / 2)
.attr(« y », (d) => scaleY(d.name) + scaleY.bandwidth() / 2);

// Transition Text Value Change
svg_to_update
.selectAll(« text.bar-value-change »)
.transition()
.duration(1000)
.text((d) => (d.value_change > 0 ? `+ ` : `- `) + Math.abs(d.value_change).toLocaleString())
.style(« display », (d) => (d.value_change ? null : « none »))
.attr(« x », (d) => (d.value_change >= 0 ? scaleX(d.value + d.value_change) : scaleX(d.value)))
.attr(« y », (d) => scaleY(d.name) + scaleY.bandwidth() / 2)
.attr(« fill », (d) => (d.value_change >= 0 ? « green » : « red »));
}

update_svg(« reset », svg_resultats);
if (analysedCityData.type !== « une-seule-liste ») {
update_svg(« voix-pres », svg_changement_de_vote);
update_svg(« abstention », svg_abstentionnistes);
}
}

function fetchAndRender(codeInsee) {
container.classList.add(« loading »);
fetchCity(codeInsee).then((data) => {
if (!data) {
container.querySelector(« .resultats »).innerHTML = mdm_html(`

Nous n’avons pas pu trouver les données pour cette commune.

`);
container.classList.remove(« loading »);
return;
}
renderResults(data);
container.classList.remove(« loading »);
});
}

container.querySelectorAll(« .interresting-cities »).forEach((element) => {
element.addEventListener(« click », (e) => {
e.preventDefault();
fetchAndRender(e.target.dataset.codeInsee);
container.querySelector(« .lmui-search__field »).value = e.target.textContent;
});
});

fetchAndRender(« 69123 »); // Lyon par défault