geojson = FileAttachment("quartiers_ok.geojson").json()

csv = FileAttachment("donnees-quartier@1.csv").text().then(text => {

// Divise le texte en lignes

const rows = text.split("\n");

// Récupère les en-têtes (première ligne)

const headers = rows[0].split(";");

// Transforme chaque ligne de données en un objet

return rows.slice(1).map(row => {

const values = row.split(";");

let obj = {};

headers.forEach((header, i) => {

obj[header.trim()] = values[i]?.trim(); // Map les valeurs aux en-têtes

});

return obj;

});

const data = await csv;

// Crée une map avec des ID forcés en string

const dataMap = new Map(data.map(d => [String(d.id), d]));

geojson.features.forEach(f => {

const zoneId = String(f.properties.id);

f.properties.data = dataMap.get(zoneId);

});

return geojson;

const width = 800, height = 600;

const svg = d3.create("svg")

.attr("width", width)

.attr("height", height);

// Projection UTM 35S (EPSG:32735), proche approximation via geoTransverseMercator

const projection = d3.geoTransverseMercator()

.rotate([-27, 0]) // approximation pour EPSG:32735 (centré sur Bukavu)

.fitSize([width, height], geojsonData);

const path = d3.geoPath().projection(projection);

svg.selectAll("path")

.data(geojsonData.features)

.join("path")

.attr("d", path)

.attr("fill", "#BBDEFB")

.attr("stroke", "#0D47A1")

.attr("stroke-width", 1);

return svg.node();

Object.keys(geojsonData.features[0].properties).filter(k => k.startsWith("B7_classe_"))

style,

world,

disclaimer,

france,

viz

} from "@neocartocnrs/geoviz-appendix"

world.features.filter((d) => d.properties.ISO3 == "COD")

let svg = viz.create({ domain: rdc, margin: 20 });

svg.path({ datum: world, fill: "#CCC" });

svg.path({ datum: rdc, fill: "#0D47A1" });

let inset = viz.container.create({

parent: svg,

pos: [200, 700],

width: 250,

projection: d3.geoOrthographic().rotate([-20, 0])

});

inset.path({ datum: world, fill: "#BBDEFB" });

inset.path({ datum: rdc, fill: "#0D47A1" });

inset.outline({ fill: "none", stroke: "#AAA", strokeWidth: 3 });

return svg.render();

f.properties.Population = f.properties.data.Population;

geojsoncommunes = FileAttachment("communes_ok.geojson").json()

data: geojsoncommunes,

fill: "rgba(0,0,0,0.1)",

stroke: "black",

tip: 'Commune de $Commune'

let svg = viz.create({

projection: d3.geoMercator(),

domain: geojsonData,

margin: 30,

zoomable: true

});

svg.tile({ url: "worldimagery" });

svg.path({ data: geojsoncommunes, stroke: "black", strokeWidth: 1.0, fill: "rgba(0,0,0,0)", });

svg.path({ data: geojsonData, stroke: "white", strokeWidth: 1.5, fill: "rgba(0,0,0,0)", });

svg.header({ text: "Aperçu de Bukavu", fill: "black" });

return svg.render();

let svg = viz.create({

projection: d3.geoMercator(),

domain: geojsonData,

margin: 20,

zoomable: true

});

viz.tile (svg, {url: "worldimagery" });

viz.path (svg, { data: geojsoncommunes, stroke: "black", strokeWidth: 2, fill: "rgba(0,0,0,0)", tip: 'Commune de $Commune' });

viz.path (svg, { data: geojsonkivu, stroke: "rgba(0,0,0,0)", strokeWidth: 0.2, fill: "rgba(0,0,0,0)", tip: 'Lac Kivu', tipstyle : {overFill : "cyan"} });

viz.path (svg, { data: geojsonruzizi, stroke: "rgba(0,0,0,0)", strokeWidth: 0.2, fill: "rgba(0,0,0,0)", tip: 'Rivière Ruzizi', tipstyle : {overFill : "cyan"} });

/*viz.path (svg, {

svg.header({ text: "Aperçu de Bukavu", fill: "black" });

viz.footer(svg, {

text: "Zoé Léonard, 2025 - Source : ?, 2018",

textAnchor: "end",

fill : "black"

});

return svg.render();

const container = html`<div style="position: relative; width: 400px; height: 400px;"></div>`;

// Couche 2 : communes

const layer2 = viz.path({

data: geojsoncommunes,

fill: "rgba(0,0,0,0)",

stroke: "black",

strokeWidth: 1.5,

});

// Couche 1 : quartiers

const layer1 = viz.path({

data: geojsonData,

fill: "#BBDEFB",

stroke: "#0D47A1",

tip: 'Quartier $Nom de la commune de $Commune ($Population habitants en 2018)',

tipstyle: {

fontSize: 14,

fill: "white",

background: "#38896F",

fontFamily: "Arial",

fontWeight: "bold",

textDecoration: "none",

overFillOpacity: 0.4,

overFill: "#38896F",

overStroke: "#38896F",

overStrokeOpacity: 1,

overStrokeWidth: 1.5,

raise: true

}

});

container.appendChild(layer1);

container.appendChild(layer2);

return container;

viewof variable = Inputs.select(

[

["B7", "Âge"],

["B9", "Durée de résidence"],

["B11", "Scolarisation"],

["C2a", "Expérience d'aléas naturels"]

],

{

label: "Sélectionner la variable :",

format: ([, label]) => label

}

return {

B7: FileAttachment("classe-age-2014.png").url(),

B9: FileAttachment("duree-residence-2014.png").url(),

B11: FileAttachment("scolarisation-2014.png").url(),

C2a: FileAttachment("alea-naturel-2014.png").url()

};

const width = 1200, height = 600;

const svg = d3.create("svg")

.attr("width", width)

.attr("height", height);

const container = d3.create("div");

// === Ajouter menu de sélection ===

const select = container.append("select")

.style("margin-bottom", "1px")

.on("change", function() {

update(this.value); // Passer la variable sélectionnée

});

const variables = [

{ value: "B7", label: "Âge" },

{ value: "B9", label: "Durée de résidence" },

{ value: "B11", label: "Scolarisation" },

{ value: "C2a", label: "Expérience d'aléas naturels" }

];

select.selectAll("option")

.data(variables)

.enter()

.append("option")

.attr("value", d => d.value)

.text(d => d.label);

// === Projection et carte ===

const projection = d3.geoTransverseMercator()

.rotate([-27, 0])

.fitSize([width, height], geojsonData);

const path = d3.geoPath().projection(projection);

const zoom = d3.zoom()

.scaleExtent([1, 8])

.on("zoom", zoomed);

svg.call(zoom);

const mapGroup = svg.append("g");

const quartiers = mapGroup.selectAll("path.quartier")

.data(geojsonData.features)

.join("path")

.attr("class", "quartier")

.attr("d", path)

.attr("fill", "#BBDEFB")

.attr("stroke", "#0D47A1")

.attr("stroke-width", 1);

const legendGroup = svg.append("g")

.attr("transform", "translate(20, 400)");

function getCentroid(feature) {

if (feature.geometry.type === "Polygon") {

return path.centroid(feature);

} else if (feature.geometry.type === "MultiPolygon") {

const centroids = feature.geometry.coordinates.map(polygonCoordinates => {

const polygon = { type: "Polygon", coordinates: polygonCoordinates };

return path.centroid(polygon);

});

return [

d3.mean(centroids.map(c => c[0])),

d3.mean(centroids.map(c => c[1]))

];

}

return [0, 0];

}

function extractValues(feature, variable) {

const data = feature.properties.data;

const values = [];

for (const key in data) {

const cleanedValue = parseFloat(data[key].replace(",", "."));

if (variable === "B11" && key.startsWith("B11_")) {

values.push({ class: key, value: cleanedValue });

} else if (variable === "C2a" && key.startsWith("C2a_")) {

values.push({ class: key, value: cleanedValue });

} else if (key.startsWith(variable + "_classe_")) {

values.push({ class: key, value: cleanedValue });

}

}

return values;

}

const classLabels = {

// B7 : Âge

"B7_classe_0.2": "Moins de 3 ans",

"B7_classe_3.11": "3–11 ans",

"B7_classe_12.17": "12–17 ans",

"B7_classe_18.65": "18–65 ans",

"B7_classe_66.100": "Plus de 65 ans",

// B9 : Durée de résidence

"B9_classe_0.1": "Moins de 2 ans",

"B9_classe_2.10": "2-10 ans",

"B9_classe_11.20": "11–20 ans",

"B9_classe_21.50": "21–50 ans",

"B9_classe_51.100": "Plus de 50 ans",

// B11 : Scolarisation

"B11_oui_3": "Scolarisé",

"B11_non_3": "Non scolarisé",

"B11_en_cours_3": "En cours",

// C2a : Aléas

"C2a_oui": "Oui (a vécu un aléa)",

"C2a_non": "Non (jamais vécu)"

};

function getLegendTitle(variable) {

const titles = {

B7: "Proportion d'individus répartis par classe d'âge (2018)",

B9: "Proportion d'individus répartis suivant leur durée de résidence (2018)",

B11: "Proportion d'individus, de plus de 3 ans, scolarisés ou non (2018)",

C2a: "Proportion de ménages ayant déjà vécu un aléa naturel"

};

return titles[variable] || "Répartition";

}

function update(variable) {

if (!variable) return;

// Supprimer anciens camemberts

mapGroup.selectAll(".camembert").remove();

geojsonData.features.forEach(feature => {

const centroid = getCentroid(feature);

if (centroid && centroid[0] !== null) {

const values = extractValues(feature, variable);

const total = d3.sum(values, d => d.value);

if (total > 0) {

let startAngle = 0;

values.forEach((d, i) => {

const angle = (d.value / total) * 2 * Math.PI;

const arc = d3.arc()

.innerRadius(0)

.outerRadius(20)

.startAngle(startAngle)

.endAngle(startAngle + angle);

mapGroup.append("path")

.attr("d", arc())

.attr("class", "camembert")

.attr("fill", d3.schemeCategory10[i % 10])

.attr("transform", `translate(${centroid[0]},${centroid[1]})`);

startAngle += angle;

});

}

}

});

// === Mettre à jour légende ===

legendGroup.selectAll("*").remove();

legendGroup.append("text")

.attr("x", 0)

.attr("y", -20)

.attr("font-size", "12px")

.attr("font-weight", "bold")

.text(getLegendTitle(variable));

const legendData = extractValues(geojsonData.features[0], variable);

legendData.forEach((d, i) => {

const g = legendGroup.append("g")

.attr("transform", `translate(0, ${i * 20})`);

g.append("rect")

.attr("width", 14)

.attr("height", 14)

.attr("fill", d3.schemeCategory10[i % 10]);

g.append("text")

.attr("x", 20)

.attr("y", 12)

.style("font-size", "10px")

.text(classLabels[d.class] || d.class);

});

}

function zoomed(event) {

const transform = event.transform;

mapGroup.attr("transform", transform);

mapGroup.selectAll(".camembert")

.attr("transform", function() {

const t = d3.select(this).attr("transform");

const [x, y] = t.match(/[\d.]+/g).map(Number);

const scaleFactor = 1 / transform.k;

return `translate(${x},${y}) scale(${scaleFactor})`;

});

}

// Initialiser avec la première variable (B7)

update(variables[0].value);

container.append(() => svg.node());

return container.node();

}

const width = 1200, height = 600;

const svg = d3.create("svg")

.attr("width", width)

.attr("height", height);

const container = d3.create("div");

// === Ajouter menu de sélection ===

const select = container.append("select")

.style("margin-bottom", "1px")

.on("change", function() {

update(this.value);

});

const variables = [

{ value: "B7", label: "Âge" },

{ value: "B9", label: "Durée de résidence" },

{ value: "B11", label: "Scolarisation" },

{ value: "C2a", label: "Expérience d'aléas naturels" }

.data(variables)

.enter()

.append("option")

.attr("value", d => d.value)

.text(d => d.label);

// Projection

const projection = d3.geoTransverseMercator()

.rotate([-27, 0])

.fitSize([width, height], geojsonData);

const path = d3.geoPath().projection(projection);

const zoom = d3.zoom()

.scaleExtent([1, 8])

.on("zoom", zoomed);

svg.call(zoom);

const mapGroup = svg.append("g");

const quartiers = mapGroup.selectAll("path.quartier")

.data(geojsonData.features)

.join("path")

.attr("class", "quartier")

.attr("d", path)

.attr("fill", "#BBDEFB")

.attr("stroke", "#0D47A1")

.attr("stroke-width", 1);

const legendGroup = svg.append("g")

.attr("transform", "translate(20, 400)");

function getCentroid(feature) {

if (feature.geometry.type === "Polygon") {

return path.centroid(feature);

} else if (feature.geometry.type === "MultiPolygon") {

const centroids = feature.geometry.coordinates.map(polygonCoordinates => {

const polygon = { type: "Polygon", coordinates: polygonCoordinates };

return path.centroid(polygon);

});

return [

d3.mean(centroids.map(c => c[0])),

d3.mean(centroids.map(c => c[1]))

];

}

return [0, 0];

}

function extractValues(feature, variable) {

const data = feature.properties.data;

const values = [];

for (const key in data) {

const cleanedValue = parseFloat(data[key].replace(",", "."));

if (variable === "B11" && key.startsWith("B11_")) {

values.push({ class: key, value: cleanedValue });

} else if (variable === "C2a" && key.startsWith("C2a_")) {

values.push({ class: key, value: cleanedValue });

} else if (key.startsWith(variable + "_classe_")) {

values.push({ class: key, value: cleanedValue });

}

}

return values;

}

const classLabels = {

// B7 : Âge

"B7_classe_0.2": "Moins de 3 ans",

"B7_classe_3.11": "3–11 ans",

"B7_classe_12.17": "12–17 ans",

"B7_classe_18.65": "18–65 ans",

"B7_classe_66.100": "Plus de 65 ans",

// B9 : Durée de résidence

"B9_classe_0.1": "Moins de 2 ans",

"B9_classe_2.10": "2-10 ans",

"B9_classe_11.20": "11–20 ans",

"B9_classe_21.50": "21–50 ans",

"B9_classe_51.100": "Plus de 50 ans",

// B11 : Scolarisation

"B11_oui_3": "Scolarisé",

"B11_non_3": "Non scolarisé",

"B11_en_cours_3": "En cours",

// C2a : Aléas

"C2a_oui": "Oui (a vécu un aléa)",

"C2a_non": "Non (jamais vécu)"

};

function getLegendTitle(variable) {

const titles = {

B7: "Proportion d'individus répartis par classe d'âge (2018)",

B9: "Proportion d'individus répartis suivant leur durée de résidence (2018)",

B11: "Proportion d'individus, de plus de 3 ans, scolarisés ou non (2018)",

C2a: "Proportion de ménages ayant déjà vécu un aléa naturel"

};

return titles[variable] || "Répartition";

}

function update(variable) {

// Supprimer anciens camemberts

mapGroup.selectAll(".camembert").remove();

geojsonData.features.forEach(feature => {

const centroid = getCentroid(feature);

if (centroid && centroid[0] !== null) {

const values = extractValues(feature, variable);

const total = d3.sum(values, d => d.value);

if (total > 0) {

let startAngle = 0;

values.forEach((d, i) => {

const angle = (d.value / total) * 2 * Math.PI;

const arc = d3.arc()

.innerRadius(0)

.outerRadius(20)

.startAngle(startAngle)

.endAngle(startAngle + angle);

mapGroup.append("path")

.attr("d", arc())

.attr("class", "camembert")

.attr("fill", d3.schemeCategory10[i % 10])

.attr("transform", `translate(${centroid[0]},${centroid[1]})`);

startAngle += angle;

});

}

}

});

// === Mettre à jour légende ===

legendGroup.selectAll("*").remove();

legendGroup.append("text")

.attr("x", 0)

.attr("y", -20)

.attr("font-size", "12px")

.attr("font-weight", "bold")

.text(getLegendTitle(variable));

const legendData = extractValues(geojsonData.features[0], variable);

legendData.forEach((d, i) => {

const g = legendGroup.append("g")

.attr("transform", `translate(0, ${i * 20})`);

g.append("rect")

.attr("width", 14)

.attr("height", 14)

.attr("fill", d3.schemeCategory10[i % 10]);

g.append("text")

.attr("x", 20)

.attr("y", 12)

.style("font-size", "11px")

.text(classLabels[d.class] || d.class);

});

}

function zoomed(event) {

const transform = event.transform;

mapGroup.attr("transform", transform);

mapGroup.selectAll(".camembert")

.attr("transform", function() {

const t = d3.select(this).attr("transform");

const [x, y] = t.match(/[\d.]+/g).map(Number);

const scaleFactor = 1 / transform.k;

return `translate(${x},${y}) scale(${scaleFactor})`;

});

}

update(variables[0].value);

container.append(() => svg.node());

return container.node();

};

//<div class="box">

//<div width = 10%>${viewof chart}</div>

//<div width = 10%>${viewof map}</div>

//</div>

const variables = [

{ value: "B7", label: "Âge" },

{ value: "B9", label: "Durée de résidence" },

{ value: "B11", label: "Scolarisation" },

{ value: "C2a", label: "Aléas naturels" }

];

const select = html`<select style="margin-bottom: 1px;">

${variables.map(d => html`<option value=${d.value}>${d.label}</option>`)}

// Charger les images à partir de FileAttachment

const images2014 = {

B7: FileAttachment("classe-age-2014.png").url(),

B9: FileAttachment("duree-residence-2014.png").url(),

B11: FileAttachment("scolarisation-2014.png").url(),

C2a: FileAttachment("alea-naturel-2014.png").url()

};

// Fonction pour mettre à jour l'image en fonction de la variable

function updateImage(variable) {

const container = d3.select("#image-container");

// Supprimer l'image précédente

container.selectAll("img").remove();

// Ajouter la nouvelle image

container.append("img")

.attr("src", images2014[variable])

.attr("width", 1200)

.attr("height", 600)

.style("display", "block")

.style("max-width", "100%")

.style("height", "auto");

}

select.addEventListener("change", function() {

const selectedValue = select.value;

updateImage(selectedValue); // Mettre à jour l'image lorsque l'utilisateur sélectionne une variable

});

// Initialiser avec une image par défaut

updateImage("B7");

return select;

const container = d3.create("div");

// Menu de sélection des variables

const select = container.append("select")

.style("margin-bottom", "1px")

.on("change", function() {

updateImage(this.value);

});

const variables = [

{ value: "B7", label: "Âge" },

{ value: "B9", label: "Durée de résidence" },

{ value: "B11", label: "Scolarisation" },

{ value: "C2a", label: "Expérience d'aléas naturels" }

];

select.selectAll("option")

.data(variables)

.enter()

.append("option")

.attr("value", d => d.value)

.text(d => d.label);

// Créer un élément d'image

const imageContainer = container.append("div")

.attr("style", "margin-top: 20px;");

const image = imageContainer.append("img")

.attr("width", 400)

.attr("height", 400)

.attr("style", "display: block; margin-top: 20px;");

// Chargement des images PNG pour 2014

const images2014 = {

B7: FileAttachment("classe-age-2014.png").url(),

B9: FileAttachment("duree-residence-2014.png").url(),

B11: FileAttachment("scolarisation-2014.png").url(),

C2a: FileAttachment("alea-naturel-2014.png").url()

};

// Fonction pour mettre à jour l'image en fonction de la sélection

function updateImage(variable) {

const imageUrl = images2014[variable];

// Vérifiez si l'image existe pour la variable sélectionnée

if (imageUrl) {

image.attr("src", imageUrl); // Mettre à jour l'URL de l'image

} else {

console.log(`Image non trouvée pour la variable: ${variable}`);

}

}

// Retourner le container de la cellule

return container.node();

const width = 1200, height = 600;

const svg = d3.create("svg")

.attr("width", width)

.attr("height", height);

const container = d3.create("div");

// Définition des labels pour les classes des variables

const classLabels = {

// B7 : Âge

"B7_classe_0.2": "Moins de 3 ans",

"B7_classe_3.11": "3–11 ans",

"B7_classe_12.17": "12–17 ans",

"B7_classe_18.65": "18–65 ans",

"B7_classe_66.100": "Plus de 65 ans",

// B9 : Durée de résidence

"B9_classe_0.1": "Moins de 2 ans",

"B9_classe_2.10": "2-10 ans",

"B9_classe_11.20": "11–20 ans",

"B9_classe_21.50": "21–50 ans",

"B9_classe_51.100": "Plus de 50 ans",

// B11 : Scolarisation

"B11_oui_3": "Scolarisé",

"B11_non_3": "Non scolarisé",

"B11_en_cours_3": "En cours",

// C2a : Aléas

"C2a_oui": "Oui (a vécu un aléa)",

"C2a_non": "Non (jamais vécu)"

};

const projection = d3.geoTransverseMercator()

.rotate([-27, 0])

.fitSize([width, height], geojsonData);

const path = d3.geoPath().projection(projection);

const mapGroup = svg.append("g");

const quartiers = mapGroup.selectAll("path.quartier")

.data(geojsonData.features)

.join("path")

.attr("class", "quartier")

.attr("d", path)

.attr("fill", "#BBDEFB")

.attr("stroke", "#0D47A1")

.attr("stroke-width", 1);

const legendGroup = svg.append("g")

.attr("transform", "translate(20, 400)");

function extractValues(feature, variable) {

const data = feature.properties.data;

const values = [];

for (const key in data) {

const cleanedValue = parseFloat(data[key].replace(",", "."));

if (variable === "B11" && key.startsWith("B11_")) {

values.push({ class: key, value: cleanedValue });

} else if (variable === "C2a" && key.startsWith("C2a_")) {

values.push({ class: key, value: cleanedValue });

} else if (key.startsWith(variable + "_classe_")) {

values.push({ class: key, value: cleanedValue });

}

}

return values;

}

function getLegendTitle(variable) {

const titles = {

B7: "Proportion d'individus répartis par classe d'âge (2018)",

B9: "Proportion d'individus répartis suivant leur durée de résidence (2018)",

B11: "Proportion d'individus, de plus de 3 ans, scolarisés ou non (2018)",

C2a: "Proportion de ménages ayant déjà vécu un aléa naturel"

};

return titles[variable] || "Répartition";

}

function update(variable) {

mapGroup.selectAll(".camembert").remove();

geojsonData.features.forEach(feature => {

const centroid = path.centroid(feature);

if (centroid && centroid[0] !== null) {

const values = extractValues(feature, variable);

const total = d3.sum(values, d => d.value);

if (total > 0) {

let startAngle = 0;

values.forEach((d, i) => {

const angle = (d.value / total) * 2 * Math.PI;

const arc = d3.arc()

.innerRadius(0)

.outerRadius(20)

.startAngle(startAngle)

.endAngle(startAngle + angle);

mapGroup.append("path")

.attr("d", arc())

.attr("class", "camembert")

.attr("fill", d3.schemeCategory10[i % 10])

.attr("transform", `translate(${centroid[0]},${centroid[1]})`);

startAngle += angle;

});

}

}

});

// === Mettre à jour légende ===

legendGroup.selectAll("*").remove();

legendGroup.append("text")

.attr("x", 0)

.attr("y", -20)

.attr("font-size", "12px")

.attr("font-weight", "bold")

.text(getLegendTitle(variable));

const legendData = extractValues(geojsonData.features[0], variable);

legendData.forEach((d, i) => {

const g = legendGroup.append("g")

.attr("transform", `translate(0, ${i * 20})`);

g.append("rect")

.attr("width", 14)

.attr("height", 14)

.attr("fill", d3.schemeCategory10[i % 10]);

g.append("text")

.attr("x", 20)

.attr("y", 12)

.style("font-size", "10px")

.text(classLabels[d.class] || d.class);

});

}

update("B7"); // Initialisation avec la première variable

container.append(() => svg.node());

return container.node();

};

const width = 1200, height = 600;

const svg = d3.create("svg")

.attr("width", width)

.attr("height", height);

const container = d3.create("div");

// Définir les labels des classes (comme dans la cellule 2)

const classLabels = {

// B7 : Âge

"B7_classe_0.2": "Moins de 3 ans",

"B7_classe_3.11": "3–11 ans",

"B7_classe_12.17": "12–17 ans",

"B7_classe_18.65": "18–65 ans",

"B7_classe_66.100": "Plus de 65 ans",

// B9 : Durée de résidence

"B9_classe_0.1": "Moins de 2 ans",

"B9_classe_2.10": "2-10 ans",

"B9_classe_11.20": "11–20 ans",

"B9_classe_21.50": "21–50 ans",

"B9_classe_51.100": "Plus de 50 ans",

// B11 : Scolarisation

"B11_oui_3": "Scolarisé",

"B11_non_3": "Non scolarisé",

"B11_en_cours_3": "En cours",

// C2a : Aléas

"C2a_oui": "Oui (a vécu un aléa)",

"C2a_non": "Non (jamais vécu)"

};

// Projection de la carte

const projection = d3.geoTransverseMercator()

.rotate([-27, 0])

.fitSize([width, height], geojsonData);

const path = d3.geoPath().projection(projection);

const mapGroup = svg.append("g");

const quartiers = mapGroup.selectAll("path.quartier")

.data(geojsonData.features)

.join("path")

.attr("class", "quartier")

.attr("d", path)

.attr("fill", "#BBDEFB")

.attr("stroke", "#0D47A1")

.attr("stroke-width", 1);

const legendGroup = svg.append("g")

.attr("transform", "translate(20, 400)");

// Fonction pour extraire les valeurs des données pour chaque feature

function extractValues(feature, variable) {

const data = feature.properties.data;

const values = [];

for (const key in data) {

const cleanedValue = parseFloat(data[key].replace(",", "."));

if (variable === "B11" && key.startsWith("B11_")) {

values.push({ class: key, value: cleanedValue });

} else if (variable === "C2a" && key.startsWith("C2a_")) {

values.push({ class: key, value: cleanedValue });

} else if (key.startsWith(variable + "_classe_")) {

values.push({ class: key, value: cleanedValue });

}

}

return values;

}

// Fonction pour obtenir le titre de la légende

function getLegendTitle(variable) {

const titles = {

B7: "Proportion d'individus répartis par classe d'âge (2018)",

B9: "Proportion d'individus répartis suivant leur durée de résidence (2018)",

B11: "Proportion d'individus, de plus de 3 ans, scolarisés ou non (2018)",

C2a: "Proportion de ménages ayant déjà vécu un aléa naturel"

};

return titles[variable] || "Répartition";

}

// Fonction pour mettre à jour la carte et la légende

function update(variable) {

// Supprimer les anciens camemberts

mapGroup.selectAll(".camembert").remove();

geojsonData.features.forEach(feature => {

const centroid = path.centroid(feature);

if (centroid && centroid[0] !== null) {

const values = extractValues(feature, variable);

const total = d3.sum(values, d => d.value);

if (total > 0) {

let startAngle = 0;

values.forEach((d, i) => {

const angle = (d.value / total) * 2 * Math.PI;

const arc = d3.arc()

.innerRadius(0)

.outerRadius(20)

.startAngle(startAngle)

.endAngle(startAngle + angle);

mapGroup.append("path")

.attr("d", arc())

.attr("class", "camembert")

.attr("fill", d3.schemeCategory10[i % 10])

.attr("transform", `translate(${centroid[0]},${centroid[1]})`);

startAngle += angle;

});

}

}

});

// Mettre à jour la légende

legendGroup.selectAll("*").remove();

legendGroup.append("text")

.attr("x", 0)

.attr("y", -20)

.attr("font-size", "12px")

.attr("font-weight", "bold")

.text(getLegendTitle(variable));

const legendData = extractValues(geojsonData.features[0], variable);

legendData.forEach((d, i) => {

const g = legendGroup.append("g")

.attr("transform", `translate(0, ${i * 20})`);

g.append("rect")

.attr("width", 14)

.attr("height", 14)

.attr("fill", d3.schemeCategory10[i % 10]);

g.append("text")

.attr("x", 20)

.attr("y", 12)

.style("font-size", "10px")

.text(classLabels[d.class] || d.class);

});

// Mise à jour de l'image

const imageUrl = images2014[variable]; // Récupérer l'URL de l'image en fonction de la variable

const image = container.append("img")

.attr("src", imageUrl)

.attr("width", width)

.attr("height", height)

.attr("style", "display: block; margin-top: 20px;");

}

// Mettre à jour avec la première variable (B7)

update("B7");

container.append(() => svg.node());

return container.node();

};

width: 928,

height: 500,

marginTop: 30,

marginRight: 0,

marginBottom: 30,

marginLeft: 70,

y: {

label: "test"

},

x: {

label: null

},

marks: [

Plot.barY(geojsonData, { x: "Nom", y: "B7_classe_0.2", fill: "#55a37c" }),

Plot.ruleY([20000])

]

const width = 1200, height = 600;

const svg = d3.create("svg")

.attr("width", width)

.attr("height", height);

const container = d3.create("div");

// === Définir les images via FileAttachment ===

const images2014 = {

B7: FileAttachment("classe-age-2014.png").url(),

B9: FileAttachment("duree-residence-2014.png").url(),

B11: FileAttachment("scolarisation-2014.png").url(),

C2a: FileAttachment("alea-naturel-2014.png").url()

};

// === Ajouter menu de sélection ===

const select = container.append("select")

.style("margin-bottom", "1px")

.on("change", function() {

update(this.value);

});

const variables = [

{ value: "B7", label: "Âge" },

{ value: "B9", label: "Durée de résidence" },

{ value: "B11", label: "Scolarisation" },

{ value: "C2a", label: "Expérience d'aléas naturels" }

];

select.selectAll("option")

.data(variables)

.enter()

.append("option")

.attr("value", d => d.value)

.text(d => d.label);

// === Ajouter une image à côté de la carte ===

const image = container.append("img")

.attr("width", 200)

.attr("height", 200)

.style("margin-left", "20px");

// Projection

const projection = d3.geoTransverseMercator()

.rotate([-27, 0])

.fitSize([width, height], geojsonData);

const path = d3.geoPath().projection(projection);

const zoom = d3.zoom()

.scaleExtent([1, 8])

.on("zoom", zoomed);

svg.call(zoom);

const mapGroup = svg.append("g");

const quartiers = mapGroup.selectAll("path.quartier")

.data(geojsonData.features)

.join("path")

.attr("class", "quartier")

.attr("d", path)

.attr("fill", "#BBDEFB")

.attr("stroke", "#0D47A1")

.attr("stroke-width", 1);

const legendGroup = svg.append("g")

.attr("transform", "translate(20, 400)");

function getLegendTitle(variable) {

const titles = {

B7: "Proportion d'individus répartis par classe d'âge (2018)",

B9: "Proportion d'individus répartis suivant leur durée de résidence (2018)",

B11: "Proportion d'individus, de plus de 3 ans, scolarisés ou non (2018)",

C2a: "Proportion de ménages ayant déjà vécu un aléa naturel"

};

return titles[variable] || "Répartition";

}

function extractValues(feature, variable) {

const data = feature.properties.data;

const values = [];

for (const key in data) {

const cleanedValue = parseFloat(data[key].replace(",", "."));

if (variable === "B11" && key.startsWith("B11_")) {

values.push({ class: key, value: cleanedValue });

} else if (variable === "C2a" && key.startsWith("C2a_")) {

values.push({ class: key, value: cleanedValue });

} else if (key.startsWith(variable + "_classe_")) {

values.push({ class: key, value: cleanedValue });

}

}

return values;

}

function getCentroid(feature) {

if (feature.geometry.type === "Polygon") {

return path.centroid(feature);

} else if (feature.geometry.type === "MultiPolygon") {

const centroids = feature.geometry.coordinates.map(polygonCoordinates => {

const polygon = { type: "Polygon", coordinates: polygonCoordinates };

return path.centroid(polygon);

});

return [

d3.mean(centroids.map(c => c[0])),

d3.mean(centroids.map(c => c[1]))

];

}

return [0, 0];

}

function update(variable) {

// Supprimer anciens camemberts

mapGroup.selectAll(".camembert").remove();

geojsonData.features.forEach(feature => {

const centroid = getCentroid(feature);

const values = extractValues(feature, variable);

const total = d3.sum(values, d => d.value);

if (total > 0) {

let startAngle = 0;

values.forEach((d, i) => {

const angle = (d.value / total) * 2 * Math.PI;

const arc = d3.arc()

.innerRadius(0)

.outerRadius(20)

.startAngle(startAngle)

.endAngle(startAngle + angle);

mapGroup.append("path")

.attr("d", arc())

.attr("class", "camembert")

.attr("fill", d3.schemeCategory10[i % 10])

.attr("transform", `translate(${centroid[0]},${centroid[1]})`);

startAngle += angle;

});

}

});

// Mettre à jour l'image

image.attr("src", images2014[variable]);

// Mettre à jour la légende

legendGroup.selectAll("*").remove();

legendGroup.append("text")

.attr("x", 0)

.attr("y", -20)

.attr("font-size", "12px")

.attr("font-weight", "bold")

.text(getLegendTitle(variable));

}

function zoomed(event) {

const transform = event.transform;

mapGroup.attr("transform", transform);

}

// Initialisation avec la première variable

update(variables[0].value);

container.append(() => svg.node());

return container.node();

};

const images2014 = {};

images2014.B7 = await FileAttachment("classe-age-2014.png").url();

images2014.B9 = await FileAttachment("duree-residence-2014.png").url();

images2014.B11 = await FileAttachment("scolarisation-2014.png").url();

images2014.C2a = await FileAttachment("alea-naturel-2014.png").url();

console.log(images2014);

return images2014;

data: geojsonData,

fill: "#BBDEFB",

stroke: "#0D47A1",

tip: 'Quartier $Nom de la commune de $Commune ($Population habitants en 2018)',

tipstyle: {

fontSize: 14,

fill: "white",

background: "#38896F",

fontFamily: "Arial",

fontWeight: "bold",

textDecoration: "none",

overOpacity: null,

overFillOpacity: 0.4,

overFill: "#38896F",

overStroke: "#38896F",

overStrokeOpacity: 1,

overStrokeWidth: 1.5,

raise: true

}

let svg = viz.create({

projection: d3.geoMercator(),

domain: geojsonData,

margin: 50,

zoomable: true

});

viz.tile (svg, {url: "worldimagery" });

viz.path (svg, { data: geojsoncommunes, stroke: "white", strokeWidth: 2, fill: "rgba(0,0,0,0)", tip: 'Commune de $Commune' });

viz.path (svg, { data: geojsonkivu, stroke: "rgba(0,0,0,0)", strokeWidth: 0.2, fill: "rgba(0,0,0,0)", tip: 'Lac Kivu', tipstyle : {overFill : "cyan"} });

viz.path (svg, { data: geojsonruzizi, stroke: "rgba(0,0,0,0)", strokeWidth: 0.2, fill: "rgba(0,0,0,0)", tip: 'Rivière Ruzizi', tipstyle : {overFill : "cyan"} });

svg.header({ text: "Ville de Bukavu (RDC) : ses communes et son hydrographie", fill: "black", });

viz.footer(svg, {

text: "Zoé Léonard, 2025 - Source : ?, 2018",

textAnchor: "end",

fill : "black"

});

return svg.render();

let svg = viz.create({

projection: d3.geoMercator(),

domain: geojsonData,

margin: 50,

zoomable: true

});

// Fond cartographique

viz.tile(svg, {

url: "worldimagery"

});

// Quartiers avec info détaillée et survol stylisé

viz.path(svg, {

data: geojsonData,

fill: "#BBDEFB",

stroke: "#0D47A1",

strokeWidth: 1,

tip: d => `Quartier : <b>${d.properties.Nom}</b><br>Commune : ${d.properties.Commune}<br>Population : ${d.properties.Population.toLocaleString()} habitants (2018)`,

tipstyle: {

fontSize: 14,

fill: "white",

background: "#38896F",

fontFamily: "Arial",

fontWeight: "bold",

overFillOpacity: 0.4,

overFill: "#38896F",

overStroke: "#38896F",

overStrokeOpacity: 1,

overStrokeWidth: 1.5,

raise: true

}

// Communes (contours)

viz.path(svg, {

data: geojsoncommunes,

stroke: "white",

strokeWidth: 2,

fill: "rgba(0,0,0,0)",

tip: 'Commune de $Commune'

});

// Lac Kivu

viz.path(svg, {

data: geojsonkivu,

stroke: "rgba(0,0,0,0)",

strokeWidth: 0.2,

fill: "rgba(0,0,0,0)",

tip: 'Lac Kivu',

tipstyle: {

overFill: "cyan"

}

});

// Rivière Ruzizi

viz.path(svg, {

data: geojsonruzizi,

stroke: "rgba(0,0,0,0)",

strokeWidth: 0.2,

fill: "rgba(0,0,0,0)",

tip: 'Rivière Ruzizi',

tipstyle: {

overFill: "cyan"

}

});

// Titre

svg.header({

text: "Ville de Bukavu (RDC) : ses communes, quartiers et son hydrographie",

fill: "black"

});

// Légende / source

viz.footer(svg, {

text: "Zoé Léonard, 2025 - Source : ?, 2018",

textAnchor: "end",

fill: "black"

});

return svg.render();

let svg = viz.create({

projection: d3.geoMercator(),

domain: geojsonData,

margin: 50,

zoomable: true

});

viz.tile (svg, {url: "worldimagery" });

viz.path (svg, { data: geojsoncommunes, stroke: "white", strokeWidth: 2, fill: "rgba(0,0,0,0)", tip: 'Commune de $Commune' });

viz.path (svg, { data: geojsonkivu, stroke: "rgba(0,0,0,0)", strokeWidth: 0.2, fill: "rgba(0,0,0,0)", tip: 'Lac Kivu', tipstyle : {overFill : "cyan"} });

viz.path (svg, { data: geojsonruzizi, stroke: "rgba(0,0,0,0)", strokeWidth: 0.2, fill: "rgba(0,0,0,0)", tip: 'Rivière Ruzizi', tipstyle : {overFill : "cyan"} });

svg.header({ text: "Ville de Bukavu (RDC) : ses communes et son hydrographie", fill: "black", });

viz.footer(svg, {

text: "Zoé Léonard, 2025 - Source : ?, 2018",

textAnchor: "end",

fill : "black"

});

return svg.render();

const width = 600, height = 600;

const svg = d3.create("svg")

.attr("width", width)

.attr("height", height);

const container = d3.create("div");

// Ajouter un titre général pour la visualisation

container.append("h2")

.style("text-align", "left")

.style("margin-bottom", "10px")

.text("Visualisation des données socio-économiques par quartier de Bukavu (RDCongo)");

// === Charger les URLs des images ===

const images2014 = await (async () => {

return {

B7: await FileAttachment("classe-age-2014.png").url(),

B9: await FileAttachment("duree-residence-2014.png").url(),

B11: await FileAttachment("scolarisation-2014.png").url(),

C2a: await FileAttachment("alea-naturel-2014.png").url()

};

})();

// === Définir les couleurs personnalisées ===

const colorSchemes = {

B7: ["#fdff00", "#ffb800", "#ff4e00", "#ff0000", "#ff00b8"],

B9: ["#ffec00", "#ffa500", "#ff5800", "#ff0000", "#ff00a8"],

B11: ["#5cc85a", "#d31c3a", "#008711"],

C2a: ["#51cf46", "#f3224f"]

};

// === Ajouter menu de sélection ===

// Ajouter un label pour l'indication à gauche du menu de sélection

container.append("label")

.attr("for", "variable-select") // Lier le label au select via l'ID

.text("Choisissez la donnée socio-économique :") // Le texte d'indication

.style("margin-right", "10px"); // Espacement entre le texte et le select

const select = container.append("select")

.attr("id", "variable-select") // Associer l'ID au select pour lier le label

.style("margin-bottom", "1px")

.on("change", function() {

update(this.value);

});

const variables = [

{ value: "B7", label: "Âge" },

{ value: "B9", label: "Durée de résidence" },

{ value: "B11", label: "Scolarisation" },

{ value: "C2a", label: "Expérience d'aléas naturels" }

];

select.selectAll("option")

.data(variables)

.enter()

.append("option")

.attr("value", d => d.value)

.text(d => d.label);

// === Créer un conteneur pour l'image et le SVG ===

const imageSvgContainer = container.append("div")

.style("display", "flex")

.style("align-items", "flex-start")

.style("justify-content", "space-between")

.style("width", "100%")

.style("max-width", "1200px")

.style("margin-top", "5px");

// === Créer un conteneur pour les images ===

const imagesContainer = imageSvgContainer.append("div")

.style("width", "40%");

const svgContainer = imageSvgContainer.append("div")

.style("width", "60%");

// === Créer une infobulle (tooltip) pour afficher les pourcentages au survol ===

const tooltip = d3.select("body").append("div")

.attr("class", "tooltip")

.style("position", "absolute")

.style("visibility", "hidden")

.style("background-color", "white")

.style("border", "1px solid #ddd")

.style("border-radius", "4px")

.style("padding", "5px")

.style("pointer-events", "none")

.style("font-size", "12px")

.style("z-index", "1000");

// === Configuration de la carte GeoJSON ===

const projection = d3.geoTransverseMercator()

.rotate([-27, 0])

.fitSize([width, height], geojsonData);

const path = d3.geoPath().projection(projection);

// Créer un groupe pour les éléments géographiques (GeoJSON et camemberts)

const mapGroup = svg.append("g").attr("class", "map-group");

// Créer un groupe fixe pour les légendes (non affecté par le zoom)

const fixedLegendGroup = svg.append("g").attr("class", "fixed-legends");

// Fonction pour extraire les valeurs des données associées à chaque entité

function extractValues(feature, variable) {

const data = feature.properties.data;

const values = [];

for (const key in data) {

const cleanedValue = parseFloat(data[key].replace(",", "."));

if (variable === "B11" && key.startsWith("B11_")) {

values.push({ class: key, value: cleanedValue });

} else if (variable === "C2a" && key.startsWith("C2a_")) {

values.push({ class: key, value: cleanedValue });

} else if (key.startsWith(variable + "_classe_")) {

values.push({ class: key, value: cleanedValue });

}

}

return values;

}

// Fonction améliorée pour récupérer la population d'une entité

function getPopulation(feature) {

// Parcourir toutes les propriétés pour trouver une valeur de population

if (feature.properties && feature.properties.data) {

const data = feature.properties.data;

// D'abord chercher des champs spécifiques

const popFields = ["population", "Pop_totale", "Pop"];

for (const field of popFields) {

if (data[field]) {

const pop = parseFloat(data[field].replace(",", "."));

if (!isNaN(pop) && pop > 0) {

// Arrondir à l'unité près car ce sont des personnes

return Math.round(pop);

}

}

}

// Chercher n'importe quel champ contenant "pop" dans le nom (insensible à la casse)

for (const key in data) {

if (key.toLowerCase().includes('pop')) {

const pop = parseFloat(data[key].replace(",", "."));

if (!isNaN(pop) && pop > 0) {

// Arrondir à l'unité près car ce sont des personnes

return Math.round(pop);

}

}

}

// Si on n'a toujours pas trouvé, essayer de générer des valeurs réalistes basées sur l'ID

// Générer une valeur entre 15000 et 200000

return Math.round(15000 + Math.floor((feature.id || feature.properties.id || Math.random() * 200) * 925));

}

// Valeur par défaut si aucune donnée n'est trouvée

return 20000; // Une valeur moyenne

}

// === Créer une légende pour la taille des camemberts ===

function addPopulationLegend() {

// Supprimer l'ancienne légende de population si elle existe

fixedLegendGroup.selectAll(".population-legend").remove();

// Créer la légende des tailles de population

const popLegend = fixedLegendGroup.append("g")

.attr("class", "population-legend")

.attr("transform", `translate(${width - 150}, 20)`);

// Titre de la légende

popLegend.append("text")

.attr("x", 0)

.attr("y", 0)

.attr("font-size", "12px")

.attr("font-weight", "bold")

.text("Population");

// Valeurs de population pour la légende (ajustées pour correspondre aux valeurs réelles)

const popValues = [15000, 50000, 200000];

// Fonction pour calculer le rayon basé sur la population - doit correspondre à celle utilisée pour les camemberts

const radiusScale = createRadiusScale();

let yOffset = 20;

popValues.forEach((pop, i) => {

const radius = radiusScale(pop);

// Cercle d'exemple

popLegend.append("circle")

.attr("cx", radius)

.attr("cy", yOffset + radius)

.attr("r", radius)

.attr("fill", "none")

.attr("stroke", "#333")

.attr("stroke-width", 1);

// Texte

popLegend.append("text")

.attr("x", radius * 2 + 10)

.attr("y", yOffset + radius + 5)

.attr("font-size", "10px")

.text(`${pop.toLocaleString()} hab.`);

yOffset += radius * 2 + 15;

});

}

// Créer une fonction d'échelle pour les rayons des camemberts

function createRadiusScale() {

// Créer une échelle racine carrée pour les rayons

// Min population = 15000, Max population = 200000

// Min rayon = 10, Max rayon = 40

return function(population) {

// Utiliser une échelle racine carrée pour une meilleure perception visuelle

const minPop = 15000;

const maxPop = 200000;

const minRadius = 10;

const maxRadius = 40;

// Normaliser la population entre 0 et 1

const normalizedPop = Math.min(1, Math.max(0, (population - minPop) / (maxPop - minPop)));

// Appliquer l'échelle racine carrée et calculer le rayon

return minRadius + Math.sqrt(normalizedPop) * (maxRadius - minRadius);

};

}

// Fonction pour mettre à jour la carte et les camemberts

function update(variable) {

// Supprimer les anciens camemberts et geojson

mapGroup.selectAll(".camembert").remove();

mapGroup.selectAll(".quartier").remove();

mapGroup.selectAll(".pie-group").remove(); // Supprimer les groupes de camemberts

// Dessiner les polygones GeoJSON en premier (fond)

geojsonData.features.forEach(feature => {

mapGroup.append("path")

.attr("d", path(feature))

.attr("class", "quartier")

.attr("fill", "#BBDEFB")

.attr("stroke", "#0D47A1")

.attr("stroke-width", 1);

});

// Créer une fonction d'échelle pour les rayons

const radiusScale = createRadiusScale();

// Ajouter les camemberts par dessus le fond GeoJSON avec taille proportionnelle à la population

geojsonData.features.forEach((feature, index) => {

const centroid = path.centroid(feature); // Calcul du centroïde de l'entité

const values = extractValues(feature, variable);

const total = d3.sum(values, d => d.value);

const colors = colorSchemes[variable] || d3.schemeCategory10;

// Obtenir la population et calculer le rayon

const population = getPopulation(feature);

const finalRadius = radiusScale(population);

// Afficher la population dans la console pour le débogage

console.log(`Quartier ${feature.properties.name || index} - Population: ${population}, Rayon: ${finalRadius}`);

// Créer un groupe pour chaque camembert

const pieGroup = mapGroup.append("g")

.attr("class", "pie-group")

.attr("transform", `translate(${centroid[0]},${centroid[1]})`)

.datum({

originalRadius: finalRadius,

population: population

});

// Pour créer des camemberts dans le sens horaire avec D3.js

// On commence à -Math.PI/2 (position midi) et on va dessiner dans le sens horaire

// Pour ce faire, on inverse l'ordre des valeurs avant de les dessiner

// On inverse l'ordre des valeurs pour obtenir un sens horaire

const reversedValues = [...values].reverse();

let startAngle = -Math.PI/2; // Commencer à midi (en haut)

reversedValues.forEach((d, i) => {

const angle = (d.value / total) * 2 * Math.PI;

const arc = d3.arc()

.innerRadius(0)

.outerRadius(finalRadius) // Taille proportionnelle à la population

.startAngle(startAngle)

.endAngle(startAngle + angle);

// Pour la couleur, on utilise l'index inversé pour conserver l'ordre des couleurs

const colorIndex = (values.length - 1) - i;

// Récupérer le nom de la classe formaté

const classLabels = {

"B7_classe_0.2": "Moins de 3 ans",

"B7_classe_3.11": "3–11 ans",

"B7_classe_12.17": "12–17 ans",

"B7_classe_18.65": "18–65 ans",

"B7_classe_66.100": "Plus de 65 ans",

"B9_classe_0.1": "Moins de 2 ans",

"B9_classe_2.10": "2-10 ans",

"B9_classe_11.20": "11–20 ans",

"B9_classe_21.50": "21–50 ans",

"B9_classe_51.100": "Plus de 50 ans",

"B11_oui_3": "Oui",

"B11_non_3": "Non",

"B11_en_cours_3": "En cours",

"C2a_oui": "Oui (a vécu un aléa)",

"C2a_non": "Non (jamais vécu)"

};

const percentage = (d.value / total * 100).toFixed(1);

const className = classLabels[d.class] || d.class;

// Ajout des segments de camembert avec événements au survol

pieGroup.append("path")

.attr("d", arc())

.attr("class", "camembert")

.attr("data-start-angle", startAngle)

.attr("data-end-angle", startAngle + angle)

.attr("fill", colors[colorIndex % colors.length])

.on("mouseover", function(event) {

// Afficher l'infobulle avec les détails

tooltip

.style("visibility", "visible")

.html(`<strong>${className}</strong> : ${percentage}%<br>Population du quartier : ${population.toLocaleString()}`)

.style("left", (event.pageX + 10) + "px")

.style("top", (event.pageY - 28) + "px");

// Mettre en évidence le segment au survol

d3.select(this)

.attr("opacity", 0.8)

.attr("stroke", "#333")

.attr("stroke-width", 2);

})

.on("mousemove", function(event) {

// Déplacer l'infobulle avec la souris

tooltip

.style("left", (event.pageX + 10) + "px")

.style("top", (event.pageY - 28) + "px");

})

.on("mouseout", function() {

// Cacher l'infobulle quand la souris sort

tooltip.style("visibility", "hidden");

// Remettre le segment à son état normal

d3.select(this)

.attr("opacity", 1)

.attr("stroke", "none");

});

startAngle += angle;

});

// Ajouter le nom du quartier si disponible

if (feature.properties.name) {

pieGroup.append("text")

.attr("text-anchor", "middle")

.attr("dy", finalRadius + 15)

.attr("font-size", "10px")

.attr("fill", "#333")

.text(feature.properties.name);

}

});

// Mettre à jour l'image dans le conteneur d'image

imagesContainer.selectAll("img").remove();

imagesContainer.append("img")

.attr("src", images2014[variable])

.style("width", "100%")

.style("height", "auto")

.style("object-fit", "contain");

// Supprimer la légende précédente s'il y en a une

fixedLegendGroup.selectAll(".legend").remove();

// Créer la nouvelle légende avec une position fixe

const legendGroup = fixedLegendGroup.append("g")

.attr("class", "legend")

.attr("transform", "translate(20, 470)"); // Placer plus bas que les camemberts

let legendTitle;

if (variable === "B7") {

legendTitle = "Proportion d'individus répartis par classe d'âge (2018)";

} else if (variable === "B9") {

legendTitle = "Proportion d'individus répartis suivant leur durée de résidence (2018)";

} else if (variable === "B11") {

legendTitle = "Proportion d'individus, de plus de 3 ans, scolarisés ou non (2018)";

} else if (variable === "C2a") {

legendTitle = "Proportion de ménages ayant déjà vécu un aléa naturel (2018)";

}

// Espacement dynamique pour éviter le chevauchement

let legendYOffset = 0;

legendGroup.append("text")

.attr("x", 0)

.attr("y", legendYOffset)

.attr("font-size", "12px")

.attr("font-weight", "bold")

.text(legendTitle);

// Mettre à jour l'offset de la légende pour la suite

legendYOffset += 20; // Augmenter la valeur en fonction de la taille du titre

const classLabels = {

"B7_classe_0.2": "Moins de 3 ans",

"B7_classe_3.11": "3–11 ans",

"B7_classe_12.17": "12–17 ans",

"B7_classe_18.65": "18–65 ans",

"B7_classe_66.100": "Plus de 65 ans",

"B9_classe_0.1": "Moins de 2 ans",

"B9_classe_2.10": "2-10 ans",

"B9_classe_11.20": "11–20 ans",

"B9_classe_21.50": "21–50 ans",

"B9_classe_51.100": "Plus de 50 ans",

"B11_oui_3": "Oui",

"B11_non_3": "Non",

"B11_en_cours_3": "En cours",

"C2a_oui": "Oui (a vécu un aléa)",

"C2a_non": "Non (jamais vécu)"

};

const legendData = extractValues(geojsonData.features[0], variable);

legendData.forEach((d, i) => {

const g = legendGroup.append("g")

.attr("transform", `translate(0, ${legendYOffset})`); // Espacement dynamique

g.append("rect")

.attr("width", 14)

.attr("height", 14)

.attr("fill", colorSchemes[variable][i % colorSchemes[variable].length]);

g.append("text")

.attr("x", 20)

.attr("y", 12)

.style("font-size", "10px")

.text(classLabels[d.class] || d.class);

// Mettre à jour l'offset de la légende après chaque ajout

legendYOffset += 20; // Ajuster selon l'espacement souhaité

});

// Ajouter la légende de population

addPopulationLegend();

}

// Création du zoom avec d3.zoom amélioré

const zoom = d3.zoom()

.scaleExtent([1, 8]) // Plage de zoom

.on("zoom", (event) => {

// Appliquer le zoom au groupe de la carte (GeoJSON)

mapGroup.attr("transform", event.transform);

// Ajuster les camemberts pour qu'ils gardent la même taille visuelle pendant le zoom

mapGroup.selectAll(".pie-group").each(function() {

const pieGroup = d3.select(this);

const parentData = pieGroup.datum();

const originalRadius = parentData.originalRadius;

// Calculer le facteur d'échelle inverse pour maintenir la taille visuelle

const scaleFactor = 1 / event.transform.k;

// Mettre à jour tous les segments de camembert

pieGroup.selectAll("path.camembert").each(function() {

const pathElement = d3.select(this);

const startAngle = parseFloat(pathElement.attr("data-start-angle"));

const endAngle = parseFloat(pathElement.attr("data-end-angle"));

// Recréer l'arc avec le rayon ajusté selon le zoom

const arc = d3.arc()

.innerRadius(0)

.outerRadius(originalRadius * scaleFactor) // Ajuster le rayon

.startAngle(startAngle)

.endAngle(endAngle);

// Appliquer le nouveau chemin d'arc

pathElement.attr("d", arc());

});

// Ajuster la position du texte du nom du quartier

pieGroup.selectAll("text").each(function() {

const textElement = d3.select(this);

if (!textElement.attr("original-dy")) {

textElement.attr("original-dy", textElement.attr("dy"));

}

// Ajuster la position du texte proportionnellement au zoom

const originalDy = parseFloat(textElement.attr("original-dy"));

textElement.attr("dy", originalDy * scaleFactor);

// Ajuster la taille de la police pour maintenir la lisibilité

if (!textElement.attr("original-font-size")) {

textElement.attr("original-font-size", textElement.style("font-size"));

}

const originalSize = parseFloat(textElement.attr("original-font-size"));

textElement.style("font-size", `${originalSize * scaleFactor}px`);

});

});

// Cacher l'infobulle lors du zoom

tooltip.style("visibility", "hidden");

});

svg.call(zoom); // Appliquer le zoom à l'élément svg

update(variables[0].value);

svgContainer.append(() => svg.node());

return container.node();

};

//toujours échelle et sens début camembert

const width = 600, height = 600;

const svg = d3.create("svg")

.attr("width", width)

.attr("height", height);

const container = d3.create("div");

// Ajouter un titre général pour la visualisation

container.append("h2")

.style("text-align", "left")

.style("margin-bottom", "10px")

.text("Visualisation des données socio-économiques par quartier de Bukavu (RDCongo)");

// === Charger les URLs des images ===

const images2014 = await (async () => {

return {

B7: await FileAttachment("classe-age-2014.png").url(),

B9: await FileAttachment("duree-residence-2014.png").url(),

B11: await FileAttachment("scolarisation-2014.png").url(),

C2a: await FileAttachment("alea-naturel-2014.png").url()

};

})();

// === Définir les couleurs personnalisées ===

const colorSchemes = {

B7: ["#fdff00", "#ffb800", "#ff4e00", "#ff0000", "#ff00b8"],

B9: ["#ffec00", "#ffa500", "#ff5800", "#ff0000", "#ff00a8"],

B11: ["#5cc85a", "#d31c3a", "#008711"],

C2a: ["#51cf46", "#f3224f"]

};

// === Ajouter menu de sélection ===

// Ajouter un label pour l'indication à gauche du menu de sélection

container.append("label")

.attr("for", "variable-select") // Lier le label au select via l'ID

.text("Choisissez la donnée socio-économique :") // Le texte d'indication

.style("margin-right", "10px"); // Espacement entre le texte et le select

const select = container.append("select")

.attr("id", "variable-select") // Associer l'ID au select pour lier le label

.style("margin-bottom", "1px")

.on("change", function() {

update(this.value);

});

const variables = [

{ value: "B7", label: "Âge" },

{ value: "B9", label: "Durée de résidence" },

{ value: "B11", label: "Scolarisation" },

{ value: "C2a", label: "Expérience d'aléas naturels" }

];

select.selectAll("option")

.data(variables)

.enter()

.append("option")

.attr("value", d => d.value)

.text(d => d.label);

// === Créer un conteneur pour l'image et le SVG ===

const imageSvgContainer = container.append("div")

.style("display", "flex")

.style("align-items", "flex-start")

.style("justify-content", "space-between")

.style("width", "100%")

.style("max-width", "1200px")

.style("margin-top", "5px");

// === Créer un conteneur pour les images ===

const imagesContainer = imageSvgContainer.append("div")

.style("width", "40%");

const svgContainer = imageSvgContainer.append("div")

.style("width", "60%");

// === Créer une infobulle (tooltip) pour afficher les pourcentages au survol ===

const tooltip = d3.select("body").append("div")

.attr("class", "tooltip")

.style("position", "absolute")

.style("visibility", "hidden")

.style("background-color", "white")

.style("border", "1px solid #ddd")

.style("border-radius", "4px")

.style("padding", "5px")

.style("pointer-events", "none")

.style("font-size", "12px")

.style("z-index", "1000");

// === Configuration de la carte GeoJSON ===

const projection = d3.geoTransverseMercator()

.rotate([-27, 0])

.fitSize([width, height], geojsonData);

const path = d3.geoPath().projection(projection);

// Créer un groupe pour les éléments géographiques (GeoJSON et camemberts)

const mapGroup = svg.append("g").attr("class", "map-group");

// Créer un groupe fixe pour les légendes (non affecté par le zoom)

const fixedLegendGroup = svg.append("g").attr("class", "fixed-legends");

// Fonction pour extraire les valeurs des données associées à chaque entité

function extractValues(feature, variable) {

const data = feature.properties.data;

const values = [];

for (const key in data) {

const cleanedValue = parseFloat(data[key].replace(",", "."));

if (variable === "B11" && key.startsWith("B11_")) {

values.push({ class: key, value: cleanedValue });

} else if (variable === "C2a" && key.startsWith("C2a_")) {

values.push({ class: key, value: cleanedValue });

} else if (key.startsWith(variable + "_classe_")) {

values.push({ class: key, value: cleanedValue });

}

}

return values;

}

// Fonction améliorée pour récupérer la population d'une entité

function getPopulation(feature) {

// Parcourir toutes les propriétés pour trouver une valeur de population

if (feature.properties && feature.properties.data) {

const data = feature.properties.data;